From 5e070331f6649997b43c7352c795079cb50571cf Mon Sep 17 00:00:00 2001
From: Smart <kamali@watermelon.us>
Date: Fri, 17 Mar 2023 10:31:08 +0530
Subject: [PATCH] consultant-setting

---
 .../dialog-box/dialog-box.component.html      |   4 +-
 .../dialog-box/dialog-box.component.ts        |   2 +-
 .../dialog-box/dialog-box.component.html      |   4 +-
 .../dialog-box/dialog-box.component.ts        |   2 +-
 .../consultant-setting.module.ts              |   4 +-
 .../consultant-setting.component.html         | 242 ++++++++++++-
 .../consultant-setting.component.scss         | 327 ++++++++++++++++++
 .../consultant-setting.component.ts           |  42 ++-
 .../edit-working-hours.component.html         |   1 +
 .../edit-working-hours.component.scss}        |   0
 .../edit-working-hours.component.spec.ts      |  25 ++
 .../edit-working-hours.component.ts           |  16 +
 12 files changed, 658 insertions(+), 11 deletions(-)
 create mode 100644 ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.scss
 create mode 100644 ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.html
 rename ng-seed/src/app/appoinment/consultant-setting/{consultant-setting/consultant-setting.component.css => edit-working-hours/edit-working-hours.component.scss} (100%)
 create mode 100644 ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.spec.ts
 create mode 100644 ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.ts

diff --git 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
index a451d16..1982a72 100644
--- 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
@@ -9,7 +9,7 @@
    <ng-scrollbar class="scrollHV">
    <div mat-dialog-content class="my-table">
       <form [formGroup]="form" (ngSubmit)="submit()">
-      <div class="field">
+      <!-- <div class="field">
          <label for="name-field" class="label-container">
          Workspace
          </label>
@@ -23,7 +23,7 @@
             <mat-error *ngIf="workspace.hasError('required')">Please choose an Workspace</mat-error>
             <mat-error *ngIf="workspace.hasError('invalidValue')">Please choose any other</mat-error>
          </mat-form-field>
-      </div>
+      </div> -->
       <div class="field">
          <label for="name-field" class="label-container">
          Service
