vnms admin new modules added

package.json

@@ -54,6 +54,7 @@
     "core-js": "2.5.1",
     "echarts": "^4.9.0",
     "eva-icons": "^1.1.3",
+    "html2pdf.js": "^0.10.1",
     "intl": "1.2.5",
     "ionicons": "2.0.1",
     "leaflet": "1.2.0",
@@ -61,10 +62,13 @@
     "ng2-ckeditor": "~1.2.9",
     "ng2-completer": "^9.0.1",
     "ng2-smart-table": "^1.6.0",
+    "ngx-daterangepicker-material": "^5.0.1",
     "ngx-echarts": "^4.2.2",
     "node-sass": "^4.14.1",
     "normalize.css": "6.0.0",
+    "ornamentum": "^8.1.4",
     "pace-js": "1.0.2",
+    "pdfmake": "^0.2.7",
     "roboto-fontface": "0.8.0",
     "rxjs": "6.6.2",
     "rxjs-compat": "6.3.0",
@@ -98,7 +102,6 @@
     "codelyzer": "^6.0.2",
     "conventional-changelog-cli": "1.3.4",
     "eslint": "^8.23.0",
-    "husky": "0.13.3",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~6.3.19",

src/app/@theme/components/header/header.component.html

@@ -21,7 +21,7 @@
     <nb-action class="user-action" *nbIsGranted="['view', 'user']" >
       <nb-user [nbContextMenu]="userMenu"
                [onlyPicture]="userPictureOnly"
-               [name]="user?.name"
+               [name]="userName"
                [picture]="user?.picture">
       </nb-user>
     </nb-action>

src/app/@theme/components/header/header.component.ts

@@ -17,7 +17,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
   private destroy$: Subject<void> = new Subject<void>();
   userPictureOnly: boolean = false;
   user: any;
-
+  userName:any =[]
   themes = [
     {
       value: 'default',
@@ -50,6 +50,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
+    this.userName = localStorage.getItem('user_role')
     this.currentTheme = this.themeService.currentTheme;
     console.log(this.userService)
 

src/app/@theme/styles/styles.scss

@@ -2,7 +2,17 @@
 
 // themes - our custom or/and out of the box themes
 @import 'themes';
+:not(.dark-theme) {
+  @import "~ornamentum/themes/base.theme.scss";
+  @import "~ornamentum/themes/addon.base.theme.scss";
+  }
+  *{
  
+      -webkit-user-select: none; /* Safari */
+      -ms-user-select: none; /* IE 10 and IE 11 */
+      user-select: none; /* Standard syntax */
+    
+  }
 // framework component themes (styles tied to theme variables)
 @import '@nebular/theme/styles/globals';
 @import '@nebular/auth/styles/globals';

src/app/app-routing.module.ts

@@ -10,6 +10,8 @@ import {
 } from '@nebular/auth';
 import { LoginComponent } from '../app/pages/auth/login/login.component';
 import { AuthGuard } from './pages/_guard/auth.guard';
+import { ForgotPasswordComponent } from './pages/auth/forgot-password/forgot-password.component';
+import { ResetPasswordComponent } from './pages/auth/reset-password/reset-password.component';
 
 
 const token = localStorage.getItem('user_token'); 
@@ -54,11 +56,11 @@ export const routes: Routes = [
       },
       {
         path: 'request-password',
-        component: NbRequestPasswordComponent,
+        component: ForgotPasswordComponent,
       },
       {
-        path: 'reset-password',
+        path: 'reset-password/:email',
-        component: NbResetPasswordComponent,
+        component: ResetPasswordComponent,
       },
     ],
   },

src/app/pages/_guard/auth.guard.ts

@@ -1,10 +1,11 @@
 import { Injectable } from '@angular/core';
 import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateChild } from '@angular/router';
 import { Observable ,  of } from 'rxjs';
+ 
 // import { CognitoService } from '../AwsService/cognito.service';
 @Injectable()
 export class AuthGuard implements CanActivate, CanActivateChild {
-
+    token:any =[];
     constructor(private router: Router) { }
 
     canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
@@ -12,6 +13,7 @@ export class AuthGuard implements CanActivate, CanActivateChild {
         const token = localStorage.getItem('user_token'); 
        
         if(token != '' && token != undefined && token != null){
+           // this.checkToken();
             return true
         }else{
            // alert("else");
@@ -36,6 +38,7 @@ export class AuthGuard implements CanActivate, CanActivateChild {
         const token = localStorage.getItem('user_token'); 
         console.log(token)
         if(token != '' && token != undefined && token != null){
+           // this.checkToken();
             return true
         }else{
          //   setTimeout(() => {
@@ -68,4 +71,27 @@ export class AuthGuard implements CanActivate, CanActivateChild {
     //         this.router.navigate(['/login']);
     //     }
     // }
+
+    
+  checkToken() {
+    const storedToken = localStorage.getItem('token');
+    if (storedToken) {
+      try {
+      //  this.token = jwt.verify(storedToken, 'vnms2023feb');
+      //  this.isAuthenticated = true;
+      } catch (err) {
+        console.error('Invalid token:', err);
+       //this.isAuthenticated = false;
+        this.logout();
+      }
+    } else {
+     // this.isAuthenticated = false;
+    }
+  }
+
+  logout() {
+    localStorage.removeItem('token');
+    localStorage.clear();
+    this.router.navigate(['/auth/login']);
+  }
 }

src/app/pages/auth/auth.service.ts

@@ -18,4 +18,24 @@ export class AuthService {
     return this._http.post<any>(this.apiUrl + "login",{'email':params.email,'password':params.password})
    
   }
+
+  getForgotToken(params): Observable<any> {
+    console.log(params.email)
+    return this._http.post<any>(this.apiUrl + "forget-password",{'email':params.email,'password':params.password})
+   
+  }
+
+
+  verifyOtp(params): Observable<any> {
+    console.log(params.email)
+    return this._http.post<any>(this.apiUrl + "otp-verify",params)
+   
+  }
+  resetPasswordApi(params): Observable<any> {
+   // console.log(params.email)
+    return this._http.post<any>(this.apiUrl + "reset-password",params)
+   
+  }
+  
+  
 }

src/app/pages/auth/forgot-password/forgot-password.component.html

@@ -0,0 +1,57 @@
+<h1 id="title" class="title">Forgot Password</h1>
+<p class="sub-title" *ngIf="resetLink == 0">Enter your email address and we’ll send a link to reset your password</p>
+
+<!-- <nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger" role="alert">
+  <p class="alert-title"><b>Oh snap!</b></p>
+  <ul class="alert-message-list">
+    <li *ngFor="let error of errors" class="alert-message">{{ error }}</li>
+  </ul>
+</nb-alert>
+
+<nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success" role="alert">
+  <p class="alert-title"><b>Hooray!</b></p>
+  <ul class="alert-message-list">
+    <li *ngFor="let message of messages" class="alert-message">{{ message }}</li>
+  </ul>
+</nb-alert> -->
+<div *ngIf="resetLink == 0">
+  <form [formGroup]="form" (ngSubmit)="submit()" aria-labelledby="title">
+    <div class="form-control-group">
+      <label class="label" for="input-email">Enter your email address:</label>
+      <input nbInput formControlName="email"
+             placeholder="Email address"
+             autofocus
+             fullWidth
+             fieldSize="large"
+              [status]="form.get('email').dirty ? (form.get('email').invalid  ? 'danger' : 'success') : 'basic'"
+             [attr.aria-invalid]="form.get('email').invalid && form.get('email').touched ? true : null">
+      <ng-container *ngIf="form.get('email').invalid && form.get('email').touched">
+        <p class="caption status-danger" *ngIf="form.get('email').errors?.required">
+          Email is required!
+        </p>
+        <p class="caption status-danger" *ngIf="form.get('email').errors?.pattern">
+          Email should be the real one!
+        </p>
+      </ng-container>
+    </div>
+  
+    <button nbButton
+            fullWidth
+            status="primary"
+            size="large"
+            [disabled]="submitted || !form.get('email').valid"
+            [class.btn-pulse]="submitted" type="submit">
+      Request password
+    </button>
+  </form>
+</div>
+<div *ngIf="resetLink == 1">
+  <p class="sub-title">{{forgotTokenEmail.message}}</p>
+  <!-- <p>You can reset your password here.</p> -->
+</div>
+
+
+<section class="sign-in-or-up" aria-label="Sign in or sign up">
+  <p><a class="text-link" routerLink="../login">Back to Log In</a></p>
+  <!-- <p><a routerLink="../register" class="text-link">Register</a></p> -->
+</section>

src/app/pages/auth/forgot-password/forgot-password.component.scss

@@ -0,0 +1,12 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  nb-card {
+    transform: translate3d(0, 0, 0);
+  }
+}
+:host {
+    .form-group:last-of-type {
+      margin-bottom: 3rem;
+    }
+  }

src/app/pages/auth/forgot-password/forgot-password.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ForgotPasswordComponent } from './forgot-password.component';
+
+describe('ForgotPasswordComponent', () => {
+  let component: ForgotPasswordComponent;
+  let fixture: ComponentFixture<ForgotPasswordComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ForgotPasswordComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ForgotPasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/auth/forgot-password/forgot-password.component.ts

@@ -0,0 +1,105 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+ 
+import { Router } from '@angular/router';
+import { NbToastrService, NbWindowControlButtonsConfig, NbWindowRef, NbWindowService } from '@nebular/theme';
+import { environment } from '../../../../environments/environment';
+import { AuthService } from '../auth.service';
+import { OtpComponent } from '../otp/otp.component';
+
+@Component({
+  selector: 'ngx-forgot-password',
+  templateUrl: './forgot-password.component.html',
+  styleUrls: ['./forgot-password.component.scss']
+})
+export class ForgotPasswordComponent implements OnInit {
+  redirectDelay: number;
+  showMessages: any;
+  strategy: string;
+  submitted: boolean;
+  errors: string[];
+  messages: string[];
+  user: any;
+  forgotMailDara: any;
+  form: FormGroup;
+  email: string;
+  password: string; 
+  forgotTokenEmail: any; 
+  public mailUrl = environment.mailUrl;
+  resetLink: any = 0;
+  minimize = false;
+  maximize = false;
+  fullScreen = true;
+  close = true;
+  formData:any=[]
+  index = 1;
+  destroyByClick = true;
+  duration = 2000;
+  constructor(private router:Router,public _ser:AuthService,private toastrService: NbToastrService,private windowService: NbWindowService) { 
+  //   this._ser.forgotEmail_observable$.subscribe((res) => {
+  //     console.log('email', res); 
+  //    this.forgotMailDara = res
+  // })
+  }
+
+  ngOnInit() {
+    this.form = new FormGroup({    
+      email: new FormControl('',[Validators.required,Validators.email,Validators.pattern('[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$')]),
+    });
+    this.form.controls['email'].setValue(this.forgotMailDara)
+  }
+
+  submit(){
+    console.log(this.form.value)   
+    const mailid = this.form['value'].email.split(/\s/).join('');  
+    // this.router.navigate(['/reset-password'])  
+    let forgotMail = {'email':mailid}
+    // let forgotMail = {'email':mailid}
+    console.log(forgotMail)
+    this._ser.getForgotToken(forgotMail).subscribe(res => {
+      if(res.status == 200){
+        this.resetLink = 1
+        console.log(res)
+        this.forgotTokenEmail = res
+
+        const buttonsConfig: NbWindowControlButtonsConfig = {
+          minimize: this.minimize,
+          maximize: this.maximize,
+          fullScreen: this.fullScreen,
+          close: this.close,
+        };
+        const windowRef: NbWindowRef =  this.windowService.open(OtpComponent, { title: `Otp`, context: forgotMail
+        , buttons: buttonsConfig  });
+       
+    
+    
+          // Subscribe to the afterClosed event
+          windowRef.onClose.subscribe((data) => {
+            // Handle the window closure
+            console.log(data);
+            if(data == 1){
+             // this.showToast('success', 'Data Changed Successfully', 'Order Cancel Completed..!');
+          //   this.getorderlistApi();
+          this.router.navigate(['auth/reset-password/'+mailid])
+               console.log('Window closed 123');
+            }else if(data == 0){
+            //  this.showToast('warning', 'Somthing is Wrong...!', 'Order Cancel Failed..!');
+            }
+           
+          
+          });
+       // this.toastrService.success('Login',res.message)
+        // this._ser.getForgotDetails(this.forgotTokenEmail)
+        // this.notifierService.notify('success', res.message);
+        //this.router.navigate(['authentication/reset-password'])
+      } else{
+       // this.toastrService.warning('Login',res.message)
+      }
+    }, err => {
+     
+      //alert(err.message);
+    })
+    
+  }
+
+}

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

@@ -1,66 +1,45 @@
 <div class="row">
-    <div class="col-md-10">
+  <div class="col-md-12">
     <nb-card>
       <nb-card-header style="text-align: center;"><img src="assets/images/VN_Medical_Logo.png" alt="vnms" width="120" height="50" style="padding-right: 1rem;"> </nb-card-header>
       <nb-card-body>
-          <form class="form-horizontal" [formGroup]="loginForm" (ngSubmit)="onSubmit()" >
+        <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
-            <div class="form-group row">
+          <div class="form-group">
-              <label for="inputEmail3" class="label col-sm-3 form-control-label">Email</label>
+            <label for="exampleInputEmail1" class="label">Email address</label>
-              <div class="col-sm-9">
+            <input type="email" formControlName="email" nbInput fullWidth id="exampleInputEmail1" placeholder="Email"  [status]="loginForm.get('email').dirty ? (loginForm.get('email').invalid  ? 'danger' : 'success') : 'basic'"
-                <input type="email"  formControlName="email" nbInput fullWidth id="inputEmail3" placeholder="Email"   [status]="loginForm.get('email').invalid && loginForm.get('email').touched? 'danger' : 'basic'">
+            [attr.aria-invalid]="loginForm.get('email').invalid && loginForm.get('email').touched ? true : null">
-                <!-- <div *ngIf="loginForm.get('email').hasError('required') && loginForm.get('email').touched">
-                  This field is required.
-                </div> -->
-                
-
             <ng-container nbInputErrorMessage>
-                  <div style="color:#7c0e0e" *ngIf="loginForm.get('email').hasError('required') && loginForm.get('email').touched">Email is required.</div>
+              <div style="color:red" *ngIf="loginForm.get('email').hasError('required') && loginForm.get('email').touched">Email is required.</div>
             
-                  <div style="color:#7c0e0e" *ngIf="!loginForm.get('email')?.errors?.required && (loginForm.get('email')?.errors?.pattern)">
+              <div style="color:red" *ngIf="!loginForm.get('email')?.errors?.required && (loginForm.get('email')?.errors?.pattern)">
                 Please enter a valid email address
               </div>
             </ng-container>
-                
           </div>
-            </div>
+          <div class="form-group">
-            <div class="form-group row">
+            <nb-form-field>
-              <label for="inputPassword3" class="label col-sm-3 form-control-label">Password</label>
+              <label for="exampleInputEmail1"  class="label">Password</label>
-              <div class="col-sm-9">
+              <input [type]="getInputType()" nbInput formControlName="password" placeholder="Password">
-                <input type="password" formControlName="password"  nbInput fullWidth id="inputPassword3" placeholder="Password">
+              <nb-icon class="eyeIcon" (click)="toggleShowPassword()" style="margin-left: -2rem;" nbSuffix [icon]="showPassword ? 'eye-outline' : 'eye-off-2-outline'"
-              
+                       pack="eva"
+                       [attr.aria-label]="showPassword ? 'hide password' : 'show password'">
+              </nb-icon>
               <ng-container nbInputErrorMessage>
-                  <div style="color:#7c0e0e" *ngIf="loginForm.get('password').hasError('required') && loginForm.get('password').touched">Password is required.</div>
+                <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)">
-                  <!-- <div style="color:#7c0e0e" *ngIf="!loginForm.get('password')?.errors?.required">
+                  Password length must be greater than or equal to 8, and the password must contain one or more uppercase, lowercase, numeric, and special characters.
-                    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="loginForm.get('password')?.invalid && (loginForm.get('password')?.dirty || loginForm.get('password')?.touched) && loginForm.get('password')?.errors?.required">
-                    Password is required
                 </div>
-                
               </ng-container>
+            </nb-form-field>
           </div>
+          <div class="form-group">
+            <span class="label-with-link"> 
+              <a class="forgot-password caption-2" routerLink="../request-password"  (click)="openForgot()">Forgot Password?</a>
+            </span>
           </div>
-            <div class="form-group row">
+          <button type="submit" [disabled]="!loginForm.valid" nbButton fullWidth status="success" size="large">Sign in</button>
-              <div class="offset-sm-3 col-sm-9">
-                <div class="checkbox">
-                  <nb-checkbox>Remember me</nb-checkbox>
-                </div>
-              </div>
-            </div>
-            <div class="form-group row">
-              <div class="offset-sm-3 col-sm-9">
-                <button type="submit" [disabled]="!loginForm.valid"  nbButton status="warning">Sign in</button>
-              </div>
-            </div>
         </form>
       </nb-card-body>
     </nb-card>
   </div>
-  </div>
+</div>
-
-  
-
-
-  
-  

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

@@ -1,27 +1,50 @@
 nb-checkbox {
   margin-bottom: 1rem;
-  }
+}
 
-  .form-inline [fullWidth] {
+.form-inline [fullWidth] {
   flex: 1;
-  }
+}
 
-  .form-inline > * {
+.form-inline > * {
   margin: 0 1.5rem 1.5rem 0;
-  }
+}
 
-  nb-card.inline-form-card nb-card-body {
+
-    padding-bottom: 0;
+[nbInput].size-medium:not(.input-full-width){
-  }
+  max-width: 30rem !important;
-//   nb-card-header{
+}
-//   display: none;
+[nbInput].shape-rectangle {
+  max-width: 30rem !important;
+}
+.nb-form-field-limited-width.nb-form-field-size-medium{
+  max-width: 30rem !important;  
+}
+
+//   nb-card.inline-form-card nb-card-body {
+//     padding-bottom: 0;
 //   }
 
-// ::ng-deep .nb-theme-default nb-card-header {
+//  ::ng-deep nb-card-header{
 //     display: none !important;
 //   }
 
+// ::ng-deep .layout-container .content .columns nb-layout-column{
+//   background-image: url(../../../../assets/images/login.jpg) !important;
+//   background-repeat: no-repeat;
+//   background-attachment: fixed;
+//   background-size: cover;
+// }
+// .loginBg{
+//   background-repeat: no-repeat;
+//   background-attachment: fixed;
+//   background-size: cover;
+// }
+// .headLogin{
+//   display: block !important;
+// }
 
 
- 
+.eyeIcon{
- 
+margin-top: 22px;
+}

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

@@ -12,7 +12,7 @@ import { NbComponentStatus, NbGlobalPhysicalPosition, NbGlobalPosition, NbToastr
 })
 export class LoginComponent implements OnInit {
   loginForm: FormGroup | any;
-
+   disable:any =true;
  
   minimize = false;
   maximize = false;
@@ -27,6 +27,7 @@ export class LoginComponent implements OnInit {
   position: NbGlobalPosition = NbGlobalPhysicalPosition.TOP_RIGHT;
   preventDuplicates = false;
   status: NbComponentStatus = 'primary';
+  showPassword: boolean = false;
   constructor( private router:Router,public _ser:AuthService,private toastrService: NbToastrService) { }
 
   ngOnInit(): void {
@@ -35,14 +36,24 @@ export class LoginComponent implements OnInit {
       email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
         '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
       ),]),
-      password: new FormControl('', [ Validators.required])
+      // password: new FormControl('', [ Validators.required])
-      // password: new FormControl('', [Validators.required,Validators.pattern(
+      password: new FormControl('', [Validators.required,Validators.pattern(
-      //   '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,12}$'
+        '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,12}$'
-      // )])
+      )])
     });
   }
+  toggleShowPassword() {
+    this.showPassword = !this.showPassword;
+  }
 
