Merge branch 'master' of bitbucket.org:venbainformationtechnology/appointments_frontend

2023-05-27 11:53:05 +05:30 · 2023-05-27 11:53:05 +05:30 · 1b486bc783
commit 1b486bc783
parent 57e9cc7ec8 fe910c9c99
56 changed files with 9513 additions and 12915 deletions
--- a/ng-seed/Appointment_Frontend_Build.zip
+++ b/ng-seed/Appointment_Frontend_Build.zip
--- a/ng-seed/package-lock.json
+++ b/ng-seed/package-lock.json
--- a/ng-seed/src/app/app.routing.ts
+++ b/ng-seed/src/app/app.routing.ts
@ -21,7 +21,7 @@ export const AppRoutes: Routes = [{
    loadChildren: () => import('./appoinment/business/business.module').then(m => m.BusinessModule)
  },
  {
-    path: 'appoinments',
+    path: 'appointments',
    loadChildren: () => import('./appoinment/appoinments/appoinments.module').then(m => m.AppoinmentsModule)
    
  },
--- a/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.html
+++ b/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.html
@ -13,10 +13,13 @@
      {{details.userName}}                 
    </mat-option>
  </mat-select>
-</mat-form-field>
-<!-- <div class="calender ">
-   <i style="font-size:24px" class="fa" [routerLink]="['/appoinment/calendar-list']">&#xf073;</i>
-</div> -->
+</mat-form-field>  
+  <mat-button-toggle-group name="fontStyle" aria-label="Font Style"> 
+    <mat-button-toggle value="List">List</mat-button-toggle>
+    <mat-button-toggle value="Calender" (click)="onClickCalender()">Calender</mat-button-toggle>
+  </mat-button-toggle-group> 
+
+<!-- <a><i style="font-size:24px" class="fa" (click)="onClickCalender()">&#xf073;</i></a>  -->
 <button mat-button (click)="openDialog('Add',{})"   class="button">Add Appointment</button>


@ -41,7 +44,7 @@

                      <ng-container matColumnDef="datetime">
                        <th mat-header-cell *matHeaderCellDef class="font-color th-mat"> Date and Time </th>
-                        <td mat-cell *matCellDef="let row"> {{row.appoinmentDate | date:'dd-MMM-YYYY'}}<br> {{row.appoinmentSlots[0] | date:'shortTime'}} </td>
+                        <td mat-cell *matCellDef="let row"> {{row.appoinmentDate | date:'dd-MMM-YYYY'}}<br> {{row.appoinmentSlots[0] | date:'shortTime'}} -  {{row.appoinmentSlots[row.appoinmentSlots.length-1] | date:'shortTime'}} </td>
                      </ng-container>

                      <ng-container matColumnDef="phoneNo">
@ -68,20 +71,21 @@
                        <th mat-header-cell *matHeaderCellDef class="font-color"> Action </th>
                        <td mat-cell *matCellDef="let row" class="action-link"> 
                          <a (click)="openDialog('Update',row)"><span class="material-icons edit-color">edit</span></a> 
-                          <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color2 delete">delete</span></a> 
+                          <!-- <a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color2 delete">delete</span></a>  -->
                        </td>
                      </ng-container>

                      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                    </table>
-      </ng-scrollbar>
-                    <mat-card *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
+     
+                    <mat-card-content  *ngIf="isLoading" style="margin-top: 5rem;display: flex; justify-content: center; align-items: center">
                      <mat-progress-spinner 
                        color="primary" 
                        mode="indeterminate">
                      </mat-progress-spinner>
-                    </mat-card>
+                    </mat-card-content>
+                  </ng-scrollbar>
                    <div [hidden]="recordStatus">
                      <mat-paginator  #paginator class="mat-elevation-z1" [length]="appointmentListLength" [pageIndex]="pageIndex" [pageSize]="pageSize"
                      [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
--- a/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.scss
+++ b/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.scss
@ -134,4 +134,15 @@ tr.mat-header-row {
 .cancelStatus {
  color: red;
  font-weight: bold;
+}
+
+::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+ line-height: 0px !important; 
+}
+
+::ng-deep .mat-button-toggle-button { 
+  padding: 5px 7px !important;
+}
+.action-link{
+text-align: center;
 }
--- a/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.ts
+++ b/ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.ts
@ -9,6 +9,7 @@ import { environment } from 'environments/environment';
 import Swal from 'sweetalert2';
 import { AppointmentsService } from '../appointments-service/appointments.service';
 import { DialogBoxComponent } from '../dialog-box/dialog-box.component';
+import { Router } from '@angular/router';
 export interface UsersData {
  busId: number;
  appoinmentTime: string;
@ -58,7 +59,7 @@ export class AppoinmentsListComponent implements OnInit {
  consultants: any = [];
  selectPractitioner:any = [];
  user_role: any=[];
-  constructor(private notifierService: NotifierService,public dialog: MatDialog, public _app:AppointmentsService) { }
+  constructor(private router: Router,private notifierService: NotifierService,public dialog: MatDialog, public _app:AppointmentsService) { }

  ngOnInit(): void {    
    this.recordStatus=false;
@ -267,7 +268,7 @@ export class AppoinmentsListComponent implements OnInit {
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log(result)
-      if(result == 0){   
+      if(result.data == 0){   
        if(this.user_role != 'FRONTDESK'){
          let param ={"busId":localStorage.getItem('busId'),"userId":localStorage.getItem('user_id')}
          console.log(param)
@ -407,5 +408,9 @@ export class AppoinmentsListComponent implements OnInit {

  }

+  onClickCalender(){
+    this.router.navigate(['appointments/calender-view']);
+  }
+

 }
--- a/ng-seed/src/app/appoinment/appoinments/appoinments-routing.module.ts
+++ b/ng-seed/src/app/appoinment/appoinments/appoinments-routing.module.ts
@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AppoinmentsListComponent } from './appoinments-list/appoinments-list.component';
+import { CalendarListComponent } from '../calendars/calendar-list/calendar-list.component';

 const routes: Routes = [
  {
@ -8,6 +9,10 @@ const routes: Routes = [
      path: '',
      component: AppoinmentsListComponent
 
+  },
+  {
+    path: 'calender-view',
+    component: CalendarListComponent
  }
 ];

--- a/ng-seed/src/app/appoinment/appoinments/appoinments.module.ts
+++ b/ng-seed/src/app/appoinment/appoinments/appoinments.module.ts
@ -11,7 +11,12 @@ import { DemoMaterialModule } from 'app/shared/demo.module';
 import { NgScrollbarModule } from 'ngx-scrollbar';
 import { NotifierModule, NotifierOptions } from 'angular-notifier';
 import { DataTableModule } from 'ornamentum';
-import { AppointmentAddcustomerComponent } from './appointment-addcustomer/appointment-addcustomer.component'
+import { AppointmentAddcustomerComponent } from './appointment-addcustomer/appointment-addcustomer.component';
+ 
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+import { CalendarListComponent } from '../calendars/calendar-list/calendar-list.component';
+import { CalendardialogComponent } from '../calendars/calendardialog/calendardialog.component';
 // import  CalendarTodayIcon  from '@material-ui/icons/CalendarToday';


@ -60,7 +65,9 @@ const customNotifierOptions: NotifierOptions = {
  declarations: [
    AppoinmentsListComponent,
    DialogBoxComponent,
-    AppointmentAddcustomerComponent
+    AppointmentAddcustomerComponent,
+    CalendarListComponent,
+    CalendardialogComponent
  ],
  imports: [
    DemoMaterialModule,
@ -71,7 +78,15 @@ const customNotifierOptions: NotifierOptions = {
    // ScrollingModule,
    NgScrollbarModule,
    NotifierModule.withConfig(customNotifierOptions),
-    DataTableModule.forRoot()
+    DataTableModule.forRoot(),
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+  }),
+
+ 
+ 
+  
   
  ]
 })
--- a/ng-seed/src/app/appoinment/appoinments/appointment-addcustomer/appointment-addcustomer.component.scss
+++ b/ng-seed/src/app/appoinment/appoinments/appointment-addcustomer/appointment-addcustomer.component.scss
@ -89,7 +89,7 @@ $tem-color : #217e69;
 //     // height: auto!important;
 // }
 ::ng-deep .mat-dialog-content {
-    max-height: 75vh!important;
+    max-height: unset !important;
    overflow: unset!important;
    // overflow: hidden!important;
 }
--- a/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.html
+++ b/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.html
@ -17,10 +17,10 @@
         <mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
      </mat-form-field>  -->

-      <mat-form-field  appearance="outline" class="mat-pane">
+      <!-- <mat-form-field  appearance="outline" class="mat-pane">
         <mat-label>Business</mat-label>
         <input  matInput placeholder="Business" name="Business"   formControlName="busname" readonly>        
-       </mat-form-field> 
+       </mat-form-field>  -->
       <mat-form-field  appearance="outline" class="mat-pane" *ngIf="user_role != 'FRONTDESK'">
         <mat-label>Practitioner</mat-label>
         <input  matInput placeholder="practitioner" name="practitioner"   formControlName="practitioner" readonly>        
@ -69,15 +69,27 @@
         <mat-label>Choose a Time</mat-label>
         <input  matInput placeholder="Select Time" name="week" [readonly]="!form.get('service').value" formControlName="appoinmentTime">
       </mat-form-field>  -->
+       <mat-form-field appearance="outline" class="mate" *ngIf="action == 'Update'">
+         <mat-label>Date</mat-label>
+         <!-- <mat-datepicker #picker4></mat-datepicker>
+         <mat-datepicker-toggle matPrefix [for]="picker4"></mat-datepicker-toggle> -->
+         <input matInput  placeholder="Choose a date" formControlName="appoinmentDate" readonly>
+      </mat-form-field>
+      <mat-form-field  appearance="outline" class="mate date-marge"  id="bt" *ngIf="action == 'Update'">
+         <mat-label>Time</mat-label>
+         <input  matInput placeholder="Select Time" name="week" formControlName="appoinmentTime" readonly>
+       </mat-form-field> 
        
      <mat-card class="cardDesign"> 
         <div class="innerdivs navStyle" fxLayoutAlign="center center"> 
            <button  type="button"  mat-raised-button (click)="goToSlotBooking2()" style="background-color: #7fffd400;box-shadow: none;color:#fff" ><mat-icon style="cursor: pointer;">keyboard_arrow_left</mat-icon></button><span style="width: 150px;text-align: center;">{{check(days)  | date:'longDate'}}</span><button mat-raised-button type="button" (click)="goToSlotBooking()" *ngIf="clicks < advanced_slot_days" style="background-color: #7fffd400;box-shadow: none;color:#fff" ><mat-icon style="cursor: pointer;">keyboard_arrow_right</mat-icon></button>
         </div>
         <div class="innerdivs2" >  
-            <ng-scrollbar class="scrollHV2" *ngIf="slots.length != 0">           
-              <button type="button" *ngFor="let slot of slots;let i=index"  mat-raised-button mat-button-sm  class="mr-1 mt-1 hoverButton" [ngClass]="{'primary':slotIndex != i && checkSlotDur(slot,i)==1,'clickedSlot':slotIndex == i && checkSlotDur(slot,i)==1 }" (click)="toggleActive($event,slot,i)"><span *ngIf="checkSlotDur(slot,i)==1">{{slot | date:'shortTime'}}</span></button>   
-            </ng-scrollbar>        
+            <div *ngIf="slots.length != 0" [ngStyle]="{ 'height.px': slots.length * 12 }">
+            <!-- <ng-scrollbar class="scrollHV2" *ngIf="slots.length != 0">            -->
+               <button type="button" *ngFor="let slot of slots;let i=index"  mat-raised-button mat-button-sm  class="mr-1 mt-1 hoverButton" [ngClass]="{'primary':slotIndex != i && checkSlotDur(slot,i)==1,'clickedSlot':slotIndex == i && checkSlotDur(slot,i)==1 }" (click)="toggleActive($event,slot,i)"><span *ngIf="checkSlotDur(slot,i)==1">{{slot | date:'shortTime'}}</span></button>   
+               <!-- </ng-scrollbar>         -->
+            </div>
            <div  *ngIf="slots.length == 0">
               <div fxLayout="row" class="flexCard">
                  <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center">
@ -125,22 +137,24 @@
         </mat-select>
       </mat-form-field>

-      <div class="notes">
+      <!-- <div class="notes">
         <input type="checkbox" id="scales" name="scales" checked>
         <label for="scales">Send notifications for customer</label>
-       </div>
+       </div> -->
      
      <!-- <img  class="image" [src]="url" height="50">
      <input type='file' (change)="onSelectFile($event)" formControlName="image"> -->
-      <ng-template #elseTemplate>
-        Sure to delete <b>{{local_data.cusName}}</b>?
-      </ng-template>
+      
    </div>
-   </ng-scrollbar> 
-      <div mat-dialog-actions>
+     <div mat-dialog-actions>
        <button mat-button type="submit" class="mat-green"  mat-raised-button >{{action}}</button>
        <button mat-button type="button" (click)="closeDialog()" >Cancel</button>
-      </div>  
+      </div> 
+   </ng-scrollbar> 
+      
      
  </form>
+  <ng-template #elseTemplate>
+   Sure to delete <b>{{local_data.cusName}}</b>?
+ </ng-template>
  <notifier-container></notifier-container>
--- a/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.scss
+++ b/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.scss
@ -89,7 +89,7 @@ $tem-color : #217e69;
 //     // height: auto!important;
 // }
 ::ng-deep .mat-dialog-content {
-    max-height: 75vh!important;
+    max-height: unset !important;
    overflow: unset!important;
    // overflow: hidden!important;
 }
@ -97,7 +97,7 @@ $tem-color : #217e69;
    overflow: hidden!important;
 }
 .scrollHV {
-    height: calc(100vh - 190px);
+    height: calc(100vh - 85px);
 }
 .scrollHV2 {
    height: calc(100vh - 462px);
--- a/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.ts
+++ b/ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.ts
@ -115,7 +115,8 @@ export class DialogBoxComponent implements OnInit {
    console.log(data);
    this.local_data = {...data};
    this.action = this.local_data.action; 
-   
+    this.frontDeskChoosedPractiID = this.local_data['ServicesMapDetail.userId']
+    console.log(this.frontDeskChoosedPractiID)
  }
  get f(){
    return this.form.controls;
@ -478,7 +479,8 @@ export class DialogBoxComponent implements OnInit {
                  }else{
                    this.notifierService.notify('success', 'Appointment Added Successfully');
                  }
-                   this.dialogRef.close(0);
+                  let param = {data:0,response:res}
+                   this.dialogRef.close(param);
                }
              })
            }
@ -488,6 +490,7 @@ export class DialogBoxComponent implements OnInit {


  goToSlotBooking(i){
+    
    console.log(i)
  //  this.days[]
    if(this.clicks <this.advanced_slot_days){
@ -510,7 +513,7 @@ export class DialogBoxComponent implements OnInit {
  }
 
 let params ={"id":userId , "day": this.dayName , "addcount": this.clicks}
-
+ console.log(params)
 this.end_user.getSlots(params).subscribe(res => {
   if (res.status == 200) {
     console.log(res)
@ -527,8 +530,10 @@ export class DialogBoxComponent implements OnInit {
    //  });
   }
 })
+ this.form.controls['appoinmentDate'].setValue(this.days[ this.clicks])
  }
  goToSlotBooking2(){
+    
  //  this.days[]
    if(this.clicks >0){
    this.clicks -= 1;
@ -549,7 +554,7 @@ export class DialogBoxComponent implements OnInit {
   userId = this.frontDeskChoosedPractiID
 }
 let params ={"id":userId , "day": this.dayName , "addcount": this.clicks}
-
+console.log(params) 
 this.end_user.getSlots(params).subscribe(res => {
   if (res.status == 200) {
     console.log(res)
@ -558,6 +563,7 @@ export class DialogBoxComponent implements OnInit {
   }
 })
  console.log( this.clicks)
+  this.form.controls['appoinmentDate'].setValue(this.days[ this.clicks])
  }
  check(param){
    return param[this.clicks];
--- a/ng-seed/src/app/appoinment/business/add-business/add-business.component.scss
+++ b/ng-seed/src/app/appoinment/business/add-business/add-business.component.scss
@ -48,8 +48,9 @@
    }
 }
 ::ng-deep .mat-dialog-content {
-    max-height: 170vh !important;
-    overflow: hidden!important;
+    max-height: unset !important;
+    overflow: unset!important;
+    // overflow: hidden!important;
 }
 ::ng-deep .mat-dialog-container{
    overflow: hidden!important;
--- a/ng-seed/src/app/appoinment/business/business-list/business-list.component.html
+++ b/ng-seed/src/app/appoinment/business/business-list/business-list.component.html
@ -1,11 +1,24 @@

 <h3>Business Details</h3>
-<mat-form-field style="width:30%">
-  <mat-label>Filter</mat-label>
-  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Type Here" #input>
-</mat-form-field>
-<mat-checkbox class="example-margin" (change)="setAll($event.checked)">Click here to see Inactive List</mat-checkbox>
-<button mat-button (click)="openDialog('Add',{})"   class="button">Add Business</button>
+<div fxLayout="row wrap">
+  <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" class="p-gap" fxLayoutAlign="start center" >
+    <mat-form-field style="width:100%">
+      <mat-label>Filter</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Type Here" #input>
+    </mat-form-field>
+  </div>
+  <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="55" fxFlex.lg="55" fxFlex.xl="55" class="p-gap" fxLayoutAlign="end center" >
+    <span>Active 
+      <mat-slide-toggle class="example-margin" 
+      (change)="onToggleChange($event.checked)"></mat-slide-toggle> Inactive</span> 
+      <!-- <mat-checkbox class="example-margin" (change)="setAll($event.checked)">Click here to see Inactive List</mat-checkbox> -->
+  </div>
+  <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="15" fxFlex.lg="15" fxFlex.xl="15" class="p-gap" fxLayoutAlign="end center">    
+    <button mat-button (click)="openDialog('Add',{})"   class="button">Add Business</button>
+  </div>
+</div>
+
+
    <!-- <div class="example-container mat-elevation-z8 "> -->
 <mat-sidenav-container class="app-inner background-none shadow-none mail-db">
  
@ -71,14 +84,13 @@
                     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                     <!-- <tr mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="row.isActive != 1 ? 'bgRowColor' : ''"></tr> -->
                    </table>
-
-                </ng-scrollbar>
-                    <mat-card *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
+                    <mat-card-content *ngIf="isLoading" style="margin-top: 6rem;display: flex; justify-content: center; align-items: center">
                      <mat-progress-spinner 
                        color="primary" 
                        mode="indeterminate">
                      </mat-progress-spinner>
-                    </mat-card>
+                    </mat-card-content>
+                </ng-scrollbar>                   
                    <div [hidden]="recordStatus">
                      <mat-paginator  #paginator class="mat-elevation-z1" [length]="businessListLength" [pageIndex]="pageIndex" [pageSize]="pageSize"
                      [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
--- a/ng-seed/src/app/appoinment/business/business-list/business-list.component.scss
+++ b/ng-seed/src/app/appoinment/business/business-list/business-list.component.scss
@ -8,6 +8,7 @@
    float: right;
    background-color: #4caf50;
    color: #ffff;
+    height: 35px;
 }
 th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
    padding: 6px;
--- a/ng-seed/src/app/appoinment/business/business-list/business-list.component.ts
+++ b/ng-seed/src/app/appoinment/business/business-list/business-list.component.ts
@ -94,6 +94,7 @@ export class BusinessListComponent implements OnInit {
  getBusinessList() {
    //this._pd.getTabStatusPdDetails(this.tabStatus)
    this._bus.getBusinessListDetails().subscribe(res => {
+      
          if (res.status == 200) {  
            this.isLoading = false
            this.businessList = res.data;
@ -303,10 +304,16 @@ export class BusinessListComponent implements OnInit {
    return this.apiUrl+'imageViewer?img_name='+image;
  }

-  setAll(check) {
-    console.log(check)
-    this.activeAndInactive = check
-    this.getBusinessList()
+//   setAll(check) {
+//     console.log(check)
+//     this.activeAndInactive = check
+//     this.getBusinessList()
+//  }
+
+ onToggleChange(event){
+  console.log(event) 
+  this.activeAndInactive = event
+  this.getBusinessList()
 }

 }
--- a/ng-seed/src/app/appoinment/calendars/calendar-list/calendar-list.component.html
+++ b/ng-seed/src/app/appoinment/calendars/calendar-list/calendar-list.component.html
@ -15,28 +15,33 @@
      </mat-card>
    </mat-card-content>
  </mat-card> -->
-
 <h3>
  
    <!-- <button class="btn btn-primary pull-right" (click)="addEvent()">
      Add new
    </button> -->
+    <mat-button-toggle-group name="fontStyle" aria-label="Font Style"> 
+      <mat-button-toggle value="List" (click)="onClickList()">List</mat-button-toggle>
+      <mat-button-toggle value="Calender">Calender</mat-button-toggle>
+    </mat-button-toggle-group> 
    <button class="btn btn-primary pull-right" (click)="openDialog('Add',{})" mat-raised-button >Add Appoinment</button> 
    <div class="clearfix"></div>
  </h3>
+
+<ng-scrollbar class="scrollHV">
 <mat-toolbar color="primary">
    <span fxFlex fxHide="false" fxHide.gt-xs>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</span>
-    <span fxFlex fxShow="false" fxShow.gt-xs>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</span>
+    <!-- <span fxFlex fxShow="false" fxShow.gt-xs>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</span> -->
    <div fxShow="false" fxShow.gt-xs>
        <button mat-button (click)="view = 'month'" [class.active]="view === 'month'">Month</button>
        <button mat-button (click)="view = 'week'" [class.active]="view === 'week'">Week</button>
        <button mat-button (click)="view = 'day'" [class.active]="view === 'day'">Day</button>
    </div>
-    <div fxHide="false" fxHide.gt-xs>
+    <!-- <div fxHide="false" fxHide.gt-xs>
        <button mat-icon-button (click)="view = 'month'" [class.active]="view === 'month'"><mat-icon>view_module</mat-icon></button>
        <button mat-icon-button (click)="view = 'week'" [class.active]="view === 'week'"><mat-icon>view_week</mat-icon></button>
        <button mat-icon-button (click)="view = 'day'" [class.active]="view === 'day'"><mat-icon>view_day</mat-icon></button>
-    </div>
+    </div> -->
    <span fxFlex fxHide="false" fxHide.gt-xs></span>
    <button mat-icon-button mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate"><mat-icon>chevron_left</mat-icon></button>
    <button mat-icon-button mwlCalendarToday [(viewDate)]="viewDate"><mat-icon>today</mat-icon></button>
@ -51,4 +56,5 @@
        <mwl-calendar-day-view *ngSwitchCase="'day'" [viewDate]="viewDate" [events]="events" [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)">
        </mwl-calendar-day-view>
    </div>
-</mat-card>
+</mat-card>
+</ng-scrollbar>
--- a/ng-seed/src/app/appoinment/calendars/calendar-list/calendar-list.component.scss
+++ b/ng-seed/src/app/appoinment/calendars/calendar-list/calendar-list.component.scss
@ -16,4 +16,15 @@ mat-card {
 .btn{
 background-color: #4caf50!important;
 color: white;
-}
+}
+.scrollHV{
+  height: calc(100vh - 190px);
+}
+
+::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+  line-height: 0px !important; 
+ }
+ 
+ ::ng-deep .mat-button-toggle-button { 
+   padding: 5px 7px !important;
+ }
--- a/ng-seed/src/app/appoinment/calendars/calendar-list/calendar-list.component.ts
+++ b/ng-seed/src/app/appoinment/calendars/calendar-list/calendar-list.component.ts
@ -7,6 +7,14 @@ import { Subject } from 'rxjs';
 import { CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent } from 'angular-calendar';
 import { CalendardialogComponent } from '../calendardialog/calendardialog.component';
 import { DialogBoxComponent } from 'app/appoinment/appoinments/dialog-box/dialog-box.component';
+import { DatePipe } from '@angular/common';
+import { MatTable, MatTableDataSource } from '@angular/material/table';
+import { environment } from 'environments/environment';
+import { PageEvent } from '@angular/material/paginator';
+import { Router } from '@angular/router';
+import { NotifierService } from 'angular-notifier';
+import { AppointmentsService } from 'app/appoinment/appoinments/appointments-service/appointments.service';
+import Swal from 'sweetalert2';

 const colors: any = {
  red: {
@ -28,6 +36,27 @@ const colors: any = {
  styleUrls: ['./calendar-list.component.scss']
 })
 export class CalendarListComponent implements OnInit {
+  push: any;
+  displayedColumns: string[] = ['id','ClientName','datetime','phoneNo','email','status', 'action'];
+  public appointmentListLength: number;
+  // pagination variable details
+  length = 5;
+  pageIndex = 0;
+  pageSize = 10;
+  pageEvent: PageEvent;
+  appoinmentsList: any = [];
+  private apiUrl = environment.apiEndpoint;
+  // dataSource: any;
+  appointmentListSource:any = []
+  // dataSource: any = new MatTableDataSource(ELEMENT_DATA);
+  // @ViewChild(MatPaginator) paginator: MatPaginator;
+  addFormData: any;
+
+  pipe = new DatePipe('en-US'); 
+  isLoading = true 
+  consultants: any = [];
+  selectPractitioner:any = [];
+  user_role: any=[];
  dataSource: any;
  private yesterday: Date;
  dialogRef: MatDialogRef<CalendardialogComponent>;
@ -107,84 +136,378 @@ export class CalendarListComponent implements OnInit {

  activeDayIsOpen = false;
  table: any;
-
-  constructor(public dialog: MatDialog) {
+  recordStatus: boolean;
+  bookedDetails: any = [];
+  constructor(public dialog: MatDialog,private router: Router,private notifierService: NotifierService, public _app:AppointmentsService) {
    this.initializeYesterday();
    this.initializeEvents();
  }
+ 
+ 
+
+  ngOnInit(): void {    
+    this.recordStatus=false;
+    this.user_role = localStorage.getItem('user_role');
+    if(this.user_role != 'FRONTDESK'){
+      let param ={"busId":localStorage.getItem('busId'),"userId":localStorage.getItem('user_id')}
+      console.log(param)
+      this.getAppoinmentsList(param)
+    }else{
+      let param ={"busId":  localStorage.getItem('busId')}
+      console.log(param)
+      this.getAppoinmentsList(param)
+      this.getCosultantList()
+    }
+
+   
+    
+  }
+
+  // ngAfterViewInit() {
+  //   this.appointmentListSource.paginator = this.paginator;
+  //   console.log(this.appointmentListSource,this.paginator)
+  //   this.appointmentListSource.sort = this.sort;
+  // } 
+
+  applyFilter(filterValue: string) {
+    filterValue = filterValue.trim(); // Remove whitespace
+    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
+    this.appointmentListSource.filter = filterValue;
+    console.log(this.appointmentListSource)
+  }
+
+  getCosultantList() { 
+    let param ={"busId": localStorage.getItem('busId')}
+    console.log(param)
+    this._app.getCosultantListDetails(param).subscribe(res => {  
+          if (res.status == 200) {   
+            console.log(res.data)
+            let consultantsList = res.data; 
+            this.consultants = consultantsList.filter(val => val.role == 'PRACTITIONER')
+            console.log(this.consultants)
+          } 
+          else{ 
+            this.consultants=[]; 
+          }
+        });
+  }
+
+  allPractitioner(){
+    let param ={"busId":  localStorage.getItem('busId')}
+      console.log(param)
+    this.getAppoinmentsList(param)
+  }
+
+  getPractitioner(selectedPractititoner){
+    console.log(selectedPractititoner)
+    this.appoinmentsList=[]
+    // {"busId":abc123,userId:"2"} or param = {"busId":abc123}
+    let param = {"busId": selectedPractititoner.busId,"userId":selectedPractititoner.id}
+    this.getAppoinmentsList(param)
+  }
+
+  getAppoinmentsList(param) {
+    this.appoinmentsList=[]
+    let user_role = localStorage.getItem('user_role'); 
+   console.log(param)
+    this._app.getAppoinmentsListDetails(param).subscribe(res => {
+
+      if (res.status == 200) { 
+        this.isLoading = false 
+        this.appoinmentsList = res.data;
+        localStorage.setItem('busId', res.data[0].busId
+        )
+        console.log(this.appoinmentsList)
+        this.appointmentListLength = res.data.length;
+        console.log(this.appointmentListLength)
+        this.appointmentListSource['data'] = this.appoinmentsList;
+        console.log(this.appointmentListSource)
+        
+        console.log(this.appoinmentsList)            
+
+        this.appoinmentsList.forEach(element => {
+          console.log(element)
+          element.appoinmentSlots = JSON.parse(element.appoinmentSlots)
+        });
+        console.log(this.appoinmentsList)
+        this.events = []
+       
+        if(user_role == 'PRACTITIONER'){
+          console.log('if ')
+          let id = localStorage.getItem('user_id')
+          console.log(id)
+          this.appointmentListSource['data'] = this.appoinmentsList;
+          this.appointmentListSource
+          console.log(this.appointmentListSource)
+          let filter = this.appointmentListSource['data'].filter(arr=>{return arr["ServicesMapDetail.userId"] == id}) 
+          console.log(filter)
+          filter.sort((a: any, b: any) => {
+            return b.id - a.id;
+          });
+          filter.forEach((element, index) => {
+            element.index = index            
+            
+          });
+          this.appointmentListSource['data'] = filter
+          
+          filter.forEach(element => {      
+            console.log(element.appoinmentSlots[element.appoinmentSlots.length-1])
+            this.addEvent(element.appoinmentSlots[0],element.appoinmentSlots[element.appoinmentSlots.length-1],element.bookingId)
+          });
+          this.appointmentListLength = filter.length;
+          console.log(this.appointmentListSource)
+          this.recordStatus=false;
+         
+        } else {
+          console.log('else')
+          this.appointmentListLength = res.data.length;
+           console.log(this.appointmentListLength)
+          this.appoinmentsList.sort((a: any, b: any) => {
+            return b.id - a.id;
+          });
+          this.appoinmentsList.forEach((element, index) => {
+            element.index = index
+            
+            
+          });
+          this.appointmentListSource['data'] = this.appoinmentsList;
+
+          this.appoinmentsList.forEach(element => {    
+            console.log(element.appoinmentSlots[element.appoinmentSlots.length-1])
+            this.addEvent( element.appoinmentSlots[0],element.appoinmentSlots[element.appoinmentSlots.length-1],element.bookingId)
+             });
+
+          // this.appoinmentsList.forEach(element => {
+          //   element.appoinmentSlots = JSON.parse(element.appoinmentSlots)
+
+          //  this.addEvent( element.appoinmentSlots[0])
+          // });
+
+
+          console.log(this.appointmentListSource)
+
+        }
+        this.recordStatus=false;
+      } 
+      else{
+        this.isLoading = false 
+        this.appoinmentsList=[];
+        this.appointmentListLength= null;
+        this.recordStatus=true;
+      }
+        }, error => this.isLoading = false)
+      
+  }
+
+
+  pageChange(e) {
+    console.log(e);
+  }
+
+
+  confirmBox(event,element){  
+    console.log(event,element)
+    Swal.fire({  
+      title: 'Are you sure want to Delete?',  
+      text: 'You will not be able to recover this Appointment!',  
+      icon: 'warning',  
+      showCancelButton: true,  
+      confirmButtonText: 'Yes, delete it!',  
+      cancelButtonText: 'No, keep it'  
+    }).then((result) => {  
+      if (result.value) {  
+        console.log('entry')
+        // this.deleteRowData(element);
+          this.formAddUpdateAndDelete(event,element)
+        Swal.fire(  
+          'Deleted!',  
+          'Your Appointment has been deleted.',  
+          'success'  
+        )  
+      } else if (result.dismiss === Swal.DismissReason.cancel) {  
+        Swal.fire(  
+          'Cancelled',  
+          'Your Appointment is safe :)',  
+          'error'  
+        )  
+      }  
+      
+    })   
+  } 
+  openDialog(action,obj) {
+    obj.action = action;
+    const dialogRef = this.dialog.open(DialogBoxComponent, {
+      width: '40%',
+      height: '100%',
+      // maxWidth: '38vw',
+      position: { right: '0' },
+      data:obj
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(result)
+      this.bookedDetails = result.response['data'][0]
+      if(result.data == 0){   
+        if(this.user_role != 'FRONTDESK'){
+          let param ={"busId":localStorage.getItem('busId'),"userId":localStorage.getItem('user_id')}
+          console.log(param)
+          this.getAppoinmentsList(param)
+        }else{
+          let param ={"busId":  localStorage.getItem('busId')}
+          console.log(param)
+          this.getAppoinmentsList(param) 
+        }
+      }
+    });
+  }
+  formAddUpdateAndDelete(result,row_obj){
+    console.log(result,row_obj)
+    let formValue = []
+    if(result.event == 'Add'){
+      console.log('add')
+      let addFormData =   { 
+      busId: row_obj.busId,
+      appoinmentTime: row_obj.appoinmentTime,
+      booking: row_obj.booking,
+      workspace: row_obj.workspace,
+      service: row_obj.service,
+      staff: row_obj.staff,
+      customer: row_obj.customer,
+      paymentStatus: row_obj.paymentStatus,
+      status: row_obj.status,
+      appoinmentDate: row_obj.appoinmentDate,
+      note: row_obj.note,
+      appoinmentSlots: row_obj.appoinmentSlots,   
+      };
+      formValue.push(addFormData);
+     }else if(result.event == 'Update'){  
+      console.log('Update')
+      formValue.push(row_obj);
+     }
+     else if(result == 'Delete'){
+      console.log('delete')
+      let val = {
+        isActive:0,
+        id: row_obj.id
+      }
+      formValue.push(val);
+     }
+     
+    // var d = this.appoinmentsList.length+1
+    console.log(formValue[0])
+     this._app.addFormDetails(formValue[0]).subscribe(res => {
+      if (res.status == 200) {
+        // this.appoinmentsList = res.data;
+        if(this.user_role != 'FRONTDESK'){
+          let param ={"busId":localStorage.getItem('busId'),"userId":localStorage.getItem('user_id')}
+          console.log(param)
+          this.getAppoinmentsList(param)
+        }else{
+          let param ={"busId":  localStorage.getItem('busId')}
+          console.log(param)
+          this.getAppoinmentsList(param) 
+        } 
+        if(result.event == 'Add'){
+          this.notifierService.notify('success', 'Appointment Added Successfully');
+         }else if(result.event == 'Update'){
+           this.notifierService.notify('success', 'Appointment Updated Successfully');
+         } else if(result == 'Delete'){
+           this.notifierService.notify('success', 'Appointment Deleted Successfully');
+         } 
+      }
+      else{
+        this.notifierService.notify('warning', res.message);
+      }
+    }
+    // , error => {this.errorMessage = <any> error});
+    ,error => {
+      
+    });
+  }
+ 
+
+  getData(param){
+    console.log(param)
+
+  }
+
+  onClickList(){
+    this.router.navigate(['appointments']);
+  }
+
+
  private initializeYesterday() {
    this.yesterday = new Date();
    this.yesterday.setDate(this.yesterday.getDate() - 1);
    console.log(   this.yesterday )
  }
  private initializeEvents() {
-    let date = new Date("2023-02-26T11:26:30.882Z")
+    // let date = new Date("2023-02-26T11:26:30.882Z")
    this.events = [
-      {
-        title: 'Editable event',
-        color: colors.yellow,
-        start: this.yesterday,
-        actions: [
-          {
-            label: '<i class="fa fa-fw fa-pencil"></i>',
-            onClick: ({ event }: { event: CalendarEvent }): void => {
-              console.log('Edit event', event);
-            },
-          },
-        ],
-      },
-      {
-        title: 'Editable event',
-        color: colors.yellow,
-        start: date,
-        actions: [
-          {
-            label: '<i class="fa fa-fw fa-pencil"></i>',
-            onClick: ({ event }: { event: CalendarEvent }): void => {
-              console.log('Edit event', event);
-            },
-          },
-        ],
-      },
-      {
-        title: 'Deletable event',
-        color: colors.blue,
-        start: date,
-        actions: [
-          {
-            label: '<i class="fa fa-fw fa-times"></i>',
-            onClick: ({ event }: { event: CalendarEvent }): void => {
-              this.events = this.events.filter((iEvent) => iEvent !== event);
-              console.log('Event deleted', event);
-            },
-          },
-        ],
-      },
-      {
-        title: 'Non editable and deletable event',
-        color: colors.red,
-        start: this.yesterday,
-      },
+      // {
+      //   title: 'Editable event',
+      //   color: colors.yellow,
+      //   start: this.yesterday,
+      //   actions: [
+      //     {
+      //       label: '<i class="fa fa-fw fa-pencil"></i>',
+      //       onClick: ({ event }: { event: CalendarEvent }): void => {
+      //         console.log('Edit event', event);
+      //       },
+      //     },
+      //   ],
+      // },
+      // {
+      //   title: 'Editable event',
+      //   color: colors.yellow,
+      //   start: date,
+      //   actions: [
+      //     {
+      //       label: '<i class="fa fa-fw fa-pencil"></i>',
+      //       onClick: ({ event }: { event: CalendarEvent }): void => {
+      //         console.log('Edit event', event);
+      //       },
+      //     },
+      //   ],
+      // },
+      // {
+      //   title: 'Deletable event',
+      //   color: colors.blue,
+      //   start: date,
+      //   actions: [
+      //     {
+      //       label: '<i class="fa fa-fw fa-times"></i>',
+      //       onClick: ({ event }: { event: CalendarEvent }): void => {
+      //         this.events = this.events.filter((iEvent) => iEvent !== event);
+      //         console.log('Event deleted', event);
+      //       },
+      //     },
+      //   ],
+      // },
+      // {
+      //   title: 'Non editable and deletable event',
+      //   color: colors.red,
+      //   start: this.yesterday,
+      // },
    ];
    console.log( this.events )
  }

  dayClicked({date, events}: {date: Date, events: CalendarEvent[]}): void {
-console.log(date, events)
-this.openDialog('Add',  {date:date})
-// this.openDialog('calender',  {date:date})
-this.addEvent(date)
-    if (isSameMonth(date, this.viewDate)) {
-      if (
-        (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
-        events.length === 0
-      ) {
-        this.activeDayIsOpen = false;
-      } else {
-        this.activeDayIsOpen = true;
-        this.viewDate = date;
-      }
-    }
+    console.log(date, events)
+    //this.openDialog('Add',  {date:date})
+    // this.openDialog('calender',  {date:date})
+   // this.addEvent(date)
+        if (isSameMonth(date, this.viewDate)) {
+          if (
+            (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
+            events.length === 0
+          ) {
+            this.activeDayIsOpen = false;
+          } else {
+            this.activeDayIsOpen = true;
+            this.viewDate = date;
+          }
+        }
  }

  eventTimesChanged({event, newStart, newEnd}: CalendarEventTimesChangedEvent): void {
@ -203,115 +526,26 @@ this.addEvent(date)
      this.dialogRef = null;
    });
  }
-  openDialog(action,obj) {
-    console.log(obj, action)
-    if(action=='calender'){
-      
-    }else{
-      obj.action = action;
-    }
-   
-    const dialogRef = this.dialog.open(DialogBoxComponent, {
-      width: '40%',
-      height: '100%',
-      // maxWidth: '38vw',
-      position: { right: '0' },
-      data:obj
-    });
-    dialogRef.afterClosed().subscribe(result => {
-      console.log(result)
-      if(result.event == 'Add'){
-        this.addRowData(result.data);
-      }else if(result.event == 'Update'){
-        this.updateRowData(result.data);
-      }else if(result.event == 'Delete'){
-        this.deleteRowData(result.data);
-      }
-    });
-  }
-  addRowData(row_obj){
-    var d = this.dataSource.data.length+1
-    console.log(this.dataSource)
-    console.log(row_obj)
-    this.dataSource.data.push
-   ({
-      id: d,
-      time: row_obj.time,
-      booking: row_obj.booking,
-      workspace: row_obj.workspace,
-      service: row_obj.service,
-      staff: row_obj.staff,
-      customer: row_obj.customer,
-      payment: row_obj.payment,
-      status: row_obj.status,
-      date: row_obj.date,
-      note: row_obj.note,
-    
-    });
-    this.table.renderRows();
-  }
-  updateRowData(row_obj){
-    console.log(row_obj)
-    this.dataSource = this.dataSource.data.filter((value,key)=>{
-      if(value.id == row_obj.id){
-        value.time = row_obj.time;
-        value.booking = row_obj.booking;
-        value.workspace = row_obj.workspace;
-        value.service = row_obj.service;
-        value.staff = row_obj.staff;
-        value.customer = row_obj.customer;
-        value.payment = row_obj.payment;
-        value.status = row_obj.status;
-        value.date = row_obj.date;
-        value.note = row_obj.note;
-      }
-      return true;
-    });
-  }
-  deleteRowData(row_obj){
-    console.log(this.dataSource.data,row_obj)
-    this.dataSource.data = this.dataSource.data.filter((value,key)=>{
-      return value.booking != row_obj.booking
-    });
-    console.log(this.dataSource)
-  }
-  addEvent(dates): void {
+  
+  addEvent(dates,enddate,bookingId): void {
+    console.log(dates,enddate)
    console.log(startOfDay(new Date()));
    console.log(endOfDay(new Date()))
    this.events.push({
-      title: 'New event',
-      // start: startOfDay(new Date()),
-      start: startOfDay(new Date(dates)),
-      end: endOfDay(new Date(dates)),
-      color: colors.red,
-      draggable: true,
-      resizable: {
-        beforeStart: true,
-        afterEnd: true
-      }
-    });
+        title: bookingId,
+        // start: startOfDay(new Date()),
+        start: startOfDay(new Date(dates)),
+        end: endOfDay(new Date(enddate)),
+        color: colors.red,
+        draggable: true,
+        resizable: {
+          beforeStart: true,
+          afterEnd: true
+        }
+      });
    this.refresh.next();
  }
-  ngOnInit() {
-  }
+  
 }

-// @Component({
-//   selector: 'app-calendar-dialog',
-//   template: `
-//   <h5 class="mt-0">Event action occurred</h5>
-//   <div>
-//     Action:
-//     <pre>{{ data?.action }}</pre>
-//   </div>
-//   <div>
-//     Action:
-//     <pre>{{ data?.action }}</pre>
-//   </div>
-//   <button mat-button type="button" (click)="dialogRef.close()">Close dialog</button>`
-// })
-// export class CalendarDialogComponent {
-//   constructor(
-//     public dialogRef: MatDialogRef<CalendarDialogComponent>,
-//     @Inject(MAT_DIALOG_DATA) public data: any) { }
-// }
+ 
--- a/ng-seed/src/app/appoinment/calendars/calendars.module.ts
+++ b/ng-seed/src/app/appoinment/calendars/calendars.module.ts
@ -10,17 +10,10 @@ import { DemoMaterialModule } from 'app/shared/demo.module';

@NgModule({
  declarations: [
-    CalendarListComponent,
-    CalendardialogComponent
+    
  ],
  imports: [
-    DemoMaterialModule,
-    CommonModule,
-    CalendarsRoutingModule,
-    CalendarModule.forRoot({
-      provide: DateAdapter,
-      useFactory: adapterFactory
-  }),
+   
  ]
 })
 export class CalendarsModule { }
--- a/ng-seed/src/app/appoinment/consultant-setting/add-skills/add-skills.component.html
+++ b/ng-seed/src/app/appoinment/consultant-setting/add-skills/add-skills.component.html
@ -26,14 +26,14 @@
    <ng-scrollbar class="scrollHV">    
    <div *ngFor="let phone of getPhonesFormControls(); let i = index">
      <mat-form-field class="example-full-width" style="width: 85%;">
-        <mat-label>Skills {{i}}</mat-label>
+        <mat-label>Skills {{i+1}}</mat-label>
        <input type="text" matInput   placeholder="Skills"  [formControl]="phone" required>
      </mat-form-field>   
      <!-- <input [formControl]="phone" type="text"> -->
    <button type="button" mat-mini-fab color="warn" (click)="removeSkills(i)"><mat-icon>remove</mat-icon></button>    
    </div>
   
-    <div style="text-align: end;"><button type="button" mat-mini-fab color="warn" (click)="addSkills()"> <mat-icon>add</mat-icon></button></div>
+    <div style="text-align: end;"><button style="margin-right: 13px;" type="button" mat-mini-fab color="warn" (click)="addSkills()"> <mat-icon>add</mat-icon></button></div>
 </ng-scrollbar>
    <div mat-dialog-actions>
        <button mat-button type="submit" class="mat-green"  mat-raised-button >Add</button>
--- a/ng-seed/src/app/appoinment/consultant-setting/assign-service/assign-service.component.scss
+++ b/ng-seed/src/app/appoinment/consultant-setting/assign-service/assign-service.component.scss
@ -48,8 +48,9 @@
    }
 }
 ::ng-deep .mat-dialog-content {
-    max-height: 170vh !important;
-    overflow: hidden!important;
+    max-height: unset !important;
+    overflow: unset!important;
+    // overflow: hidden!important;
 }
 ::ng-deep .mat-dialog-container{
    overflow: hidden!important;
--- a/ng-seed/src/app/appoinment/consultant-setting/assign-service/assign-service.component.ts
+++ b/ng-seed/src/app/appoinment/consultant-setting/assign-service/assign-service.component.ts
@ -42,13 +42,13 @@ export class AssignServiceComponent implements OnInit {

  submit(){
      console.log(this.form.value)
-      // let user_role = localStorage.getItem('user_role');
-      // let user_id
-      // if(user_role == 'FRONTDESK'){
-        // user_id = 
-      // }else{
-       let user_id = localStorage.getItem('user_id')
-      // }      
+      let user_role = localStorage.getItem('user_role');
+      let user_id
+      if(user_role == 'FRONTDESK'){
+        user_id = localStorage.getItem('practi_id')
+      }else{
+        user_id = localStorage.getItem('user_id')
+      }      
      let details:any = {
        durationNew: this.form.value.duration,
        fees:this.form.value.fees,
--- a/ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.scss
+++ b/ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.scss
@ -236,7 +236,8 @@ mat-tab-body {
  background-color: #FAFAFA;
  border-bottom: 1px solid #EFEFEF;
  height: 63px;
-  padding: 0 30px;
+  padding-right: 30px;
+  padding-left: 10px;
 }

 .staff-title{
--- a/ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.ts
+++ b/ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.ts
@ -138,11 +138,12 @@ image_view(image){

 backRoute(param){
  this.frontDeskHidden = param
+  this.getCosultantList()
 }

  redirectToSetting(practitiionerDetails){
      console.log(practitiionerDetails)
-      localStorage.setItem('user_id',practitiionerDetails.id)
+      localStorage.setItem('practi_id',practitiionerDetails.id)
      this.frontDeskPractdetails = practitiionerDetails
      this.frontDeskHidden = 0
      this.getUsersList()
--- a/ng-seed/src/app/appoinment/customers/add-customers/add-customers.component.scss
+++ b/ng-seed/src/app/appoinment/customers/add-customers/add-customers.component.scss
@ -48,9 +48,12 @@
    }
 }
 ::ng-deep .mat-dialog-content {
-    max-height: 170vh!important;
+    max-height: unset !important;
+    overflow: unset!important;
+    // overflow: hidden!important;
+}
+::ng-deep .mat-dialog-container{
    overflow: hidden!important;
-
 }
 .scrollHV {
    height: calc(100vh - 150px);
--- a/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.html
+++ b/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.html
@ -1,5 +1,5 @@

-<h3>Customer Details</h3>
+<h3>Booking Details</h3>
 <mat-form-field style="width:30%">
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Type Here" #input>
@ -57,13 +57,13 @@
                      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                    </table>
-                  </ng-scrollbar>
-                    <mat-card *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
+                    <mat-card-content *ngIf="isLoading" style="margin-top: 6rem;display: flex; justify-content: center; align-items: center">
                      <mat-progress-spinner 
                        color="primary" 
                        mode="indeterminate">
                      </mat-progress-spinner>
-                    </mat-card>
+                    </mat-card-content>
+                  </ng-scrollbar>
                    <div [hidden]="recordStatus">
                      <mat-paginator  #paginator class="mat-elevation-z1" [length]="customersListLength" [pageIndex]="pageIndex" [pageSize]="pageSize"
                      [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
--- a/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.html
+++ b/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.html
@ -9,7 +9,7 @@
            <div fxFlex.gt-sm="90" fxFlex.gt-xs="95" fxFlex="100">
                <div class="messages-list material fullscreen">
                  <mat-accordion *ngIf="!recordStatus">
-                  <!-- <ng-scrollbar class="scrollHV"> -->
+                  <ng-scrollbar class="scrollHV">
                    <table mat-table [dataSource]="mailLogListSource" #mytable  class="my-table mat-elevation-z8 len-table">

                        <ng-container matColumnDef="id">
@ -42,16 +42,17 @@
                            <td mat-cell *matCellDef="let element" class="element-spc"> {{element.createdAt | date:'short'}} </td>
                          </ng-container>
                      
-                        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                      </table>
-                    <!-- </ng-scrollbar> -->
-                      <mat-card *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
+                      <mat-card-content *ngIf="isLoading" style="margin-top: 6rem;display: flex; justify-content: center; align-items: center">
                        <mat-progress-spinner 
                          color="primary" 
                          mode="indeterminate">
                        </mat-progress-spinner>
-                      </mat-card>
+                      </mat-card-content>
+                    </ng-scrollbar>
+                     
                      <div [hidden]="recordStatus">
                        <mat-paginator  #paginator class="mat-elevation-z1" [length]="mailLogListLength" [pageIndex]="pageIndex" [pageSize]="pageSize"
                        [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
--- a/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.scss
+++ b/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.scss
@ -1,6 +1,6 @@
-// .scrollHV {
-//   height: calc(100vh - 250px);
-// }
+.scrollHV {
+  height: calc(100vh - 253px);
+}
 .fullscreen{
  position: absolute !important;
  height: auto !important;
@ -16,3 +16,9 @@
  font-weight: 600;
  font-size: 14px;
 }
+th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
+  padding: 6px;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border: 1px solid #fff;
+}
--- a/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.ts
+++ b/ng-seed/src/app/appoinment/mail/mail-log/mail-log.component.ts
@ -29,6 +29,7 @@ export class MailLogComponent implements OnInit {

  displayedColumns: string[] = ['id', 'subject', 'recipients', 'contentPage','status', 'createdAt'];
  dataSource = ELEMENT_DATA;
+
  length = 5;
  pageIndex = 0;
  pageSize = 10;
@ -66,12 +67,13 @@ export class MailLogComponent implements OnInit {
            this.isLoading = false
            this.mailLogList = res.data;
            console.log(this.mailLogList)
-            this.mailLogListLength = res.data.length;
+            // this.mailLogListLength = res.data.length;
            this.mailLogList.forEach((element, index) => {
              element.index = index            
              
            });
            this.mailLogListSource['data'] = this.mailLogList;
+            this.mailLogListLength = this.mailLogList.length;
            console.log(this.mailLogListSource)
            this.recordStatus=false;
          } 
--- a/ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.html
+++ b/ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.html
@ -9,7 +9,7 @@
                <mat-error *ngIf="myError('servicesName', 'required')">ServiceName is required</mat-error>
                <mat-error *ngIf="myError('servicesName', 'maxlength')">Limit exceed</mat-error>
              </mat-form-field> 
-              <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+              <!-- <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
                <mat-label>Duration</mat-label>
                <mat-select placeholder="Select Duration" formControlName="duration" required>
                  <mat-option>--</mat-option>
@ -18,7 +18,16 @@
                  </mat-option>
                </mat-select>
              <mat-error *ngIf="myError('duration', 'required')">Duration is required</mat-error> 
-              </mat-form-field>
+              </mat-form-field> -->
+              <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
+                <mat-label>Duration</mat-label>
+                <input appMobileNumberPattern placeholder="Fees" matInput  formControlName="duration" required>
+                <div matSuffix>
+                <span><b>Mins</b></span>
+                </div>
+                <mat-error *ngIf="myError('duration', 'required')">Fees is required</mat-error>
+                <!-- <mat-error *ngIf="myError('fees', 'maxlength')">Limit exceed</mat-error> -->
+              </mat-form-field> 
              <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
                <mat-label>Fees</mat-label>
                <input appMobileNumberPattern placeholder="Fees" matInput  formControlName="fees">
--- a/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.html
+++ b/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.html
@ -61,13 +61,14 @@
                      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                    </table>
-                  </ng-scrollbar>
-                    <mat-card *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
+
+                    <mat-card-content *ngIf="isLoading" style="margin-top: 6rem;display: flex; justify-content: center; align-items: center">
                      <mat-progress-spinner 
                        color="primary" 
                        mode="indeterminate">
                      </mat-progress-spinner>
-                    </mat-card>
+                    </mat-card-content>
+                  </ng-scrollbar>
                    <div [hidden]="recordStatus">
                      <mat-paginator  #paginator class="mat-elevation-z1" [length]="servicesListLength" [pageIndex]="pageIndex" [pageSize]="pageSize"
                      [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
--- a/ng-seed/src/app/appoinment/user/add-user/add-user.component.scss
+++ b/ng-seed/src/app/appoinment/user/add-user/add-user.component.scss
@ -25,12 +25,12 @@
    box-shadow:none!important; 
 }
 ::ng-deep .mat-dialog-content {
-    max-height: 75vh!important;
-    overflow: unset!important;
-    // overflow: hidden!important;
+  max-height: unset !important;
+  overflow: unset!important;
+  // overflow: hidden!important;
 }
 ::ng-deep .mat-dialog-container{
-    overflow: hidden!important;
+  overflow: hidden!important;
 }
 .scrollHV {
    height: calc(100vh - 83px);
--- a/ng-seed/src/app/appoinment/user/add-user/add-user.component.ts
+++ b/ng-seed/src/app/appoinment/user/add-user/add-user.component.ts
@ -78,7 +78,7 @@ export class AddUserComponent implements OnInit {
    ),],valData),
    // password: new FormControl('', [Validators.required, Validators.minLength(6)]),
      password: new FormControl('', [Validators.required,Validators.pattern(
-        '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,12}$'
+        '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{16,}$'
      )]),
    logo: new FormControl('', null),
    // confirmPassword: new FormControl('', [Validators.required, Validators.minLength(6)]),
--- a/ng-seed/src/app/appoinment/user/user-list/user-list.component.html
+++ b/ng-seed/src/app/appoinment/user/user-list/user-list.component.html
@ -1,9 +1,24 @@
 
 <h3>Users Details</h3>
-<mat-form-field style="width:30%">
-  <mat-label>Filter</mat-label>
-  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Type Here" #input>
-</mat-form-field>
+<div fxLayout="row wrap">
+  <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" class="p-gap" fxLayoutAlign="start center" >
+    <mat-form-field style="width:100%">
+      <mat-label>Filter</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Type Here" #input>
+    </mat-form-field>
+  </div>
+  <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="55" fxFlex.lg="55" fxFlex.xl="55" class="p-gap" fxLayoutAlign="end center" >
+    <span>Active 
+      <mat-slide-toggle class="example-margin" 
+      (change)="onToggleChange($event.checked)"></mat-slide-toggle> Inactive</span> 
+      <!-- <mat-checkbox class="example-margin" (change)="setAll($event.checked)">Click here to see Inactive List</mat-checkbox> -->
+    </div>
+  <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="15" fxFlex.lg="15" fxFlex.xl="15" class="p-gap" fxLayoutAlign="end center">    
+    <button mat-button (click)="openDialog('Add',{})"   class="button">Add Users</button>
+  </div>
+</div>
+
+
 <!-- <mat-form-field appearance="outline"  style="width:20%;margin-left: 5%;">
  <mat-label>Business</mat-label>
  <mat-select placeholder="Select Business" formControlName="businessselect" required>
@ -24,8 +39,7 @@
      <mat-option  value="BIZADMIN" (click)="applyFilter('BIZADMIN')">BIZADMIN</mat-option>
  </mat-select> 
 </mat-form-field> -->
-<mat-checkbox class="example-margin" (change)="setAll($event.checked)">Click here to see Inactive List</mat-checkbox>
-<button mat-button (click)="openDialog('Add',{})"   class="button">Add Users</button>
+
    <!-- <div class="example-container mat-elevation-z8 "> -->

 
@ -54,11 +68,11 @@
                        <td mat-cell *matCellDef="let element"> {{element.role}} </td>
                      </ng-container>

-                      <ng-container matColumnDef="busId">
+                      <!-- <ng-container matColumnDef="busId">
                        <th mat-header-cell *matHeaderCellDef class="font-color th-mat"> Business Name </th>
                        <td mat-cell *matCellDef="let element"> {{element.BusinessDetails.length>0 ? element.BusinessDetails[0].busName : null }}</td>
                        
-                      </ng-container>
+                      </ng-container> -->
                      
                      <ng-container matColumnDef="Username">
                        <th mat-header-cell *matHeaderCellDef class="font-color"> User Name </th>
@ -117,14 +131,14 @@
                     <!-- <tr mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="row.isActive != 1 ? 'bgRowColor' : ''"></tr> -->
                     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                    </table>
-
-</ng-scrollbar>
-                    <mat-card *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
+                    <mat-card-content *ngIf="isLoading" style="margin-top: 6rem;display: flex; justify-content: center; align-items: center">
                      <mat-progress-spinner 
                        color="primary" 
                        mode="indeterminate">
                      </mat-progress-spinner>
-                    </mat-card>
+                    </mat-card-content>
+
+</ng-scrollbar>
                    <div [hidden]="recordStatus">
                      <mat-paginator  #paginator class="mat-elevation-z1" [length]="usersListLength" [pageIndex]="pageIndex" [pageSize]="pageSize"
                      [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
--- a/ng-seed/src/app/appoinment/user/user-list/user-list.component.scss
+++ b/ng-seed/src/app/appoinment/user/user-list/user-list.component.scss
@ -5,9 +5,10 @@
  height: calc(100vh - 250px);
 }
 .button{
-    float: right;
-    background-color: #4caf50;
-    color: #ffff;
+  float: right;
+  background-color: #4caf50;
+  color: #ffff;
+  height: 35px;
 }
 th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
    padding: 6px;
--- a/ng-seed/src/app/appoinment/user/user-list/user-list.component.ts
+++ b/ng-seed/src/app/appoinment/user/user-list/user-list.component.ts
@ -47,7 +47,7 @@ const ELEMENT_DATA: UsersData[] = [
 })
 export class UserListComponent implements OnInit {
  push: any;
-  displayedColumns: string[] = ['id','logo', 'role', 'busId','Username', 'mobile_no', 'email', 'status', 'action'];
+  displayedColumns: string[] = ['id','logo', 'role','Username', 'mobile_no', 'email', 'status', 'action'];
  dataSource: any;
  addFormData: any;
  length = 5;
@ -443,4 +443,10 @@ export class UserListComponent implements OnInit {
     this.activeAndInactive = check
     this.getUsersList()
  }
+
+  onToggleChange(event){
+    console.log(event) 
+    this.activeAndInactive = event
+    this.getUsersList()
+   }
 }
--- a/ng-seed/src/app/end-user/booking-summary/booking-summary.component.html
+++ b/ng-seed/src/app/end-user/booking-summary/booking-summary.component.html
@ -151,4 +151,9 @@
    </div>
 </div>
 </ng-scrollbar>
-</div>
+</div>
+<footer>
+    <p>
+       © 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
+    </p>
+ </footer>
--- a/ng-seed/src/app/end-user/booking-summary/booking-summary.component.scss
+++ b/ng-seed/src/app/end-user/booking-summary/booking-summary.component.scss
@ -54,4 +54,12 @@ mat-toolbar{

 .scrollHV {
    height: calc(100vh - 110px);
+  }
+
+  footer {
+    background-color: #d1d1d1;
+    height:50px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
  }
--- a/ng-seed/src/app/end-user/customer-info/customer-info.component.html
+++ b/ng-seed/src/app/end-user/customer-info/customer-info.component.html
@ -35,10 +35,10 @@
                                            <mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
                                                Please enter a valid email address
                                             </mat-error>
-                                            
-                                             <mat-error *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched) && form.get('email')?.errors?.required">
+                                             <mat-error *ngIf="myError('email', 'required')">email is required</mat-error>
+                                          <mat-error *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched) && form.get('email')?.errors?.required">
                                                Email is required
-                                             </mat-error>
+                                             </mat-error>  
                                        </mat-form-field>
                                    </div>
                                        <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50"  fxFlex.lg="50" fxFlex.xl="50" class="p-gap" fxLayoutAlign="center center">
@ -62,28 +62,28 @@
                                        </div>
                                    <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50"  fxFlex.lg="50" fxFlex.xl="50" class="p-gap" fxLayoutAlign="center center">
                                        <mat-form-field style="width: 80%">
-                                            <input matInput placeholder="Address" type="text" name="address" formControlName="address_1">
+                                            <input matInput placeholder="Address" type="text" name="address" formControlName="address_1" required>
                                            <mat-error *ngIf="myError('address_1', 'required')">Address is required</mat-error>
                                            <mat-error *ngIf="myError('address_1', 'maxlength')">Limit exceed</mat-error>
                                        </mat-form-field>
                                    </div>
                                    <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50"  fxFlex.lg="50" fxFlex.xl="50" class="p-gap" fxLayoutAlign="center center">
                                        <mat-form-field style="width: 80%" class="mb-1">
-                                            <input matInput placeholder="State" type="text" name="state" formControlName="state">
+                                            <input matInput placeholder="State" type="text" name="state" formControlName="state" required>
                                            <mat-error *ngIf="myError('state', 'required')">State is required</mat-error>
                                            <mat-error *ngIf="myError('state', 'maxlength')">Limit exceed</mat-error>
                                        </mat-form-field>
                                    </div>
                                    <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50"  fxFlex.lg="50" fxFlex.xl="50" class="p-gap" fxLayoutAlign="center center">
                                        <mat-form-field style="width: 80%" class="mb-1">
-                                            <input matInput placeholder="City" type="text" name="city" formControlName="city">
+                                            <input matInput placeholder="City" type="text" name="city" formControlName="city" required>
                                            <mat-error *ngIf="myError('city', 'required')">City is required</mat-error>
                                            <mat-error *ngIf="myError('city', 'maxlength')">Limit exceed</mat-error>
                                        </mat-form-field>
                                    </div>
                                    <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50"  fxFlex.lg="50" fxFlex.xl="50" class="p-gap" fxLayoutAlign="center center">
                                        <mat-form-field style="width: 80%" class="mb-1">
-                                            <input matInput placeholder="Pincode" type="text" name="pincode" formControlName="pincode">
+                                            <input matInput placeholder="Pincode" type="text" name="pincode" formControlName="pincode" required>
                                            <mat-error *ngIf="myError('pincode', 'required')">City is required</mat-error>
                                            <mat-error *ngIf="myError('pincode', 'maxlength')">Limit exceed</mat-error>
                                        </mat-form-field>
--- a/ng-seed/src/app/end-user/customer-info/customer-info.component.scss
+++ b/ng-seed/src/app/end-user/customer-info/customer-info.component.scss
@ -151,4 +151,12 @@ mat-toolbar{
 .mat-dialog-container{
  overflow: hidden !important;
  padding: 32px !important;
+}
+
+footer {
+  background-color: #d1d1d1;
+  height:50px;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
 }
--- a/ng-seed/src/app/end-user/doctor-profile/doctor-profile.component.ts
+++ b/ng-seed/src/app/end-user/doctor-profile/doctor-profile.component.ts
@ -48,6 +48,7 @@ export class DoctorProfileComponent implements OnInit {
      
      console.log('booked', res);
      if(res.length>0){
+        localStorage.setItem('busId',res[0].business[0].busId)
        localStorage.setItem('busName',res[0].business[0].busName)
        localStorage.setItem('logo',res[0].business[0].logo)
      this.bookedAppointment = res[0].user[0]
--- a/ng-seed/src/app/end-user/payment/payment.component.html
+++ b/ng-seed/src/app/end-user/payment/payment.component.html
@ -52,6 +52,9 @@
    </div> -->
 </div>
 </div>
- 
-
+<footer>
+   <p>
+      © 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
+   </p>
+</footer>

--- a/ng-seed/src/app/end-user/payment/payment.component.scss
+++ b/ng-seed/src/app/end-user/payment/payment.component.scss
@ -48,4 +48,11 @@ mat-toolbar{
 }
 .mat-toolbar-single-row {
    display: block !important;
-}
+}
+footer {
+    background-color: #d1d1d1;
+    height:50px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+  }
--- a/ng-seed/src/app/end-user/service-list-details/service-list.component.ts
+++ b/ng-seed/src/app/end-user/service-list-details/service-list.component.ts
@ -82,6 +82,7 @@ export class ServiceListComponent implements OnInit {
        this.full_data = res['data']
        console.log(this.full_data)
        this.full_data[0].business[0].busName
+        localStorage.setItem('busId',this.full_data[0].business[0].busId)
        localStorage.setItem('busName',this.full_data[0].business[0].busName)
        localStorage.setItem('currency',this.full_data[0].business[0].currency)
        localStorage.setItem('logo',this.full_data[0].business[0].logo)
--- a/ng-seed/src/app/layouts/admin/admin-layout.component.html
+++ b/ng-seed/src/app/layouts/admin/admin-layout.component.html
@ -20,10 +20,23 @@
            <div class="user-pro-wrap">
              <div class="user-profile-thumb text-center">
                <div class="user-i">
-                  <img *ngIf="getUserData.role == 'SADMIN'" src="assets/images/userpic.png" class="rad-full mb-1" width="100" height="100" alt="">
+                  <div class="profilepic" (click)="openFileInput()">
+                    <!-- <img  *ngIf="getUserData.role == 'SADMIN'" src="assets/images/userpic.png" class="rad-full mb-1" width="100" height="100" alt=""> -->
+                    <img [src]="getUserData.logo != '' ? image_view(getUserData.logo) : 'assets/images/userpic.png'" class="rad-full mb-1" width="100" height="100" alt="">
+                    <input (change)="onSelectFile($event)" type="file" #fileInput accept="image/*"  style="display: none" />
+                    <!-- <img class="profilepic__image" src="https://images.unsplash.com/photo-1510227272981-87123e259b17?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=3759e09a5b9fbe53088b23c615b6312e" width="150" height="150" alt="Profibild" /> -->
+                    <div class="profilepic__content">
+                      <span class="profilepic__icon"><mat-icon>camera_alt</mat-icon></span> 
+                    </div>
+                  </div>
+                    <div> <span class="hed-span text-capitalize">{{getUserData.userName}}</span></div>
+                    <div> <span class="sub-span text-capitalize">- {{roleName}}</span></div>
+                 
+                  <!-- <img *ngIf="getUserData.role == 'SADMIN'" src="assets/images/userpic.png" class="rad-full mb-1" width="100" height="100" alt="">
                  <img *ngIf="getUserData.role != 'SADMIN'" [src]="getUserData.logo != '' ? image_view(getUserData.logo) : 'assets/images/userpic.png'" class="rad-full mb-1" width="100" height="100" alt="">
-                  <div> <span>{{getUserData.userName}}</span></div>
-                  <div> <span>({{getUserData.role}})</span></div>
+                  <mat-icon class="profilepic__icon">camera</mat-icon>
+                  <div> <span class="hed-span text-capitalize">{{getUserData.userName}}</span></div>
+                  <div> <span class="sub-span text-capitalize">- {{roleName}}</span></div> -->
                </div>
              </div>
              <!-- <div class="most-used text-center">
@ -42,7 +55,8 @@
              <mat-list-item appAccordionLink *ngFor="let menuitem of menuItems.getAll() | roleMenuItems:'1'">
                <a appAccordionToggle class="relative" mat-ripple [routerLink]="['/', menuitem.state]"
                  *ngIf="menuitem.type === 'link'">
-                  <mat-icon>{{ menuitem.icon }}</mat-icon>
+                  <mat-icon *ngIf="menuitem.key == 1">{{ menuitem.icon }}</mat-icon>
+                  <mat-icon *ngIf="menuitem.key == 0" svgIcon="service"></mat-icon>
                  <span>{{ menuitem.name | translate }}</span>
                  <span fxFlex></span>
                  <span class="menu-badge mat-{{ badge.type }}"
@ -586,4 +600,6 @@
    </mat-card-content>
  </mat-card>
  <!-- /Demo Purposes Only -->
-</div>
+</div>
+  
+<notifier-container></notifier-container>
--- a/ng-seed/src/app/layouts/admin/admin-layout.component.ts
+++ b/ng-seed/src/app/layouts/admin/admin-layout.component.ts
@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ViewChild, HostListener } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, HostListener, ElementRef } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 import { MenuItems } from '../../shared/menu-items/menu-items';
 import { HorizontalMenuItems } from '../../shared/menu-items/horizontal-menu-items';
@ -13,6 +13,11 @@ PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollb
 import { RoleMenuItemsPipe } from '../role-menu-items.pipe';
 import { ConsultantService } from 'app/appoinment/consultant-setting/consultant-service/consultant.service';
 import { environment } from 'environments/environment';
+import { NotifierService } from 'angular-notifier';
+import { BusinessService } from 'app/appoinment/business/business-service/business.service';
+import { UserService } from 'app/appoinment/user/user-service/user.service';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-layout',
@ -53,11 +58,20 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
  private apiUrl = environment.apiEndpoint;
  getUserData: any = [];
  userLength: any = [];
-  constructor(public _con:ConsultantService,private router: Router, public menuItems: MenuItems, public horizontalMenuItems : HorizontalMenuItems, public translate: TranslateService ) {
+  roleName: any;
+  // fileInput: HTMLInputElement;
+  @ViewChild('fileInput') uploadImage;
+  formData: any=[];
+  constructor(private matIconRegistry: MatIconRegistry,private domSanitizer: DomSanitizer,public _use:UserService,public _bus:BusinessService,private notifierService: NotifierService,public _con:ConsultantService,private router: Router, public menuItems: MenuItems, public horizontalMenuItems : HorizontalMenuItems, public translate: TranslateService ) {
    const browserLang: string = translate.getBrowserLang();
    translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
    this.getUser = localStorage.getItem('user_role')
-    
+    this.formData= new FormData();
+
+    this.matIconRegistry.addSvgIcon(
+      'service',
+      this.domSanitizer.bypassSecurityTrustResourceUrl('assets/images/service_icon.svg')
+    );
  }

 //08/02/2023
@ -92,14 +106,30 @@ users() {

  
  }
-
+  openFileInput() {
+    console.log('in')
+    this.uploadImage.nativeElement.click();
+  }
  getUserDetails(){
    let userID = localStorage.getItem('user_id')
    console.log('in')
    this._con.getUsersListDetails(userID).subscribe(res => {
      if (res.status == 200) {
        this.userLength = res.data
-        this.getUserData = res.data[0]
+        this.getUserData = res.data[0] 
+        if(this.getUserData.role == 'PRACTITIONER'){
+           this.roleName = 'Practitioner'
+        }
+        if(this.getUserData.role == 'FRONTDESK'){
+          this.roleName = 'Frontdesk'
+        }
+        if(this.getUserData.role == 'BIZADMIN'){
+          this.roleName = 'Business Admin'
+        }
+        if(this.getUserData.role == 'SADMIN'){
+          this.roleName = 'Super Admin'
+        }
+
        // this.usersLogo = res.data[0].logo; 
        console.log(this.getUserData)
        let currency = this.getUserData.BusinessDetails[0].currency
@ -244,6 +274,7 @@ users() {
      state: 'menu',
      name: 'MENU',
      type: 'sub',
+      key: '',
      icon: 'trending_flat',
      children: [
        {state: 'menu', name: 'MENU'},
@ -255,5 +286,71 @@ users() {
    localStorage.clear();
    this.router.navigate(['/authentication/login']);
  }
+
+  onSelectFile(event) {
+    console.log(event)
+    console.log(event.target.files[0])
+    let fileType = event.target.files[0]
+    if(fileType.type == 'image/png' || fileType.type == 'image/jpg' || fileType.type == 'image/jpeg'){
+      if(event.target.files[0].size > 2097152){
+        this.notifierService.notify('warning', 'Image size is too Larger');
+      }else {
+      const file = event.target.files[0]; 
+      console.log(file)
+      // return;
+      // if(event != null){
+      //   // this.imageViewStatus = true
+      // }    
+      // this.form['value'].logo = [event.target.files[0]]
+      // if (event.target.files && event.target.files[0]) {
+      //   var reader = new FileReader();
+      //   reader.readAsDataURL(event.target.files[0]); 
+      //   reader.onload = (event) => { 
+      //     this.url = event.target.result;
+      //     console.log(this.url)
+      //   }
+      // }
+      let user_id = localStorage.getItem('user_id')
+      // let busUserID = this.getUserData.BusinessDetails[0].id
+      this.formData = []
+      this.formData= new FormData();
+      this.formData.append('image', file, file.name);   
+      this.formData.append('logo', '1'); 
+      this.formData.append('id',user_id)
+      // this.formData.append('isActive','1')
+      // this.formData.append('id',user_id)
+      console.log(this.formData)
+      // let user_role = localStorage.getItem('user_role')
+      // let service 
+      // if(user_role == 'BIZADMIN'){
+      //   console.log('BIZADMIN',busUserID)
+      //   this.formData.append('id',busUserID)
+      //   service = this._bus
+      // }else {
+        // console.log('oThers')
+        // this.formData.append('id',user_id)
+        // service = this._use
+      // }
+      this._use.addFormDetails(this.formData).subscribe(res => {
+        if (res.status == 200) { 
+            this.notifierService.notify('success', 'Profile Updated Successfully');
+            this.getUserDetails()
+          }
+        
+        else{
+          console.log(res.message)
+          // this.notifierService.notify('success', 'You are awesome! I mean it!');
+          this.notifierService.notify('warning', res.message);
+        }
+      })   
+    }
+    } else {
+      this.notifierService.notify('warning', 'Invalid File)');
+      this.notifierService.notify('warning', 'Upload Supported File Like (png,jpg and jpeg)');
+    }
+   
+   
+    // this.formData.append('file', file, file.name);
+  }
 	
 }
--- a/ng-seed/src/app/layouts/role-menu-items.pipe.ts
+++ b/ng-seed/src/app/layouts/role-menu-items.pipe.ts
@ -10,8 +10,8 @@ export class RoleMenuItemsPipe implements PipeTransform {
    // // this is for horizontal menu filter 
    // if(type=="1"){
      switch(localStorage.getItem('user_role')){
-        case 'SADMIN': return value.filter(val=>val.state!="appoinments" && val.state!="customers" && val.state != "consultant-setting" && val.state!="consultants" && val.state!="services" && val.state!= "consultant-list" && val.state!= "mail-log"); 
-        case 'BIZADMIN': return value.filter(val=>val.state !="business" && val.state!="consultants" && val.state!="appoinments" && val.state!= "consultant-list");
+        case 'SADMIN': return value.filter(val=>val.state!="appointments" && val.state!="customers" && val.state != "consultant-setting" && val.state!="consultants" && val.state!="services" && val.state!= "consultant-list" && val.state!= "mail-log"); 
+        case 'BIZADMIN': return value.filter(val=>val.state !="business" && val.state!="consultants" && val.state!="appointments" && val.state!= "consultant-list");
        case 'PRACTITIONER': return value.filter(val=>val.state !="business" && val.state!="consultants" && val.state!="users" && val.state!="services" && val.state!= "consultant-list" && val.state!= "mail-log");
        case 'FRONTDESK': return value.filter(val=>val.state !="business" && val.state!="consultants" && val.state!="users" && val.state != "home" && val.state!="customers" && val.state!= "consultant-list" && val.state!= "mail-log");
        // case 'PRACTITIONER': 
--- a/ng-seed/src/app/session/reset-password/reset-password.component.ts
+++ b/ng-seed/src/app/session/reset-password/reset-password.component.ts
@ -31,10 +31,10 @@ export class ResetPasswordComponent implements OnInit {

    this.form = new FormGroup({     
      password: new FormControl('', [Validators.required,Validators.pattern(
-        '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,12}$'
+        '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{16,}$'
      )]),
      password2: new FormControl('', [Validators.required,Validators.pattern(
-        '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,12}$'
+        '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{16,}$'
      )]),
    });
  }
--- a/ng-seed/src/app/shared/menu-items/horizontal-menu-items.ts
+++ b/ng-seed/src/app/shared/menu-items/horizontal-menu-items.ts
@ -29,7 +29,7 @@ const HORIZONTALMENUITEMS = [
    icon: 'explore'
  },
  {
-    state: 'appoinments',
+    state: 'appointments',
    name: 'Appoinments',
    type: 'link',
    icon: 'developer_board',
--- a/ng-seed/src/app/shared/menu-items/menu-items.ts
+++ b/ng-seed/src/app/shared/menu-items/menu-items.ts
@ -16,6 +16,7 @@ export interface Menu {
  name: string;
  type: string;
  icon: string;
+  key: string;
  badge?: BadgeItem[];
  children?: ChildrenItems[];
 }
@ -25,23 +26,26 @@ const MENUITEMS : Menu[] = [
    state: 'home',
    name: 'HOME',
    type: 'link',
-    icon: 'explore'
+    icon: 'home',
+    key: '1'
  },
  {
    state: 'services',
    name: 'Services List',
    type: 'link',
    icon: 'strikethrough_s',
+    key: '0'
    // children: [
    //   {state: 'services-list', name: 'Services List'},
    // //  {state: 'add-user-list', name: 'Add Users '},
    // ]
  },
  {
-    state: 'appoinments',
+    state: 'appointments',
    name: 'Appoinments',
    type: 'link',
-    icon: 'developer_board',
+    icon: 'calendar_today',
+    key: '1'
    // children: [
    //   {state: 'appoinments-list', name: 'Appoinments List'},
    // ]
@ -51,6 +55,7 @@ const MENUITEMS : Menu[] = [
    name: 'Business',
    type: 'link',
    icon: 'markunread_mailbox',
+    key: '1'
    // children: [
    //   {state: 'business-list', name: 'Business List'},
    //   // {state: 'add-business-list', name: 'Add Business '},
@ -72,6 +77,7 @@ const MENUITEMS : Menu[] = [
    name: 'Users',
    type: 'link',
    icon: 'person_pin',
+    key: '1'
    // children: [
    //   {state: 'user-list', name: 'Users List'},
    // //  {state: 'add-user-list', name: 'Add Users '},
@ -79,17 +85,13 @@ const MENUITEMS : Menu[] = [
  }, 
  
  
-  {
-    state: 'consultant-setting',
-    name: 'Settings',
-    type: 'link',
-    icon: 'settings_system_daydream'
-  },
+ 
  {
    state: 'consultants',
    name: 'Consultants',
    type: 'link', 
    icon: 'colorize',
+    key: '1'
    // children: [
    //   {state: 'consultants-list', name: 'Consultants List'},
    // ]
@ -98,26 +100,20 @@ const MENUITEMS : Menu[] = [
    state: 'consultant-list',
    name: 'Consultant List',
    type: 'link',
-    icon: 'settings_system_daydream'
+    icon: 'settings_system_daydream',
+    key: '1'
  },
  {
    state: 'customers',
-    name: 'Customers',
+    name: 'Booking Details',
    type: 'link',
-    icon: 'directions_walk',
-    // children: [
-    //   {state: 'customers-list', name: 'Customers List'},
-    // ]
-  },
-  {
-    state: 'mail-log',
-    name: 'Mail',
-    type: 'link',
-    icon: 'directions_walk',
+    icon: 'event_note',
+    key: '1'
    // children: [
    //   {state: 'customers-list', name: 'Customers List'},
    // ]
  },
+
  // {
  //   state: 'business-centers',
  //   name: 'Centers',
@ -130,6 +126,22 @@ const MENUITEMS : Menu[] = [
  //   type: 'link',
  //   icon: 'settings_system_daydream'
  // }, 
+  {
+    state: 'consultant-setting',
+    name: 'Settings',
+    type: 'link',
+    icon: 'settings',
+    key: '1'
+  },  {
+    state: 'mail-log',
+    name: 'Mail',
+    type: 'link',
+    icon: 'email',
+    key: '1'
+    // children: [
+    //   {state: 'customers-list', name: 'Customers List'},
+    // ]
+  },

 ];

--- a/ng-seed/src/assets/images/service_icon.svg
+++ b/ng-seed/src/assets/images/service_icon.svg
@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ñëîé_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 3050 3000" style="enable-background:new 0 0 3050 3000;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M2737.7,1384.7c-39.6-39.8-93.1-61.9-150-61.9c-5.2,0-10.4,0.2-15.6,0.6c-47.5,3.4-91.9,22.3-127.1,54.3
+				c-2.4,2.1-4.7,4.3-6.9,6.6l-0.3,0.3l-191,184.5L2102,1708.9c-38.8-34.9-90.6-56.3-146.2-56.3h-491.9c-26.3,0-51.6-4.5-74.5-13
+				c-7-2.6-13.8-5.6-20.3-8.9c-86.5-44.8-179.6-67.6-276.6-67.6c-47.4,0-94.6,5.5-140.5,16.2c-38.3,8.9-75.7,21.4-111.8,37.1
+				c-11.2,4.9-22.3,10.2-33.2,15.8c-48.2,24.5-93.4,55-134.4,91.2c-13.8,12.1-27.1,24.8-39.8,38.1c-35.6,37.3-65.4,77.8-89.7,120.7
+				c-25.2-11.4-52.8-17.6-81.3-17.6c-53.3,0-103.4,20.8-141,58.4L54.9,2188.7c-30.3,30.3-30.3,79.5,0,110l646,646
+				c30.5,30.3,79.7,30.3,110,0l29.3-29.3l236.5-236.5c53.5-53.5,70.1-129.6,50.3-197.4l17.3-17.2c50.9-51.1,120-79.7,192.2-79.7
+				h746.1c56.7,0,110.3-25.5,145.9-69.7l248.3-306l95.5-117.7l170.8-210.5c37.1-39.5,57.4-90.7,57.4-145.4
+				C2800.4,1478.2,2778.1,1424.8,2737.7,1384.7z M1014.2,2553.9c-0.7,3.2-1.5,6.4-2.6,9.5c-1,3.1-2.3,6.2-3.7,9.2
+				c-2.4,5-5.3,9.8-8.8,14.3c-2.1,2.6-4.3,5.2-6.7,7.7l-236.5,236.5l-587.4-587.4L405,2007.2c11.2-11.2,24.9-18.3,39.2-21.5
+				c0.7-0.2,1.5-0.4,2.2-0.5c0.6-0.1,1.2-0.2,1.8-0.3c4.4-0.8,8.9-1.2,13.4-1.2c15.3,0,30.7,4.4,44.1,13.2
+				c4.5,2.9,8.7,6.4,12.6,10.3l474,474c6.9,6.9,12.2,14.6,16,22.9c1.7,3.5,3,7.2,4.1,10.9c2.2,7.4,3.3,15.1,3.3,22.8
+				C1015.8,2543.2,1015.3,2548.6,1014.2,2553.9z M2653.8,1601.7l-81.6,100.6l-134.4,165.6l-5.5,6.7l-109,134.4l-187.4,230.9
+				c-13.1,16.2-32.8,25.5-53.6,25.5h-763.6c-92.5,0-181,36.8-246.4,102.2l-7.3,7.2l-5.3,5.2l-422-422c0-0.1,0.1-0.2,0.2-0.3
+				c3-6,6.2-11.9,9.5-17.7c1.1-1.8,2.2-3.7,3.2-5.5c2.5-4.2,5-8.4,7.7-12.6c1.1-1.8,2.3-3.7,3.4-5.5c3.3-5.2,6.7-10.2,10.3-15.2
+				c0.2-0.3,0.3-0.5,0.5-0.8c0.2-0.4,0.4-0.7,0.7-1c3.9-5.6,8-11,12.2-16.3c1.3-1.6,2.6-3.2,3.8-4.8c3.1-3.9,6.3-7.7,9.5-11.6
+				c1.4-1.7,2.8-3.3,4.3-5c3.8-4.4,7.7-8.7,11.6-13c0.7-0.8,1.4-1.6,2.1-2.3c4.7-5,9.5-9.9,14.4-14.6c1.4-1.3,2.8-2.6,4.2-4
+				c3.7-3.5,7.4-7,11.2-10.4c1.6-1.5,3.2-2.9,4.8-4.3c4.3-3.8,8.6-7.5,13-11.1c0.9-0.8,1.9-1.6,2.8-2.4c5.4-4.3,10.8-8.6,16.4-12.8
+				c1.3-1,2.7-2,4.1-3c4.3-3.2,8.7-6.3,13.2-9.4c1.7-1.2,3.4-2.3,5.1-3.4c4.7-3.2,9.6-6.3,14.4-9.4c1.1-0.7,2.2-1.3,3.2-2
+				c6-3.7,12.1-7.3,18.2-10.7c1.2-0.7,2.4-1.3,3.5-1.9c5-2.8,10.1-5.5,15.2-8.1c1.7-0.9,3.4-1.7,5.1-2.6c5.2-2.6,10.5-5.1,15.9-7.5
+				c1.1-0.5,2.2-1,3.4-1.5c6.5-3,13.2-5.8,19.9-8.4c0.2-0.1,0.4-0.2,0.5-0.3c2.4-0.9,4.7-1.8,7.2-2.7c3.1-1.2,6.3-2.4,9.5-3.5
+				c4.4-1.6,8.8-3.1,13.3-4.6c2.1-0.7,4.2-1.3,6.3-2c3.2-1,6.4-2,9.7-3l6.7-1.9c3.2-0.9,6.3-1.7,9.5-2.6c2.3-0.6,4.6-1.2,6.9-1.7
+				c3.1-0.8,6.3-1.5,9.5-2.2c2.3-0.5,4.6-1,6.9-1.5c3.2-0.7,6.4-1.3,9.7-1.9c2.3-0.4,4.6-0.9,6.9-1.3c3.3-0.6,6.7-1.1,10-1.6
+				c2.2-0.4,4.4-0.7,6.6-1c0.9-0.1,1.8-0.3,2.8-0.4c2.4-0.3,4.8-0.5,7.2-0.9c2.4-0.3,4.7-0.6,7.1-0.8c3.4-0.4,6.7-0.7,10.1-0.9
+				c2.4-0.2,4.7-0.4,7-0.6c3.7-0.3,7.3-0.4,11-0.6c2.1-0.1,4.1-0.2,6.1-0.3c5.3-0.2,10.7-0.3,16-0.3c0.4,0,0.8,0,1.2,0
+				c74.2,0,149.8,16.9,222,54.3c5.6,2.9,11.3,5.6,17,8.1c0.3,0.1,0.5,0.2,0.8,0.4c0.1,0,0.2,0.1,0.3,0.1c12,5.2,24.3,9.6,36.8,13.2
+				c31.3,9.1,64.1,13.4,96.9,13.4h489.9c2.6,0,5.2,0.1,7.7,0.4c0.7,0,1.5,0.1,2.2,0.2c2.6,0.3,5.2,0.6,7.7,1.1c0.2,0,0.4,0,0.5,0.1
+				c2.5,0.4,4.9,1,7.3,1.7c0.7,0.2,1.4,0.4,2.1,0.6c2.5,0.7,5,1.5,7.3,2.4c0.2,0,0.4,0.1,0.5,0.2c2.3,0.9,4.5,1.8,6.7,2.9
+				c0.6,0.3,1.2,0.6,1.8,0.9c2.3,1.1,4.6,2.3,6.8,3.6c0.2,0.1,0.4,0.2,0.5,0.3c2.1,1.3,4.1,2.6,6,3.9c0.5,0.4,1.1,0.8,1.7,1.1
+				c2.1,1.5,4.1,3,6,4.7c0.2,0.1,0.3,0.3,0.5,0.4c1.8,1.5,3.5,3.1,5.1,4.8c0.5,0.5,1,1,1.5,1.5c1.7,1.8,3.4,3.6,5,5.6
+				c0.2,0.3,0.4,0.5,0.6,0.8c0.9,1.2,1.9,2.4,2.8,3.7c0.4,0.5,0.8,1.1,1.2,1.7c0.4,0.6,0.8,1.2,1.2,1.8c1.4,2.1,2.7,4.3,3.9,6.5
+				c0.1,0.2,0.2,0.4,0.3,0.6c1.2,2.1,2.2,4.3,3.1,6.5c0.3,0.6,0.5,1.2,0.7,1.7c1,2.4,1.9,4.9,2.7,7.4c0.8,2.5,1.4,5.1,2,7.7
+				c0.1,0.6,0.2,1.2,0.4,1.8c0.5,2.7,0.9,5.4,1.2,8.1c0.6,6.3,0.6,12.5,0,18.5c-2.1,22.4-12.1,42.4-27.2,57.3
+				c-16.9,16.7-40.2,27.1-65.9,27.1h-476.7c-14.4,0-27.6,5.1-37.9,13.6c-10.9,9-18.5,21.8-20.9,36.4c-0.5,3.1-0.9,6.3-0.9,9.6
+				c0,2.2,0.2,4.4,0.4,6.6c0.1,0.7,0.2,1.3,0.3,2c0.2,1.5,0.4,3,0.8,4.4c0.2,0.8,0.4,1.5,0.6,2.3c0.4,1.3,0.7,2.6,1.2,3.9
+				c0.3,0.8,0.5,1.5,0.8,2.2c0.5,1.3,1,2.5,1.6,3.7c0.4,0.7,0.7,1.4,1,2.1c0.6,1.3,1.3,2.4,2.1,3.6c0.4,0.6,0.7,1.2,1.1,1.7
+				c0.9,1.4,1.8,2.7,2.8,3.9c0.3,0.4,0.5,0.8,0.8,1.1c1.3,1.7,2.7,3.2,4.3,4.7c0,0.1,0.1,0.1,0.2,0.2c1.4,1.4,2.9,2.7,4.4,3.9
+				c0.9,0.8,1.9,1.5,2.9,2.2c0.4,0.3,0.9,0.6,1.3,0.9c1.4,0.9,3,1.9,4.5,2.7c0.5,0.3,1,0.5,1.6,0.8c1.1,0.6,2.1,1.1,3.3,1.6
+				c0.7,0.3,1.3,0.5,2,0.8c1,0.4,2.1,0.8,3.1,1.2c0.7,0.2,1.4,0.4,2.1,0.7c1.1,0.3,2.2,0.6,3.3,0.9c0.7,0.1,1.4,0.3,2.1,0.4
+				c1.2,0.2,2.4,0.4,3.6,0.5c0.6,0.1,1.3,0.2,1.9,0.3c1.8,0.2,3.6,0.3,5.5,0.3h473.2c7,0,14.1-0.3,21.1-0.9
+				c15-1.2,29.8-3.8,44.1-8.2c6.4-2,12.6-4.2,18.6-6.7c0.6-0.2,1.2-0.5,1.8-0.8c2.4-1,4.7-2,7.1-3.1c0.9-0.4,1.7-0.8,2.5-1.2
+				c2.1-1,4.1-1.9,6.1-3c0.9-0.5,1.9-1,2.8-1.6c1.8-0.9,3.7-1.9,5.5-3c1-0.6,2-1.2,3-1.8c1.7-1,3.4-2,5-3c1.1-0.7,2.1-1.3,3.1-2.1
+				c1.6-1,3.1-2,4.6-3c1.1-0.8,2.1-1.5,3.2-2.3c1.4-1,2.9-2.1,4.3-3.1c1.1-0.8,2.1-1.7,3.1-2.5c1.3-1.1,2.7-2.1,4-3.2
+				c1-0.9,2.1-1.8,3.1-2.7c1.3-1.1,2.6-2.1,3.8-3.3c1-0.9,2.1-1.9,3-2.9c1.2-1.1,2.4-2.2,3.5-3.3c1-1,2-2,3-3
+				c1.1-1.2,2.2-2.3,3.3-3.4c0.4-0.4,0.7-0.8,1.1-1.2c0.6-0.7,1.2-1.3,1.8-2c1-1.2,2.1-2.3,3.1-3.5c0.9-1.1,1.8-2.2,2.8-3.4
+				c0.9-1.2,1.9-2.3,2.9-3.5c0.9-1.2,1.8-2.3,2.6-3.5c0.9-1.2,1.8-2.4,2.7-3.6c0.9-1.2,1.7-2.5,2.6-3.7c0.8-1.2,1.7-2.4,2.5-3.7
+				c0.9-1.3,1.6-2.5,2.4-3.8c0.8-1.2,1.5-2.5,2.3-3.7c0.8-1.3,1.5-2.6,2.3-3.9c0.7-1.2,1.4-2.5,2.1-3.7c0.7-1.3,1.4-2.7,2.1-4.1
+				c0.6-1.3,1.3-2.5,1.9-3.8c0.7-1.4,1.3-2.8,2-4.2c0.6-1.3,1.2-2.6,1.7-3.9c0.6-1.4,1.2-2.8,1.8-4.3c0.5-1.3,1.1-2.6,1.6-3.9
+				c0.6-1.4,1.1-2.9,1.7-4.3c0.4-1.3,0.9-2.6,1.4-3.9c0.5-1.5,1-3,1.5-4.4c0.4-1.3,0.8-2.6,1.2-3.9c0.4-1.5,0.9-3,1.3-4.6
+				c0.4-1.3,0.7-2.6,1.1-3.9c0.4-1.5,0.7-3.1,1.1-4.6c0.3-1.3,0.6-2.7,0.9-4c0.3-1.5,0.6-3.1,0.9-4.6c0.3-1.3,0.5-2.7,0.8-4.1
+				c0.3-1.6,0.5-3.1,0.7-4.7c0.2-1.4,0.4-2.7,0.5-4.1c0.2-1.6,0.4-3.1,0.5-4.7c0.1-1.4,0.3-2.8,0.4-4.2c0.1-1.6,0.2-3.1,0.3-4.7
+				c0.1-1.4,0.2-2.8,0.2-4.2c0.1-1.6,0.1-3.1,0.1-4.7c0-1.4,0-2.8,0-4.3c0-1.6,0-3.1,0-4.7c0-1.4-0.1-2.8-0.1-4.3
+				c-0.1-1.6-0.2-3.1-0.3-4.7c-0.1-2.2-0.3-4.3-0.5-6.4c-0.4-4.1-0.9-8.2-1.6-12.1c-1.1-6.7-2.5-13.3-4.2-19.9l165.8-160.1
+				l106.2-102.5l83.7-80.9c8.6-8.5,18.4-15.1,28.8-19.6c0,0,0.1,0,0.2-0.1c1.7-0.7,3.4-1.4,5.1-2.1c1.8-0.6,3.6-1.2,5.4-1.7
+				c8.7-2.6,17.7-3.9,26.7-3.9c0.7,0,1.5,0.1,2.2,0.1c5.2,0.1,10.4,0.6,15.5,1.6c0.4,0.1,0.9,0.2,1.3,0.3
+				c12.8,2.7,25.1,8.2,36.1,16.2c3.8,2.8,7.4,5.7,10.8,9.1c18.4,18.2,27.4,42.2,27.4,66.1
+				C2681.2,1559.4,2672.2,1583.4,2653.8,1601.7z"/>
+			<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1416.0549 976.0701)" cx="470.2" cy="2197.4" rx="68.1" ry="68.1"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<circle cx="2513.7" cy="291.1" r="258.4"/>
+			<circle cx="918.9" cy="291.1" r="258.4"/>
+		</g>
+		<g>
+			<g>
+				<path d="M2654.9,608.8h-282.4c-88.6,0-170.1,32.2-233.3,85.5c-37.2,31.4-34.1,89.5,6.3,116.6c26.6,17.8,51.6,38.3,74.7,61.5
+					c56,56,96.7,123,120.1,196c9.7,30.1,37.7,50.5,69.3,50.5h460.9c80.9,0,147.2-66.2,147.2-147.2l0,0
+					C3017.8,772.1,2854.5,608.8,2654.9,608.8z"/>
+				<path d="M1287.1,810.8c40.5-27.1,43.6-85.2,6.3-116.6c-63.2-53.3-144.7-85.5-233.3-85.5H777.7c-199.6,0-362.9,163.3-362.9,362.9
+					l0,0c0,80.9,66.2,147.2,147.2,147.2h460.9c31.6,0,59.7-20.4,69.3-50.5c23.4-73,64.1-140,120.1-196
+					C1235.5,849.2,1260.5,828.6,1287.1,810.8z"/>
+				<path d="M1875.5,808h-318.4c-225,0-409.1,184.1-409.1,409.1c0,91.2,74.7,165.9,165.9,165.9h804.7c91.2,0,165.9-74.7,165.9-165.9
+					C2284.6,992.1,2100.5,808,1875.5,808z"/>
+			</g>
+			<circle cx="1716.3" cy="449.9" r="291.3"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/ng-seed/src/assets/styles/scss/core/_main-sidebar.scss
+++ b/ng-seed/src/assets/styles/scss/core/_main-sidebar.scss
@ -161,11 +161,16 @@
    .user-i {
        z-index: 99;
        position: relative;
-        span {
+        .hed-span {
            font-weight: bold;
-            font-size: 1rem;
+            font-size: 22px;
            padding: 0 0.5rem;
        }
+        .sub-span{
+            // font-weight: bold;
+            font-size: 14px ;
+            padding: 0 0.5rem ;
+        }
    }
    
    .bg-overlay {
--- a/ng-seed/src/assets/styles/scss/utilities/_general.scss
+++ b/ng-seed/src/assets/styles/scss/utilities/_general.scss
@ -9,8 +9,66 @@ $hover-icon-color:#2393db;
 .radius-round {
    border-radius: $border-radius-base;
 }
+.profilepic {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    overflow: hidden;
+    background-color: #111;
+    margin-left: 55px;
+    cursor: pointer;
+  }
+  
+  .profilepic:hover .profilepic__content {
+    opacity: 1;
+  }
+  
+  .profilepic:hover .rad-full {
+    opacity: .5;
+  }
+  
+  .rad-full {
+    object-fit: cover;
+    opacity: 1;
+    transition: opacity .2s ease-in-out;
+  }
+  
+  .profilepic__content {
+    position: absolute;
+    top: 65px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    opacity: 0;
+    transition: opacity .2s ease-in-out;
+  }
+  
+  .profilepic__icon {
+    color: white;
+    padding-bottom: 60px;
+        cursor: pointer;
+  }
+  
+  .fas {
+    font-size: 20px;
+  }
+  
+  .profilepic__text {
+    text-transform: uppercase;
+    font-size: 12px;
+    width: 50%;
+    text-align: center;
+  }
 .rad-full{
    border-radius: 100%;
+    height: 100px !important;
+    width: 100px !important;  
 }
 .radius-circle {
    border-radius: 50%;
--- a/ng-seed/src/environments/environment.ts
+++ b/ng-seed/src/environments/environment.ts
@ -10,7 +10,7 @@ export const environment = {
  apiEndpoint:'http://192.168.1.10:8080/api/',
 // apiEndpoint:'https://api.venbait.in/api/', 
  // apiEndpoint:'http://venbainfotech.com:5000/api/', 
-//  apiEndpoint:'http://192.168.1.19:8080/api/',
+//  apiEndpoint:'http://192.168.1.10:8080/api/',

  // apiEndpoint:'https://api.venbait.in/api/',
  
--- a/ng-seed/src/favicon.ico
+++ b/ng-seed/src/favicon.ico