diff --git 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
index 04a563e..4751e66 100644
--- 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
@@ -6,7 +6,7 @@ export interface UsersData {
   // id: number;
   appoinmentTime: string;
   booking: string;
-  workspace: string;
+  // workspace: string;
   service: string;
   staff: string;
   customer: string;
diff --git a/ng-seed/src/app/appoinment/business/dialog-box/dialog-box.component.html b/ng-seed/src/app/appoinment/business/dialog-box/dialog-box.component.html
index 81dda04..72b8072 100644
--- a/ng-seed/src/app/appoinment/business/dialog-box/dialog-box.component.html
+++ b/ng-seed/src/app/appoinment/business/dialog-box/dialog-box.component.html
@@ -41,11 +41,11 @@
       <mat-error *ngIf="myError('city', 'required')">City is required</mat-error>
       <mat-error *ngIf="myError('city', '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">
       <input placeholder="Working Hrs" matInput  formControlName="workingHrsJson">
       <mat-error *ngIf="myError('workingHrsJson', 'required')">Working Hrs is required</mat-error>
       <mat-error *ngIf="myError('workingHrsJson', 'maxlength')">Limit exceed</mat-error>
-    </mat-form-field> 
+    </mat-form-field>  -->
     <img  class="image mb-2" [src]="url" height="50">
     <input type='file' (change)="onSelectFile($event)" formControlName="logo">   
   
diff --git a/ng-seed/src/app/appoinment/business/dialog-box/dialog-box.component.ts b/ng-seed/src/app/appoinment/business/dialog-box/dialog-box.component.ts
index 72a4b54..f7243d3 100644
--- a/ng-seed/src/app/appoinment/business/dialog-box/dialog-box.component.ts
+++ b/ng-seed/src/app/appoinment/business/dialog-box/dialog-box.component.ts
@@ -48,7 +48,7 @@ export class DialogBoxComponent implements OnInit {
 }
   ngOnInit() {
     this.form = new FormGroup({
-    workingHrsJson: new FormControl('', [Validators.required]),
+    // workingHrsJson: new FormControl('', [Validators.required]),
     logo: new FormControl('', null),
     busName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
     address: new FormControl('', [Validators.required, Validators.maxLength(50)]),
diff --git a/ng-seed/src/app/appoinment/consultant-setting/consultant-setting.module.ts b/ng-seed/src/app/appoinment/consultant-setting/consultant-setting.module.ts
index 08cfd3d..35c105d 100644
--- a/ng-seed/src/app/appoinment/consultant-setting/consultant-setting.module.ts
+++ b/ng-seed/src/app/appoinment/consultant-setting/consultant-setting.module.ts
@@ -5,11 +5,13 @@ import { ConsultantSettingRoutingModule } from './consultant-setting-routing.mod
 import { ConsultantSettingComponent } from './consultant-setting/consultant-setting.component';
 import { DemoMaterialModule } from 'app/shared/demo.module';
 import { NgScrollbarModule } from 'ngx-scrollbar';
+import { EditWorkingHoursComponent } from './edit-working-hours/edit-working-hours.component';
 
 
 @NgModule({
   declarations: [
-    ConsultantSettingComponent
+    ConsultantSettingComponent,
+    EditWorkingHoursComponent
   ],
   imports: [
     CommonModule,
diff --git a/ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.html b/ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.html
index 1eea3f6..6a76a68 100644
--- a/ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.html
+++ b/ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.html
@@ -1 +1,241 @@
-<p>consultant-setting works!</p>
+<mat-tab-group [@.disabled]="true">
+    <div class="mb-1 label-hgt">
+       <img src="assets/images/userpic.jpg" width="100" height="100" alt="" class="radius-circle">
+    </div>
+    <mat-tab>
+       <ng-template mat-tab-label>
+         <i class="material-icons">&#xe7fd;</i>  Staff Information
+       </ng-template>
+       <div class="staff">
+          <span class="staff-title">
+          Set Up Staff Profile
+          </span>
+       </div>
+       <ng-scrollbar class="scrollHV">
+          <div mat-dialog-content class="my-table" >
+             <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+             <div class="form-group label-container">
+                <label>Name <span class="line">-</span></label>
+                <input type="text" formControlName="name" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" />
+                <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
+                   <div *ngIf="f.name.errors.required">Name is required</div>
+                </div>
+             </div>
+             <div class="form-group label-container">
+                <label>Email Address <span style="margin-left: 2.7rem;">-</span></label>
+                <input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
+                <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
+                   <div *ngIf="f.email.errors.required">Email is required</div>
+                   <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
+                </div>
+             </div>
+             <div class="form-group label-container">
+                <label>Contact Number <span style="margin-left: 2rem;">-</span></label>
+                <input type="text" formControlName="contact" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.contact.errors }" />
+                <div *ngIf="submitted && f.contact.errors" class="invalid-feedback">
+                   <div *ngIf="f.contact.errors.required">Last Name is required</div>
+                </div>
+             </div>
+             <div class="form-group label-container">
+                <label>Primary Workspace <span style="margin-left: 1rem;">-</span></label>
+                <input type="text" formControlName="workspace" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.workspace.errors }" />
+                <div *ngIf="submitted && f.workspace.errors" class="invalid-feedback">
+                   <div *ngIf="f.workspace.errors.required">First Name is required</div>
+                </div>
+             </div>
+             <div class="form-group label-container">
+                <label>Role <span style="margin-left: 6.7rem;">-</span></label>
+                <input type="text" formControlName="role" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.role.errors }" />
+                <div *ngIf="submitted && f.role.errors" class="invalid-feedback">
+                   <div *ngIf="f.role.errors.required">First Name is required</div>
+                </div>
+             </div>
+             <div class="form-group label-container">
+                <label>Designation <span style="margin-left: 3.7rem;">-</span></label>
+                <input type="text" formControlName="designation" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.designation.errors }" />
+                <div *ngIf="submitted && f.designation.errors" class="invalid-feedback">
+                   <div *ngIf="f.designation.errors.required">First Name is required</div>
+                </div>
+             </div>
+             <div class="form-group label-container">
+                <label>Date of Birth <span style="margin-left: 3.5rem;">-</span></label>
+                <input type="text" formControlName="birth" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.birth.errors }" />
+                <div *ngIf="submitted && f.birth.errors" class="invalid-feedback">
+                   <div *ngIf="f.birth.errors.required">First Name is required</div>
+                </div>
+             </div>
+             <div class="form-group label-container">
+                <label>Gender <span style="margin-left: 5.5rem;">-</span></label>
+                <input type="text" formControlName="gender" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.gender.errors }" />
+                <div *ngIf="submitted && f.gender.errors" class="invalid-feedback">
+                   <div *ngIf="f.gender.errors.required">First Name is required</div>
+                </div>
+             </div>
+             <div class="form-group label-container">
+                <label>Status <span style="margin-left: 6.5rem;">-</span></label>
+                <input type="text" formControlName="status" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.status.errors }" />
+                <div *ngIf="submitted && f.status.errors" class="invalid-feedback">
+                   <div *ngIf="f.status.errors.required">First Name is required</div>
+                </div>
+             </div>
+             <div class="form-group label-container">
+                <label>Additional Information <span style="margin-left: 0.5rem;">-</span></label>
+                <input type="text" formControlName="information" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.information.errors }" />
+                <div *ngIf="submitted && f.information.errors" class="invalid-feedback">
+                   <div *ngIf="f.information.errors.required">First Name is required</div>
+                </div>
+             </div>
+             <div class="form-group">
+                <button class="btn btn-primary">Register</button>
+             </div>
+             </form>
+          </div>
+       </ng-scrollbar>
+    </mat-tab>
+
+    <mat-tab>
+       <ng-template mat-tab-label>
+        <i class="material-icons">&#xe192;</i>  Working Hours
+       </ng-template>
+       <div class="staff">
+          <span class="staff-title">
+          Working Hours
+          </span>
+          <button mat-button   class="button">Edit</button>
+       </div>
+       <div class="working-hours">
+          <ng-scrollbar class="scrollHV">
+             <input id="color-toggle" type="checkbox" >
+             <label for="color-toggle" class="toggle">Customize working hours.</label>
+             <div class="booking-url">
+                <span class="underline-title full-width hours">Working Hours</span>
+             </div>
+             <div class="alert">
+                <span class="closebtn">&times; sample follows customized working hours in (GMT +05:30) India Standard Time (Asia/Kolkata).</span> 
+             </div>
+             <div class="timing-container">
+                <div class="timing">
+                   <span class="dis-flex">
+                   <i class="material-icons">&#xe192;</i> <span class="clock">Sunday</span> 
+                   </span>
+                </div>
+                <div class="dis-flex mt-1">
+                   <div class="dis-flex">
+                      <span>10:00 am</span>
+                   </div>
+                   <span class="hyphen">-</span>
+                   <div class="dis-flex">
+                      <span>01:00 pm</span>
+                   </div>
+                </div>
+             </div>
+             <div class="timing-container">
+                <div class="timing">
+                   <span class="dis-flex">
+                   <i class="material-icons">&#xe192;</i> <span class="clock">Monday</span> 
+                   </span>
+                </div>
+                <div class="dis-flex mt-1">
+                   <div class="dis-flex">
+                      <span>10:00 am</span>
+                   </div>
+                   <span class="hyphen">-</span>
+                   <div class="dis-flex">
+                      <span>01:00 pm</span>
+                   </div>
+                </div>
+             </div>
+             <div class="timing-container">
+                <div class="timing">
+                   <span class="dis-flex">
+                   <i class="material-icons">&#xe192;</i> <span class="clock">Tuesday</span> 
+                   </span>
+                </div>
+                <div class="dis-flex mt-1">
+                   <div class="dis-flex">
+                      <span>10:00 am</span>
+                   </div>
+                   <span class="hyphen">-</span>
+                   <div class="dis-flex">
+                      <span>01:00 pm</span>
+                   </div>
+                </div>
+             </div>
+             <div class="booking-url">
+                <span class="underline-title full-width hours">Special Working Hours</span>
+                <button mat-button   class="add-button">Add</button>
+             </div>
+             <p class="para">Workings on weekends or compensating for time off? Add them here to let customers know when you're available.</p>
+             <div class="booking-url">
+                <span class="underline-title full-width hours">Unavailability</span>
+                <button mat-button   class="add-button">Add</button>
+             </div>
+             <p class="para margin">Workings on weekends or compensating for time off? Add them here to let customers know when you're available.</p>
+          </ng-scrollbar>
+       </div>
+    </mat-tab>
+    
+    <mat-tab>
+       <ng-template mat-tab-label>
+          Assigned Services
+       </ng-template>
+       <div class="staff">
+          <span class="staff-title">
+          Define Your Services
+          </span>
+          <mat-form-field appearance="outline">
+             <!-- <mat-label>Select an option</mat-label> -->
+             <mat-select [(value)]="selected">
+             <mat-option>None</mat-option>
+             <mat-option value="option1">Option 1</mat-option>
+             <mat-option value="option2">Option 2</mat-option>
+             <mat-option value="option3">Option 3</mat-option>
+             </mat-select>
+          </mat-form-field>
+       </div>
+       <div class="mat-card" *ngFor="let message of messages">
+          <mat-nav-list>
+             <mat-list-item (click)="onSelect(message)" >
+                <img mat-list-avatar src="{{message.photo}}" alt="">
+                <h3 mat-line class="name"> {{message.name}} </h3>
+                <p mat-line class="time-amount"> {{message.time}} <span>| ₹ {{message.amount}}</span></p>
+                <p mat-line class="Customize">+ Customize the price of a service.</p>
+             </mat-list-item>
+          </mat-nav-list>
+          <div class="mat-name">
+             {{message.username}}
+          </div>
+          <div class="mat-status">
+             {{message.status}}
+          </div>
+       </div>
+    </mat-tab>
+    <mat-tab>
+       <ng-template mat-tab-label>
+          Staff Booking URL
+       </ng-template>
+       <div class="staff">
+          <span class="staff-title">
+          Share Booking Page
+          </span>
+       </div>
+       <div class="booking-url">
+          <p class="booking-para">Here's your personal booking page. Edit and share this link with customers so they can book your Services directly.</p>
+          <span class="underline-title full-width">Default booking domain</span>
+       </div>
+       <div class="boxmiddle fl boxsize mt20">
+          <div class="booking-urls">
+             <div class="url-generate mb20">
+                <div class="url-link dis-flex">
+                   <span class="url field-center boxsize">
+                   <input type="text" placeholder=" https://bookings.zoho.com/#/app/staffs/summary/4489510000000030016/staff-page-url" name="booking-url" readonly="" id="zb-mb-workspaceBookingPageUrl" class="booking-url-input boxsize text-ellipsis cn ember-text-field ember-view">
+                   </span>
+                   <!-- <span id="zb-mb-BookingPageUrlCustomize" class="customize-link field-center cp ml10 mt0 mr10" data-ember-action="" data-ember-action-813="813">Customize</span> -->
+                   <span class="url-button field-center boxsize pb1"><button id="zb-mb-BookingPageUrlCopyLink" class="copy-button boxsize cp" data-ember-action="" data-ember-action-814="814">Copy</button></span>
+                </div>
+             </div>
+             <div class="clearfix"></div>
+          </div>
+       </div>
+    </mat-tab>
+    </mat-tab-group>
\ No newline at end of file
diff --git 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
new file mode 100644
index 0000000..a75b318
--- /dev/null
+++ b/ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.scss
@@ -0,0 +1,327 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+  }
+  
+  :host ::ng-deep .mat-tab-labels {
+    flex-direction: column;
+    background-color: white;
+    color: rgba(0, 0, 0, 0.87);
+    height: 100%;
+  }
+  
+  mat-tab-group {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+  }
+  
+  :host ::ng-deep .mat-tab-body-wrapper {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: white;
+    margin-left: 2rem;
+  }
+  
+  mat-tab-body {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  :host ::ng-deep mat-ink-bar {
+    display: none;
+  }
+  
+  :host ::ng-deep.mat-tab-label.mat-tab-label-active {
+      background-color: transparent;
+    //   color: red;
+    //   background-color: #eee;
+    //   border-right: 2px solid red;
+  }
+
+  :host ::ng-deep.mat-tab-label {
+      background-color: transparent;
+      /* background-color: lightgray; */
+  }
+
+.staff{
+    display: flex;
+    background-color: #FAFAFA;
+    border-bottom: 1px solid #EFEFEF;
+    height: 63px;
+    padding: 0 30px;
+}
+
+.staff-title{
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 19px;
+    color: #4C4C4C;
+    padding-top: 1rem;
+}
+form{
+  padding: 2rem;
+}
+.line{
+  margin-left: 6rem;
+}
+.form-group{
+  padding-bottom: 2rem;
+  display: flex;
+}
+input{
+  border: none;
+  // border-bottom: 1px solid #d4d4d4;
+}
+input:focus {
+  outline:none;
+}
+.label-container{
+  display: flex;
+  width: 100%;
+  border-bottom: 1px solid #F5F6F8;
+  box-sizing: border-box;
+  min-height: 40px;
+  padding: 10px 0;
+}
+label{
+  color: #666;
+  position: relative;
+  text-transform: capitalize;
+  width: 155px;
+  flex: none;
+  margin-right: 15px;
+  align-self: flex-start;
+  padding-top: 13px;
+  box-sizing: border-box;
+  line-height: 15px;
+}
+.scrollHV {
+  height: calc(100vh - 190px);
+}
+.booking-url{
+  width: 100%;
+    // height: calc(100% - 63px);
+    overflow: auto;
+    padding: 20px 35px;
+}
+.booking-para{
+  font-size: 14px;
+  color: #666!important;
+  line-height: 21px;
+}
+.underline-title{
+  color: #666!important;
+  font-size: 16px;
+  margin-top: 1px;
+  border-bottom: 1px solid #EFEFEF;
+  padding: 0 0 15px;
+  box-sizing: border-box;
+  font-weight: 500;
+}
+.full-width{
+  width: 90%!important;
+  position: absolute;
+}
+.underline-title:after {
+  content: '';
+  position: absolute;
+  width: 41px;
+  height: 1px;
+  background-color: #50477E;
+  bottom: -1px;
+  left: 0;
+}
+.dis-flex {
+  display: flex!important;
+}
+.url {
+  width: calc(100% - 172px);
+  margin-top: 0;
+}
+.customize-link {
+  font-size: 15px;
+  text-decoration: underline;
+  margin-top: 13px;
+  font-family: zohopuvi-medium;
+  color: #666;
+  margin-right: 1rem;
+}
+.url-button {
+  height: 41px;
+  margin: 2px 2px 0 0;
+  width: auto;
+  min-width: 90px;
+  margin-left: 6rem;
+}
+.copy-button {
+  background: #625A92;
+  border: 1px solid #625A92;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  color: #FFF;
+  display: block;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  font-size: 14px;
+}
+ .boxmiddle {
+  width: 91%;
+  background: #F7F8F9;
+  height: 45px;
+  border: 1px solid #E7E7E7;
+  border-radius: 3px;
+  margin: 30px 10px 12px 38px;
+  margin-top: 4rem;
+}
+.booking-url-input {
+  color: #567FC2;
+  font-family: zohopuvi-regular;
+  border: 0;
+  width: 100%;
+  background: #F9F9F9;
+  font-size: 13px;
+  padding: 15px 10px 13px;
+}
+::ng-deep .mat-form-field-infix {
+  height: 50px!important;
+}
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper {
+  margin-top: 10px!important;
+}
+.mat-card{
+  background-color: #FFF;
+    min-height: 80px;
+    border-bottom: 1px solid #F5F6F8;
+    position: relative;
+    margin: 30px 25px 30px 30px;
+    display: flex;
+    .mat-nav-list .mat-list-item:hover{
+      background: none;
+    }
+  .name{
+    font-size: 15px;
+    color: #111;
+  }
+  .time-amount{
+    color: #5B6572!important;
+    font-size: 13px;
+    line-height: 25px;
+  }
+  .Customize{
+    color: #567FC2!important;
+    overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 12px;
+  }
+  .mat-name{
+    font-size: 14px;
+    color: #5B6572!important;
+    padding-top: 3rem;
+    padding-right: 8rem;
+    padding-left: 8rem;
+  }
+  .mat-status{
+    font-size: 14px;
+    color: green!important;
+    padding-top: 3rem;
+  }
+}
+.button{
+  float: right;
+  background-color: #4caf50;
+  color: #ffff;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+.working-hours{
+  margin: 30px 25px 30px 30px;
+  .toggle{
+    padding-left: 5px;
+  }
+  .alert{
+    padding: 20px;
+    background-color: #F4FBFF;
+    border-color: #D0F6FF;
+    color: #5F5F5F;
+    margin-top: 4rem;
+  }
+  .closebtn {
+    margin-left: 15px;
+    color: #5F5F5F;
+    font-size: 12px;
+    line-height: 20px;
+    cursor: pointer;
+  }
+  .hours{
+  margin-left: -2rem;
+  }
+  .timing-container{
+    display: flex;
+    width: 100%;
+    border-bottom: 1px solid #F5F6F8;
+    box-sizing: border-box;
+    min-height: 40px;
+    padding: 7px 0;
+  }
+  .timing{
+    color: #666;
+    position: relative;
+    text-transform: capitalize;
+    width: 155px;
+    flex: none;
+    margin-right: 15px;
+    align-self: flex-start;
+    padding-top: 13px;
+    box-sizing: border-box;
+    line-height: 15px;
+  }
+  .dis-flex{
+    display: flex!important;
+  }
+.hyphen {
+  padding: 0px 60px 0px 60px;
+  color: #999;
+}
+.clock{
+  margin-top: 6px;
+  margin-left: 10px;
+}
+.scrollHV {
+  height: calc(100vh - 190px);
+}
+.add-button{
+  border: 1px solid #50497F;
+  min-width: 80px;
+  text-align: center;
+  font-size: 13px;
+  color: #50497F;
+  background-color: #FFF;
+  cursor: pointer;
+  float: right;
+}
+.mat-tab-body-content {
+  height: 100%;
+  overflow: hidden!important;
+}
+.para{
+  font-size: 15px;
+  color: #5B6572!important;
+}
+.margin{
+margin-bottom: 10rem;
+}
+
+
+}  
+
+
diff --git 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
index b51f59b..2160ff1 100644
--- 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
@@ -1,15 +1,51 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-consultant-setting',
   templateUrl: './consultant-setting.component.html',
-  styleUrls: ['./consultant-setting.component.css']
+  styleUrls: ['./consultant-setting.component.scss']
 })
 export class ConsultantSettingComponent implements OnInit {
+  registerForm: FormGroup;
+  submitted = false;
+  selected = 'Assign New Services';
+  messages: Object[] = [{
+    photo: 'assets/images/face1.jpg',
+    name: 'Sample',
+    time: '30 mins ',
+    amount: '10 ',
+    username: 'Sample',
+    status: 'Active',
+  },
+ ];
+ constructor(private formBuilder: FormBuilder) {}
 
-  constructor() { }
+ 
+ ngOnInit() {
+  this.registerForm = this.formBuilder.group({
+    name: ['', Validators.required],
+    email: ['', [Validators.required, Validators.email]],
+    contact: ['', Validators.required],
+    workspace: ['', Validators.required],
+    role: ['', Validators.required],
+    designation: ['', Validators.required],
+    birth: ['', Validators.required],
+    gender: ['', Validators.required],
+    status: ['', Validators.required],
+    information: ['', Validators.required],
+  });
+}
 
-  ngOnInit(): void {
+get f() {
+  return this.registerForm.controls;
+}
+onSubmit() {
+  this.submitted = true;
+  if (this.registerForm.invalid) {
+    return;
   }
+ console.log(JSON.stringify(this.registerForm.value, null, 2));
+}
 
 }
diff --git a/ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.html b/ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.html
new file mode 100644
index 0000000..fbed12b
--- /dev/null
+++ b/ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.html
@@ -0,0 +1 @@
+<p>edit-working-hours works!</p>
diff --git a/ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.css b/ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.scss
similarity index 100%
rename from ng-seed/src/app/appoinment/consultant-setting/consultant-setting/consultant-setting.component.css
rename to ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.scss
diff --git a/ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.spec.ts b/ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.spec.ts
new file mode 100644
index 0000000..3cc3cce
--- /dev/null
+++ b/ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditWorkingHoursComponent } from './edit-working-hours.component';
+
+describe('EditWorkingHoursComponent', () => {
+  let component: EditWorkingHoursComponent;
+  let fixture: ComponentFixture<EditWorkingHoursComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EditWorkingHoursComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditWorkingHoursComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.ts b/ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.ts
new file mode 100644
index 0000000..59c16ba
--- /dev/null
+++ b/ng-seed/src/app/appoinment/consultant-setting/edit-working-hours/edit-working-hours.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-edit-working-hours',
+  templateUrl: './edit-working-hours.component.html',
+  styleUrls: ['./edit-working-hours.component.scss']
+})
+export class EditWorkingHoursComponent implements OnInit {
+
+  
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}