+  getInputType() {
+    if (this.showPassword) {
+      return 'text';
+    }
+    return 'password';
+  }
   onSubmit(){
+    this.disable= false
     console.log("enter",  this.loginForm.value)
    let auth = { 'email': this.loginForm.value.email, 'password': this.loginForm.value.password};   
    
@@ -53,8 +64,9 @@ export class LoginComponent implements OnInit {
           localStorage.setItem('user_token',res.token);
           localStorage.setItem('user_role',res.role);
           localStorage.setItem('roleId',res.roleId);
-          localStorage.setItem('email',JSON.stringify(auth))
           
+          localStorage.setItem('email',JSON.stringify(auth))
+          this.disable= true
             this.showToast('success', 'Login Successfully', 'Welcome..!');
           setTimeout(() => {
             this.router.navigate(['/home']) 
@@ -88,4 +100,8 @@ export class LoginComponent implements OnInit {
       `${titleContent}`,
       config);
   }
+
+  openForgot(){
+
+  }
 }

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

@@ -0,0 +1,27 @@
+<form class="form" [formGroup]="otpform" (ngSubmit)="onSubmit()">
+ 
+    <label class="text-label" for="text">Enter Your Otp:</label>
+    <input nbInput formControlName="reason"  id="text"> 
+
+    <nb-card-footer>
+        <div class="row show-grid" >
+            <div class="col-6 col-md-4">
+              <div>  
+                <button type="button" class="cancel" nbButton status="danger" (click)="close()">Cancel</button>
+            </div> 
+            </div>
+            <div class="col-6 col-md-4">
+              <div>
+               
+             </div>
+            </div>
+            <div class="col-6 col-md-4">
+              <div> 
+                <button nbButton status="success"  [disabled]="!otpform.valid"  type="submit" >Verify</button>
+            </div>
+            </div>
+          </div>
+    
+   
+      </nb-card-footer>
+  </form>

src/app/pages/auth/otp/otp.component.scss

@@ -0,0 +1,10 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  ::ng-deep .form {
+    display: flex;
+    flex-direction: column;
+
+   
+  }
+}

src/app/pages/auth/otp/otp.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OtpComponent } from './otp.component';
+
+describe('OtpComponent', () => {
+  let component: OtpComponent;
+  let fixture: ComponentFixture<OtpComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ OtpComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(OtpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/auth/otp/otp.component.ts

@@ -0,0 +1,54 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { NB_WINDOW_CONTEXT, NbWindowRef, NbWindowService } from '@nebular/theme';
+import { AuthService } from '../auth.service';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'ngx-otp',
+  templateUrl: './otp.component.html',
+  styleUrls: ['./otp.component.scss']
+})
+export class OtpComponent   {
+
+  otpform:any;
+
+  constructor(@Inject(NB_WINDOW_CONTEXT) public data: any,public _api:AuthService,private windowService: NbWindowService, private windowRef: NbWindowRef) {
+
+    this.otpform = new FormGroup({
+      
+ 
+      reason: new FormControl('', [ Validators.required])
+    
+    });
+    console.log(this.data)
+  }
+
+  close() {
+    this.windowRef.close();
+  }
+  onSubmit(){
+    console.log( this.data , this.otpform.value)
+
+ 
+  //  let  param ={id:this.data.id, reason: this.otpform.value.reason, status:'Cancelled'}
+    
+     
+      
+   let  param ={email:this.data.email, otp: this.otpform.value.reason,  }
+    
+   
+       
+       this._api.verifyOtp (param).subscribe(res => {
+         if (res.status == 200) {
+   console.log(res)
+    this.windowRef.close(1);
+
+    
+         }else{
+           this.windowRef.close(0);
+         }
+       })
+
+  }
+
+}

src/app/pages/auth/reset-password/reset-password.component.html

@@ -0,0 +1,90 @@
+<h1 id="title" class="title">Change password</h1>
+<p class="sub-title">Please set a new password</p>
+
+<!-- <nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger" role="alert">
+  <p class="alert-title"><b>Oh snap!</b></p>
+  <ul class="alert-message-list">
+    <li *ngFor="let error of errors" class="alert-message">{{ error }}</li>
+  </ul>
+</nb-alert>
+
+<nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success" role="alert">
+  <p class="alert-title"><b>Hooray!</b></p>
+  <ul class="alert-message-list">
+    <li *ngFor="let message of messages" class="alert-message">{{ message }}</li>
+  </ul>
+</nb-alert> -->
+
+<form [formGroup]="form" (ngSubmit)="submit()" aria-labelledby="title">
+  <div class="form-group">
+    <nb-form-field>
+      <label class="label">Password</label>
+      <div class="input-with-icon">
+        <input [type]="getInputType(1)" nbInput formControlName="password" placeholder="Password">
+        <nb-icon class="eyeIcon" style="margin-left: -2rem;" [icon]="showPassword ? 'eye-outline' : 'eye-off-2-outline'"
+                 pack="eva"
+                 autofocus
+                fullWidth
+                fieldSize="large"
+                [status]="form.get('password').dirty ? (form.get('password').invalid  ? 'danger' : 'success') : 'basic'"
+                [attr.aria-invalid]="form.get('password').invalid && form.get('password').touched ? true : null"
+                 (click)="toggleShowPassword(1)">
+        </nb-icon>
+      </div>
+      <ng-container *ngIf="form.get('password').invalid && form.get('password').touched">       
+        <div class="caption status-danger" *ngIf="form.get('password')?.invalid && (form.get('password')?.dirty || form.get('password')?.touched) && form.get('password')?.errors?.required">
+            Password is required!
+        </div>
+        <div class="caption status-danger" *ngIf="!form.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>
+        </ng-container>
+    </nb-form-field>
+  </div>
+  
+  <div class="form-group">
+    <nb-form-field>
+      <label class="label">Password</label>
+      <div class="input-with-icon">
+        <input [type]="getInputType(2)" nbInput formControlName="confirm_password" placeholder="Password">
+        <nb-icon class="eyeIcon" style="margin-left: -2rem;" [icon]="showPassword2 ? 'eye-outline' : 'eye-off-2-outline'"
+                 pack="eva"
+                 fullWidth
+                 autofocus
+                 fieldSize="large"
+                 [status]="form.get('confirm_password').touched
+                     ? (form.get('confirm_password').invalid || form.get('confirm_password').value != form.get('confirm_password').value ? 'danger' : 'success')
+                     : 'basic'" 
+                 [attr.aria-invalid]="form.get('confirm_password').invalid && form.get('confirm_password').touched ? true : null"
+                 (click)="toggleShowPassword(2)">
+        </nb-icon>
+      </div>
+        <ng-container *ngIf="form.get('confirm_password').invalid && form.get('confirm_password').touched">       
+            <div class="caption status-danger" *ngIf="form.get('confirm_password')?.invalid && (form.get('confirm_password')?.dirty || form.get('confirm_password')?.touched) && form.get('confirm_password')?.errors?.required">
+                Password is required!
+            </div>
+            <div class="caption status-danger" *ngIf="!form.get('confirm_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 class="caption status-danger"  *ngIf="form.get('confirm_password').value != form.get('confirm_password').value">
+                Password does not match the confirm password.
+            </div>         
+        </ng-container>
+    </nb-form-field>
+  </div>
+   
+
+  <button nbButton
+          status="primary"
+          fullWidth
+          size="large"
+          [disabled]="submitted || !form.valid"
+          [class.btn-pulse]="submitted">
+    Change password
+  </button>
+</form>
+
+<section class="sign-in-or-up" aria-label="Sign in or sign up">
+  <p><a class="text-link" routerLink="../login">Back to Log In</a></p>
+  <!-- <p><a class="text-link" routerLink="../register">Register</a></p> -->
+</section>

src/app/pages/auth/reset-password/reset-password.component.scss

@@ -0,0 +1,31 @@
+:host {
+    .form-group:last-of-type {
+      margin-bottom: 3rem;
+    }
+  }
+
+  .form-inline [fullWidth] {
+    flex: 1;
+  }
+  
+  .form-inline > * {
+    margin: 0 1.5rem 1.5rem 0;
+  }
+
+
+  [nbInput].size-medium:not(.input-full-width){
+    max-width: 35rem !important;
+  }
+  .nb-form-field-limited-width.nb-form-field-size-medium{
+    max-width: 35rem !important;  
+  }
+
+.input-with-icon {
+  display: flex;
+  align-items: center;
+}
+
+.input-with-icon input {
+  flex: 1;
+  margin-right: 5px;
+}

src/app/pages/auth/reset-password/reset-password.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResetPasswordComponent } from './reset-password.component';
+
+describe('ResetPasswordComponent', () => {
+  let component: ResetPasswordComponent;
+  let fixture: ComponentFixture<ResetPasswordComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ResetPasswordComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ResetPasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/auth/reset-password/reset-password.component.ts

@@ -0,0 +1,92 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { NbToastrService } from '@nebular/theme';
+ 
+import { ActivatedRoute, Router } from '@angular/router';
+import { AuthService } from '../auth.service';
+
+@Component({
+  selector: 'ngx-reset-password',
+  templateUrl: './reset-password.component.html',
+  styleUrls: ['./reset-password.component.scss']
+})
+export class ResetPasswordComponent implements OnInit {
+  form: FormGroup;
+  forgotApiDetails: string;
+  email:any=[];
+  token:any = [];
+  hide: boolean;
+  hide2:boolean;
+  submitted: boolean;
+  showPassword = false;
+  showPassword2 = false;
+  constructor(private router:Router,public _ser:AuthService,private toastrService: NbToastrService,private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.hide = true;
+    this.hide2 =true
+    // this._ser.name.subscribe(data=>{
+    //   this.forgotApiDetails = data;
+    //   console.log(this.forgotApiDetails)
+    // });
+    this.email = this.route.snapshot.paramMap.get('email');
+   // this.token = this.route.snapshot.paramMap.get('token');
+console.log(this.email)
+    this.form = new FormGroup({     
+      password: new FormControl('', [Validators.required,Validators.pattern(
+        '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,16}$'
+      )]),
+      confirm_password: new FormControl('', [Validators.required,Validators.pattern(
+        '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,16}$'
+      )]),
+    });
+  }
+  //  public myError = (controlName: string, errorName: string) =>{
+  //     return this.form.controls[controlName].hasError(errorName);
+  //   }
+
+  submit(){
+    console.log(this.form.value)  
+    let param ={email :this.email,password:this.form.value.password,password2:this.form.value.confirm_password}
+    this._ser.resetPasswordApi(param).subscribe(res => {
+      console.log(res)
+      if(res.status == 200){
+        this.toastrService.success('Reset',res.message)
+        setTimeout(() => {
+              this.router.navigate(['auth/login']);
+              return false;
+              },1000); 
+      }
+     
+      // this.forgotTokenEmail = res     
+    }, err => {
+     
+      //alert(err.message);
+    })
+    
+  }
+
+  getInputType(event) {
+    if(event == 1){
+      if (this.showPassword) {
+        return 'text';
+      }
+      return 'password';
+    } else {
+      if (this.showPassword2) {
+        return 'text';
+      }
+      return 'password';
+    }
+   
+  }
+
+  toggleShowPassword(event) {
+    if(event == 1){
+      this.showPassword = !this.showPassword;
+    } else {
+      this.showPassword2 = !this.showPassword2;
+    }
+  }
+
+}

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

@@ -1,43 +1,33 @@
-<div class="custom-window">
+<nb-card>
-    
+  <nb-card-header>{{heading}}</nb-card-header>
-     
+  <nb-card-body>
-   
+    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
- 
+    <div class="row show-grid">
-
+    <div class="col-md-4 col-sm-12">
-
+        <nb-form-field>
-
-
-<form class="form" [formGroup]="userForm" (ngSubmit)="onSubmit()">
-
-<div class="row show-grid">
-  <div class="col-md-4">
-    <div>   
         <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>
+    <div class="col-md-4 col-sm-12">
-  <div class="col-md-4">
+      <nb-form-field>
-    <div>   
           <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'" ></div>
+          <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" *ngIf="!data.hasOwnProperty('id')">
+    <div class="col-md-4 col-sm-12">
-    <div> 
+        <nb-form-field *ngIf="heading != 'Edit Customer'">
         <label for="subject">Password:</label>
-      <input  formControlName="password" nbInput id="password" type="text" [status]="userForm.get('password').invalid && userForm.get('password').touched? 'danger' : 'basic'"></div>
+        <input  formControlName="password" nbInput id="password" type="text" [status]="userForm.get('password').invalid && userForm.get('password').touched? 'danger' : 'basic'">
 
         <ng-container nbInputErrorMessage>
 
@@ -49,56 +39,65 @@
         Password is required
         </div>
         </ng-container>  
-     </div>
-</div>
 
-<div class="row show-grid mt-3">
+        </nb-form-field> 
-  <div class="col-md-4">
+    </div>
-    <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'"></div>
+            <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">
+        <div class="col-md-4 col-sm-12">
-    <div> 
+            <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'"></div>
+            <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">
+        <div class="col-md-4 col-sm-12"> 
-    <div> 
+        <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'"></div>
+        <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>
 
-<div class="row show-grid mt-3">
+    <div class="row show-grid"  >
-  <div class="col-md-4">
+      <div class="col-md-4 col-sm-12">
-    <div> 
+          <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'"></div>
+          <input  formControlName="city" nbInput id="city" type="text"  [status]="userForm.get('city').invalid && userForm.get('city').touched? 'danger' : 'basic'">
           <ng-container nbInputErrorMessage>
           <div style="color:#7c0e0e" *ngIf="userForm.get('city').hasError('required') && userForm.get('city').touched">City is required.</div>
-      
-      
           </ng-container>
+          </nb-form-field> 
       </div>
-  <div class="col-md-4">
+          <div class="col-md-4 col-sm-12">
-    <div>  
+            <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>
+              </ng-container>
+              </nb-form-field> 
+          </div> 
+    <div class="col-md-4 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>
@@ -109,18 +108,17 @@
 
 
         </ng-container>
-  </div>
+        </nb-form-field> 
-  </div>
+    <!-- <nb-form-field>
-  <div class="col-md-4">
+
-        <!-- <input  formControlName="role" nbInput id="role" type="text" value="CUSTOMER" hidden> -->
+    </nb-form-field>   -->
-    <!-- <div>.col-md-4</div> -->
     </div>                
 </div>
-
-   
 <nb-card-footer>
-  <button type="button" class="cancel" nbButton status="danger" (click)="cancel()">Cancel</button>
+  <button class="cancel" nbButton status="danger" type="button" (click)="cancel()">Cancel</button>
-  <button nbButton status="success"  [disabled]="!userForm.valid" type="submit" >Submit</button>
+  <button nbButton status="success" type="submit">Submit</button>
-</nb-card-footer>
+  </nb-card-footer>
-</form>
+    </form>
-</div>
+  </nb-card-body>
+
+</nb-card>

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

@@ -1,23 +1,19 @@
 @import '../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  ::ng-deep .form {
+  input {
-    display: flex;
+    width: 100%;
-    flex-direction: column;
-
-    .text-label {
-      margin-top: 1.5rem;
   }
+
   .cancel {
     margin-right: 1rem;
   }
-    
-  }
-  .custom-window{
-   zoom:96%;
-  }
 }
-// ::ng-deep nb-window {
+.custom-dialog-class {
-//   flex: 1 0 auto;
+    width: 50%; /* Set the desired width here */
-//   min-width: 50rem !important;
+    height: 300px; /* Set the desired height here */
-// }
+  }
+  .show-grid{
+    margin-bottom: 2rem;
+  }
+ 

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

@@ -1,7 +1,7 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { PageapiService } from '../../pageapi.service';
-import { NbWindowService ,NbWindowRef, NB_WINDOW_CONTEXT } from '@nebular/theme';
+import { NbWindowService ,NbWindowRef, NB_WINDOW_CONTEXT, NbDialogRef, NbDialogService } from '@nebular/theme';
 
 @Component({
   selector: 'ngx-customer-form',
@@ -9,15 +9,21 @@ import { NbWindowService ,NbWindowRef, NB_WINDOW_CONTEXT } from '@nebular/theme'
   styleUrls: ['./customer-form.component.scss']
 })
 export class CustomerFormComponent implements OnInit {
-
+  data:any =[];
   userForm: FormGroup | any;  formData:any =[]
-  constructor(@Inject(NB_WINDOW_CONTEXT) public data: any,public _api:PageapiService,private windowService: NbWindowService, private windowRef: NbWindowRef) {
+  heading:any =[];
+  constructor(private dialogRef: NbDialogRef<CustomerFormComponent> ,public _api:PageapiService,private dialogService: NbDialogService) {
+
   
-    console.log(this.data)
    }
 
-  ngOnInit(): void {
+  ngOnInit() {
+    console.log('dialogRef', this.dialogRef.componentRef.instance);
+    let details:any = this.dialogRef.componentRef.instance
             
+   this.heading =  details.title
+
+   this.data =  details.details
     this.userForm = new FormGroup({
 
      
@@ -39,12 +45,14 @@ export class CustomerFormComponent implements OnInit {
         address_1:  new FormControl('', [Validators.required,Validators.maxLength(100)]),
         state:  new FormControl('', [Validators.required]),
         city:  new FormControl('', [Validators.required]),
+        pincode: new FormControl('', [Validators.required]),
         cusType:  new FormControl('', [Validators.required]),
       
     });
     this.data.address_1 = this.data['CusDetails.address_1']
     this.data.state = this.data['CusDetails.state']
     this.data.city = this.data['CusDetails.city']
+    this.data.pincode = this.data['CusDetails.pincode']
     this.data.cusType = this.data['CusDetails.cusType']
     if(this.data.hasOwnProperty('id')){
     this.userForm.controls['password'].clearValidators();
@@ -54,9 +62,9 @@ export class CustomerFormComponent implements OnInit {
   }
 
   cancel(){
-    this.windowService
+  //  this.windowService
-    console.log( this.windowService)
+   // console.log( this.windowService)
-    this.windowRef.close();
+  this.dialogRef.close();
   }
   onSubmit(){
 
@@ -69,19 +77,23 @@ export class CustomerFormComponent implements OnInit {
      
     }  
 
-  let cus = {  cusName : tmp.userName,
+  let cus:any = {  cusName : tmp.userName,
     email  : tmp.email,
     phoneNo  : tmp.mobileNo,
     address_1 : tmp.address_1,
     state  : tmp.state,
     city  : tmp.city,
+    pincode:tmp.pincode,
     cusType:tmp.cusType,
 
     
-   
-    
   }
 
+   if(this.data.hasOwnProperty('customerId')){
+     cus.id = this.data.customerId
+  }
+  console.log(cus)
+
     this._api.CreateCustomersDetails (cus).subscribe(res => {
       if (res.status == 200) {
         console.log(res)
@@ -91,13 +103,22 @@ export class CustomerFormComponent implements OnInit {
         this.formData.append('password', tmp.password);
         this.formData.append('role', 'CUSTOMER');
         this.formData.append('mobileNo', tmp.mobileNo);  
+
+        if(this.data.hasOwnProperty('customerId')){
+          //cus.id = this.data.customerId
+          this.formData.append('customerId',this.data.customerId);
+       }else{
         this.formData.append('customerId', res.data.id);
+       }
+
     this._api.addUserFormDetails (this.formData).subscribe(res => {
       if (res.status == 200) {
 console.log(res)
-this.windowRef.close(1);
+this.dialogRef.close(1)
+//this.windowRef.close(1);
       }else{
-        this.windowRef.close(0);
+        this.dialogRef.close(0)
+      //  this.windowRef.close(0);
       }
     })
   }

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

@@ -1,12 +1,151 @@
 <nb-card>
     <nb-card-header>
-      <nb-icon icon="people-outline"></nb-icon> Customer Management
+   
+
+      <div class="row show-grid">
+        <div class="col-md-6">
+          <div>     <nb-icon icon="people-outline"></nb-icon> Customer Management</div>
+        </div>
+        <div class="col-md-4">
+          <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-2">
+          <div style="    text-align: end;"> 
+                <!-- <button  (click)="Assign()" nbButton status="primary" hero>
+                  Assign Driver
+                  </button> -->
+            <button  (click)="onCreateConfirm()" nbButton status="primary" hero>
+           Add Customer
+          </button>
+        </div>
+        </div>
+      </div>
     </nb-card-header>
   
     <nb-card-body>
-      <ng2-smart-table [settings]="settings" [source]="source" (edit)="onSaveConfirm($event)"
+      <!-- <ng2-smart-table [settings]="settings" [source]="source" (edit)="onSaveConfirm($event)"
       (create)="onCreateConfirm($event)" (delete)="onDeleteConfirm($event)">
-      </ng2-smart-table>
+      </ng2-smart-table> -->
+
+      
+      <ng-data-table  
+      [id]="'i'" 
+      [items]=customer
+      [minContentWidth]="500"
+      [pageable]="true"  
+      [showColumnSelector]="false" 
+      [showHeader]="false"
+      [selectMode]="'multi'" 
+      [minContentHeight]="350" 
+      >  
+    
+      <ng-data-table-column 
+      [field]="'index'"
+      [sortable]="false"
+      [title]="'ID'"
+      [filterable]="false"
+      [width]="2"> 
+
+      </ng-data-table-column> 
+
+      <ng-data-table-column 
+      [field]="'userName'"
+      [sortable]="false"
+      [title]="'Name'"
+      [filterable]="false"
+      [width]="4"> 
+
+      </ng-data-table-column> 
+      <ng-data-table-column 
+      [field]="'email'"
+      [sortable]="false"
+      [title]="'E-mail'"
+      [filterable]="false"
+      [width]="6"> 
+
+      </ng-data-table-column> 
+      <ng-data-table-column 
+      [field]="'mobileNo'"
+      [sortable]="false"
+      [title]="'Mobile No'"
+      [filterable]="false"
+      [width]="4"> 
+
+      </ng-data-table-column> 
+      <ng-data-table-column 
+      [field]="'type'"
+      [sortable]="false"
+      [title]="'Type'"
+      [filterable]="false"
+      [width]="4"> 
+
+      </ng-data-table-column> 
+      <ng-data-table-column 
+      [field]="'isActive'"
+      [sortable]="false"
+      [title]="'Status'"
+      [filterable]="false"
+      [width]="4"> 
+      <ng-template #ngDataTableCell  let-row="row">
+        <td  >
+          <div   style="display: flex; align-items: center;">
+          
+            
+            <nb-toggle [(ngModel)]="row.item.isActive" (change)="onDeleteConfirm(row.item)">
+
+              <span *ngIf="row.item.isActive == 1"  style="color: green;">
+                Active
+                 </span>
+                 <span  *ngIf="row.item.isActive == 0" style="color: red;" >
+                  Inactive
+                    </span>
+            </nb-toggle>
+               
+          
+             
+          </div>
+        
+        </td> 
+        </ng-template>
+      </ng-data-table-column> 
+      <ng-data-table-column 
+      [field]="'role'"
+      [sortable]="false"
+      [title]="'Action'"
+      [filterable]="false"
+      [width]="3"> 
+
+   
+
+
+
+
+
+
+   
+      <ng-template #ngDataTableCell  let-row="row">
+      <td  >
+        <div class="align-center" style="display: flex; align-items: center;">
+          <!-- <span   class="check"   (click)="onSaveConfirm(row.item)">
+            <i class="nb-edit"  ></i>
+          </span>
+          <span  class="check" (click)="onDeleteConfirm(row.item)">
+            <i class="nb-trash" ></i>
+          </span> -->
+          <nb-icon icon="edit-outline"   title="Edit"  style="margin-left: 1rem;" (click)="onSaveConfirm(row.item)"></nb-icon> 
+          <nb-icon icon="refresh-outline"   title="Reset Password"  style="margin-left: 1rem;" (click)="resetPassword(row.item)"></nb-icon>   
+        </div>
+      
+      </td> 
+      </ng-template>
+    </ng-data-table-column> 
+      </ng-data-table>
     </nb-card-body>
   </nb-card>
   

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

@@ -9,3 +9,120 @@
 //   flex: 1 0 auto;
 //   min-width: 50rem !important;
 // }
+
+
+.align-left{
+  text-align: left !important;
+}
+.align-center{
+  text-align: center !important;
+}
+.align-right{
+ text-align: right !important;
+}
+::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-even td {
+  background: white;
+  font-family: var(--smart-table-font-family);
+font-size: var(--smart-table-font-size);
+font-weight: var(--smart-table-font-weight);
+line-height: var(--smart-table-line-height);
+color: var(--smart-table-fg);
+}
+::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table thead > tr .ng-data-table-column-header .ng-data-table-column-header-label:first-child {
+ font-size: 18px;    padding: 10px; color: #1e6bb8;
+ text-decoration: none;
+ font-family: var(--smart-table-header-font-family);
+ font-size: var(--smart-table-header-font-size);
+ font-weight: var(--smart-table-header-font-weight);
+ line-height: var(--smart-table-header-line-height);
+}
+::ng-deep  :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-odd td {
+ 
+font-family: var(--smart-table-font-family);
+font-size: var(--smart-table-font-size);
+font-weight: var(--smart-table-font-weight);
+line-height: var(--smart-table-line-height);
+color: var(--smart-table-fg);
+}
+::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table-content-container .ng-data-table-content {
+ min-height: 100px !important;
+ font-size: 18px; 
+}
+::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table thead > tr:last-child th {
+
+ background-color:#fff;    font-family: var(--smart-table-font-family);
+ font-size: var(--smart-table-font-size);
+ font-weight: var(--smart-table-font-weight);
+ line-height: var(--smart-table-line-height);
+ color: var(--smart-table-fg);
+
+}
+tr{
+  color: white;
+  background-color:#fff;
+}
+th{
+ color: white;
+ background-color:#fff;
+}
+
+ * {
+    box-sizing: border-box;
+  }
+  .row {
+    display: flex;
+    background-color:#fff;
+  }
+  
+  /* Create two equal columns that sits next to each other */
+  .column {
+    flex: 50%;
+    //  
+    // height: 300px; /* Should be removed. Only for demonstration */
+  }
+  ::ng-deep .mat-select-value{    
+    color: white!important;  }
+  .column1 {
+     width: 210px;
+    text-align: center;
+    text-overflow: ellipsis;
+    padding: 30px;
+    //height: 300px; /* Should be removed. Only for demonstration */
+  }
+
+ 
+  .add {
+     display: flex;
+     align-items: center;
+     justify-content: center;
+     font-size: 1.75rem !important;
+     padding: var(--smart-table-filter-padding);
+     border-color: var(--smart-table-add-button-border-color);
+     background-color: var(--smart-table-add-button-background-color);
+     color: var(--smart-table-add-button-text-color);
+     border-radius: 0.375rem;
+
+     font-family: var(--smart-table-header-font-family);
+     font-size: var(--smart-table-header-font-size);
+     font-weight: var(--smart-table-header-font-weight);
+     line-height: var(--smart-table-header-line-height);
+ }
+ span{
+
+   color: #000;
+ }
+
+span:hover{
+
+   color: #1e6bb8;
+ }
+ a[disabled="disabled"] {
+   pointer-events: none;
+}
+ .check{
+   display: flex; align-items: center;     text-decoration: none;
+           height: 100%; width: 100%; font-size: 2rem!important; 
+ }
+
+
+  

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

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 import { LocalDataSource } from 'ng2-smart-table';
 import { SmartTableData } from '../../@core/data/smart-table';
 import { PageapiService } from '../pageapi.service';
-import { NbToastrService, NbWindowControlButtonsConfig, NbWindowRef, NbWindowService } from '@nebular/theme';
+import { NbDialogService, NbToastrService, NbWindowControlButtonsConfig, NbWindowRef, NbWindowService } from '@nebular/theme';
  
 
 
@@ -23,7 +23,7 @@ import { CustomerFormComponent } from './customer-form/customer-form.component';
   styleUrls: ['./customer.component.scss']
 })
 export class CustomerComponent  {
-
+  customer:any =[];
   settings = {
     actions: {
       
@@ -83,7 +83,7 @@ export class CustomerComponent  {
      
     },
   };
-
+  searchTerm:any=[];filteredItems:any=[];
   source: LocalDataSource = new LocalDataSource();
   minimize = false;
   maximize = false;
@@ -97,113 +97,168 @@ export class CustomerComponent  {
   position: NbGlobalPosition = NbGlobalPhysicalPosition.TOP_RIGHT;
   preventDuplicates = false;
   status: NbComponentStatus = 'primary';
-  constructor(private toastrService: NbToastrService,private service: SmartTableData,public _api:PageapiService,private windowService: NbWindowService) {
+  constructor(private dialogService: NbDialogService,private toastrService: NbToastrService,private service: SmartTableData,public _api:PageapiService,private windowService: NbWindowService) {
     const data = this.service.getData();
   
     this.getuserlistApi()
 
    
     
+  }
+
+  onCreateConfirm() {   
+    let data:any = {details:'',action:'Add',title:'Add Customer'}
+    const dialogRef = this.dialogService.open(CustomerFormComponent, {
+      hasBackdrop: true,
+      dialogClass: 'custom-dialog-class', // Add your custom CSS class here
+      context: data
+    });
+
+    dialogRef.onClose.subscribe((result) => {
+     // Execute custom logic when the dialog is closed
+     console.log(result);       
+     if(result == 1){
+      // this.getEntityDetails()
+      this.getuserlistApi();
+      this.showToast('success', 'Data Saved Successfully', 'Add Customer Data Completed..!');
+     //  this.toastrService.success('Entity Added Successfully','Entity');
+        console.log('Window closed 123');
+     }else if(result == 0){
+
+      this.showToast('warning', 'Somthing is Wrong...!', 'Add Customer Data Failed..!');
+      // this.toastrService.success('Somthing is Wrong...!', 'Add Entity Failed..!');
+     }
+    });
+     
   }
 
   onDeleteConfirm(event): void {
     console.log(event)
-    let passData = event.data
+    let passData = event
-    if (window.confirm('Are you sure you want to delete?')) {
+   // if (window.confirm('Are you sure you want to delete?')) {
       //event.confirm.resolve();
 
    
 
-      let deletedata  = {'isActive':0,'id':passData.id}
+      let deletedata  = {'isActive':event.isActive,'id':passData.id}
   
       this._api.addUserFormDetails (deletedata).subscribe(res => {
         if (res.status == 200) {
   console.log(res)
   this.getuserlistApi();
-  this.showToast('success', 'Data Removed Successfully', 'Removed User Data Completed..!');
+  if(event.isActive == 1){
+    this.showToast('success', 'Data Removed Successfully', 'Active Customer Data Completed..!');
+  }else{
+    this.showToast('success', 'Data Removed Successfully', 'Inactive Customer Data Completed..!');
+  }
+
+  //this.showToast('success', 'Data Removed Successfully', 'Removed User Data Completed..!');
         }else{
           this.showToast('warning', 'Somthing is Wrong...!', 'Edit User Data Failed..!');
         }
       })
 
-    } else {
+    // } else {
-      event.confirm.reject();
+    //   event.confirm.reject();
+    // }
   }
-  }
+  // onCreateConfirm() {
-  onCreateConfirm(event) {
+  //   console.log("Create Event In Console")
-    console.log("Create Event In Console")
+  //  // console.log(event);
-    console.log(event);
+  //   const buttonsConfig: NbWindowControlButtonsConfig = {
-    const buttonsConfig: NbWindowControlButtonsConfig = {
+  //     minimize: this.minimize,
-      minimize: this.minimize,
+  //     maximize: this.maximize,
-      maximize: this.maximize,
+  //     fullScreen: this.fullScreen,
-      fullScreen: this.fullScreen,
+  //     close: this.close,
-      close: this.close,
+  //   };
-    };
 
-    const windowOptions = {
+  //   const windowOptions = {
-      title: 'New Customer',
+  //     title: 'New Customer',
-      hasBackdrop: true,
+  //     hasBackdrop: true,
-      minimize: this.minimize,
+  //     minimize: this.minimize,
-      maximize: this.maximize,
+  //     maximize: this.maximize,
-      fullScreen: this.fullScreen,
+  //     fullScreen: this.fullScreen,
-      close: this.close,
+  //     close: this.close,
-      closeOnBackdropClick: false,
+  //     closeOnBackdropClick: false,
-      closeOnEsc: false,
+  //     closeOnEsc: false,
-      buttonsConfig:buttonsConfig,
+  //     buttonsConfig:buttonsConfig,
-      dimensions: {
+  //     dimensions: {
-        width: '2500px',
+  //       width: '2500px',
-        height: '300px',
+  //       height: '300px',
-      },
+  //     },
-      /* other window options */
+  //     /* other window options */
-    };
+  //   };
 
-    const windowRef: NbWindowRef =  this.windowService.open(CustomerFormComponent, { title: `Add Customer`,  
+  //   const windowRef: NbWindowRef =  this.windowService.open(CustomerFormComponent, { title: `Add Customer`,  
-     buttons: buttonsConfig  },);
+  //    buttons: buttonsConfig  },);
    
 
 
-      // Subscribe to the afterClosed event
+  //     // Subscribe to the afterClosed event
-      windowRef.onClose.subscribe((data) => {
+  //     windowRef.onClose.subscribe((data) => {
-        // Handle the window closure
+  //       // Handle the window closure
-        console.log(data);
+  //       console.log(data);
-        if(data == 1){
+  //       if(data == 1){
-          this.showToast('success', 'Data Saved Successfully', 'Add Customer Data Completed..!');
+  //         this.showToast('success', 'Data Saved Successfully', 'Add Customer Data Completed..!');
-          this.getuserlistApi();
+  //         this.getuserlistApi();
-           console.log('Window closed 123');
+  //          console.log('Window closed 123');
-        }else if(data == 0){
+  //       }else if(data == 0){
-          this.showToast('warning', 'Somthing is Wrong...!', 'Add Customer Data Failed..!');
+  //         this.showToast('warning', 'Somthing is Wrong...!', 'Add Customer Data Failed..!');
-        }
+  //       }
-      });
+  //     });
-  }
+  // }
 
   onSaveConfirm(event) {
-    console.log("Edit Event In Console")
+    // console.log("Edit Event In Console")
-    console.log(event);
+    // console.log(event);
 
-    const buttonsConfig: NbWindowControlButtonsConfig = {
+    // const buttonsConfig: NbWindowControlButtonsConfig = {
-      minimize: this.minimize,
+    //   minimize: this.minimize,
-      maximize: this.maximize,
+    //   maximize: this.maximize,
-      fullScreen: this.fullScreen,
+    //   fullScreen: this.fullScreen,
-      close: this.close,
+    //   close: this.close,
-    };
+    // };
-    const windowRef: NbWindowRef =  this.windowService.open(CustomerFormComponent, { title: `Edit Customer`, context: event.data
+    // const windowRef: NbWindowRef =  this.windowService.open(CustomerFormComponent, { title: `Edit Customer`, context: event
-    , buttons: buttonsConfig  });
+    // , buttons: buttonsConfig  });
    
 
 
-      // Subscribe to the afterClosed event
+    //   // Subscribe to the afterClosed event
-      windowRef.onClose.subscribe((data) => {
+    //   windowRef.onClose.subscribe((data) => {
-        // Handle the window closure
+    //     // Handle the window closure
-        console.log(data);
+    //     console.log(data);
-        if(data == 1){
+    //     if(data == 1){
-          this.showToast('success', 'Data Changed Successfully', 'Edit Customer Data Completed..!');
+    //       this.showToast('success', 'Data Changed Successfully', 'Edit Customer Data Completed..!');
+    //       this.getuserlistApi();
+    //        console.log('Window closed 123');
+    //     }else if(data == 0){
+    //       this.showToast('warning', 'Somthing is Wrong...!', 'Edit Customer Data Failed..!');
+    //     }
+       
+      
+    //   });
+
+    let data:any = {details:event,action:'Edit',title:'Edit Customer'}
+    const dialogRef = this.dialogService.open(CustomerFormComponent, {
+      hasBackdrop: true,
+      dialogClass: 'custom-dialog-class', // Add your custom CSS class here
+      context: data
+    });
+
+    dialogRef.onClose.subscribe((result) => {
+     // Execute custom logic when the dialog is closed
+     console.log(result);       
+     if(result == 1){
+      // this.getEntityDetails()  
       this.getuserlistApi();
+      this.showToast('success', 'Data Changed Successfully', 'Edit Customer Data Completed..!');
+     //  this.toastrService.success('Entity Added Successfully','Entity');
         console.log('Window closed 123');
-        }else if(data == 0){
+     }else if(result == 0){
+
       this.showToast('warning', 'Somthing is Wrong...!', 'Edit Customer Data Failed..!');
+      // this.toastrService.success('Somthing is Wrong...!', 'Add Entity Failed..!');
      }
-       
-      
     });
   }
 
@@ -219,10 +274,12 @@ export class CustomerComponent  {
        let customer = passData.filter(arr=>{return arr.role == 'CUSTOMER'}) 
        customer.forEach((element:any, index) => {
         element.index = index     +1    
+        element.type =element['CusDetails.cusType']
 
       });
+      this.customer = customer
       //  console.log(data)
-        this.source.load(customer);
+        //this.source.load(customer);
       }
     })
   }
@@ -246,4 +303,54 @@ export class CustomerComponent  {
       config);
   }
 
+  
+filterItems() {
+ console.log(  this.searchTerm)
+
+  if(  this.searchTerm !=''){
+
+
+  this.filteredItems = this.customer.filter(item =>
+    Object.values(item).some(value => {
+      if (typeof value === 'string') {
+        return value.toLowerCase().includes(this.searchTerm.toLowerCase());
+      }
+      return false;
+    })
+  );
+  this.customer = this.filteredItems
+}else{
+  console.log( 'fhjsgsajdhgasksjgfcckjsdfgckjsdhfk')  
+
+  this.getuserlistApi()
+}
+
+
+
+console.log( this.filteredItems)
+}
+
+resetPassword(data){
+  console.log(data)
+
+  this.formData= new FormData();
+  if(data.hasOwnProperty('id')){
+    this.formData.append('id', data.id);
+   
+  }  
+ 
+  this.formData.append('password', 'Test@123');
+
+
+  this._api.addUserFormDetails (this.formData).subscribe(res => {
+    if (res.status == 200) {
+console.log(res)
+this.showToast('success', 'Password Changed Successfully', '');
+
+    }else{
+      this.showToast('warning', 'Password Changed Failed', '');
+    }
+  })
+
+ }
 }

src/app/pages/dashboard/dashboard.component.html

@@ -1,5 +1,73 @@
 <div class="row">
+  <div class="col-md-12 col-sm-2"> 
+    
       <nb-card>
-    <nb-card-body>Hello from VNMS Order Management System</nb-card-body>
+            <nb-card-header>
+   
+        <div class="row show-grid">
+          <div class="col-md-6">
+            <div>        <nb-icon icon="pie-chart-outline"></nb-icon> Dashboard</div>
+          </div>
+
+       
+        
+        </div>
+    </nb-card-header>
+        <nb-card-body>
+          <div class="row">
+            <div class="col-md-4 col-sm-12">  
+              <nb-card>
+                <nb-card-header style="    background-color: #0fb90482;">
+                  <nb-icon icon="done-all-outline"></nb-icon>   Orders
+                </nb-card-header>
+                <nb-card-body>
+                  <div class="row">
+                    <div class="col-md-4 col-sm-4">
+                      
+                    </div> 
+                    <div class="col-md-8 col-sm-8">
+                       <h1>{{orders.length}}</h1>
+                  </div>
+                 </div>
+                </nb-card-body>
               </nb-card>
+            </div>
+            <div class="col-md-4 col-sm-12">  
+              <nb-card>
+                <nb-card-header  style="    background-color: #b99a0487;">
+                 <nb-icon icon="pantone-outline"></nb-icon>      In progress
+                </nb-card-header>
+                <nb-card-body>
+                  <div class="row">
+                    <div class="col-md-4 col-sm-4">
+                      
+                    </div> 
+                    <div class="col-md-8 col-sm-8">
+                       <h1>{{inprogress.length}}</h1>
+                  </div>
+                 </div>
+                </nb-card-body>
+              </nb-card>
+            </div>
+            <div class="col-md-4 col-sm-12">  
+              <nb-card>
+                <nb-card-header  style="    background-color: #39958487;">
+                  <nb-icon icon="cube-outline"></nb-icon>       Delivered
+                </nb-card-header>
+                <nb-card-body>
+                  <div class="row">
+                    <div class="col-md-4 col-sm-4">
+                      
+                    </div> 
+                    <div class="col-md-8 col-sm-8">
+                       <h1>{{delivery.length}}</h1>
+                  </div>
+                 </div>
+                </nb-card-body>
+              </nb-card>
+            </div>
+          </div>
+        </nb-card-body>
+      </nb-card>
+  </div>
 </div>

src/app/pages/dashboard/dashboard.component.scss

@@ -0,0 +1,43 @@
+.card {
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin-left: 6rem;
+  }
+  
+  .card-header {
+    background-color: #f2f2f2;
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  
+  .card-body {
+    padding: 20px;
+  }
+  
+  .card h3 {
+    margin: 0;
+  }
+  
+  .card.status-primary {
+    background-color: #3f51b5;
+    color: #fff;
+  }
+  
+  .card.status-info {
+    background-color: #00bcd4;
+    color: #fff;
+  }
+  
+  .card.status-success {
+    background-color: #4caf50;
+    color: #fff;
+  }
+  .dashboard{
+    display: flex;
+  }
+
+
+   

src/app/pages/dashboard/dashboard.component.ts

@@ -1,14 +1,16 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-
+import { PageapiService } from '../pageapi.service';
+import * as moment from 'moment';
 @Component({
   selector: 'ngx-dashboard',
   templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent {
 
-
+  orders:any =[];inprogress:any=[];delivery:any =[];
-  constructor(private router: Router){
+  constructor(private router: Router,public _api:PageapiService){
     const token = localStorage.getItem('user_token'); 
     console.log(token)
   
@@ -16,6 +18,46 @@ export class DashboardComponent {
             this.router.navigate(['/auth/login']);
           }
 
+          this.dateWiseFilter()
+         
+            
+  }
+
+
+  dateWiseFilter() {
+    
+    let from = (moment().subtract(6, 'days'))['_d']
+    let param = {fromDate:from
+    ,toDate: moment()['_d']}
+    console.log(param)
+
+    this._api.getOrders(param).subscribe(res => {
+      console.log(res)
+      if(res.status == 200){
+
+       let passData =  res.data
+       passData.sort((a: any, b: any) => {
+        return b.id - a.id;
+      });
+       passData.forEach((element:any, index) => {
+        element.index = index       +1  
+        element. selected =false
+        element. selectedval =0
+        element.customer = element['OrderDetails.CusDetails.cusName']
+
+        element.address = element['OrderDetails.CusDetails.address_1']+","+element['OrderDetails.CusDetails.city']+","+element['OrderDetails.CusDetails.pincode']
+        element.productName = element['ProductDetails.productName']
+        element. orderDate = element.createdAt
+      });
+      this.orders = passData.filter(arr=>{return arr.status == "ordered"}) 
+      this.inprogress = passData.filter(arr=>{return arr.status == "In Progress"}) 
+      this.delivery = passData.filter(arr=>{return arr.status == "Delivered"}) 
+
+
+      //  console.log(data)
+    // this.source.load(passData);
+      }
+    })
 
   }
 }

src/app/pages/dashboard/dashboard.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { NbCardModule } from '@nebular/theme';
+import { NbCardModule, NbIconModule } from '@nebular/theme';
 
 import { ThemeModule } from '../../@theme/theme.module';
 import { DashboardComponent } from './dashboard.component';
@@ -7,7 +7,7 @@ import { DashboardComponent } from './dashboard.component';
 @NgModule({
   imports: [
     NbCardModule,
-    ThemeModule,
+    ThemeModule, NbIconModule,
   ],
   declarations: [
     DashboardComponent,

src/app/pages/driver/driver.component.html

@@ -1,12 +1,158 @@
 <nb-card>
     <nb-card-header>
-      <nb-icon icon="car-outline"></nb-icon>   Driver Management
+      <!-- <nb-icon icon="car-outline"></nb-icon>   Driver Management -->
+      <div class="row show-grid">
+        <div class="col-md-6">
+          <div>    <nb-icon icon="car-outline"></nb-icon>   Driver Management</div>
+        </div>
+        <div class="col-md-4">
+          <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-2">
+          <div style="    text-align: end;"> 
+            <!-- <button  (click)="Assign()" nbButton status="primary" hero>
+              Assign Driver
+              </button> -->
+            <button  (click)="onCreateConfirm()" nbButton status="primary" hero>
+           Add Driver
+          </button>
+        </div>
+        </div>
+      </div>
     </nb-card-header>
   
     <nb-card-body>
-      <ng2-smart-table [settings]="settings" [source]="source" (edit)="onSaveConfirm($event)"
+      <!-- <ng2-smart-table [settings]="settings" [source]="source" (edit)="onSaveConfirm($event)"
       (create)="onCreateConfirm($event)" (delete)="onDeleteConfirm($event)">
-      </ng2-smart-table>
+      </ng2-smart-table> -->
+
+
+      <ng-data-table  
+      [id]="'i'" 
+      [items]=driver
+      [minContentWidth]="500"
+      [pageable]="true"  
+      [showColumnSelector]="false" 
+      [showHeader]="false"
+      [selectMode]="'multi'" 
+      [minContentHeight]="350" 
+      >  
+    
+      <ng-data-table-column 
+      [field]="'index'"
+      [sortable]="false"
+      [title]="'ID'"
+      [filterable]="false"
+      [width]="2"> 
+
+      </ng-data-table-column> 
+
+      <ng-data-table-column 
+      [field]="'userName'"
+      [sortable]="false"
+      [title]="'Name'"
+      [filterable]="false"
+      [width]="4"> 
+
+      </ng-data-table-column> 
+      <ng-data-table-column 
+      [field]="'email'"
+      [sortable]="false"
+      [title]="'E-mail'"
+      [filterable]="false"
+      [width]="6"> 
+
+      </ng-data-table-column> 
+      <ng-data-table-column 
+      [field]="'mobileNo'"
+      [sortable]="false"
+      [title]="'Mobile No'"
+      [filterable]="false"
+      [width]="4"> 
+
+      </ng-data-table-column> 
+      <!-- <ng-data-table-column 
+      [field]="'role'"
+      [sortable]="false"
+      [title]="'Role'"
+      [filterable]="false"
+      [width]="4"> 
+
+      </ng-data-table-column>  -->
+
+      <ng-data-table-column 
+      [field]="'isActive'"
+      [sortable]="false"
+      [title]="'Status'"
+      [filterable]="false"
+      [width]="4"> 
+      <ng-template #ngDataTableCell  let-row="row">
+        <td  >
+          <div   style="display: flex; align-items: center;">
+          
+            
+            <nb-toggle [(ngModel)]="row.item.isActive" (change)="onDeleteConfirm(row.item)">
+
+              <span *ngIf="row.item.isActive == 1"  style="color: green;">
+                Active
+                 </span>
+                 <span  *ngIf="row.item.isActive == 0" style="color: red;" >
+                  Inactive
+                    </span>
+            </nb-toggle>
+               
+          
+             
+          </div>
+        
+        </td> 
+        </ng-template>
+      </ng-data-table-column> 
+
+
+
+
+
+     
+    
+      <ng-data-table-column 
+      [field]="'role'"
+      [sortable]="false"
+      [title]="'Action'"
+      [filterable]="false"
+      [width]="3"> 
+
+   
+
+
+
+
+
+
+   
+      <ng-template #ngDataTableCell  let-row="row">
+      <td  >
+        <div class="align-center" style="display: flex; align-items: center;">
+          <!-- <span   class="check"   (click)="onSaveConfirm(row.item)">
+            <i class="nb-edit"  ></i>
+          </span>
+          <span  class="check" (click)="onDeleteConfirm(row.item)">
+            <i class="nb-trash" ></i> -->
+              <nb-icon icon="edit-outline"  title="Edit"  style="margin-left: 1rem;" (click)="onSaveConfirm(row.item)"></nb-icon>  
+              <nb-icon icon="refresh-outline"   title="Reset Password"  style="margin-left: 1rem;" (click)="resetPassword(row.item)"></nb-icon>  
+          <!-- </span> -->
+        </div>
+      
+      </td> 
+      </ng-template>
+    </ng-data-table-column> 
+      </ng-data-table>
     </nb-card-body>
   </nb-card>
   

src/app/pages/driver/driver.component.scss

@@ -9,3 +9,120 @@
 //   flex: 1 0 auto;
 //   min-width: 20rem !important;
 // }
+
+
+.align-left{
+  text-align: left !important;
+}
+.align-center{
+  text-align: center !important;
+}
+.align-right{
+ text-align: right !important;
+}
+::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-even td {
+  background: white;
+  font-family: var(--smart-table-font-family);
+font-size: var(--smart-table-font-size);
+font-weight: var(--smart-table-font-weight);
+line-height: var(--smart-table-line-height);
+color: var(--smart-table-fg);
+}
+::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table thead > tr .ng-data-table-column-header .ng-data-table-column-header-label:first-child {
+ font-size: 18px;padding: 10px; color: #1e6bb8;
+ text-decoration: none;
+ font-family: var(--smart-table-header-font-family);
+ font-size: var(--smart-table-header-font-size);
+ font-weight: var(--smart-table-header-font-weight);
+ line-height: var(--smart-table-header-line-height);
+}
+::ng-deep  :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-odd td {
+ 
+font-family: var(--smart-table-font-family);
+font-size: var(--smart-table-font-size);
+font-weight: var(--smart-table-font-weight);
+line-height: var(--smart-table-line-height);
+color: var(--smart-table-fg);
+}
+::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table-content-container .ng-data-table-content {
+ min-height: 100px !important;
+ font-size: 18px; 
+}
+::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table thead > tr:last-child th {
+
+ background-color:#fff;    font-family: var(--smart-table-font-family);
+ font-size: var(--smart-table-font-size);
+ font-weight: var(--smart-table-font-weight);
+ line-height: var(--smart-table-line-height);
+ color: var(--smart-table-fg);
+
+}
+tr{
+  color: white;
+  background-color:#fff;
+}
+th{
+ color: white;
+ background-color:#fff;
+}
+
+ * {
+    box-sizing: border-box;
+  }
+  .row {
+    display: flex;
+    background-color:#fff;
+  }
+  
+  /* Create two equal columns that sits next to each other */
+  .column {
+    flex: 50%;
+    //  
+    // height: 300px; /* Should be removed. Only for demonstration */
+  }
+  ::ng-deep .mat-select-value{    
+    color: white!important;  }
+  .column1 {
+     width: 210px;
+    text-align: center;
+    text-overflow: ellipsis;
+    padding: 30px;
+    //height: 300px; /* Should be removed. Only for demonstration */
+  }
+
+ 
+  .add {
+     display: flex;
+     align-items: center;
+     justify-content: center;
+     font-size: 1.75rem !important;
+     padding: var(--smart-table-filter-padding);
+     border-color: var(--smart-table-add-button-border-color);
+     background-color: var(--smart-table-add-button-background-color);
+     color: var(--smart-table-add-button-text-color);
+     border-radius: 0.375rem;
+
+     font-family: var(--smart-table-header-font-family);
+     font-size: var(--smart-table-header-font-size);
+     font-weight: var(--smart-table-header-font-weight);
+     line-height: var(--smart-table-header-line-height);
+ }
+ span{
+
+   color: #000;
+ }
+
+span:hover{
+
+   color: #1e6bb8;
+ }
+ a[disabled="disabled"] {
+   pointer-events: none;
+}
+ .check{
+   display: flex; align-items: center;     text-decoration: none;
+           height: 100%; width: 100%; font-size: 2rem!important; 
+ }
+
+
+  

src/app/pages/driver/driver.component.ts

@@ -22,7 +22,7 @@ import { DriverFormComponent } from './driver-form/driver-form.component';
   styleUrls: ['./driver.component.scss']
 })
 export class DriverComponent {
-
+  driver:any =[];
   settings = {
     actions: {
       
@@ -77,10 +77,10 @@ export class DriverComponent {
   index = 1;
   destroyByClick = true;
   duration = 2000;
-  hasIcon = true;
+  hasIcon = true;  searchTerm:any=[];filteredItems:any=[];
   position: NbGlobalPosition = NbGlobalPhysicalPosition.TOP_RIGHT;
   preventDuplicates = false;
-  status: NbComponentStatus = 'primary';
+  status: NbComponentStatus = 'primary';toggleValue :boolean = false;
   constructor(private toastrService: NbToastrService,private service: SmartTableData,public _api:PageapiService,private windowService: NbWindowService) {
     const data = this.service.getData();
   
@@ -92,31 +92,36 @@ export class DriverComponent {
 
   onDeleteConfirm(event): void {
     console.log(event)
-    let passData = event.data
+    let passData = event
-    if (window.confirm('Are you sure you want to delete?')) {
+  //  if (window.confirm('Are you sure you want to delete?')) {
       //event.confirm.resolve();
 
    
 
-      let deletedata  = {'isActive':0,'id':passData.id}
+      let deletedata  = {'isActive':event.isActive,'id':passData.id}
   
       this._api.addUserFormDetails (deletedata).subscribe(res => {
         if (res.status == 200) {
   console.log(res)
   this.getuserlistApi();
-  this.showToast('success', 'Data Removed Successfully', 'Removed Driver Data Completed..!');
+  if(event.isActive == 1){
+    this.showToast('success', 'Data Removed Successfully', 'Active Driver Data Completed..!');
+  }else{
+    this.showToast('success', 'Data Removed Successfully', 'Inactive Driver Data Completed..!');
+  }
+  //this.showToast('success', 'Data Removed Successfully', 'Removed Driver Data Completed..!');
         }else{
           this.showToast('warning', 'Somthing is Wrong...!', 'Edit Driver Data Failed..!');
         }
       })
 
-    } else {
+  //   } else {
-      event.confirm.reject();
+  //     event.confirm.reject();
+  //   }
   }
-  }
+  onCreateConfirm() {
-  onCreateConfirm(event) {
     console.log("Create Event In Console")
-    console.log(event);
+
     const buttonsConfig: NbWindowControlButtonsConfig = {
       minimize: this.minimize,
       maximize: this.maximize,
@@ -157,7 +162,7 @@ export class DriverComponent {
       fullScreen: this.fullScreen,
       close: this.close,
     };
-    const windowRef: NbWindowRef =  this.windowService.open(DriverFormComponent, { title: `Edit Driver`, context: event.data
+    const windowRef: NbWindowRef =  this.windowService.open(DriverFormComponent, { title: `Edit Driver`, context: event
     , buttons: buttonsConfig  });
    
 
@@ -191,8 +196,9 @@ export class DriverComponent {
         element.index = index       +1  
         
       });
+      this.driver = driver
       //  console.log(data)
-        this.source.load(driver);
+        //this.source.load(driver);
       }
     })
   }
@@ -215,4 +221,55 @@ export class DriverComponent {
       `${titleContent}`,
       config);
   }
+
+  filterItems() {
+    console.log(  this.searchTerm)
+   
+     if(  this.searchTerm !=''){
+   
+   
+     this.filteredItems = this.driver.filter(item =>
+       Object.values(item).some(value => {
+         if (typeof value === 'string') {
+           return value.toLowerCase().includes(this.searchTerm.toLowerCase());
+         }
+         return false;
+       })
+     );
+     this.driver = this.filteredItems
+   }else{
+     console.log( 'fhjsgsajdhgasksjgfcckjsdfgckjsdhfk')  
+   
+     this.getuserlistApi()
+   }
+   
+   
+   
+   console.log( this.filteredItems)
+   }
+
+
+   resetPassword(data){
+    console.log(data)
+
+    this.formData= new FormData();
+    if(data.hasOwnProperty('id')){
+      this.formData.append('id', data.id);
+     
+    }  
+   
+    this.formData.append('password', 'Test@123');
+  
+
+    this._api.addUserFormDetails (this.formData).subscribe(res => {
+      if (res.status == 200) {
+console.log(res)
+this.showToast('success', 'Password Changed Successfully', '');
+ 
+      }else{
+        this.showToast('warning', 'Password Changed Failed', '');
+      }
+    })
+
+   }
 }

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

@@ -0,0 +1,254 @@
+<nb-card>
+    <nb-card-header>
+   
+
+     <div class="row show-grid">
+        <div class="col-md-6">
+          <div>   Delivery Sheet</div>
+        </div>
+        <div class="col-md-6">
+          <div style="text-align: end;"> 
+       
+
+          <!-- <button  style="    margin-left: 2rem;"(click)="generatePDF('print')" nbButton status="primary" hero>
+            Print
+             </button> -->
+        </div>
+        </div>
+      </div>
+    </nb-card-header>
+
+    <nb-card-header>
+
+
+     
+
+        <div class="row show-grid">
+           <div class="col-md-4">
+             <div>       <input  nbInput class="fx-date-range" type="text" 
+                ngxDaterangepickerMd
+                [locale]="{applyLabel: 'okay', format: 'DD/MM/YY'}"
+                [drops]="'down'"
+                [opens]="'right'"
+                [ranges]="ranges"
+                [autoApply]="true"
+                [singleDatePicker]="true"
+                [showCustomRangeLabel]="false"
+                [alwaysShowCalendars]="true"
+                [keepCalendarOpeningWithRange]="false"
+                [showCancel]="true"
+                autocomplete="off"
+                [(ngModel)]="selectedDateRange"
+                name="daterange" placeholder="Fliter Date Wise" (change)="dateWiseFilter()"/></div>
+           </div>
+           <div class="col-md-4">
+             <div > 
+                <nb-select selected=""    style="width: 100% !important;"     >
+                    <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>
+              
+           </div>
+           </div>
+
+           <div class="col-md-4">
+            <div > 
+               
+               <button  (click)="download()" nbButton status="success" hero>
+                   Download
+                    </button> 
+          </div>
+          </div>
+         </div>
+       </nb-card-header>
+  
+    <nb-card-body>
+        <div id="table" style="text-align: center;margin-bottom: 1rem;">
+          <nb-card-header *ngIf="summaryaData.length>0" style="text-align: center;"><img src="assets/images/VN_Medical_Logo.png" alt="vnms" width="120" height="50" style="padding-right: 1rem;"> </nb-card-header>
+          
+          <nb-card-header *ngIf="summaryaData.length>0" style="text-align: center;margin-top: 2rem;">  
+          
+            <div class="row show-grid" style="    margin-top: 2rem;">
+              <div class="col-md-4">
+                <div>  https://vnms.in/services/</div>
+              </div>
+              <div class="col-md-4">
+                <div  style="text-align: center;">   Delivery Sheet</div>
+              </div>
+              <div class="col-md-4">
+                <div> 
+                  Date :{{DateDisplay | date :'dd/MM/yy'}}
+                  </div>
+                  </div>
+          </div>
+          
+          </nb-card-header>
+          <!-- <h5 *ngIf="summaryaData.length>0" >Delivery Sheet</h5>
+            <h5 *ngIf="summaryaData.length>0" > </h5> -->
+        <ng-data-table  *ngIf="summaryaData.length>0" 
+        [id]="'i'" 
+        [items]=summaryaData
+        [minContentWidth]="500"
+        [pageable]="false"  
+        [showColumnSelector]="false" 
+        [showHeader]="false"
+        [selectMode]="'multi'" 
+        [minContentHeight]="350" 
+        [limit]="50"
+        >  
+      
+        <ng-data-table-column 
+        [field]="'orderId'"
+        [sortable]="false"
+        [title]="'Order ID'"
+        [filterable]="false"
+        [width]="4"> 
+  
+        </ng-data-table-column> 
+
+        <ng-data-table-column 
+        [field]="'userName'"
+        [sortable]="false"
+        [title]="'Customer'"
+        [filterable]="false"
+        [width]="4"> 
+
+        <ng-template #ngDataTableCell  let-row="row">
+            <td  >
+              <div   style="display: flex; align-items: center;text-align: center;">
+           
+                <span    class="checkTxt"    >
+                  {{row.item['OrderDetails.CusDetails.cusName']}} <br />
+                  {{row.item['OrderDetails.CusDetails.address_1']}} <br />
+                  {{row.item['OrderDetails.CusDetails.city']}} <br />
+                  {{row.item['OrderDetails.CusDetails.pincode']}} <br />
+
+                 ph:- {{row.item['OrderDetails.CusDetails.phoneNo']}} 
+                
+                
+                   </span>
+              </div>
+            
+            </td> 
+            </ng-template>
+  
+        </ng-data-table-column> 
+        <ng-data-table-column 
+        [field]="'email'"
+        [sortable]="false"
+        [title]="'Product'"
+        [filterable]="false"
+        [width]="6"> 
+
+
+        <ng-template #ngDataTableCell  let-row="row">
+            <td  >
+              <div   style="display: flex; align-items: center;">
+                <table style="width: 100%;">
+                  <thead>
+                    <tr>
+                      <th></th>
+                    
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let product of filterData(row.item.orderId)">
+                      <td style="    border-top: 0rem solid #ddd;"> <a style="    font-size: initial;" >{{ product }}</a></td>
+                      <!-- <td>{{ product.price }}</td>
+                      <td>{{ product.quantity }}</td> -->
+                    </tr>
+                  </tbody>
+                </table>
+                
+                <!-- <span    class="checkTxt"    >
+                  {{filterData(row.item.orderId)}}  
+                 
+            
+                
+                   </span> -->
+              </div>
+            
+            </td> 
+            </ng-template>
+  
+        </ng-data-table-column> 
+        <ng-data-table-column 
+        [field]="'total_qty'"
+        [sortable]="false"
+        [title]="'Qty'"
+        [filterable]="false"
+        [width]="4"> 
+        <ng-template #ngDataTableCell  let-row="row">
+          <td  >
+          <div   style="display: flex; align-items: center;">
+             <!--    <div class="row">
+                <div class="col-md-12"  *ngFor="let product of filterDataqty(row.item.orderId)">
+                  <h5>{{ product }}</h5>
+                </div>
+              </div> -->
+              <table style="width: 100%;">
+                <thead>
+                  <tr>
+                    <th></th>
+                  
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr *ngFor="let product of filterDataqty(row.item.orderId)">
+                    <td style="    border-top: 0rem solid #ddd;"> <a style="    font-size: initial;" >{{ product }}</a></td> 
+                  </tr>
+                </tbody>
+              </table>
+              
+              <!-- <span    class="checkTxt"    >
+                {{filterData(row.item.orderId)}}  
+               
+          
+              
+                 </span> -->
+            </div>
+          
+          </td> 
+          </ng-template>
+
+        </ng-data-table-column> 
+       
+        
+       
+        </ng-data-table>
+   </div>
+ 
+        
+          <nb-card-footer>
+            <div class="row show-grid" >
+                <div class="col-6 col-md-3">
+                  <div>  
+                 
+                </div> 
+                </div>
+                <div class="col-6 col-md-2">
+                  <div>
+                 
+                 </div>
+                </div>
+                <div class="col-6 col-md-4">
+                  <div>
+                 
+                 </div>
+                </div>
+                <div class="col-6 col-md-3">
+                  <div  > 
+                    <!-- <button nbButton status="success" (click)="save()" style="margin-right: 10px;"  type="submit" >Submit</button>
+                    <button type="button" class="cancel" nbButton status="danger" (click)="back()">Cancel</button> -->
+                </div>
+                </div>
+              </div>
+        
+       
+          </nb-card-footer>
+    </nb-card-body>
+</nb-card>

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

@@ -0,0 +1,176 @@
+ 
+ td ,input[type="checkbox"] {
+    font-size: 1px !important;
+ }
+
+ .highlight-cell {
+    background-color: yellow;
+    /* Add any other styling properties as desired */
+  }
+
+  ::ng-deep  .ng2-smart-action-multiple-select{
+   text-align: center;
+   }
+   
+   ::ng-deep  .ng2-smart-action-multiple-select > input{
+   width:15px;
+   height:15px;
+   display: unset;
+   }
+
+   ::ng-deep  .desired-value-row{
+color: red !important;
+   }
+
+   .align-left{
+      text-align: left !important;
+    }
+    .align-center{
+      text-align: center !important;
+    }
+    .align-right{
+     text-align: right !important;
+    }
+    ::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-even td {
+      background: white;
+    //padding: 10px; 
+    font-family: var(--smart-table-font-family);
+    font-size: var(--smart-table-font-size);
+    font-weight: var(--smart-table-font-weight);
+    line-height: var(--smart-table-line-height);
+    color: var(--smart-table-fg);
+    }
+    ::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table thead > tr .ng-data-table-column-header .ng-data-table-column-header-label:first-child {
+     font-size: 18px;
+   padding: 10px;
+      color: #1e6bb8;
+     text-decoration: none;
+     font-family: var(--smart-table-header-font-family);
+     font-size: var(--smart-table-header-font-size);
+     font-weight: var(--smart-table-header-font-weight);
+     line-height: var(--smart-table-header-line-height);
+    }
+    ::ng-deep  :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-odd td {
+   // padding: 10px;
+    font-family: var(--smart-table-font-family);
+    font-size: var(--smart-table-font-size);
+    font-weight: var(--smart-table-font-weight);
+    line-height: var(--smart-table-line-height);
+    color: var(--smart-table-fg);
+    }
+    ::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table-content-container .ng-data-table-content {
+     min-height: 100px !important;
+     font-size: 18px; 
+    }
+    ::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table thead > tr:last-child th {
+    
+     background-color:#fff;    font-family: var(--smart-table-font-family);
+     font-size: var(--smart-table-font-size);
+     font-weight: var(--smart-table-font-weight);
+     line-height: var(--smart-table-line-height);
+     color: var(--smart-table-fg);
+    
+    }
+    tr{
+      color: white;
+      background-color:#fff;
+    }
+    th{
+     color: white;
+     background-color:#fff;
+    }
+    
+     * {
+        box-sizing: border-box;
+      }
+      .row {
+        display: flex;
+        background-color:#fff;
+      }
+      
+      /* Create two equal columns that sits next to each other */
+      .column {
+        flex: 50%;
+        // padding: 10px;
+        // height: 300px; /* Should be removed. Only for demonstration */
+      }
+      ::ng-deep .mat-select-value{    
+        color: white!important;  }
+      .column1 {
+         width: 210px;
+        text-align: center;
+        text-overflow: ellipsis;
+        padding: 30px;
+        //height: 300px; /* Should be removed. Only for demonstration */
+      }
+    
+     
+      .add {
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         font-size: 1.75rem !important;
+         padding: var(--smart-table-filter-padding);
+         border-color: var(--smart-table-add-button-border-color);
+         background-color: var(--smart-table-add-button-background-color);
+         color: var(--smart-table-add-button-text-color);
+         border-radius: 0.375rem;
+    
+         font-family: var(--smart-table-header-font-family);
+         font-size: var(--smart-table-header-font-size);
+         font-weight: var(--smart-table-header-font-weight);
+         line-height: var(--smart-table-header-line-height);
+     }
+     span{
+    
+       color: #000;
+     }
+    
+    span:hover{
+    
+       color: #1e6bb8;
+     }
+     a[disabled="disabled"] {
+       pointer-events: none;
+    }
+     .check{
+       display: flex; align-items: center;     text-decoration: none;
+               height: 100%; width: 100%; font-size: 2rem!important; 
+     }
+
+     .checkTxt{
+      //background: white;
+     // padding: 10px;
+      font-family: var(--smart-table-font-family);
+      font-size: var(--smart-table-font-size);
+      font-weight: var(--smart-table-font-weight);
+      line-height: var(--smart-table-line-height);
+      color: var(--smart-table-fg);
+      text-transform: capitalize;
+     }
+    
+
+     ::ng-deep .md-drppicker .btn, .md-drppicker .btn:focus, .md-drppicker .btn:hover {
+      background-color: #4caf50 !important;
+      margin-left: 10px !important;
+  }
+  
+  ::ng-deep .md-drppicker .btn.btn-default{
+      color: #000 !important;
+      background-color: #dcdcdc !important;
+  }
+  
+  ::ng-deep .md-drppicker td.active{
+      background-color: #1f7f6f !important; 
+  }
+  ::ng-deep .md-drppicker .ranges ul li button.active {
+      background-color: #1f7f6f !important;
+  }
+  ::ng-deep .md-drppicker.double {
+      width: 640px !important; 
+  }
+
+  h5{
+    text-align: center;
+  }
+  

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DriverySheetComponent } from './drivery-sheet.component';
+
+describe('DriverySheetComponent', () => {
+  let component: DriverySheetComponent;
+  let fixture: ComponentFixture<DriverySheetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DriverySheetComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DriverySheetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,264 @@
+import { Component, OnInit } from '@angular/core';
+import * as html2pdf from 'html2pdf.js'
+import * as moment from 'moment';
+import { PageapiService } from '../pageapi.service';
+import { Router } from '@angular/router';
+@Component({
+  selector: 'ngx-drivery-sheet',
+  templateUrl: './drivery-sheet.component.html',
+  styleUrls: ['./drivery-sheet.component.scss']
+})
+export class DriverySheetComponent implements OnInit {
+  ranges: any = {
+    'Today': [moment(), moment()],
+    // 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+    // 'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+    // 'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+    // 'This Month': [moment().startOf('month'), moment().endOf('month')],
+    // 'Last Month': [
+    //   moment().subtract(1, 'month').startOf('month'),
+    //   moment().subtract(1, 'month').endOf('month')
+    // ]
+
+  };productDeatils:any =[];    DateDisplay:any =[];
+  selectedDateRange:any =[];drivers:any =[];summaryaData:any=[];driverval:any=[];returnSummary:any =[];
+  constructor(public _api:PageapiService, private router:Router) { }
+
+  ngOnInit(): void {
+    this.selectedDateRange =[];
+    console.log(moment()['_d'])
+    this.getDriverlistApi()
+    this.DateDisplay = moment()['_d']
+   
+
+  }
+
+
+  back(){
+
+  }
+  save(){
+
+  }
+
+  generatePDF(data){
+
+
+  }
+  dateWiseFilter(){
+    console.log(this.selectedDateRange,this.driverval)
+    if(this.selectedDateRange.length!=0){
+
+
+   
+  }
+    //this.getDriverSummaryAdminList(result)
+
+  }
+
+  mergeOrders(orderItems: any[]) {
+    this.summaryaData = orderItems.reduce((acc, curr) => {
+      const existingOrder = acc.find((order) => order.orderId === curr.orderId);
+      if (existingOrder) {
+        existingOrder.total_qty += curr.total_qty;
+      } else {
+        acc.push(curr);
+      }
+      return acc;
+    }, []);
+  }
+  getDriverlistApi(){
+   // console.log(this.selectedDateRange)
+    let param ={}
+    this._api.getusers(param).subscribe(res => {
+      console.log(res)
+      if(res.status == 200){
+  
+       let passData =  res.data
+       let driver = passData.filter(arr=>{return arr.role == 'DRIVER'}) 
+       driver.sort((a: any, b: any) => {
+        return b.id - a.id;
+      });
+       driver.forEach((element:any, index) => {
+        element.index = index       +1  
+        
+      });
+  
+  
+  
+      this.drivers = driver
+      //  console.log(data)
+      
+      }
+    })
+  }
+
+
+  getDriverSummaryAdminList(date){
+    let param ={date:new Date(date)}
+    this._api.getDriverSummaryAdminList(param).subscribe(res => {
+      console.log(res)
+      if(res.status == 200){
+   
+      console.log(res.data)
+      
+      }
+    })
+  }
+
+  val(data){
+    console.log(data.id)
+
+    let result;
+    if(this.selectedDateRange.length != 0){
+      result=   this.selectedDateRange.endDate['$d']
+    }else{
+      
+      result =  moment()['_d']
+    }
+    this.DateDisplay = result
+  
+    console.log(result)
+    let param ={date:new Date(result),id:data.id}
+    this._api.getDriverSheet(param).subscribe(res => {
+      console.log(res)
+      if(res.status == 200){
+   
+      console.log(res.data)
+
+      this.summaryaData = res.data
+      this.summaryaData.forEach(element => {
+        element.name = element['UserDetails.userName']
+        
+      });
+
+      this.mergeOrders(  this.summaryaData)
+      
+      }else{
+        this.summaryaData =[];
+      }
+    })
+
+    this._api.getReturnDriverSummaryListadmin(param).subscribe(res => {
+      console.log(res)
+      if(res.status == 200){
+   
+      console.log(res.data)
+
+      this.returnSummary = res.data
+
+    
+
+     // this.mergeOrders(  this.summaryaData)
+      
+      }
+    })
+
+    this._api.getProductDeliverysheet(param).subscribe(res => {
+      console.log(res)
+      if(res.status == 200){
+   
+      console.log(res.data)
+
+      this.productDeatils = res.data
+
+    
+
+     // this.mergeOrders(  this.summaryaData)
+      
+      }
+    })
+
+
+    
+    
+  }
+
+
+  returnCount(data){
+   let result =  this.returnSummary.filter(arr=>{return arr.orderId == data}) 
+console.log(result)
+   if(result.length>0){
+
+    return result[0].total_amount
+   }else{
+    return '-'
+   }
+
+  }
+
+  view(data){
+    this.router.navigate(['/pages/summary/'+data]) 
+  }
+
+
+  filterData(param){
+
+    let tmp=[];
+  let order =   this.productDeatils.filter(arr=>{return arr.orderId == param}) 
+if(order.length>0){
+
+  console.log(param)
+
+
+  order.forEach(element => {
+
+    if(element.ProductDetails.length>0){
+
+      tmp.push(element.ProductDetails[0].productName)
+    } 
+
+      
+    
+  });
+  //console.log(tmp)
+  return tmp
+}else{
+  return tmp
+}
+
+
+  }
+
+  filterDataqty(param){
+
+    let tmp=[];
+  let order =   this.productDeatils.filter(arr=>{return arr.orderId == param}) 
+if(order.length>0){
+
+  console.log(param)
+
+
+  order.forEach(element => {
+
+    if(element.ProductDetails.length>0){
+
+      tmp.push(element.qty)
+    } 
+
+      
+    
+  });
+  //console.log(tmp)
+  return tmp
+}else{
+  return tmp
+}
+
+
+  }
+  download(){
+    var element = document.getElementById('table');
+var opt = {
+  margin:       1,
+  filename:     'sheet.pdf',
+  image:        { type: 'jpg', quality: 0.98 },
+  html2canvas:  { scale: 2 },
+  jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
+};
+ 
+// New Promise-based usage:
+html2pdf().from(element).set(opt).save();
+  }
+  
+}

src/app/pages/email/email.component.html

@@ -0,0 +1,77 @@
+<form class="form" [formGroup]="userForm" (ngSubmit)="onSubmit()">
+    <div class="row">
+        <div class="col-lg-10">
+          <nb-card>
+            <nb-card-header>Email SMTP Settings</nb-card-header>
+            <nb-card-body>
+              <input type="text" nbInput fullWidth  formControlName="hostname" placeholder="Host">
+                  <ng-container nbInputErrorMessage>
+          <div style="color:#7c0e0e" *ngIf="userForm.get('hostname').hasError('required') && userForm.get('hostname').touched">Name is required.</div>
+        
+         
+        </ng-container>
+
+        <input type="email" formControlName="email" nbInput fullWidth placeholder="E-mail">
+        <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>
+            
+                <input type="text" formControlName="password" nbInput fullWidth placeholder="Password">
+                <ng-container nbInputErrorMessage>
+          
+          
+                  <!-- <div style="color:#7c0e0e" *ngIf="!userForm.get('password')?.errors?.required && !(userForm.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> -->
+                  <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>
+                
+                
+           
+           
+              <input type="number" formControlName="port" nbInput fullWidth placeholder="Port">
+              <ng-container nbInputErrorMessage>
+                <div style="color:#7c0e0e" *ngIf="userForm.get('port').hasError('required') && userForm.get('port').touched">Mobile No is required.</div>
+              
+              
+              </ng-container>
+
+           
+              <nb-select selected=""  formControlName="secure" style="width: 100% !important;margin-bottom: 1rem;"  aria-placeholder="secure">
+              <nb-option value="true">true</nb-option>
+              <nb-option value="false">false</nb-option>
+              <nb-option hidden value="">Secure</nb-option>
+              </nb-select>
+              <nb-card-footer>
+                <div class="row show-grid" >
+                    <div class="col-6 col-md-4">
+                      <div>  
+                        <button type="button" class="cancel" nbButton status="danger" (click)="close()">Cancel</button>
+                    </div> 
+                    </div>
+                    <div class="col-6 col-md-4">
+                      <div>
+                       
+                     </div>
+                    </div>
+                    <div class="col-6 col-md-4" style="text-align: end;">
+                      <div> 
+                        <button nbButton status="success"  [disabled]="!userForm.valid"  type="submit" >Save</button>
+                    </div>
+                    </div>
+                  </div>
+            
+           
+              </nb-card-footer>
+            </nb-card-body>
+          </nb-card>
+        </div>
+        </div>
+    
+    </form>

src/app/pages/email/email.component.scss

@@ -0,0 +1,27 @@
+nb-card-body {
+    overflow: visible;
+    padding-top: 0;
+  
+    > * {
+      margin-top: 1rem;
+    }
+  }
+  
+  .full-name-inputs,
+  .validation-checkboxes {
+    display: flex;
+    margin: 0 -0.5rem;
+  
+    > * {
+      margin: 0 0.5rem;
+    }
+  }
+  
+  .checkbox-radio {
+    display: flex;
+  }
+  
+  .demo-items {
+    flex: 1 0 33%;
+  }
+  

src/app/pages/email/email.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmailComponent } from './email.component';
+
+describe('EmailComponent', () => {
+  let component: EmailComponent;
+  let fixture: ComponentFixture<EmailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EmailComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EmailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/email/email.component.ts

@@ -0,0 +1,119 @@
+import { Component, OnInit } from '@angular/core';
+ 
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { PageapiService } from '../pageapi.service';
+import { NbComponentStatus, NbGlobalPhysicalPosition, NbGlobalPosition, NbToastrService } from '@nebular/theme';
+@Component({
+  selector: 'ngx-email',
+  templateUrl: './email.component.html',
+  styleUrls: ['./email.component.scss']
+})
+export class EmailComponent implements OnInit {
+  userForm: FormGroup | any;  formData:any =[]
+
+   emailDetails:any =[];
+  index = 1;
+  destroyByClick = true;
+  duration = 2000;
+  hasIcon = true;
+  admin:any =[];
+  position: NbGlobalPosition = NbGlobalPhysicalPosition.TOP_RIGHT;
+  preventDuplicates = false;
+  status: NbComponentStatus = 'primary';
+  constructor(public _api:PageapiService,private toastrService: NbToastrService) { }
+
+  ngOnInit(): void {
+
+    this.userForm = new FormGroup({
+
+     
+
+
+      port: new FormControl('', [Validators.required]),
+       secure: new FormControl('', [Validators.required]),
+      hostname: new FormControl('', [Validators.required]),
+      // contactNo: new FormControl('', [Validators.required, Validators.maxLength(20)]),
+   
+      // lastName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
+      email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
+        '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
+      )]),
+      // password: new FormControl('', [Validators.required, Validators.minLength(6)]),
+        password: new FormControl('', [Validators.required]),
+    
+        
+    });
+    let userRole = localStorage.getItem('roleId');
+
+   this. getemaillistApi(userRole)
+  }
+  close(){
+
+  }
+
+  onSubmit(){
+    this.formData =[]
+    this.formData= new FormData();
+    let tmp = this.userForm .value
+    console.log(tmp)
+
+    this.emailDetails
+    let param ;
+    if( this.emailDetails.length>0){
+     param = {host:tmp.hostname, user:tmp.email,pass:tmp.password,port:tmp.port,secure:tmp.secure,id: this.emailDetails[0].id}
+    }else{
+      param = {host:tmp.hostname, user:tmp.email,pass:tmp.password,port:tmp.port,secure:tmp.secure}
+    }
+
+ 
+   console.log(param)
+     
+  
+  
+
+    this._api.CreateSmtpDetails (param).subscribe(res => {
+      if (res.status == 200) {
+console.log(res)
+this.showToast('success', 'Data Changed Successfully', 'SMTP Update  Completed..!');
+      }else{
+        this.showToast('warning', 'Data Changed Failed', 'SMTP Update Failed..!');
+      }
+    })
+  }
+
+  getemaillistApi(id){
+    let param={}
+    this._api.getSmtpList(param).subscribe(res => {
+      console.log(res)
+      if(res.status == 200){
+        this.emailDetails = res.data
+       let passData =  res.data[0]
+       passData.email =  res.data[0].user
+       passData.password =  res.data[0].pass
+       passData.hostname =  res.data[0].host
+     
+       this.userForm.patchValue(passData)
+   
+      }
+    })
+  }
+
+
+  private showToast(type: NbComponentStatus, title: string, body: string) {
+    const config = {
+      status: type,
+      destroyByClick: this.destroyByClick,
+      duration: this.duration,
+      hasIcon: this.hasIcon,
+      position: this.position,
+      preventDuplicates: this.preventDuplicates,
+    };
+    const titleContent = title ? ` ${title}` : '';
+
+    this.index += 1;
+    this.toastrService.show(
+      body,
+      `${titleContent}`,
+      config);
+  }
+}

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

@@ -29,7 +29,7 @@ export class CancelFormComponent  {
     console.log( this.data , this.cancelForm.value)
 
  
-   let  param ={id:this.data.id, reason: this.cancelForm.value.reason, status:'canceled'}
+   let  param ={id:this.data.id, reason: this.cancelForm.value.reason, status:'Cancelled' ,orderId:this.data.orderId}
     
      
       

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

@@ -18,23 +18,26 @@
       </div>
     <div class="col-6 col-md-2">
       <div>
-        <input nbInput style="width: 50%;"  (keyup)="pass()"  [(ngModel)]="fieldGroup.qty" type="number">
+ 
+        <label for="subject"  *ngIf="fieldTitle == 'View Order'" style="    font-weight: 600;">{{ fieldGroup.qty }}</label> 
+        <input nbInput style="width: 50%;"  *ngIf="fieldTitle != 'View Order'"  (keyup)="pass()"  [(ngModel)]="fieldGroup.qty" type="number">
         <!-- <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"> -->
-        <input nbInput  style="    width: 100%;" (keyup)="pass()" [(ngModel)]="fieldGroup.productSpec" type="text">
+        <label for="subject"  *ngIf="fieldTitle == 'View Order'" style="    font-weight: 600;">({{ fieldGroup.productSpec }})</label> 
+        <input nbInput  *ngIf="fieldTitle != 'View Order'" style="    width: 100%;" (keyup)="pass()" [(ngModel)]="fieldGroup.productSpec" placeholder="eg:- N2:CO2:O2 - 50:30:20" type="text">
     </div>
     </div>
 
     <div class="col-6 col-md-3">
         <div  > 
-            <nb-actions size="medium">
+            <nb-actions size="medium"  *ngIf="fieldTitle != 'View Order'">
                 <nb-action icon="plus-circle-outline"   class="custom-action-icon"  [nbTooltip]="'Add'" (click)="addInputFieldGroup()"></nb-action>
                
-                    <nb-action icon="minus-circle-outline" [nbTooltip]="'Remove'"  (click)="removeInputFieldGroup(i)"></nb-action>
+                    <nb-action icon="minus-circle-outline" *ngIf="i !=0" [nbTooltip]="'Remove'"  (click)="removeInputFieldGroup(i)"></nb-action>
                     </nb-actions>
             <!-- <button nbButton status="success"  (click)="addInputFieldGroup()" style="margin-right: 1rem;">  Add </button> -->
             <!-- <button nbButton status="danger"  (click)="removeInputFieldGroup(i)">Remove</button> -->

src/app/pages/order/mixed-form/mixed-form.component.scss

@@ -2,4 +2,8 @@ div{
     margin-top: 1rem;
 }
 
- 
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}

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

@@ -9,33 +9,54 @@ import { PageapiService } from '../../pageapi.service';
 export class MixedFormComponent implements OnInit {
  
   setData:any =[];
- 
+  fieldTitle:any =[];
   @Output() childButtonEvent = new EventEmitter();
 
-  inputFieldGroups: { qty: string, productSpec: string }[] = [{ qty: '0', productSpec: '' }]; // Array to hold input field groups
+  inputFieldGroups: {id:any, qty: string, productSpec: string }[] = [{id:'', qty: '0', productSpec: '' }]; // Array to hold input field groups
   constructor(public _api:PageapiService) { 
 
     this._api.orderDetails_observable$.subscribe((res) => {
       console.log('booked', res);
 
-      if(res){
+      if(res != null){
- this. setData =   res.data
+ this. setData =   res
+ this.getAnswerProduct(this.setData.orderId)
+ let result = localStorage.getItem('viewOrder')
+ if(result == '1'){
+   this.fieldTitle = 'View Order'
+ }else{
+   this.fieldTitle = 'Edit Order'
+ }
  if( this. setData['ProductDetails.productName'] == "Mixed Gas"){
 
 
- this.inputFieldGroups[0].qty =  this. setData.qty
+//  this.inputFieldGroups[0].qty =  this. setData.qty
- this.inputFieldGroups[0].productSpec  =  this. setData.productSpec
+//  this.inputFieldGroups[0].productSpec  =  this. setData.productSpec
 //  this.inputFieldGroups.push({ qty:  this. setData.qty, productSpec:  this. setData.productSpec });
 }
+      }else{
+        localStorage.setItem('viewOrder','0')
+        let result = localStorage.getItem('viewOrder')
+        if(result == '1'){
+          this.fieldTitle = 'View Order'
+        }else{
+          this.fieldTitle = 'Edit Order'
+        }
       }
   
     })
   }
 
-  ngOnInit(): void {
+  ngOnInit() {
+    let result = localStorage.getItem('viewOrder')
+    if(result == '1'){
+      this.fieldTitle = 'View Order'
+    }else{
+      this.fieldTitle = 'Edit Order'
+    }
   }
   addInputFieldGroup() {
-    this.inputFieldGroups.push({ qty: '0', productSpec: '' }); // Add a new input field group to the array
+    this.inputFieldGroups.push({id:null, qty: '0', productSpec: '' }); // Add a new input field group to the array
     this.childButtonEvent.emit( this.inputFieldGroups);
   }
 
@@ -49,4 +70,78 @@ export class MixedFormComponent implements OnInit {
     this.childButtonEvent.emit( this.inputFieldGroups);
   }
 
+  getAnswerProduct(orderId){
+
+    console.log(orderId)
+
+    
+
+    let param={orderId:orderId}
+    this._api.getProductList(param).subscribe(res => {
+   
+      if(res.status == 200){
+
+let result = res.data
+
+console.log(result)
+let final = result.filter(arr=>{return arr.productId == 6}) 
+
+if(final.length>0){
+  this.inputFieldGroups=[];
+
+// this.inputFieldGroups=[];
+final.forEach(element => {
+ // if(element.ProductDetails.length>0){
+
+
+// if(element.productId =="6"){
+  this.inputFieldGroups.push({id:element.id, qty: element.qty, productSpec: element.productSpec })
+ //  }
+//}
+
+});
+
+}
+console.log( this.inputFieldGroups)
+
+this.inputFieldGroups = this.inputFieldGroups.filter(arr=>{return arr.productSpec != null}) 
+
+//  if( this.inputFieldGroups.length>0){
+//   this.inputFieldGroups.push({id:null, qty: '0', productSpec: '' });
+//  }
+// this.product.forEach(element => {
+//   result.forEach(e => {
+//     console.log(e,element)
+//   if(element.productName ==  e.ProductDetails[0].productName ){
+//     //id: 110
+//     element.id =  e.id
+//     element.qty =  parseInt(e.qty)
+//   }
+// });
+
+// });
+//       }
+
+//     })
+
+//     this.product.forEach(res => {
+      
+  
+//       res.name = res.productName
+//  res.qty = res.qty
+//  res.price = this.setData['OrderDetails.CusDetails.cusType']
+//  this.invoice.additionalDetails = 'https://vnms.in/services/'
+ 
+//   this.invoice.products.push(res)
+ 
+
+ 
+ 
+// })
+//console.log(this.product,this.invoice.products)
+  }
+})
+  }
+  
+
 }

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

@@ -3,14 +3,22 @@
    
 
      <div class="row show-grid">
-        <div class="col-md-6">
+        <div class="col-md-4">
           <div>    {{fieldTitle}}</div>
         </div>
-        <div class="col-md-6">
+        <div class="col-md-8">
-          <div style="    text-align: end;"> 
+          <div style="text-align: end;"> 
             <button  (click)="back()" nbButton status="success" hero>
          Back
           </button>
+
+          <button  *ngIf="setData.status =='ordered' &&  fieldTitle != 'Edit Order'" style="    margin-left: 2rem;" (click)="edit()" nbButton status="primary" hero>
+            Edit
+             </button>
+
+          <button  style="    margin-left: 2rem;"(click)="generatePDF('print')" nbButton status="primary" hero>
+            Print
+             </button>
         </div>
         </div>
       </div>
@@ -21,7 +29,9 @@
         <div class="row show-grid">
             <div class="col-6 col-md-4">
               <div>  
-                <nb-select selected="" [(ngModel)]="selectCustomer" >
+                <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' ">
                     
                     <nb-option value="" hidden>Select Customer</nb-option>
                   
@@ -42,7 +52,13 @@
              </div>
             </div>
             <div class="col-6 col-md-4">
-              <div> 
+              <div  *ngIf="fieldTitle == 'Edit Order' || fieldTitle == 'View Order'"> 
+                <div style="font-size: larger;font-weight: 600;"> ORDER ID</div>
+       
+                <p>  {{setData.orderId}} </p> <br />
+                <div style="font-size: larger;font-weight: 600;">  Status</div>
+                <p style="text-transform: capitalize;"  [ngStyle] = "{'color':setData.status =='ordered'?'#1f1dc9f5':setData.status =='Delivered' ?'green':'red' }" >  ({{setData.status}}) </p>
+                <span *ngIf="setData.status =='Cancelled'">Reason: {{setData.reason}} </span>
                 <!-- <nb-select selected="DRIVER"    >
                 <nb-option value="DRIVER">DRIVER</nb-option>
                 
@@ -50,9 +66,58 @@
             </div>
             </div>
           </div>
+          <hr>
+          <nb-card-header>
    
 
+            <div class="row show-grid">
+               <div class="col-md-6">
+                 <div style="font-size: larger;">  Shipping Information</div>
+               </div>
+               <div class="col-md-6">
+                 <!-- <div style="    text-align: end;"> 
+                   <button  (click)="back()" nbButton status="success" hero>
+                Back
+                 </button>
+               </div> -->
+               </div>
+             </div>
+           </nb-card-header>
 
+           <div class="row show-grid" *ngIf="product.length>0">
+            <div class="col-6 col-md-3">
+              <div>  
+                <label for="subject" style="    font-weight: 500;">{{selectCustomerData['CusDetails.address_1']}} , {{selectCustomerData['CusDetails.city']}},Contact No-({{selectCustomerData['CusDetails.phoneNo']}}) </label> 
+            </div> 
+            </div>
+            <div class="col-6 col-md-2">
+              <!-- <div>
+                <label for="subject" style="    font-weight: 600;width: 30%;">Qty:</label> 
+             </div> -->
+            </div>
+            <div class="col-6 col-md-4">
+              <!-- <div> 
+                <label for="subject" style="    font-weight: 600;"></label> 
+            </div> -->
+            </div>
+          </div>
+        <hr>
+        <nb-card-header>
+   
+
+          <div class="row show-grid">
+             <div class="col-md-6">
+               <div style="font-size: larger;">  Product Information</div>
+             </div>
+             <div class="col-md-6">
+               <!-- <div style="    text-align: end;"> 
+                 <button  (click)="back()" nbButton status="success" hero>
+              Back
+               </button>
+             </div> -->
+             </div>
+           </div>
+         </nb-card-header>
       <div class="row show-grid" *ngIf="product.length>0">
         <div class="col-6 col-md-3">
           <div>  
@@ -66,10 +131,11 @@
         </div>
         <div class="col-6 col-md-4">
           <div> 
-            <label for="subject" style="    font-weight: 600;">Specification:</label> 
+            <label for="subject" style="    font-weight: 600;"></label> 
         </div>
         </div>
       </div>
+      
           <div *ngFor="let item of product; index as j">
 
             <div class="row show-grid">
@@ -82,8 +148,8 @@
                 </div>
                 <div class="col-6 col-md-2">
                   <div *ngIf=" item.productName != 'Mixed Gas'">
-                   
+                    <label for="subject"  *ngIf="fieldTitle == 'View Order'" style="    font-weight: 600;">{{ item.qty }}</label> 
-                    <input nbInput type="number" min="0" style="width: 50%;"  [(ngModel)]="item.qty">
+                    <input nbInput type="number"  *ngIf="fieldTitle != 'View Order'" min="0" style="width: 50%;"  [(ngModel)]="item.qty">
                  </div>
                 </div>
                 <div class="col-6 col-md-4">
@@ -94,7 +160,7 @@
               </div>
             
               <ngx-mixed-form  (childButtonEvent)="receivedMessageHandler($event)"
-              (onInitEvent)="receiveAutoMsgHandler($event)"  *ngIf=" item.productName == 'Mixed Gas'"></ngx-mixed-form>
+              (onInitEvent)="receiveAutoMsgHandler($event)"  *ngIf="item.productName == 'Mixed Gas'"></ngx-mixed-form>
           </div>
        
         
@@ -116,9 +182,9 @@
                  </div>
                 </div>
                 <div class="col-6 col-md-3">
-                  <div> 
+                  <div  *ngIf="fieldTitle != 'View Order'"> 
                     <button nbButton status="success" (click)="save()" style="margin-right: 10px;"  type="submit" >Submit</button>
-                    <button type="button" class="cancel" nbButton status="danger" (click)="back()">Cancel</button>
+                    <button type="button" class="cancel" nbButton status="danger" (click)="cancelData()">Cancel</button>
                 </div>
                 </div>
               </div>

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

@@ -52,3 +52,11 @@ input[type=number]::-webkit-outer-spin-button {
     appearance: none;
     margin: 0; 
 }
+
+option:disabled {
+  background: #000;
+}
+
+nb-select.appearance-outline.status-basic .select-button[disabled] {
+  background: #000 !important;
+}

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

@@ -21,7 +21,7 @@
                     </div>
                     <div class="col-6 col-md-6">
                       <div  style="    font-weight: 600;">
-                     Specification
+                      
                      </div>
                     </div>
                   </div>

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

@@ -21,9 +21,9 @@ export class OrderSummaryFormComponent implements OnInit {
       console.log('booked', res);
 
       if(res){
- this. setData =   res.data
+ this. setData =   res
-
 
+ this.getAnswerProduct()
       }
   
     })
@@ -38,13 +38,14 @@ export class OrderSummaryFormComponent implements OnInit {
   }
 
   save(){
-    console.log(this.data)
+    console.log(this.data,this.setData)
    let cus =  this.data.customerData['CusDetails.id']
  let role = localStorage.getItem('user_role')
  let param;
  if(this.setData != undefined){
  if(this.setData.hasOwnProperty('id')){
-   param ={id:this.setData.id,customerId:cus,status:'ordered' , product: this.data.product ,createdBy:role }
+  cus = this.setData['OrderDetails.CusDetails.id']
+   param ={id:this.setData.id,customerId:cus,status:'ordered' , product: this.data.product ,createdBy:role ,  orderId:this.setData.orderId }
  }else{
   param ={customerId:cus,status:'ordered' , product: this.data.product ,createdBy:role }
  }
@@ -55,7 +56,7 @@ export class OrderSummaryFormComponent implements OnInit {
    
   
  
-
+console.log(param)
     
     this._api.CreateOrder (param).subscribe(res => {
       if (res.status == 200) {
@@ -71,4 +72,9 @@ console.log(res)
     console.log( this.windowService)
     this.windowRef.close();
   }
+
+
+  getAnswerProduct(){
+
+  }
 }

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

@@ -2,39 +2,255 @@
     <nb-card-header>
    
       <div class="row show-grid">
-        <div class="col-md-6">
+        <div class="col-md-3">
           <div>   <nb-icon icon="shopping-bag-outline"></nb-icon>   Order Management</div>
+       
         </div>
-        <div class="col-md-6">
+
+        <div class="col-md-3">
           <div style="    text-align: end;"> 
             <!-- <button  (click)="Assign()" nbButton status="primary" hero>
               Assign Driver
               </button> -->
-            <!-- <button  (click)="addOrder()" nbButton status="primary" hero>
+              <input  nbInput class="fx-date-range" type="text" 
-           Add Order
+              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>
+        <div class="col-md-4">
+          <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-2">
+          <div style="    text-align: end;"> 
+            <!-- <button  (click)="Assign()" nbButton status="primary" hero>
+              Assign Driver
+              </button> -->
+            <button  (click)="onCreateConfirm()" nbButton status="primary" hero>
+           Add Order
+          </button>
         </div>
         </div>
       </div>
     </nb-card-header>
   
     <nb-card-body>
-        <ng2-smart-table [settings]="settings"   (userRowSelect)="onUserRowSelect($event)" [source]="source" (edit)="onSaveConfirm($event)"
+        <!-- <ng2-smart-table [settings]="settings"   (userRowSelect)="onUserRowSelect($event)" [source]="source" (edit)="onSaveConfirm($event)"
         (create)="onCreateConfirm($event)" (delete)="onDeleteConfirm($event)">
-        </ng2-smart-table>
+        </ng2-smart-table> -->
+
+        <ng-data-table  
+        [id]="'i'" 
+        [items]=orders
+        [minContentWidth]="600"
+        [pageable]="true"  
+        [showColumnSelector]="true" 
+        [showHeader]="false"
+        [selectMode]="'multi'" 
+        [minContentHeight]="350" 
+        [selectMode]="'multi'"
+    
+        [limit]="25"
+        >  
+    
+        <ng-data-table-column 
+        [field]="'role'"
+        [sortable]="false"
+        [title]="''"
+        [filterable]="false"
+        [width]="2"> 
+  
+     
+  
+  
+  
+  
+  
+  
+     
+        <ng-template #ngDataTableCell  let-row="row">
+        <td  style="text-align: center;" >
+          <div class="align-center" style="display: flex; align-items: center;text-align: center;">
+           
+          
+           <nb-checkbox  *ngIf="isChecked == true" [(ngModel)]="row.item.selected"   [checked]="row.item.selected == true" (click)="selectSingleRow(row.item)" status="primary" ></nb-checkbox>
+           <nb-checkbox *ngIf="isChecked == false"  [(ngModel)]="row.item.selected"  [checked]="row.item.selected == true"  (click)="selectSingleRow(row.item)"  status="primary" ></nb-checkbox>
+            
+          </div>
+        
+        </td> 
+        </ng-template>
+      </ng-data-table-column> 
+        <ng-data-table-column 
+        [field]="'index'"
+        [sortable]="false"
+        [title]="'ID'"
+        [filterable]="false"
+        [width]="2"> 
+  
+        </ng-data-table-column> 
+  
+        <ng-data-table-column 
+        [field]="'orderId'"
+        [sortable]="false"
+        [title]="'Order ID'"
+        [filterable]="false"
+        [width]="4"> 
+  
+        </ng-data-table-column> 
+        <ng-data-table-column 
+        [field]="'customer'"
+        [sortable]="false"
+        [title]="'Customer Name'"
+        [filterable]="false"
+        [width]="4"> 
+  
+        </ng-data-table-column> 
+        <ng-data-table-column 
+        [field]="'address'"
+        [sortable]="false"
+        [title]="'Address'"
+        [filterable]="false"
+        [width]="6"> 
+  
+        </ng-data-table-column> 
+        <ng-data-table-column 
+        [field]="'orderDate'"
+        [sortable]="false"
+        [title]="'Order Date'"
+        [filterable]="false"
+        [width]="4"> 
+
+        <ng-template #ngDataTableCell  let-row="row">
+          <td  >
+            <div   style="display: flex; align-items: center;">
+         
+              <span    class="checkTxt"    >
+                {{row.item.updatedAt | date :'dd/MM/yy'}} 
+                 </span>
+            </div>
+          
+          </td> 
+          </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  >
+          <div   style="display: flex; align-items: center;">
+            <span  [ngStyle] = "{'color':row.item.status =='Out For Delivery'?'blue':'' }" class="checkTxt"  *ngIf="row.item.status =='Out For Delivery'" >
+           {{row.item.status}} <p  class="checkTxt" >({{row.item['UserDetails.userName']}})</p>
+            </span>
+            <span  [ngStyle] = "{'color':row.item.status =='ordered'?'#1f1dc9f5':row.item.status =='Delivered' ?'green':'red' }"  class="checkTxt"  *ngIf="row.item.status !='Out For Delivery'" >
+              {{row.item.status}} 
+               </span>
+          </div>
+        
+        </td> 
+        </ng-template>
+      </ng-data-table-column> 
+      
+        <!-- <ng-data-table-column 
+        [field]="'reason'"
+        [sortable]="false"
+        [title]="'Reason'"
+        [filterable]="false"
+        [width]="4"> 
+  
+        </ng-data-table-column>  -->
+        
+      
+        <ng-data-table-column 
+        [field]="'role'"
+        [sortable]="false"
+        [title]="'view'"
+        [filterable]="false"
+        [width]="3"> 
+  
+     
+  
+  
+  
+  
+  
+  
+     
+        <ng-template #ngDataTableCell  let-row="row">
+        <td  >
+          <!-- <div class="align-center" style="display: flex; align-items: center;">
+            <span *ngIf="row.item.status !='Out For Delivery' && row.item.status !='Cancelled'"  class="check"   (click)="viewData(row.item)">
+              <i class="nb-list"  ></i>
+            </span>
+
+            <span *ngIf="row.item.status !='Out For Delivery' && row.item.status !='Cancelled'"  class="check"   (click)="onSaveConfirm(row.item)">
+              <i class="nb-edit"  ></i>
+            </span>
+            
+            <span  *ngIf="row.item.status !='Out For Delivery'  && row.item.status !='Cancelled'" class="check" (click)="onDeleteConfirm(row.item)">
+              <i class="nb-trash" ></i>
+            </span>
+          </div> -->
+          <div   style="align-items: center;">
+            <nb-icon icon="eye-outline" title="View"  style="color: green;" (click)="onViewConfirm(row.item)"></nb-icon>  
+            <!-- <nb-icon icon="edit-outline" *ngIf="row.item.status =='ordered'" style="margin-left: 1rem;" (click)="onSaveConfirm(row.item)"></nb-icon>   -->
+            <nb-icon icon="close-square-outline"  title="Cancel" *ngIf="row.item.status !='Cancelled'" style="margin-left: 1rem;color: red;" (click)="onDeleteConfirm(row.item)"></nb-icon>  
+            </div>
+ 
+           
+        
+        </td> 
+        </ng-template>
+      </ng-data-table-column> 
+
+        </ng-data-table>
+
     </nb-card-body>
 
 
   <nb-card-footer>
     <form class="form" [formGroup]="driverForm" (ngSubmit)="onSubmit()">
     <div class="row show-grid">
-      <div class="col-md-4">
+      <div class="col-md-2">
-        <div> 
+        <div style="text-align: center;"> 
-           
            
+          <nb-checkbox [(ngModel)]="isChecked"  (click)="selectall()"  status="primary" >Select All</nb-checkbox>
           </div>
       </div>
-      <div class="col-md-4">
+      <div class="col-md-3">
         <div> 
            
           <!-- <label for="subject">Drivers:</label> <br /> -->
@@ -48,13 +264,27 @@
         </nb-select>
           </div>
       </div>
-      <div class="col-md-4">
+      <div class="col-md-2">
-        <div style="    text-align: end;"> 
+        <div  > 
           <button   [disabled]="!driverForm.valid"  type="submit" nbButton status="primary" hero>
             Assign Orders
             </button>
       </div>
       </div>
+
+
+      <div class="col-md-5">
+        <div  style="text-align: end;"> 
+          <nb-select selected=""     style="width: 100% !important;"   >
+            <nb-option  value="">Change Status</nb-option>
+       
+          <nb-option value="In Progress" (click)="onSubmit2()" >In Progresss</nb-option>
+          
+        
+          
+        </nb-select>
+      </div>
+      </div>
     </div>
   </form>
   </nb-card-footer>

src/app/pages/order/order.component.scss

@@ -21,3 +21,152 @@
    ::ng-deep  .desired-value-row{
 color: red !important;
    }
+
+   .align-left{
+      text-align: left !important;
+    }
+    .align-center{
+      text-align: center !important;
+    }
+    .align-right{
+     text-align: right !important;
+    }
+    ::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-even td {
+      background: white;
+    //padding: 10px; 
+    font-family: var(--smart-table-font-family);
+    font-size: var(--smart-table-font-size);
+    font-weight: var(--smart-table-font-weight);
+    line-height: var(--smart-table-line-height);
+    color: var(--smart-table-fg);
+    }
+    ::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table thead > tr .ng-data-table-column-header .ng-data-table-column-header-label:first-child {
+     font-size: 18px;
+   padding: 10px;
+      color: #1e6bb8;
+     text-decoration: none;
+     font-family: var(--smart-table-header-font-family);
+     font-size: var(--smart-table-header-font-size);
+     font-weight: var(--smart-table-header-font-weight);
+     line-height: var(--smart-table-header-line-height);
+    }
+    ::ng-deep  :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-odd td {
+   // padding: 10px;
+    font-family: var(--smart-table-font-family);
+    font-size: var(--smart-table-font-size);
+    font-weight: var(--smart-table-font-weight);
+    line-height: var(--smart-table-line-height);
+    color: var(--smart-table-fg);
+    }
+    ::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table-content-container .ng-data-table-content {
+     min-height: 100px !important;
+     font-size: 18px; 
+    }
+    ::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table thead > tr:last-child th {
+    
+     background-color:#fff;    font-family: var(--smart-table-font-family);
+     font-size: var(--smart-table-font-size);
+     font-weight: var(--smart-table-font-weight);
+     line-height: var(--smart-table-line-height);
+     color: var(--smart-table-fg);
+    
+    }
+    tr{
+      color: white;
+      background-color:#fff;
+    }
+    th{
+     color: white;
+     background-color:#fff;
+    }
+    
+     * {
+        box-sizing: border-box;
+      }
+      .row {
+        display: flex;
+        background-color:#fff;
+      }
+      
+      /* Create two equal columns that sits next to each other */
+      .column {
+        flex: 50%;
+        // padding: 10px;
+        // height: 300px; /* Should be removed. Only for demonstration */
+      }
+      ::ng-deep .mat-select-value{    
+        color: white!important;  }
+      .column1 {
+         width: 210px;
+        text-align: center;
+        text-overflow: ellipsis;
+        padding: 30px;
+        //height: 300px; /* Should be removed. Only for demonstration */
+      }
+    
+     
+      .add {
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         font-size: 1.75rem !important;
+         padding: var(--smart-table-filter-padding);
+         border-color: var(--smart-table-add-button-border-color);
+         background-color: var(--smart-table-add-button-background-color);
+         color: var(--smart-table-add-button-text-color);
+         border-radius: 0.375rem;
+    
+         font-family: var(--smart-table-header-font-family);
+         font-size: var(--smart-table-header-font-size);
+         font-weight: var(--smart-table-header-font-weight);
+         line-height: var(--smart-table-header-line-height);
+     }
+     span{
+    
+       color: #000;
+     }
+    
+    span:hover{
+    
+       color: #1e6bb8;
+     }
+     a[disabled="disabled"] {
+       pointer-events: none;
+    }
+     .check{
+       display: flex; align-items: center;     text-decoration: none;
+               height: 100%; width: 100%; font-size: 2rem!important; 
+     }
+
+     .checkTxt{
+      //background: white;
+     // padding: 10px;
+      font-family: var(--smart-table-font-family);
+      font-size: var(--smart-table-font-size);
+      font-weight: var(--smart-table-font-weight);
+      line-height: var(--smart-table-line-height);
+      color: var(--smart-table-fg);
+      text-transform: capitalize;
+     }
+    
+
+     ::ng-deep .md-drppicker .btn, .md-drppicker .btn:focus, .md-drppicker .btn:hover {
+      background-color: #4caf50 !important;
+      margin-left: 10px !important;
+  }
+  
+  ::ng-deep .md-drppicker .btn.btn-default{
+      color: #000 !important;
+      background-color: #dcdcdc !important;
+  }
+  
+  ::ng-deep .md-drppicker td.active{
+      background-color: #1f7f6f !important; 
+  }
+  ::ng-deep .md-drppicker .ranges ul li button.active {
+      background-color: #1f7f6f !important;
+  }
+  ::ng-deep .md-drppicker.double {
+      width: 640px !important; 
+  }
+  

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

@@ -1,10 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
- 
+import * as moment from 'moment';
 import { LocalDataSource } from 'ng2-smart-table';
 import { SmartTableData } from '../../@core/data/smart-table';
 import { PageapiService } from '../pageapi.service';
-import { NbToastrService, NbWindowControlButtonsConfig, NbWindowRef, NbWindowService } from '@nebular/theme';
+import { NbDialogService, NbToastrService, NbWindowControlButtonsConfig, NbWindowRef, NbWindowService } from '@nebular/theme';
  
 
 
@@ -20,14 +20,20 @@ import { Router } from '@angular/router';
 import { CancelFormComponent } from './cancel-form/cancel-form.component';
 import { AssignFormComponent } from './assign-form/assign-form.component';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { ViewDetailsComponent } from './view-details/view-details.component';
+interface Item {
+  index: number;
  
+}
 @Component({
   selector: 'ngx-order',
   templateUrl: './order.component.html',
   styleUrls: ['./order.component.scss']
 })
-export class OrderComponent  {
 
+export class OrderComponent  {
+  orders:Item[] =[];
+ isChecked: boolean = false;
   settings:any =[];
   source: LocalDataSource = new LocalDataSource();
   minimize = false;
@@ -45,7 +51,23 @@ export class OrderComponent  {
   drivers:any=[];
   status: NbComponentStatus = 'primary';
   driverForm:any =[];
-  constructor(private domSanitizer: DomSanitizer, private router:Router,private toastrService: NbToastrService,private service: SmartTableData,public _api:PageapiService,private windowService: NbWindowService) {
+  singleRow:any =[];
+
+  filteredItems: any[];
+  searchTerm: string;
+  ranges: any = {
+    'Today': [moment(), moment()],
+    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+    'This Month': [moment().startOf('month'), moment().endOf('month')],
+    'Last Month': [
+      moment().subtract(1, 'month').startOf('month'),
+      moment().subtract(1, 'month').endOf('month')
+    ]
+  };
+  selectedDateRange: {startDate: moment.Moment, endDate: moment.Moment};
+  constructor(private dialogService: NbDialogService,private domSanitizer: DomSanitizer, private router:Router,private toastrService: NbToastrService,private service: SmartTableData,public _api:PageapiService,private windowService: NbWindowService) {
     const data = this.service.getData();
 
     this.settings = {
@@ -153,7 +175,7 @@ export class OrderComponent  {
 
   onDeleteConfirm(event): void {
     console.log(event)
-    let passData = event.data
+    let passData = event
 
     const buttonsConfig: NbWindowControlButtonsConfig = {
       minimize: this.minimize,
@@ -161,7 +183,7 @@ export class OrderComponent  {
       fullScreen: this.fullScreen,
       close: this.close,
     };
-    const windowRef: NbWindowRef =  this.windowService.open(CancelFormComponent, { title: `Cancel Product`, context: event.data
+    const windowRef: NbWindowRef =  this.windowService.open(CancelFormComponent, { title: `Cancel Product`, context: event
     , buttons: buttonsConfig  });
    
 
@@ -186,9 +208,9 @@ export class OrderComponent  {
   getFuelColor(w){
     console.log(w)
   }
-  onCreateConfirm(event) {
+  onCreateConfirm() {
     console.log("Create Event In Console")
-    console.log(event);
+   
     const buttonsConfig: NbWindowControlButtonsConfig = {
       minimize: this.minimize,
       maximize: this.maximize,
@@ -216,14 +238,40 @@ export class OrderComponent  {
     console.log("add")
     this._api.orderDetails.next(event)
 
-  
+    localStorage.setItem('viewOrder','0')
   
     this.router.navigate(['/pages/order/add']) 
   }
 
+  onViewConfirm(event) {
+    console.log("Edit Event In Console")
+    console.log(event);
+  
+    const buttonsConfig: NbWindowControlButtonsConfig = {
+      minimize: this.minimize,
+      maximize: this.maximize,
+      fullScreen: this.fullScreen,
+      close: this.close,
+    };
+    console.log("add")
+    this._api.orderDetails.next(event)
+
+    localStorage.setItem('viewOrder','1')
+  
+    this.router.navigate(['/pages/order/add']) 
+  }
 
   getorderlistApi(){
-    let param ={}
+   
+    let element ={
+      "startDate": (moment().subtract(6, 'days'))['_d'],
+      "endDate":  moment()['_d']
+  }
+  this.selectedDateRange = element
+ let from = (moment().subtract(6, 'days'))['_d']
+    let param = {fromDate:from
+    ,toDate: moment()['_d']}
+    console.log(param)
     this._api.getOrders(param).subscribe(res => {
       console.log(res)
       if(res.status == 200){
@@ -234,15 +282,55 @@ export class OrderComponent  {
       });
        passData.forEach((element:any, index) => {
         element.index = index       +1  
+        element. selected =false
+        element. selectedval =0
+        element.customer = element['OrderDetails.CusDetails.cusName']
+
+        element.address = element['OrderDetails.CusDetails.address_1']+","+element['OrderDetails.CusDetails.city']+","+element['OrderDetails.CusDetails.pincode']
+        element.productName = element['ProductDetails.productName']
         
       });
+      this.orders = passData
       //  console.log(data)
      this.source.load(passData);
       }
     })
   }
 
+  dateWiseFilter() {
+    console.log(this.selectedDateRange)
+   let param = {fromDate :this.selectedDateRange.startDate['$d']
+    ,toDate:this.selectedDateRange.endDate['$d']}
 
+    this._api.getOrders(param).subscribe(res => {
+      console.log(res)
+      if(res.status == 200){
+
+       let passData =  res.data
+       passData.sort((a: any, b: any) => {
+        return b.id - a.id;
+      });
+       passData.forEach((element:any, index) => {
+        element.index = index       +1  
+        element. selected =false
+        element. selectedval =0
+        element.customer = element['OrderDetails.CusDetails.cusName']
+
+        element.address = element['OrderDetails.CusDetails.address_1']+","+element['OrderDetails.CusDetails.city']+","+element['OrderDetails.CusDetails.pincode']
+        element.productName = element['ProductDetails.productName']
+        element. orderDate = element.createdAt
+      });
+     // this.orders =[];
+      this.orders = passData
+      //  console.log(data)
+     this.source.load(passData);
+      }else{
+
+      //  this.orders =[];
+      }
+    })
+
+  }
   private showToast(type: NbComponentStatus, title: string, body: string) {
     const config = {
       status: type,
@@ -373,4 +461,139 @@ onSubmit(){
   }
 }
 
+
+onSubmit2(){
+  if(this.selectedRows.length>0){
+
+ 
+  console.log( this.selectedRows , this.driverForm.value)
+  let tmp=[];
+  this.selectedRows.forEach(element => {
+    tmp.push({id:element.id  ,  status:'In Progress' })
+    
+  });
+
+ let  param ={driver:tmp}
+  
+   
+    
+   
+  
+ 
+     
+     this._api.CreateOrder (param).subscribe(res => {
+       if (res.status == 200) {
+ console.log(res)
+ this.showToast('success', 'Data Changed Successfully', 'Orders Inprogress Completed..!');
+ this.getorderlistApi();
+       }else{
+        this.showToast('warning', 'Somthing is Wrong...!', 'Orders Inprogress Failed..!');
+       }
+     })
+ }else{
+    this.showToast('warning', 'Somthing is Wrong...!', 'Please Select Orders..!');
+  }
+}
+
+updateAllComplete(pa,s,d){
+
+}
+
+selectall(){
+  if(this.isChecked == false){
+    this.isChecked = true
+  }else{
+    this.isChecked = false
+  }
+  console.log(this.isChecked)
+
+  this.orders.forEach((element:any, index) => {
+ 
+    element. selected = this.isChecked
+
+  })
+
+  if(this.isChecked == true){
+    this.selectedRows = this.orders
+  }
+
+ 
+}
+selectSingleRow(data){
+  console.log(data)
+ // this.singleRow.push(data)
+
+  if(data.selected == false){
+    data.selectedval = true
+  }else{
+    data.selectedval = false
+  }
+  this.selectedRows = this.orders.filter((arr:any)=>{return arr.selectedval == true})  
+  console.log(  this.orders, this.selectedRows)
+
+}
+handleCheckboxChange(event: boolean) {
+  console.log(event);
+
+  if(this.isChecked == false){
+    this.isChecked = true
+  }else{
+    this.isChecked = false
+  }
+  
+  // Output the current value of the checkbox
+}
+
+
+viewData(param:any){
+  console.log(param)
+  let data:any = {details:param,action:'Edit',title:'Edit Customer'}
+  const dialogRef = this.dialogService.open(ViewDetailsComponent, {
+    hasBackdrop: true,
+    dialogClass: 'custom-dialog-class', // Add your custom CSS class here
+    context: data
+  });
+
+  dialogRef.onClose.subscribe((result) => {
+   // Execute custom logic when the dialog is closed
+   console.log(result);       
+   if(result == 1){
+    // this.getEntityDetails()  
+    //this.getuserlistApi();
+   // this.showToast('success', 'Data Changed Successfully', 'Edit Customer Data Completed..!');
+   //  this.toastrService.success('Entity Added Successfully','Entity');
+      console.log('Window closed 123');
+   }else if(result == 0){
+
+    //this.showToast('warning', 'Somthing is Wrong...!', 'Edit Customer Data Failed..!');
+    // this.toastrService.success('Somthing is Wrong...!', 'Add Entity Failed..!');
+   }
+  });
+}
+
+filterItems() {
+ console.log(  this.searchTerm)
+
+  if(  this.searchTerm !=''){
+
+
+  this.filteredItems = this.orders.filter(item =>
+    Object.values(item).some(value => {
+      if (typeof value === 'string') {
+        return value.toLowerCase().includes(this.searchTerm.toLowerCase());
+      }
+      return false;
+    })
+  );
+  this.orders = this.filteredItems
+}else{
+  console.log( 'fhjsgsajdhgasksjgfcckjsdfgckjsdhfk')  
+
+  this.getorderlistApi()
+}
+
+
+
+console.log( this.filteredItems)
+}
 }

src/app/pages/order/view-details/view-details.component.html

@@ -0,0 +1,31 @@
+<nb-card style="width: 182% ;">
+    <nb-card-header><span style="color: #3556a6;">View List</span> </nb-card-header>
+    <nb-card-body>
+        <div class="row show-grid">
+            <div class="col-md-6 col-sm-6"><h6>Product Name</h6></div>
+            <div class="col-md-6 col-sm-6"><h6>Qty</h6></div>
+        </div>
+        <div class="row show-grid" *ngFor="let product of products">
+            <div class="col-md-6 col-sm-6">{{ product.ProductDetails[0].productName }} </div>
+            <div class="col-md-6 col-sm-6">{{ product.qty }}</div>
+        </div>
+        <!-- <ul>
+            <li class="product-item">
+              <div class="product-name">Product Name </div>
+              <div class="product-qty">Qty </div>
+            </li>
+          </ul>
+        <ul>
+            <li *ngFor="let product of products" class="product-item">
+              <div class="product-name">  {{ product.ProductDetails[0].productName }} </div>
+              <div class="product-qty">{{ product.qty }}</div>
+            </li>
+          </ul> -->
+       
+
+    </nb-card-body>
+    <nb-card-footer>
+        <button class="cancel" nbButton status="danger" (click)="close()" type="button">Close</button>
+        <!-- <button nbButton status="success" type="button">Submit</button> -->
+        </nb-card-footer>
+    </nb-card>

src/app/pages/order/view-details/view-details.component.scss

@@ -0,0 +1,38 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  input {
+    width: 100%;
+  }
+
+  .cancel {
+    margin-right: 1rem;
+  }
+}
+.custom-dialog-class {
+    width: 100%; /* Set the desired width here */
+    height: 300px; /* Set the desired height here */
+  }
+  .show-grid{
+    margin-bottom: 2rem;
+  }
+
+
+  .product-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  
+  .product-name {
+    flex: 1;
+  }
+  
+  .product-qty {
+    margin-left: 10px;
+  }
+ 
+
+  nb-card-footer{
+    text-align: end;
+  }

src/app/pages/order/view-details/view-details.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewDetailsComponent } from './view-details.component';
+
+describe('ViewDetailsComponent', () => {
+  let component: ViewDetailsComponent;
+  let fixture: ComponentFixture<ViewDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ViewDetailsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ViewDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/order/view-details/view-details.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { NbDialogRef } from '@nebular/theme';
+import { PageapiService } from '../../pageapi.service';
+
+@Component({
+  selector: 'ngx-view-details',
+  templateUrl: './view-details.component.html',
+  styleUrls: ['./view-details.component.scss']
+})
+export class ViewDetailsComponent implements OnInit {
+  products:any =[];
+  constructor(private dialogRef: NbDialogRef<ViewDetailsComponent>,public _api:PageapiService) { }
+
+  ngOnInit(): void {
+
+    console.log('dialogRef', this.dialogRef.componentRef.instance);
+    let details:any = this.dialogRef.componentRef.instance
+
+    
+
+    let  param ={orderId:details.details.orderId}
+  
+   
+    
+   
+  
+ 
+     
+    this._api.getProductList (param).subscribe(res => {
+      if (res.status == 200) {
+
+        this.products = res.data
+
+      }
+    })
+  }
+
+  close(){
+    this.dialogRef.close(0)
+  }
+
+}

src/app/pages/pageapi.service.ts

@@ -12,6 +12,11 @@ import { environment } from '../../environments/environment';
 export class PageapiService {
   public orderDetails:BehaviorSubject<any> = new BehaviorSubject<any>([]);
 public orderDetails_observable$ = this.orderDetails.asObservable();
+
+
+public mixDetails:BehaviorSubject<any> = new BehaviorSubject<any>([]);
+public mixDetails_observable$ = this.mixDetails.asObservable();
+
   private apiUrl = environment.apiEndpoint;
   constructor(private _http: HttpClient) { } 
 
@@ -20,6 +25,54 @@ public orderDetails_observable$ = this.orderDetails.asObservable();
     return this._http.post<any>(this.apiUrl + "getusers",param)
    
   }
+  getSmtpList(param): Observable<any> {
+    //console.log(params.email)
+    return this._http.post<any>(this.apiUrl + "getSmtpList",param)
+   
+  }
+
+  
+
+  getDriverSummaryAdminList(param): Observable<any> {
+    //console.log(params.email)
+    return this._http.post<any>(this.apiUrl + "getDriverSummaryAdminList",param)
+   
+  }
+  getDriverSheet(param): Observable<any> {
+    //console.log(params.email)
+    return this._http.post<any>(this.apiUrl + "getDriverSheet",param)
+   
+  }
+
+
+  
+  
+  getReturnDriverSummaryListadmin(param): Observable<any> {
+    //console.log(params.email)
+    return this._http.post<any>(this.apiUrl + "getReturnDriverSummaryListadmin",param)
+   
+  }
+  getProductDeliverysheet(param): Observable<any> {
+    //console.log(params.email)
+    return this._http.post<any>(this.apiUrl + "getProductDeliverysheet",param)
+   
+  }
+
+  
+
+  getProductListSummary(param): Observable<any> {
+    //console.log(params.email)
+    return this._http.post<any>(this.apiUrl + "getProductListSummary",param)
+   
+  }
+  getReturnProductListSummary(param): Observable<any> {
+    //console.log(params.email)
+    return this._http.post<any>(this.apiUrl + "getReturnProductListSummary",param)
+   
+  }
+  
+  
+  
   getProducts(param): Observable<any> {
     //console.log(params.email)
     return this._http.post<any>(this.apiUrl + "getProducts",param)
@@ -39,6 +92,12 @@ public orderDetails_observable$ = this.orderDetails.asObservable();
     return this._http.post(this.apiUrl + 'CreateCustomers', addParams)
      
   }
+  CreateSmtpDetails(addParams): Observable<any> {
+    return this._http.post(this.apiUrl + 'CreateSmtpDetails', addParams)
+     
+  }
+
+  
 
   CreateProductDetails(addParams): Observable<any> {
     return this._http.post(this.apiUrl + 'CreateProducts', addParams)
@@ -49,6 +108,11 @@ public orderDetails_observable$ = this.orderDetails.asObservable();
      
   }
 
+  getProductList(addParams): Observable<any> {
+    return this._http.post(this.apiUrl + 'getProductList', addParams)
+     
+  }
+  
   
 }
 

src/app/pages/pages-menu.ts

@@ -10,9 +10,39 @@ export const MENU_ITEMS: NbMenuItem[] = [
   {
     title: 'Orders',
     icon: 'shopping-bag-outline',
+       children: [
+      {
+        title: 'Order List',
         link: '/pages/order',
-    home: true,
       },
+      {
+        title: 'Delivery Summary',
+        link: '/pages/summary',
+      },
+      {
+        title: 'Delivery Sheet',
+        link: '/pages/delivery-sheet',
+      },
+      
+    ],
+    // link: '/pages/order',
+    // home: true,
+  },
+  // {
+  //   title: 'Summary',
+  //   icon: 'grid-outline',
+  //   link: '/pages/summary',
+  //   home: true,
+  // },
+
+  // {
+  //   title: 'delivery',
+  //   icon: 'grid-outline',
+  //   link: '/pages/delivery-sheet',
+  //   home: true,
+  // },
+
+
   {
     title: 'Products',
     icon: 'shopping-cart-outline',
@@ -46,7 +76,7 @@ export const MENU_ITEMS: NbMenuItem[] = [
   {
     title: 'Email',
     icon: 'email-outline',
-    link: '/pages/dashboard',
+    link: '/pages/email',
     home: true,
   },
   {

src/app/pages/pages-routing.module.ts

@@ -11,6 +11,10 @@ import { AuthGuard } from './_guard/auth.guard';
 import { OrderComponent } from './order/order.component';
 import { OrderFormComponent } from './order/order-form/order-form.component';
 import { ProfileComponent } from './profile/profile.component';
+import { SummaryListComponent } from './summary-list/summary-list.component';
+import { SummaryDetailsComponent } from './summary-list/summary-details/summary-details.component';
+import { EmailComponent } from './email/email.component';
+import { DriverySheetComponent } from './drivery-sheet/drivery-sheet.component';
 
 const routes: Routes = [{
   path: '',
@@ -43,6 +47,10 @@ const routes: Routes = [{
       path: 'order',
       component: OrderComponent,
     },
+    {
+      path: 'email',
+      component: EmailComponent,
+    },
     {
       path: 'profile',
       component: ProfileComponent,
@@ -50,7 +58,19 @@ const routes: Routes = [{
     {
       path: 'order/add',
       component: OrderFormComponent,
-    },
+    },{
+      path: 'summary',
+      component:SummaryListComponent
+    },{
+      path: 'summary/:orderId',
+      component:SummaryDetailsComponent
+      
+    },{
+
+      path: 'delivery-sheet',
+      component:DriverySheetComponent
+      
+    }
 
     
  

src/app/pages/pages.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 import { MENU_ITEMS } from './pages-menu';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'ngx-pages',
@@ -14,5 +15,26 @@ import { MENU_ITEMS } from './pages-menu';
 })
 export class PagesComponent {
 
+ 
+
   menu = MENU_ITEMS;
+
+  constructor(private router: Router){
+    let role = localStorage.getItem('user_role')
+    console.log(role)
+
+    if(role == "FRONT-OFFICE"){
+      this.menu = this.menu.filter(arr=>{return arr.title != 'Users'}) 
+    }
+
+  
+    console.log(this.menu)
+   
+            this.router.navigate(['/pages/dashboard']);
+          
+
+     
+         
+            
+  }
 }

src/app/pages/pages.module.ts

@@ -1,5 +1,5 @@
 import { NgModule,NO_ERRORS_SCHEMA ,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { NbDialogModule, NbListModule, NbMenuModule } from '@nebular/theme';
+import { NbDialogModule, NbListModule, NbMenuModule, NbToggleModule } from '@nebular/theme';
 
 import { ThemeModule } from '../@theme/theme.module';
 import { PagesComponent } from './pages.component';
@@ -7,6 +7,7 @@ import { DashboardModule } from './dashboard/dashboard.module';
 import { PagesRoutingModule } from './pages-routing.module';
 import { LoginComponent } from './auth/login/login.component';
 import { FormsModule as ngFormsModule } from '@angular/forms';
+import { DataTableModule } from 'ornamentum';
 import { FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {
   NbActionsModule,
@@ -38,6 +39,15 @@ import { AssignFormComponent } from './order/assign-form/assign-form.component';
 import { ProfileComponent } from './profile/profile.component';
 import { MixedFormComponent } from './order/mixed-form/mixed-form.component';
 import { AuthComponent } from './auth/auth/auth.component';
+import { ForgotPasswordComponent } from './auth/forgot-password/forgot-password.component';
+import { OtpComponent } from './auth/otp/otp.component';
+import { ResetPasswordComponent } from './auth/reset-password/reset-password.component';
+import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
+import { ViewDetailsComponent } from './order/view-details/view-details.component';
+import { SummaryListComponent } from './summary-list/summary-list.component';
+import { SummaryDetailsComponent } from './summary-list/summary-details/summary-details.component';
+import { EmailComponent } from './email/email.component';
+import { DriverySheetComponent } from './drivery-sheet/drivery-sheet.component';
 @NgModule({
   imports: [
     PagesRoutingModule,
@@ -62,8 +72,8 @@ import { AuthComponent } from './auth/auth/auth.component';
     NbIconModule,
     NbInputModule,
     ThemeModule,
-    NbListModule,
+    NbListModule,NbToggleModule,
-    NbDialogModule.forChild(),
+    NbDialogModule.forChild(),   DataTableModule.forRoot(),   NgxDaterangepickerMd.forRoot(),
     Ng2SmartTableModule,
   ],
   declarations: [
@@ -84,7 +94,7 @@ import { AuthComponent } from './auth/auth/auth.component';
     AssignFormComponent,
     ProfileComponent,
     MixedFormComponent,
-    AuthComponent,
+    AuthComponent,ForgotPasswordComponent, OtpComponent,ResetPasswordComponent, ViewDetailsComponent, SummaryListComponent, SummaryDetailsComponent, EmailComponent, DriverySheetComponent,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA],
 })

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

@@ -13,7 +13,7 @@
       
        
       </ng-container>
-      <label for="subject">Product Type:</label>
+      <label  class="text-label" for="subject">Product Type:</label>
       <!-- <input  formControlName="role" nbInput id="role" type="text"> -->
       <nb-select selected="ADMIN"  formControlName="productType" >
           <nb-option value="Gas">Gas</nb-option>
@@ -25,7 +25,7 @@
           
            
           </ng-container>
-        <label for="subject">Product Name:</label>
+        <label class="text-label" for="subject">Product Name:</label>
         <input  formControlName="productName" nbInput id="productName" type="text"  [status]="userForm.get('productName').invalid && userForm.get('productName').touched? 'danger' : 'basic'">
         <ng-container nbInputErrorMessage>
           <div style="color:#7c0e0e" *ngIf="userForm.get('productName').hasError('required') && userForm.get('productName').touched">Product Name is required.</div>
@@ -33,12 +33,20 @@
          
         </ng-container>
 
-        <label for="subject">Product Description:</label>
+        <label  class="text-label" for="subject">Product Description:</label>
         <input  formControlName="description" nbInput id="description" type="text"  [status]="userForm.get('description').invalid && userForm.get('productName').touched? 'danger' : 'basic'">
         <ng-container nbInputErrorMessage>
           <div style="color:#7c0e0e" *ngIf="userForm.get('description').hasError('required') && userForm.get('description').touched">Description is required.</div>
         
          
+        </ng-container>
+
+        <label  class="text-label" for="subject">Stock Keeping Unit ID:</label>
+        <input  formControlName="skuId" nbInput id="skuId" type="text"  [status]="userForm.get('skuId').invalid && userForm.get('skuId').touched? 'danger' : 'basic'">
+        <ng-container nbInputErrorMessage>
+          <div style="color:#7c0e0e" *ngIf="userForm.get('skuId').hasError('required') && userForm.get('description').touched">skuId is required.</div>
+        
+         
         </ng-container>
     <nb-card-footer>
         <button type="button" class="cancel" nbButton status="danger" (click)="cancel()">Cancel</button>

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

@@ -14,6 +14,11 @@
     
   }
 }
+
+
+::ng-deep .cdk-global-scrollblock {
+  overflow-y: hidden !important;
+}
 // ::ng-deep nb-window {
 //   flex: 1 0 auto;
 //   min-width: 20rem !important;

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

@@ -26,6 +26,7 @@ export class ProductFormComponent implements OnInit {
       productType: new FormControl('', [Validators.required]),
       productName: new FormControl('', [Validators.required]),
       description:new FormControl('', [Validators.required]),
+      skuId:new FormControl('', [Validators.required]),
       
     });
     if(this.data.hasOwnProperty('id')){

src/app/pages/product/product.component.html

@@ -1,12 +1,164 @@
 <nb-card>
     <nb-card-header>
-        <nb-icon icon="shopping-cart-outline"></nb-icon>  Product Management 
+   
+        <div class="row show-grid">
+          <div class="col-md-6">
+            <div>        <nb-icon icon="shopping-cart-outline"></nb-icon>  Product Management </div>
+          </div>
+
+          <div class="col-md-4">
+            <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-2">
+            <div style="    text-align: end;"> 
+              <!-- <button  (click)="Assign()" nbButton status="primary" hero>
+                Assign Driver
+                </button> -->
+              <button  (click)="onCreateConfirm()" nbButton status="primary" hero>
+             Add Product
+            </button>
+          </div>
+          </div>
+        </div>
     </nb-card-header>
   
     <nb-card-body>
-      <ng2-smart-table [settings]="settings" [source]="source" (edit)="onSaveConfirm($event)"
+      <!-- <ng2-smart-table [settings]="settings" [source]="source" (edit)="onSaveConfirm($event)"
       (create)="onCreateConfirm($event)" (delete)="onDeleteConfirm($event)">
-      </ng2-smart-table>
+      </ng2-smart-table> -->
+
+      <ng-data-table  
+      [id]="'i'" 
+      [items]=product
+      [minContentWidth]="500"
+      [pageable]="true"  
+      [showColumnSelector]="false" 
+      [showHeader]="false"
+      [selectMode]="'multi'" 
+      [minContentHeight]="350" 
+      >  
+    
+      <ng-data-table-column 
+      [field]="'index'"
+      [sortable]="false"
+      [title]="'ID'"
+      [filterable]="false"
+      [width]="2"> 
+
+      </ng-data-table-column> 
+
+      
+      <ng-data-table-column 
+      [field]="'skuId'"
+      [sortable]="false"
+      [title]="'SKU ID'"
+      [filterable]="false"
+      [width]="3"> 
+
+      </ng-data-table-column> 
+
+      
+
+      <ng-data-table-column 
+      [field]="'productName'"
+      [sortable]="false"
+      [title]="'Product Name'"
+      [filterable]="false"
+      [width]="6"> 
+
+      </ng-data-table-column> 
+      <ng-data-table-column 
+      [field]="'productCategory'"
+      [sortable]="false"
+      [title]="'Product Category'"
+      [filterable]="false"
+      [width]="4"> 
+
+      </ng-data-table-column> 
+      <ng-data-table-column 
+      [field]="'productType'"
+      [sortable]="false"
+      [title]="'Product Type'"
+      [filterable]="false"
+      [width]="4"> 
+
+      </ng-data-table-column> 
+      <ng-data-table-column 
+      [field]="'description'"
+      [sortable]="false"
+      [title]="'Description'"
+      [filterable]="false"
+      [width]="4"> 
+
+      </ng-data-table-column> 
+
+      <ng-data-table-column 
+      [field]="'isActive'"
+      [sortable]="false"
+      [title]="'Status'"
+      [filterable]="false"
+      [width]="4"> 
+      <ng-template #ngDataTableCell  let-row="row">
+        <td  >
+          <div   style="display: flex; align-items: center;">
+          
+            
+            <nb-toggle [(ngModel)]="row.item.isActive" (change)="onDeleteConfirm(row.item)">
+
+              <span *ngIf="row.item.isActive == 1"  style="color: green;">
+                Active
+                 </span>
+                 <span  *ngIf="row.item.isActive == 0" style="color: red;" >
+                  Inactive
+                    </span>
+            </nb-toggle>
+               
+          
+             
+          </div>
+        
+        </td> 
+        </ng-template>
+      </ng-data-table-column> 
+
+    
+      <ng-data-table-column 
+      [field]="'role'"
+      [sortable]="false"
+      [title]="'Action'"
+      [filterable]="false"
+      [width]="3"> 
+
+   
+
+
+
+
+
+
+   
+      <ng-template #ngDataTableCell  let-row="row">
+      <td  >
+        <div class="align-center" style="display: flex; align-items: center;">
+          <!-- <span   class="check"   (click)="onSaveConfirm(row.item)">
+            <i class="nb-edit"  ></i>
+          </span> -->
+          <nb-icon icon="edit-outline"  title="Edit" style="margin-left: 1rem;" (click)="onSaveConfirm(row.item)"></nb-icon>  
+          <!-- <span  class="check" (click)="onDeleteConfirm(row.item)">
+            <i class="nb-trash" ></i>
+          </span> -->
+        </div>
+      
+      </td> 
+      </ng-template>
+    </ng-data-table-column> 
+      </ng-data-table>
     </nb-card-body>
   </nb-card>
   

src/app/pages/product/product.component.scss

@@ -9,3 +9,119 @@
 //   flex: 1 0 auto;
 //   min-width: 20rem !important;
 // }
+
+.align-left{
+  text-align: left !important;
+}
+.align-center{
+  text-align: center !important;
+}
+.align-right{
+ text-align: right !important;
+}
+::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-even td {
+  background: white;
+  font-family: var(--smart-table-font-family);
+font-size: var(--smart-table-font-size);
+font-weight: var(--smart-table-font-weight);
+line-height: var(--smart-table-line-height);
+color: var(--smart-table-fg);
+}
+::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table thead > tr .ng-data-table-column-header .ng-data-table-column-header-label:first-child {
+ font-size: 18px;  color: #1e6bb8;
+ text-decoration: none;   padding: 10px;
+ font-family: var(--smart-table-header-font-family);
+ font-size: var(--smart-table-header-font-size);
+ font-weight: var(--smart-table-header-font-weight);
+ line-height: var(--smart-table-header-line-height);
+}
+::ng-deep  :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-odd td {
+ 
+font-family: var(--smart-table-font-family);
+font-size: var(--smart-table-font-size);
+font-weight: var(--smart-table-font-weight);
+line-height: var(--smart-table-line-height);
+color: var(--smart-table-fg);
+}
+::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table-content-container .ng-data-table-content {
+ min-height: 100px !important;
+ font-size: 18px; 
+}
+::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table thead > tr:last-child th {
+
+ background-color:#fff;    font-family: var(--smart-table-font-family);
+ font-size: var(--smart-table-font-size);
+ font-weight: var(--smart-table-font-weight);
+ line-height: var(--smart-table-line-height);
+ color: var(--smart-table-fg);
+
+}
+tr{
+  color: white;
+  background-color:#fff;
+}
+th{
+ color: white;
+ background-color:#fff;
+}
+
+ * {
+    box-sizing: border-box;
+  }
+  .row {
+    display: flex;
+    background-color:#fff;
+  }
+  
+  /* Create two equal columns that sits next to each other */
+  .column {
+    flex: 50%;
+    //  
+    // height: 300px; /* Should be removed. Only for demonstration */
+  }
+  ::ng-deep .mat-select-value{    
+    color: white!important;  }
+  .column1 {
+     width: 210px;
+    text-align: center;
+    text-overflow: ellipsis;
+    padding: 30px;
+    //height: 300px; /* Should be removed. Only for demonstration */
+  }
+
+ 
+  .add {
+     display: flex;
+     align-items: center;
+     justify-content: center;
+     font-size: 1.75rem !important;
+     padding: var(--smart-table-filter-padding);
+     border-color: var(--smart-table-add-button-border-color);
+     background-color: var(--smart-table-add-button-background-color);
+     color: var(--smart-table-add-button-text-color);
+     border-radius: 0.375rem;
+
+     font-family: var(--smart-table-header-font-family);
+     font-size: var(--smart-table-header-font-size);
+     font-weight: var(--smart-table-header-font-weight);
+     line-height: var(--smart-table-header-line-height);
+ }
+ span{
+
+   color: #000;
+ }
+
+span:hover{
+
+   color: #1e6bb8;
+ }
+ a[disabled="disabled"] {
+   pointer-events: none;
+}
+ .check{
+   display: flex; align-items: center;     text-decoration: none;
+           height: 100%; width: 100%; font-size: 2rem!important; 
+ }
+
+
+  

src/app/pages/product/product.component.ts

@@ -56,7 +56,7 @@ export class ProductComponent  {
      
     },
   };
-
+  product:any =[];
   source: LocalDataSource = new LocalDataSource();
   minimize = false;
   maximize = false;
@@ -65,7 +65,8 @@ export class ProductComponent  {
   formData:any=[]
   index = 1;
   destroyByClick = true;
-  duration = 2000;
+  duration = 2000;  filteredItems: any[];
+  searchTerm: string;
   hasIcon = true;
   position: NbGlobalPosition = NbGlobalPhysicalPosition.TOP_RIGHT;
   preventDuplicates = false;
@@ -81,32 +82,51 @@ export class ProductComponent  {
 
   onDeleteConfirm(event): void {
     console.log(event)
-    let passData = event.data
+    let passData = event
-    if (window.confirm('Are you sure you want to delete?')) {
+    //if (window.confirm('Are you sure you want to delete?')) {
       //event.confirm.resolve();
 
    
 
-      let deletedata  = {'isActive':0,'id':passData.id}
+      let deletedata  = {'isActive':event.isActive,'id':passData.id}
   
       this._api.CreateProductDetails (deletedata).subscribe(res => {
         if (res.status == 200) {
   console.log(res)
   this.getProductlistApi();
-  this.showToast('success', 'Data Removed Successfully', 'Removed Product Data Completed..!');
+  if(event.isActive == 1){
+    this.showToast('success', 'Data Removed Successfully', 'Active Product Data Completed..!');
+  }else{
+    this.showToast('success', 'Data Removed Successfully', 'Inactive Product Data Completed..!');
+  }
+
+ // this.showToast('success', 'Data Removed Successfully', 'Removed Product Data Completed..!');
   event.confirm.resolve();
         }else{
           this.showToast('warning', 'Somthing is Wrong...!', 'Edit Product Data Failed..!');
         }
       })
 
-    } else {
+    // } else {
-      event.confirm.reject();
+    //   event.confirm.reject();
+    // }
   }
-  }
+  onCreateConfirm() {
-  onCreateConfirm(event) {
     console.log("Create Event In Console")
-    console.log(event);
+   // console.log(event);
+    // const buttonsConfig: NbWindowControlButtonsConfig = {
+    //   minimize: this.minimize,
+    //   maximize: this.maximize,
+    //   fullScreen: this.fullScreen,
+    //   close: this.close,
+    // };
+    // let config= {
+    //   hasBackdrop: true,
+    //   width: '500px',
+    //   height: '300px',
+    // }
+    // const windowRef: NbWindowRef =  this.windowService.open(ProductFormComponent, { title: `New Product`, buttons: buttonsConfig , });
+   
     const buttonsConfig: NbWindowControlButtonsConfig = {
       minimize: this.minimize,
       maximize: this.maximize,
@@ -120,8 +140,6 @@ export class ProductComponent  {
     }
     const windowRef: NbWindowRef =  this.windowService.open(ProductFormComponent, { title: `New Product`, buttons: buttonsConfig , });
 
-
-
       // Subscribe to the afterClosed event
       windowRef.onClose.subscribe((data) => {
         // Handle the window closure
@@ -146,7 +164,7 @@ export class ProductComponent  {
       fullScreen: this.fullScreen,
       close: this.close,
     };
-    const windowRef: NbWindowRef =  this.windowService.open(ProductFormComponent, { title: `Edit Product`, context: event.data
+    const windowRef: NbWindowRef =  this.windowService.open(ProductFormComponent, { title: `Edit Product`, context: event
     , buttons: buttonsConfig  });
    
 
@@ -181,8 +199,9 @@ export class ProductComponent  {
         element.index = index  +1       
         
       });
+      this.product = product
       //  console.log(data)
-        this.source.load(product);
+       // this.source.load(product);
       }else{
         this.source.load([]);
       }
@@ -207,4 +226,29 @@ export class ProductComponent  {
       `${titleContent}`,
       config);
   }
+  filterItems() {
+    console.log(  this.searchTerm)
+   
+     if(  this.searchTerm !=''){
+   
+   
+     this.filteredItems = this.product.filter(item =>
+       Object.values(item).some(value => {
+         if (typeof value === 'string') {
+           return value.toLowerCase().includes(this.searchTerm.toLowerCase());
+         }
+         return false;
+       })
+     );
+     this.product = this.filteredItems
+   }else{
+     console.log( 'fhjsgsajdhgasksjgfcckjsdfgckjsdhfk')  
+   
+     this.getProductlistApi()
+   }
+   
+   
+   
+   console.log( this.filteredItems)
+   }
 }

src/app/pages/profile/profile.component.html

@@ -10,30 +10,33 @@
     
      
     </ng-container>
-          <div class="full-name-inputs">
+        
-            <input type="password" formControlName="password" nbInput fullWidth placeholder="New Password">
+            <input type="text" formControlName="password" nbInput fullWidth placeholder="New Password">
             <ng-container nbInputErrorMessage>
       
       
-              <!-- <div style="color:#7c0e0e" *ngIf="!userForm.get('password')?.errors?.required">
+              <div style="color:#7c0e0e" *ngIf="!userForm.get('password')?.errors?.required && !(userForm.get('password')?.errors?.pattern)">
-                Password length must be greater than or equal to 8 and password must contain one or more uppercase , lowercase , numeric and special characters
+                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> -->
+              </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>
-            <input type="password" formControlName="password2" nbInput fullWidth placeholder="Confirm Password">
+            <input type="text" formControlName="password2" nbInput fullWidth placeholder="Confirm Password">
             <ng-container nbInputErrorMessage>
       
       
-              <!-- <div style="color:#7c0e0e" *ngIf="!userForm.get('password')?.errors?.required">
+              <div style="color:#7c0e0e" *ngIf="!userForm.get('password2')?.errors?.required && !(userForm.get('password2')?.errors?.pattern)">
-                Password length must be greater than or equal to 8 and password must contain one or more uppercase , lowercase , numeric and special characters
+                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> -->
+              </div>
               <div style="color:#7c0e0e" *ngIf="userForm.get('password2')?.invalid && (userForm.get('password2')?.dirty || userForm.get('password2')?.touched) && userForm.get('password2')?.errors?.required">
                Confirm Password is required
               </div>
-            </ng-container>
+              <div style="color:#7c0e0e" *ngIf="userForm.get('password2').value != userForm.get('password').value && (userForm.get('password2').value !='') ">
+             Password not Matching
                </div>
+            </ng-container>
+       
           <input type="email" formControlName="email" nbInput fullWidth placeholder="E-mail">
           <ng-container nbInputErrorMessage>
             <div style="color:#7c0e0e" *ngIf="userForm.get('email').hasError('required') && userForm.get('email').touched">Email is required.</div>
@@ -62,7 +65,7 @@
                 </div>
                 <div class="col-6 col-md-4" style="text-align: end;">
                   <div> 
-                    <button nbButton status="success"   type="submit" >Save</button>
+                    <button nbButton status="success"  [disabled]="!userForm.valid"  type="submit" >Save</button>
                 </div>
                 </div>
               </div>

src/app/pages/profile/profile.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { PageapiService } from '../pageapi.service';
+import { NbComponentStatus, NbGlobalPhysicalPosition, NbGlobalPosition, NbToastrService } from '@nebular/theme';
 
 @Component({
   selector: 'ngx-profile',
@@ -9,7 +10,17 @@ import { PageapiService } from '../pageapi.service';
 })
 export class ProfileComponent implements OnInit {
   userForm: FormGroup | any;  formData:any =[]
-  constructor(public _api:PageapiService) { }
+
+ 
+  index = 1;
+  destroyByClick = true;
+  duration = 2000;
+  hasIcon = true;
+  admin:any =[];
+  position: NbGlobalPosition = NbGlobalPhysicalPosition.TOP_RIGHT;
+  preventDuplicates = false;
+  status: NbComponentStatus = 'primary';
+  constructor(public _api:PageapiService,private toastrService: NbToastrService) { }
 
   ngOnInit(): void {
 
@@ -66,9 +77,9 @@ export class ProfileComponent implements OnInit {
     this._api.addUserFormDetails (this.formData).subscribe(res => {
       if (res.status == 200) {
 console.log(res)
- 
+this.showToast('success', 'Data Changed Successfully', 'Profile Update  Completed..!');
       }else{
-    
+        this.showToast('warning', 'Data Changed Failed', 'Profile Update Failed..!');
       }
     })
   }
@@ -86,4 +97,23 @@ console.log(res)
       }
     })
   }
+
+
+  private showToast(type: NbComponentStatus, title: string, body: string) {
+    const config = {
+      status: type,
+      destroyByClick: this.destroyByClick,
+      duration: this.duration,
+      hasIcon: this.hasIcon,
+      position: this.position,
+      preventDuplicates: this.preventDuplicates,
+    };
+    const titleContent = title ? ` ${title}` : '';
+
+    this.index += 1;
+    this.toastrService.show(
+      body,
+      `${titleContent}`,
+      config);
+  }
 }

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

@@ -0,0 +1,349 @@
+<nb-card>
+    <nb-card-header>
+   
+
+     <div class="row show-grid">
+        <div class="col-md-6">
+          <div>   Summary Product List</div>
+        </div>
+        <div class="col-md-6">
+          <div style="text-align: end;"> 
+            <button  (click)="back()" nbButton status="success" hero>
+         Back
+          </button>
+
+          <!-- <button  style="    margin-left: 2rem;"(click)="generatePDF('print')" nbButton status="primary" hero>
+            Print
+             </button> -->
+        </div>
+        </div>
+      </div>
+    </nb-card-header>
+
+    <nb-card-header>
+   
+
+        <div class="row show-grid">
+           <div class="col-md-6">
+             ORDER ID :<h4>{{orderId}}</h4>
+           </div>
+           <div class="col-md-6">
+             <div style="text-align: end;"> 
+        
+           </div>
+           </div>
+         </div>
+       </nb-card-header>
+  
+    <nb-card-body>
+        <nb-card-header>
+   
+
+            <div class="row show-grid">
+               <div class="col-md-6">
+                 <div style="font-size: larger;    color: #182ea1;">  Delivery Information</div>
+               </div>
+               <div class="col-md-6">
+                 <!-- <div style="    text-align: end;"> 
+                   <button  (click)="back()" nbButton status="success" hero>
+                Back
+                 </button>
+               </div> -->
+               </div>
+             </div>
+           </nb-card-header>
+
+
+        <div   >
+            <div>
+           
+               
+         
+        
+        
+        
+          <div class="row show-grid"  >
+            <div class="col-6 col-md-3">
+                <div  > 
+                  
+                    <label for="subject" style="    font-weight: 600;"><h6>Product Name</h6></label> 
+         
+              </div>
+              </div>
+            <div class="col-6 col-md-2">
+              <div>
+         
+                <label for="subject" style="    font-weight: 600;"><h6>Qty</h6></label> <br>
+               
+                    
+                
+                <!-- <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" style="    font-weight: 600;"><h6></h6></label> 
+            </div>
+            </div>
+        
+            <div class="col-6 col-md-3">
+                <div  > 
+                    <label for="subject" style="    font-weight: 600;"><h6></h6></label> 
+                    <!-- <nb-actions size="medium"   >
+                        <nb-action icon="plus-circle-outline"   class="custom-action-icon"  [nbTooltip]="'Add'"  ></nb-action>
+                       
+                            <nb-action icon="minus-circle-outline"  [nbTooltip]="'Remove'"  ></nb-action>
+                            </nb-actions> -->
+                    <!-- <button nbButton status="success"  (click)="addInputFieldGroup()" style="margin-right: 1rem;">  Add </button> -->
+                    <!-- <button nbButton status="danger"  (click)="removeInputFieldGroup(i)">Remove</button> -->
+         
+              </div>
+            
+              </div>
+        
+              <hr>
+          </div>
+        
+        </div>
+        </div>
+ 
+         <div *ngFor="let dataVal of productlist; let i = index" >
+            <div  >
+           
+                 
+         
+        
+        
+        
+          <div class="row show-grid">
+            <div class="col-6 col-md-3">
+                <div  > 
+                    <label for="subject" style="    font-weight: 600;">#</label> 
+                    <label for="subject" style="    font-weight: 600;margin-left: 1rem;">{{dataVal.ProductDetails[0]. productName}}</label> 
+
+         
+              </div>
+              </div>
+            <div class="col-6 col-md-2">
+              <div>
+         
+                <label for="subject" style="    font-weight: 600;">{{dataVal.qty}}</label> <br>
+              
+                    
+                
+                <!-- <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" style="    font-weight: 600;"></label> 
+            </div>
+            </div>
+        
+            <div class="col-6 col-md-3">
+                <div  > 
+
+                    <!-- <nb-icon icon="eye-outline" style="color: green;"  ></nb-icon>   -->
+                    <!-- <nb-actions size="medium"   >
+                        <nb-action icon="plus-circle-outline"   class="custom-action-icon"  [nbTooltip]="'Add'"  ></nb-action>
+                       
+                            <nb-action icon="minus-circle-outline"  [nbTooltip]="'Remove'"  ></nb-action>
+                            </nb-actions> -->
+                    <!-- <button nbButton status="success"  (click)="addInputFieldGroup()" style="margin-right: 1rem;">  Add </button> -->
+                    <!-- <button nbButton status="danger"  (click)="removeInputFieldGroup(i)">Remove</button> -->
+         
+              </div>
+              </div>
+        
+           
+          </div>
+        
+        </div>
+        </div>
+        
+          <nb-card-footer>
+            <div class="row show-grid" >
+                <div class="col-6 col-md-3">
+                  <div>  
+                 
+                </div> 
+                </div>
+                <div class="col-6 col-md-2">
+                  <div>
+                 
+                 </div>
+                </div>
+                <div class="col-6 col-md-4">
+                  <div>
+                 
+                 </div>
+                </div>
+                <div class="col-6 col-md-3">
+                  <div  > 
+                    <!-- <button nbButton status="success" (click)="save()" style="margin-right: 10px;"  type="submit" >Submit</button>
+                    <button type="button" class="cancel" nbButton status="danger" (click)="back()">Cancel</button> -->
+                </div>
+                </div>
+              </div>
+        
+       
+          </nb-card-footer>
+          <nb-card-header>
+   
+
+            <div class="row show-grid">
+               <div class="col-md-6">
+                 <div style="font-size: larger;    color: #182ea1;">  Return Information</div>
+               </div>
+               <div class="col-md-6">
+                 <!-- <div style="    text-align: end;"> 
+                   <button  (click)="back()" nbButton status="success" hero>
+                Back
+                 </button>
+               </div> -->
+               </div>
+             </div>
+           </nb-card-header>
+
+          
+        <div   >
+            <div>
+           
+               
+         
+        
+        
+        
+          <div class="row show-grid"  >
+            <div class="col-6 col-md-3">
+                <div  > 
+                  
+                    <label for="subject" style="    font-weight: 600;"><h6>Product Name</h6></label> 
+         
+              </div>
+              </div>
+            <div class="col-6 col-md-2">
+              <div>
+         
+                <label for="subject" style="    font-weight: 600;"><h6>Qty</h6></label> <br>
+               
+                    
+                
+                <!-- <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" style="    font-weight: 600;"><h6></h6></label> 
+            </div>
+            </div>
+        
+            <div class="col-6 col-md-3">
+                <div  > 
+                    <label for="subject" style="    font-weight: 600;"><h6></h6></label> 
+                    <!-- <nb-actions size="medium"   >
+                        <nb-action icon="plus-circle-outline"   class="custom-action-icon"  [nbTooltip]="'Add'"  ></nb-action>
+                       
+                            <nb-action icon="minus-circle-outline"  [nbTooltip]="'Remove'"  ></nb-action>
+                            </nb-actions> -->
+                    <!-- <button nbButton status="success"  (click)="addInputFieldGroup()" style="margin-right: 1rem;">  Add </button> -->
+                    <!-- <button nbButton status="danger"  (click)="removeInputFieldGroup(i)">Remove</button> -->
+         
+              </div>
+            
+              </div>
+        
+              <hr>
+          </div>
+        
+        </div>
+        </div>
+      
+
+         <div *ngFor="let dataVal of productlistReturn; let i = index" >
+            <div  >
+           
+                 
+         
+        
+        
+        
+          <div class="row show-grid">
+            <div class="col-6 col-md-3">
+                <div  > 
+                    <label for="subject" style="    font-weight: 600;">#</label> 
+                    <label for="subject" style="    font-weight: 600;margin-left: 1rem;">{{dataVal.ProductDetails[0]. productName}}</label> 
+
+         
+              </div>
+              </div>
+            <div class="col-6 col-md-2">
+              <div>
+         
+                <label for="subject" style="    font-weight: 600;">{{dataVal.qty}}</label> <br>
+              
+                    
+                
+                <!-- <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" style="    font-weight: 600;"> </label> 
+            </div>
+            </div>
+        
+            <div class="col-6 col-md-3">
+                <div  > 
+
+                    <!-- <nb-icon icon="eye-outline" style="color: green;"  ></nb-icon>   -->
+                    <!-- <nb-actions size="medium"   >
+                        <nb-action icon="plus-circle-outline"   class="custom-action-icon"  [nbTooltip]="'Add'"  ></nb-action>
+                       
+                            <nb-action icon="minus-circle-outline"  [nbTooltip]="'Remove'"  ></nb-action>
+                            </nb-actions> -->
+                    <!-- <button nbButton status="success"  (click)="addInputFieldGroup()" style="margin-right: 1rem;">  Add </button> -->
+                    <!-- <button nbButton status="danger"  (click)="removeInputFieldGroup(i)">Remove</button> -->
+         
+              </div>
+              </div>
+        
+           
+          </div>
+        
+        </div>
+        </div>
+        
+          <nb-card-footer>
+            <div class="row show-grid" >
+                <div class="col-6 col-md-3">
+                  <div>  
+                 
+                </div> 
+                </div>
+                <div class="col-6 col-md-2">
+                  <div>
+                 
+                 </div>
+                </div>
+                <div class="col-6 col-md-4">
+                  <div>
+                 
+                 </div>
+                </div>
+                <div class="col-6 col-md-3">
+                  <div  > 
+                    <!-- <button nbButton status="success" (click)="save()" style="margin-right: 10px;"  type="submit" >Submit</button>
+                    <button type="button" class="cancel" nbButton status="danger" (click)="back()">Cancel</button> -->
+                </div>
+                </div>
+              </div>
+        
+       
+          </nb-card-footer>
+    </nb-card-body>
+</nb-card>

src/app/pages/summary-list/summary-details/summary-details.component.scss

@@ -0,0 +1,172 @@
+ 
+ td ,input[type="checkbox"] {
+    font-size: 1px !important;
+ }
+
+ .highlight-cell {
+    background-color: yellow;
+    /* Add any other styling properties as desired */
+  }
+
+  ::ng-deep  .ng2-smart-action-multiple-select{
+   text-align: center;
+   }
+   
+   ::ng-deep  .ng2-smart-action-multiple-select > input{
+   width:15px;
+   height:15px;
+   display: unset;
+   }
+
+   ::ng-deep  .desired-value-row{
+color: red !important;
+   }
+
+   .align-left{
+      text-align: left !important;
+    }
+    .align-center{
+      text-align: center !important;
+    }
+    .align-right{
+     text-align: right !important;
+    }
+    ::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-even td {
+      background: white;
+    //padding: 10px; 
+    font-family: var(--smart-table-font-family);
+    font-size: var(--smart-table-font-size);
+    font-weight: var(--smart-table-font-weight);
+    line-height: var(--smart-table-line-height);
+    color: var(--smart-table-fg);
+    }
+    ::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table thead > tr .ng-data-table-column-header .ng-data-table-column-header-label:first-child {
+     font-size: 18px;
+   padding: 10px;
+      color: #1e6bb8;
+     text-decoration: none;
+     font-family: var(--smart-table-header-font-family);
+     font-size: var(--smart-table-header-font-size);
+     font-weight: var(--smart-table-header-font-weight);
+     line-height: var(--smart-table-header-line-height);
+    }
+    ::ng-deep  :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-odd td {
+   // padding: 10px;
+    font-family: var(--smart-table-font-family);
+    font-size: var(--smart-table-font-size);
+    font-weight: var(--smart-table-font-weight);
+    line-height: var(--smart-table-line-height);
+    color: var(--smart-table-fg);
+    }
+    ::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table-content-container .ng-data-table-content {
+     min-height: 100px !important;
+     font-size: 18px; 
+    }
+    ::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table thead > tr:last-child th {
+    
+     background-color:#fff;    font-family: var(--smart-table-font-family);
+     font-size: var(--smart-table-font-size);
+     font-weight: var(--smart-table-font-weight);
+     line-height: var(--smart-table-line-height);
+     color: var(--smart-table-fg);
+    
+    }
+    tr{
+      color: white;
+      background-color:#fff;
+    }
+    th{
+     color: white;
+     background-color:#fff;
+    }
+    
+     * {
+        box-sizing: border-box;
+      }
+      .row {
+        display: flex;
+        background-color:#fff;
+      }
+      
+      /* Create two equal columns that sits next to each other */
+      .column {
+        flex: 50%;
+        // padding: 10px;
+        // height: 300px; /* Should be removed. Only for demonstration */
+      }
+      ::ng-deep .mat-select-value{    
+        color: white!important;  }
+      .column1 {
+         width: 210px;
+        text-align: center;
+        text-overflow: ellipsis;
+        padding: 30px;
+        //height: 300px; /* Should be removed. Only for demonstration */
+      }
+    
+     
+      .add {
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         font-size: 1.75rem !important;
+         padding: var(--smart-table-filter-padding);
+         border-color: var(--smart-table-add-button-border-color);
+         background-color: var(--smart-table-add-button-background-color);
+         color: var(--smart-table-add-button-text-color);
+         border-radius: 0.375rem;
+    
+         font-family: var(--smart-table-header-font-family);
+         font-size: var(--smart-table-header-font-size);
+         font-weight: var(--smart-table-header-font-weight);
+         line-height: var(--smart-table-header-line-height);
+     }
+     span{
+    
+       color: #000;
+     }
+    
+    span:hover{
+    
+       color: #1e6bb8;
+     }
+     a[disabled="disabled"] {
+       pointer-events: none;
+    }
+     .check{
+       display: flex; align-items: center;     text-decoration: none;
+               height: 100%; width: 100%; font-size: 2rem!important; 
+     }
+
+     .checkTxt{
+      //background: white;
+     // padding: 10px;
+      font-family: var(--smart-table-font-family);
+      font-size: var(--smart-table-font-size);
+      font-weight: var(--smart-table-font-weight);
+      line-height: var(--smart-table-line-height);
+      color: var(--smart-table-fg);
+      text-transform: capitalize;
+     }
+    
+
+     ::ng-deep .md-drppicker .btn, .md-drppicker .btn:focus, .md-drppicker .btn:hover {
+      background-color: #4caf50 !important;
+      margin-left: 10px !important;
+  }
+  
+  ::ng-deep .md-drppicker .btn.btn-default{
+      color: #000 !important;
+      background-color: #dcdcdc !important;
+  }
+  
+  ::ng-deep .md-drppicker td.active{
+      background-color: #1f7f6f !important; 
+  }
+  ::ng-deep .md-drppicker .ranges ul li button.active {
+      background-color: #1f7f6f !important;
+  }
+  ::ng-deep .md-drppicker.double {
+      width: 640px !important; 
+  }
+  

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SummaryDetailsComponent } from './summary-details.component';
+
+describe('SummaryDetailsComponent', () => {
+  let component: SummaryDetailsComponent;
+  let fixture: ComponentFixture<SummaryDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SummaryDetailsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SummaryDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,200 @@
+import { Component, OnInit } from '@angular/core';
+import * as moment from 'moment';
+import { PageapiService } from '../../pageapi.service';
+import { ActivatedRoute, Router } from '@angular/router';
+ @Component({
+  selector: 'ngx-summary-details',
+  templateUrl: './summary-details.component.html',
+  styleUrls: ['./summary-details.component.scss']
+})
+export class SummaryDetailsComponent implements OnInit {
+
+  ranges: any = {
+    'Today': [moment(), moment()],
+    // 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+    // 'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+    // 'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+    // 'This Month': [moment().startOf('month'), moment().endOf('month')],
+    // 'Last Month': [
+    //   moment().subtract(1, 'month').startOf('month'),
+    //   moment().subtract(1, 'month').endOf('month')
+    // ]
+  };
+  productlistReturn:any =[];orderId:any=[];
+  selectedDateRange:any =[];drivers:any =[];summaryaData:any=[];driverval:any=[];returnSummary:any =[];productlist:any=[];
+  constructor(public _api:PageapiService,private route: ActivatedRoute, private router:Router) {
+
+   this.route.params.subscribe(params => {
+      console.log(params) //log the entire params object
+      console.log(params['orderId']) //log the value of id
+let orderId = params['orderId']
+this.orderId = orderId
+      this._api.getProductListSummary({orderId:orderId}).subscribe(res => {
+        console.log(res)
+        if(res.status == 200){
+
+          this.productlist = res.data
+     
+      
+
+        }
+      })
+
+      this._api.getReturnProductListSummary({orderId:orderId}).subscribe(res => {
+        console.log(res)
+        if(res.status == 200){
+
+          this.productlistReturn = res.data
+     
+      
+
+        }
+      })
+
+
+    });
+
+   }
+
+  ngOnInit(): void {
+    this.selectedDateRange =[];
+    console.log(moment()['_d'])
+   
+    this.getDriverlistApi()
+  }
+
+
+  back(){
+    this.router.navigate(['/pages/summary']) 
+  }
+  save(){
+
+  }
+
+  generatePDF(data){
+
+
+  }
+  dateWiseFilter(){
+    console.log(this.selectedDateRange,this.driverval)
+    if(this.selectedDateRange.length!=0){
+
+
+   
+  }
+    //this.getDriverSummaryAdminList(result)
+
+  }
+
+  mergeOrders(orderItems: any[]) {
+    this.summaryaData = orderItems.reduce((acc, curr) => {
+      const existingOrder = acc.find((order) => order.orderId === curr.orderId);
+      if (existingOrder) {
+        existingOrder.total_qty += curr.total_qty;
+      } else {
+        acc.push(curr);
+      }
+      return acc;
+    }, []);
+  }
+  getDriverlistApi(){
+   // console.log(this.selectedDateRange)
+    let param ={}
+    this._api.getusers(param).subscribe(res => {
+      console.log(res)
+      if(res.status == 200){
+  
+       let passData =  res.data
+       let driver = passData.filter(arr=>{return arr.role == 'DRIVER'}) 
+       driver.sort((a: any, b: any) => {
+        return b.id - a.id;
+      });
+       driver.forEach((element:any, index) => {
+        element.index = index       +1  
+        
+      });
+  
+  
+  
+      this.drivers = driver
+      //  console.log(data)
+      
+      }
+    })
+  }
+
+
+  getDriverSummaryAdminList(date){
+    let param ={date:new Date(date)}
+    this._api.getDriverSummaryAdminList(param).subscribe(res => {
+      console.log(res)
+      if(res.status == 200){
+   
+      console.log(res.data)
+      
+      }
+    })
+  }
+
+  val(data){
+    console.log(data.id)
+
+    let result;
+    if(this.selectedDateRange.length != 0){
+      result=   this.selectedDateRange.endDate['$d']
+    }else{
+      
+      result =  moment()['_d']
+    }
+  
+    console.log(result)
+    let param ={date:new Date(result),id:data.id}
+    this._api.getDriverSummaryAdminList(param).subscribe(res => {
+      console.log(res)
+      if(res.status == 200){
+   
+      console.log(res.data)
+
+      this.summaryaData = res.data
+      this.summaryaData.forEach(element => {
+        element.name = element['UserDetails.userName']
+        
+      });
+
+      this.mergeOrders(  this.summaryaData)
+      
+      }
+    })
+
+    this._api.getReturnDriverSummaryListadmin(param).subscribe(res => {
+      console.log(res)
+      if(res.status == 200){
+   
+      console.log(res.data)
+
+      this.returnSummary = res.data
+
+    
+
+     // this.mergeOrders(  this.summaryaData)
+      
+      }
+    })
+
+    
+  }
+
+
+  returnCount(data){
+   let result =  this.returnSummary.filter(arr=>{return arr.orderId == data}) 
+console.log(result)
+   if(result.length>0){
+
+    return result[0].total_amount
+   }else{
+    return '-'
+   }
+
+  }
+  
+}

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

@@ -0,0 +1,197 @@
+<nb-card>
+    <nb-card-header>
+   
+
+     <div class="row show-grid">
+        <div class="col-md-6">
+          <div>   Summary</div>
+        </div>
+        <div class="col-md-6">
+          <div style="text-align: end;"> 
+            <!-- <button  (click)="back()" nbButton status="success" hero>
+         Back
+          </button> -->
+
+          <!-- <button  style="    margin-left: 2rem;"(click)="generatePDF('print')" nbButton status="primary" hero>
+            Print
+             </button> -->
+        </div>
+        </div>
+      </div>
+    </nb-card-header>
+
+    <nb-card-header>
+   
+
+        <div class="row show-grid">
+           <div class="col-md-6">
+             <div>       <input  nbInput class="fx-date-range" type="text" 
+                ngxDaterangepickerMd
+                [locale]="{applyLabel: 'okay', format: 'DD/MM/YY'}"
+                [drops]="'down'"
+                [opens]="'right'"
+                [ranges]="ranges"
+                [autoApply]="true"
+                [singleDatePicker]="true"
+                [showCustomRangeLabel]="false"
+                [alwaysShowCalendars]="true"
+                [keepCalendarOpeningWithRange]="false"
+                [showCancel]="true"
+                autocomplete="off"
+                [(ngModel)]="selectedDateRange"
+                name="daterange" placeholder="Fliter Date Wise" (change)="dateWiseFilter()"/></div>
+           </div>
+           <div class="col-md-6">
+             <div style="text-align: end;"> 
+                <nb-select selected=""    style="width: 100% !important;"     >
+                    <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>
+           </div>
+           </div>
+         </div>
+       </nb-card-header>
+  
+    <nb-card-body>
+
+        <div   >
+            <div>
+           
+               
+         
+        
+        
+        
+          <div class="row show-grid" *ngIf="selectedDateRange.length!=0">
+            <div class="col-6 col-md-3">
+                <div  > 
+                  
+                    <label for="subject" style="    font-weight: 600;"><h6>Order Id</h6></label> 
+         
+              </div>
+              </div>
+            <div class="col-6 col-md-2">
+              <div>
+         
+                <label for="subject" style="    font-weight: 600;"><h6>Delivered</h6></label> <br>
+               
+                    
+                
+                <!-- <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" style="    font-weight: 600;"><h6>Empty Pick up</h6></label> 
+            </div>
+            </div>
+        
+            <div class="col-6 col-md-3">
+                <div  > 
+                    <label for="subject" style="    font-weight: 600;"><h6>View</h6></label> 
+                    <!-- <nb-actions size="medium"   >
+                        <nb-action icon="plus-circle-outline"   class="custom-action-icon"  [nbTooltip]="'Add'"  ></nb-action>
+                       
+                            <nb-action icon="minus-circle-outline"  [nbTooltip]="'Remove'"  ></nb-action>
+                            </nb-actions> -->
+                    <!-- <button nbButton status="success"  (click)="addInputFieldGroup()" style="margin-right: 1rem;">  Add </button> -->
+                    <!-- <button nbButton status="danger"  (click)="removeInputFieldGroup(i)">Remove</button> -->
+         
+              </div>
+            
+              </div>
+        
+              <hr>
+          </div>
+        
+        </div>
+        </div>
+ 
+         <div *ngFor="let dataVal of summaryaData; let i = index" >
+            <div *ngIf="selectedDateRange.length!=0">
+           
+                 
+         
+        
+        
+        
+          <div class="row show-grid">
+            <div class="col-6 col-md-3">
+                <div  > 
+                    <label for="subject" style="    font-weight: 600;">#</label> 
+                    <label for="subject" style="    font-weight: 600;margin-left: 1rem;">({{dataVal.orderId}})</label> 
+         
+              </div>
+              </div>
+            <div class="col-6 col-md-2">
+              <div>
+         
+                <label for="subject" style="    font-weight: 600;">{{dataVal.total_qty}}</label> <br>
+              
+                    
+                
+                <!-- <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" style="    font-weight: 600;">{{returnCount(dataVal.orderId)}}</label> 
+            </div>
+            </div>
+        
+            <div class="col-6 col-md-3">
+                <div  > 
+
+                    <nb-icon icon="eye-outline" style="color: green;" (click)="view(dataVal.orderId)" ></nb-icon>  
+                    <!-- <nb-actions size="medium"   >
+                        <nb-action icon="plus-circle-outline"   class="custom-action-icon"  [nbTooltip]="'Add'"  ></nb-action>
+                       
+                            <nb-action icon="minus-circle-outline"  [nbTooltip]="'Remove'"  ></nb-action>
+                            </nb-actions> -->
+                    <!-- <button nbButton status="success"  (click)="addInputFieldGroup()" style="margin-right: 1rem;">  Add </button> -->
+                    <!-- <button nbButton status="danger"  (click)="removeInputFieldGroup(i)">Remove</button> -->
+         
+              </div>
+              </div>
+        
+           
+          </div>
+        
+        </div>
+        </div>
+        
+          <nb-card-footer>
+            <div class="row show-grid" >
+                <div class="col-6 col-md-3">
+                  <div>  
+                 
+                </div> 
+                </div>
+                <div class="col-6 col-md-2">
+                  <div>
+                 
+                 </div>
+                </div>
+                <div class="col-6 col-md-4">
+                  <div>
+                 
+                 </div>
+                </div>
+                <div class="col-6 col-md-3">
+                  <div  > 
+                    <!-- <button nbButton status="success" (click)="save()" style="margin-right: 10px;"  type="submit" >Submit</button>
+                    <button type="button" class="cancel" nbButton status="danger" (click)="back()">Cancel</button> -->
+                </div>
+                </div>
+              </div>
+        
+       
+          </nb-card-footer>
+    </nb-card-body>
+</nb-card>

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

@@ -0,0 +1,172 @@
+ 
+ td ,input[type="checkbox"] {
+    font-size: 1px !important;
+ }
+
+ .highlight-cell {
+    background-color: yellow;
+    /* Add any other styling properties as desired */
+  }
+
+  ::ng-deep  .ng2-smart-action-multiple-select{
+   text-align: center;
+   }
+   
+   ::ng-deep  .ng2-smart-action-multiple-select > input{
+   width:15px;
+   height:15px;
+   display: unset;
+   }
+
+   ::ng-deep  .desired-value-row{
+color: red !important;
+   }
+
+   .align-left{
+      text-align: left !important;
+    }
+    .align-center{
+      text-align: center !important;
+    }
+    .align-right{
+     text-align: right !important;
+    }
+    ::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-even td {
+      background: white;
+    //padding: 10px; 
+    font-family: var(--smart-table-font-family);
+    font-size: var(--smart-table-font-size);
+    font-weight: var(--smart-table-font-weight);
+    line-height: var(--smart-table-line-height);
+    color: var(--smart-table-fg);
+    }
+    ::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table thead > tr .ng-data-table-column-header .ng-data-table-column-header-label:first-child {
+     font-size: 18px;
+   padding: 10px;
+      color: #1e6bb8;
+     text-decoration: none;
+     font-family: var(--smart-table-header-font-family);
+     font-size: var(--smart-table-header-font-size);
+     font-weight: var(--smart-table-header-font-weight);
+     line-height: var(--smart-table-header-line-height);
+    }
+    ::ng-deep  :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-odd td {
+   // padding: 10px;
+    font-family: var(--smart-table-font-family);
+    font-size: var(--smart-table-font-size);
+    font-weight: var(--smart-table-font-weight);
+    line-height: var(--smart-table-line-height);
+    color: var(--smart-table-fg);
+    }
+    ::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table-content-container .ng-data-table-content {
+     min-height: 100px !important;
+     font-size: 18px; 
+    }
+    ::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table thead > tr:last-child th {
+    
+     background-color:#fff;    font-family: var(--smart-table-font-family);
+     font-size: var(--smart-table-font-size);
+     font-weight: var(--smart-table-font-weight);
+     line-height: var(--smart-table-line-height);
+     color: var(--smart-table-fg);
+    
+    }
+    tr{
+      color: white;
+      background-color:#fff;
+    }
+    th{
+     color: white;
+     background-color:#fff;
+    }
+    
+     * {
+        box-sizing: border-box;
+      }
+      .row {
+        display: flex;
+        background-color:#fff;
+      }
+      
+      /* Create two equal columns that sits next to each other */
+      .column {
+        flex: 50%;
+        // padding: 10px;
+        // height: 300px; /* Should be removed. Only for demonstration */
+      }
+      ::ng-deep .mat-select-value{    
+        color: white!important;  }
+      .column1 {
+         width: 210px;
+        text-align: center;
+        text-overflow: ellipsis;
+        padding: 30px;
+        //height: 300px; /* Should be removed. Only for demonstration */
+      }
+    
+     
+      .add {
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         font-size: 1.75rem !important;
+         padding: var(--smart-table-filter-padding);
+         border-color: var(--smart-table-add-button-border-color);
+         background-color: var(--smart-table-add-button-background-color);
+         color: var(--smart-table-add-button-text-color);
+         border-radius: 0.375rem;
+    
+         font-family: var(--smart-table-header-font-family);
+         font-size: var(--smart-table-header-font-size);
+         font-weight: var(--smart-table-header-font-weight);
+         line-height: var(--smart-table-header-line-height);
+     }
+     span{
+    
+       color: #000;
+     }
+    
+    span:hover{
+    
+       color: #1e6bb8;
+     }
+     a[disabled="disabled"] {
+       pointer-events: none;
+    }
+     .check{
+       display: flex; align-items: center;     text-decoration: none;
+               height: 100%; width: 100%; font-size: 2rem!important; 
+     }
+
+     .checkTxt{
+      //background: white;
+     // padding: 10px;
+      font-family: var(--smart-table-font-family);
+      font-size: var(--smart-table-font-size);
+      font-weight: var(--smart-table-font-weight);
+      line-height: var(--smart-table-line-height);
+      color: var(--smart-table-fg);
+      text-transform: capitalize;
+     }
+    
+
+     ::ng-deep .md-drppicker .btn, .md-drppicker .btn:focus, .md-drppicker .btn:hover {
+      background-color: #4caf50 !important;
+      margin-left: 10px !important;
+  }
+  
+  ::ng-deep .md-drppicker .btn.btn-default{
+      color: #000 !important;
+      background-color: #dcdcdc !important;
+  }
+  
+  ::ng-deep .md-drppicker td.active{
+      background-color: #1f7f6f !important; 
+  }
+  ::ng-deep .md-drppicker .ranges ul li button.active {
+      background-color: #1f7f6f !important;
+  }
+  ::ng-deep .md-drppicker.double {
+      width: 640px !important; 
+  }
+  

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SummaryListComponent } from './summary-list.component';
+
+describe('SummaryListComponent', () => {
+  let component: SummaryListComponent;
+  let fixture: ComponentFixture<SummaryListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SummaryListComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SummaryListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,170 @@
+import { Component, OnInit } from '@angular/core';
+import * as moment from 'moment';
+import { PageapiService } from '../pageapi.service';
+import { Router } from '@angular/router';
+@Component({
+  selector: 'ngx-summary-list',
+  templateUrl: './summary-list.component.html',
+  styleUrls: ['./summary-list.component.scss']
+})
+export class SummaryListComponent implements OnInit {
+  ranges: any = {
+    'Today': [moment(), moment()],
+    // 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+    // 'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+    // 'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+    // 'This Month': [moment().startOf('month'), moment().endOf('month')],
+    // 'Last Month': [
+    //   moment().subtract(1, 'month').startOf('month'),
+    //   moment().subtract(1, 'month').endOf('month')
+    // ]
+  };
+  selectedDateRange:any =[];drivers:any =[];summaryaData:any=[];driverval:any=[];returnSummary:any =[];
+  constructor(public _api:PageapiService, private router:Router) { }
+
+  ngOnInit(): void {
+    this.selectedDateRange =[];
+    console.log(moment()['_d'])
+   
+    this.getDriverlistApi()
+  }
+
+
+  back(){
+
+  }
+  save(){
+
+  }
+
+  generatePDF(data){
+
+
+  }
+  dateWiseFilter(){
+    console.log(this.selectedDateRange,this.driverval)
+    if(this.selectedDateRange.length!=0){
+
+
+   
+  }
+    //this.getDriverSummaryAdminList(result)
+
+  }
+
+  mergeOrders(orderItems: any[]) {
+    this.summaryaData = orderItems.reduce((acc, curr) => {
+      const existingOrder = acc.find((order) => order.orderId === curr.orderId);
+      if (existingOrder) {
+        existingOrder.total_qty += curr.total_qty;
+      } else {
+        acc.push(curr);
+      }
+      return acc;
+    }, []);
+  }
+  getDriverlistApi(){
+   // console.log(this.selectedDateRange)
+    let param ={}
+    this._api.getusers(param).subscribe(res => {
+      console.log(res)
+      if(res.status == 200){
+  
+       let passData =  res.data
+       let driver = passData.filter(arr=>{return arr.role == 'DRIVER'}) 
+       driver.sort((a: any, b: any) => {
+        return b.id - a.id;
+      });
+       driver.forEach((element:any, index) => {
+        element.index = index       +1  
+        
+      });
+  
+  
+  
+      this.drivers = driver
+      //  console.log(data)
+      
+      }
+    })
+  }
+
+
+  getDriverSummaryAdminList(date){
+    let param ={date:new Date(date)}
+    this._api.getDriverSummaryAdminList(param).subscribe(res => {
+      console.log(res)
+      if(res.status == 200){
+   
+      console.log(res.data)
+      
+      }
+    })
+  }
+
+  val(data){
+    console.log(data.id)
+
+    let result;
+    if(this.selectedDateRange.length != 0){
+      result=   this.selectedDateRange.endDate['$d']
+    }else{
+      
+      result =  moment()['_d']
+    }
+  
+    console.log(result)
+    let param ={date:new Date(result),id:data.id}
+    this._api.getDriverSummaryAdminList(param).subscribe(res => {
+      console.log(res)
+      if(res.status == 200){
+   
+      console.log(res.data)
+
+      this.summaryaData = res.data
+      this.summaryaData.forEach(element => {
+        element.name = element['UserDetails.userName']
+        
+      });
+
+      this.mergeOrders(  this.summaryaData)
+      
+      }
+    })
+
+    this._api.getReturnDriverSummaryListadmin(param).subscribe(res => {
+      console.log(res)
+      if(res.status == 200){
+   
+      console.log(res.data)
+
+      this.returnSummary = res.data
+
+    
+
+     // this.mergeOrders(  this.summaryaData)
+      
+      }
+    })
+
+    
+  }
+
+
+  returnCount(data){
+   let result =  this.returnSummary.filter(arr=>{return arr.orderId == data}) 
+console.log(result)
+   if(result.length>0){
+
+    return result[0].total_amount
+   }else{
+    return '-'
+   }
+
+  }
+
+  view(data){
+    this.router.navigate(['/pages/summary/'+data]) 
+  }
+  
+}

src/app/pages/users/user-form/user-form.component.html

@@ -37,12 +37,13 @@
     
     
     </ng-container>
-    <!-- <label for="subject">Role:</label>
+    <label for="subject">Role:</label>
  
     <nb-select selected="ADMIN"  formControlName="role" >
         <nb-option value="ADMIN">ADMIN</nb-option>
+        <nb-option value="FRONT-OFFICE">FRONT OFFICE</nb-option>
         
-      </nb-select> -->
+      </nb-select>
     <nb-card-footer>
         <button type="button" class="cancel" nbButton status="danger" (click)="cancel()">Cancel</button>
         <button nbButton status="success" type="submit" [disabled]="!userForm.valid">Submit</button>

src/app/pages/users/user-form/user-form.component.ts

@@ -23,7 +23,7 @@ export class UserFormComponent implements OnInit {
 
 
 
-      // role: new FormControl('', [Validators.required]),
+      role: new FormControl('', [Validators.required]),
       userName: new FormControl('', [Validators.required]),
       // contactNo: new FormControl('', [Validators.required, Validators.maxLength(20)]),
       mobileNo: new FormControl('', [Validators.required,  Validators.minLength(10),Validators.maxLength(10)]),
@@ -62,7 +62,7 @@ export class UserFormComponent implements OnInit {
     this.formData.append('userName',tmp.userName) 
     this.formData.append('email', tmp.email);
     this.formData.append('password', tmp.password);
-    this.formData.append('role', 'ADMIN');
+    this.formData.append('role', tmp.role);
     this.formData.append('mobileNo', tmp.mobileNo);  
 
     this._api.addUserFormDetails (this.formData).subscribe(res => {

src/app/pages/users/users.component.html

@@ -1,12 +1,151 @@
 <nb-card>
     <nb-card-header>
-      <nb-icon icon="person-add-outline"></nb-icon>  User Management
+      <div class="row show-grid">
+        <div class="col-md-6">
+          <div>     <nb-icon icon="person-add-outline"></nb-icon>  User Management</div>
+        </div>
+        <div class="col-md-4">
+          <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-2">
+          <div style="    text-align: end;"> 
+            <!-- <button  (click)="Assign()" nbButton status="primary" hero>
+              Assign Driver
+              </button> -->
+            <button  (click)="onCreateConfirm()" nbButton status="primary" hero>
+           Add User
+          </button>
+        </div>
+        </div>
+      </div>
+   
     </nb-card-header>
   
     <nb-card-body>
-      <ng2-smart-table [settings]="settings" [source]="source" (edit)="onSaveConfirm($event)"
+      <!-- <ng2-smart-table [settings]="settings" [source]="source" (edit)="onSaveConfirm($event)"
       (create)="onCreateConfirm($event)" (delete)="onDeleteConfirm($event)">
-      </ng2-smart-table>
+    
+      </ng2-smart-table> -->
+
+      <ng-data-table  
+        [id]="'i'" 
+        [items]=admin
+        [minContentWidth]="500"
+        [pageable]="true"  
+        [showColumnSelector]="false" 
+        [showHeader]="false"
+        [selectMode]="'multi'" 
+        [minContentHeight]="350" 
+        >  
+      
+        <ng-data-table-column 
+        [field]="'index'"
+        [sortable]="false"
+        [title]="'ID'"
+        [filterable]="false"
+        [width]="2"> 
+  
+        </ng-data-table-column> 
+
+        <ng-data-table-column 
+        [field]="'userName'"
+        [sortable]="false"
+        [title]="'Name'"
+        [filterable]="false"
+        [width]="4"> 
+  
+        </ng-data-table-column> 
+        <ng-data-table-column 
+        [field]="'email'"
+        [sortable]="false"
+        [title]="'E-mail'"
+        [filterable]="false"
+        [width]="6"> 
+  
+        </ng-data-table-column> 
+        <ng-data-table-column 
+        [field]="'mobileNo'"
+        [sortable]="false"
+        [title]="'Mobile No'"
+        [filterable]="false"
+        [width]="4"> 
+  
+        </ng-data-table-column> 
+        <ng-data-table-column 
+        [field]="'role'"
+        [sortable]="false"
+        [title]="'Role'"
+        [filterable]="false"
+        [width]="4"> 
+  
+        </ng-data-table-column> 
+        <ng-data-table-column 
+        [field]="'isActive'"
+        [sortable]="false"
+        [title]="'Status'"
+        [filterable]="false"
+        [width]="4"> 
+        <ng-template #ngDataTableCell  let-row="row">
+          <td  >
+            <div   style="display: flex; align-items: center;">
+          
+            
+              <nb-toggle [(ngModel)]="row.item.isActive" (change)="onDeleteConfirm(row.item)">
+
+                <span *ngIf="row.item.isActive == 1"  style="color: green;">
+                  Active
+                   </span>
+                   <span  *ngIf="row.item.isActive == 0" style="color: red;" >
+                    Inactive
+                      </span>
+              </nb-toggle>
+                 
+            
+               
+            </div>
+          
+          </td> 
+          </ng-template>
+        </ng-data-table-column> 
+        <ng-data-table-column 
+        [field]="'role'"
+        [sortable]="false"
+        [title]="'Action'"
+        [filterable]="false"
+        [width]="3"> 
+  
+     
+
+
+
+
+
+
+     
+        <ng-template #ngDataTableCell  let-row="row">
+        <td  >
+          <div class="align-center" style="display: flex; align-items: center;">
+            <!-- <span   class="check"   (click)="onSaveConfirm(row.item)">
+              <i class="nb-edit"  ></i>
+            </span> -->
+            <nb-icon icon="edit-outline"  title="Edit" style="margin-left: 1rem;" (click)="onSaveConfirm(row.item)"></nb-icon>  
+            <!-- <span  class="check" (click)="onDeleteConfirm(row.item)">
+              <i class="nb-trash" ></i>
+            </span> -->
+            <nb-icon icon="refresh-outline" title="Reset Password"  style="margin-left: 1rem;" (click)="resetPassword(row.item)"></nb-icon>  
+            
+          </div>
+        
+        </td> 
+        </ng-template>
+      </ng-data-table-column> 
+        </ng-data-table>
     </nb-card-body>
   </nb-card>
   

src/app/pages/users/users.component.scss

@@ -9,3 +9,119 @@
 //   flex: 1 0 auto;
 //   min-width: 20rem !important;
 // }
+
+.align-left{
+   text-align: left !important;
+}
+.align-center{
+   text-align: center !important;
+}
+.align-right{
+  text-align: right !important;
+}
+ ::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-even td {
+   background: white;
+   font-family: var(--smart-table-font-family);
+ font-size: var(--smart-table-font-size);
+ font-weight: var(--smart-table-font-weight);
+ line-height: var(--smart-table-line-height);
+ color: var(--smart-table-fg);
+}
+::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table thead > tr .ng-data-table-column-header .ng-data-table-column-header-label:first-child {
+  font-size: 18px;padding: 10px; color: #1e6bb8;
+  text-decoration: none;
+  font-family: var(--smart-table-header-font-family);
+  font-size: var(--smart-table-header-font-size);
+  font-weight: var(--smart-table-header-font-weight);
+  line-height: var(--smart-table-header-line-height);
+}
+::ng-deep  :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-odd td {
+  
+ font-family: var(--smart-table-font-family);
+ font-size: var(--smart-table-font-size);
+ font-weight: var(--smart-table-font-weight);
+ line-height: var(--smart-table-line-height);
+ color: var(--smart-table-fg);
+}
+::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table-content-container .ng-data-table-content {
+  min-height: 100px !important;
+  font-size: 18px; 
+}
+::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table thead > tr:last-child th {
+ 
+  background-color:#fff;    font-family: var(--smart-table-font-family);
+  font-size: var(--smart-table-font-size);
+  font-weight: var(--smart-table-font-weight);
+  line-height: var(--smart-table-line-height);
+  color: var(--smart-table-fg);
+ 
+}
+tr{
+   color: white;
+   background-color:#fff;
+}
+th{
+  color: white;
+  background-color:#fff;
+}
+
+  * {
+     box-sizing: border-box;
+   }
+   .row {
+     display: flex;
+     background-color:#fff;
+   }
+   
+   /* Create two equal columns that sits next to each other */
+   .column {
+     flex: 50%;
+     //  
+     // height: 300px; /* Should be removed. Only for demonstration */
+   }
+   ::ng-deep .mat-select-value{    
+     color: white!important;  }
+   .column1 {
+      width: 210px;
+     text-align: center;
+     text-overflow: ellipsis;
+     padding: 30px;
+     //height: 300px; /* Should be removed. Only for demonstration */
+   }
+
+  
+   .add {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.75rem !important;
+      padding: var(--smart-table-filter-padding);
+      border-color: var(--smart-table-add-button-border-color);
+      background-color: var(--smart-table-add-button-background-color);
+      color: var(--smart-table-add-button-text-color);
+      border-radius: 0.375rem;
+
+      font-family: var(--smart-table-header-font-family);
+      font-size: var(--smart-table-header-font-size);
+      font-weight: var(--smart-table-header-font-weight);
+      line-height: var(--smart-table-header-line-height);
+  }
+  span{
+ 
+    color: #000;
+  }
+ 
+ span:hover{
+ 
+    color: #1e6bb8;
+  }
+  a[disabled="disabled"] {
+    pointer-events: none;
+}
+  .check{
+    display: flex; align-items: center;     text-decoration: none;
+            height: 100%; width: 100%; font-size: 2rem!important; 
+  }
+ 
+
+   

src/app/pages/users/users.component.ts

@@ -25,6 +25,10 @@ export class UsersComponent  {
     actions: {
       
       position: 'right', // left|right
+    },
+    pager : {
+      display : true,
+      perPage:5
   },
     mode: 'external',
     add: {
@@ -61,12 +65,13 @@ export class UsersComponent  {
       role: {
         title: 'Role',
         type: 'string',
-      },
+      }
      
-    },
+    }
   };
-
+  filteredItems: any[];
-  source: LocalDataSource = new LocalDataSource();
+  searchTerm: string;
+  public source: LocalDataSource = new LocalDataSource();
   minimize = false;
   maximize = false;
   fullScreen = true;
@@ -76,9 +81,11 @@ export class UsersComponent  {
   destroyByClick = true;
   duration = 2000;
   hasIcon = true;
+  admin:any =[];
   position: NbGlobalPosition = NbGlobalPhysicalPosition.TOP_RIGHT;
   preventDuplicates = false;
   status: NbComponentStatus = 'primary';
+ 
   constructor(private toastrService: NbToastrService,private service: SmartTableData,public _api:PageapiService,private windowService: NbWindowService) {
     const data = this.service.getData();
   
@@ -90,31 +97,36 @@ export class UsersComponent  {
 
   onDeleteConfirm(event): void {
     console.log(event)
-    let passData = event.data
+    let passData = event
-    if (window.confirm('Are you sure you want to delete?')) {
+   // if (window.confirm('Are you sure you want to delete?')) {
       //event.confirm.resolve();
 
    
 
-      let deletedata  = {'isActive':0,'id':passData.id}
+      let deletedata  = {'isActive':event.isActive,'id':passData.id}
   
       this._api.addUserFormDetails (deletedata).subscribe(res => {
         if (res.status == 200) {
   console.log(res)
   this.getuserlistApi();
-  this.showToast('success', 'Data Removed Successfully', 'Removed User Data Completed..!');
+  if(event.isActive == 1){
+    this.showToast('success', 'Data Removed Successfully', 'Active User Data Completed..!');
+  }else{
+    this.showToast('success', 'Data Removed Successfully', 'Inactive User Data Completed..!');
+  }
+
         }else{
           this.showToast('warning', 'Somthing is Wrong...!', 'Edit User Data Failed..!');
         }
       })
 
-    } else {
+   // } else {
-      event.confirm.reject();
+   //   event.confirm.reject();
+   // }
   }
-  }
+  onCreateConfirm() {
-  onCreateConfirm(event) {
     console.log("Create Event In Console")
-    console.log(event);
+    console.log();
     const buttonsConfig: NbWindowControlButtonsConfig = {
       minimize: this.minimize,
       maximize: this.maximize,
@@ -154,7 +166,7 @@ export class UsersComponent  {
       fullScreen: this.fullScreen,
       close: this.close,
     };
-    const windowRef: NbWindowRef =  this.windowService.open(UserFormComponent, { title: `Edit User`, context: event.data
+    const windowRef: NbWindowRef =  this.windowService.open(UserFormComponent, { title: `Edit User`, context: event
     , buttons: buttonsConfig  });
    
 
@@ -178,19 +190,24 @@ export class UsersComponent  {
 
   getuserlistApi(){
     let param ={}
-    this._api.getusers(param).subscribe(res => {
+    this._api.getusers(param).subscribe(async res => {
       console.log(res)
       if(res.status == 200){
 
        let passData =  res.data
-       let admin = passData.filter(arr=>{return arr.role == 'ADMIN'}) 
+       let admin = passData.filter(arr=>{return arr.role == 'ADMIN' || arr.role == 'FRONT-OFFICE'}) 
 
        admin.forEach((element:any, index) => {
         element.index = index  +1       
         
       });
       //  console.log(data)
-        this.source.load(admin);
+
+      this.admin = admin
+    
+       await this.source.load(admin);
+       this.source.setPaging(1, 10, true);
+   
       }
     })
   }
@@ -213,4 +230,54 @@ export class UsersComponent  {
       `${titleContent}`,
       config);
   }
+
+  filterItems() {
+    console.log(  this.searchTerm)
+   
+     if(  this.searchTerm !=''){
+   
+   
+     this.filteredItems = this.admin.filter(item =>
+       Object.values(item).some(value => {
+         if (typeof value === 'string') {
+           return value.toLowerCase().includes(this.searchTerm.toLowerCase());
+         }
+         return false;
+       })
+     );
+     this.admin = this.filteredItems
+   }else{
+     console.log( 'fhjsgsajdhgasksjgfcckjsdfgckjsdhfk')  
+   
+     this.getuserlistApi()
+   }
+   
+   
+   
+   console.log( this.filteredItems)
+   }
+
+   resetPassword(data){
+    console.log(data)
+
+    this.formData= new FormData();
+    if(data.hasOwnProperty('id')){
+      this.formData.append('id', data.id);
+     
+    }  
+   
+    this.formData.append('password', 'Test@123');
+  
+
+    this._api.addUserFormDetails (this.formData).subscribe(res => {
+      if (res.status == 200) {
+console.log(res)
+this.showToast('success', 'Password Changed Successfully', '');
+ 
+      }else{
+        this.showToast('warning', 'Password Changed Failed', '');
+      }
+    })
+
+   }
 }

src/environments/environment.prod.ts

@@ -4,5 +4,6 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 export const environment = {
+  apiEndpoint:'https://dev.venbait.in/vnms/api/',
   production: true,
 };

src/environments/environment.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright Akveo. All Rights Reserved.
+ * Copyright venba. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 // The file contents for the current environment will overwrite these during build.
@@ -9,6 +9,8 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  apiEndpoint:'http://192.168.1.200:8081/api/',
+//apiEndpoint:'https://dev.venbait.in/vnms/api/',
+apiEndpoint:'http://192.168.1.29:8081/api/',
+  mailUrl:'',
   production: false,
 };