add base project

2026-10-19 15:17:49 +05:30
commit 39f602f3f6
795 changed files with 68242 additions and 0 deletions
@@ -0,0 +1,108 @@
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://"><clr-icon shape="home"></clr-icon></a></li>
+  <li><a href="javascript://"> Product</a></li>
+</ol>
+
+<div class="dg-wrapper">
+  <div class="clr-row">
+    <div class="clr-col-8">
+      <h3>Product Management</h3>
+    </div>
+    <div class="clr-col-4" style="text-align: right;">
+      <button id="add" class="btn btn-primary" (click)="goToAdd()">
+        <clr-icon shape="plus"></clr-icon> ADD
+      </button>
+    </div>
+  </div>
+
+  <!-- CLARITY DATAGRID -->
+  <clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected">
+    <clr-dg-placeholder>
+      <ng-template #loadingSpinner>
+        <clr-spinner>Loading ...</clr-spinner>
+      </ng-template>
+      <div *ngIf="error; else loadingSpinner">{{error}}</div>
+    </clr-dg-placeholder>
+
+    <!-- COLUMN HEADERS -->
+{{LIST_ITEMS}}
+
+    <clr-dg-column>
+      <ng-container *clrDgHideableColumn="{hidden: false}">
+        <clr-icon shape="bars"></clr-icon> Action
+      </ng-container>
+    </clr-dg-column>
+
+    <!-- DATA ROWS -->
+    <clr-dg-row *clrDgItems="let item of items" [clrDgItem]="item">
+      <clr-dg-cell>{{item.name}}</clr-dg-cell>
+      <clr-dg-cell>{{item.description}}</clr-dg-cell>
+      <clr-dg-cell>{{item.active}}</clr-dg-cell>
+
+      <clr-dg-cell>
+        <span style="cursor: pointer; margin-right: 10px;" (click)="onEdit(item)" title="Edit">
+          <clr-icon shape="pencil"></clr-icon>
+        </span>
+        <span style="cursor: pointer; color: red;" (click)="onDelete(item)" title="Delete">
+          <clr-icon shape="trash" class="is-error"></clr-icon>
+        </span>
+      </clr-dg-cell>
+
+      <clr-dg-action-overflow>
+        <button class="action-item" (click)="onEdit(item)">Edit</button>
+        <button class="action-item" (click)="onDelete(item)">Delete</button>
+      </clr-dg-action-overflow>
+    </clr-dg-row>
+
+    <clr-dg-footer>
+      <clr-dg-pagination #pagination [clrDgPageSize]="10">
+        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Items per page</clr-dg-page-size>
+        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} items
+      </clr-dg-pagination>
+    </clr-dg-footer>
+  </clr-datagrid>
+</div>
+
+<!-- ADD MODAL -->
+<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Add Product</h3>
+  <div class="modal-body">
+    <form [formGroup]="entryForm">
+      <div class="clr-row">
+{{FORM_FIELDS}}
+      </div>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
+    <button type="button" class="btn btn-primary" (click)="onCreate()">Submit</button>
+  </div>
+</clr-modal>
+
+<!-- EDIT MODAL -->
+<clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Edit Product (ID: {{rowSelected.id}})</h3>
+  <div class="modal-body" *ngIf="rowSelected">
+    <form>
+      <div class="clr-row">
+{{FORM_FIELDS}}
+      </div>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline" (click)="modalEdit = false">Cancel</button>
+    <button type="button" class="btn btn-primary" (click)="onUpdate(rowSelected.id)">Update</button>
+  </div>
+</clr-modal>
+
+<!-- DELETE MODAL -->
+<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Confirm Delete</h3>
+  <div class="modal-body">
+    <p>Are you sure you want to delete this record (ID: <b>{{rowSelected.id}}</b>)?</p>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
+    <button type="button" class="btn btn-danger" (click)="delete(rowSelected.id)">Delete</button>
+  </div>
+</clr-modal>
@@ -0,0 +1,7 @@
+.dg-wrapper {
+  margin-top: 15px;
+}
+.heading {
+  font-weight: 500;
+  margin-bottom: 12px;
+}
@@ -0,0 +1,98 @@
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ProductService } from './Product.service';
+
+@Component({
+  selector: 'app-Product',
+  templateUrl: './Product.component.html',
+  styleUrls: ['./Product.component.scss']
+})
+export class ProductComponent implements OnInit {
+  rowSelected: any = {};
+  modaldelete = false;
+  modalEdit = false;
+  modalAdd = false;
+  public entryForm: FormGroup;
+  loading = false;
+  items: any[] = [];
+  selected: any[] = [];
+  error: string;
+
+  constructor(
+    private mainService: ProductService,
+    private toastr: ToastrService,
+    private _fb: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute
+  ) { }
+
+  ngOnInit(): void {
+    this.getData();
+    this.entryForm = this._fb.group({
+      name: [null],
+      description: [null],
+      active: [true]
+    });
+  }
+
+  getData() {
+    this.loading = true;
+    this.mainService.getAll().subscribe((data) => {
+      this.loading = false;
+      this.items = data || [];
+      if (this.items.length === 0) {
+        this.error = 'No Data Available';
+      }
+    }, (error) => {
+      this.loading = false;
+      this.error = 'Server Error';
+    });
+  }
+
+  goToAdd() {
+    this.entryForm.reset({ active: true });
+    this.modalAdd = true;
+  }
+
+  onEdit(row: any) {
+    this.rowSelected = Object.assign({}, row);
+    this.modalEdit = true;
+  }
+
+  onDelete(row: any) {
+    this.rowSelected = row;
+    this.modaldelete = true;
+  }
+
+  delete(id: number) {
+    this.modaldelete = false;
+    this.mainService.delete(id).subscribe(() => {
+      this.toastr.success('Deleted successfully');
+      this.getData();
+    }, (error) => {
+      this.toastr.error('Failed to delete');
+    });
+  }
+
+  onCreate() {
+    this.modalAdd = false;
+    this.mainService.create(this.entryForm.value).subscribe(() => {
+      this.toastr.success('Added successfully');
+      this.getData();
+    }, (error) => {
+      this.toastr.error('Failed to add');
+    });
+  }
+
+  onUpdate(id: number) {
+    this.modalEdit = false;
+    this.mainService.update(id, this.rowSelected).subscribe(() => {
+      this.toastr.success('Updated successfully');
+      this.getData();
+    }, (error) => {
+      this.toastr.error('Failed to update');
+    });
+  }
+}
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { ApiRequestService } from 'src/app/services/api/api-request.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProductService {
+  private baseURL = 'Product/Product';
+
+  constructor(
+    private http: HttpClient,
+    private apiRequest: ApiRequestService
+  ) { }
+
+  getAll(page?: number, size?: number): Observable<any> {
+    return this.apiRequest.get(this.baseURL);
+  }
+
+  getById(id: number): Observable<any> {
+    const _http = this.baseURL + '/' + id;
+    return this.apiRequest.get(_http);
+  }
+
+  create(data: any): Observable<any> {
+    return this.apiRequest.post(this.baseURL, data);
+  }
+
+  update(id: number, data: any): Observable<any> {
+    const _http = this.baseURL + '/' + id;
+    return this.apiRequest.put(_http, data);
+  }
+
+  delete(id: number): Observable<any> {
+    const _http = this.baseURL + '/' + id;
+    return this.apiRequest.delete(_http);
+  }
+}
@@ -0,0 +1,405 @@
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://"> Stepper Workflow</a></li>
+</ol>
+<div class="dg-wrapper">
+  <div class="clr-row">
+    <div class="clr-col-8">
+      <h3>Stepper Workflow </h3>
+    </div>
+    <div class="clr-col-4" style="text-align: right;">
+      <button *ngIf="cardButton" id="add" class="btn btn-primary btn-icon" (click)="changeView()">
+        <clr-icon *ngIf="!isCardview" shape="grid-view"></clr-icon> <clr-icon *ngIf="isCardview"
+          shape="bars"></clr-icon>
+      </button>
+      <!-- button -->
+      <button id="add" class="btn btn-primary" (click)="goToAdd(product)">
+        <clr-icon shape="plus"></clr-icon>ADD
+      </button>
+    </div>
+  </div>
+  <ng-container *ngIf="!isCardview"> <!-- GET ALL --> <clr-datagrid [clrDgLoading]="loading"
+      [(clrDgSelected)]="selected">
+      <clr-dg-placeholder>
+        <ng-template #loadingSpinner>
+          <clr-spinner>Loading ... </clr-spinner>
+        </ng-template>
+        <div *ngIf="error;else loadingSpinner">{{error}}</div>
+      </clr-dg-placeholder>
+
+      <clr-dg-column [clrDgField]="' name'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Name
+        </ng-container></clr-dg-column>
+
+
+      <clr-dg-column [clrDgField]="' description'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Description
+        </ng-container></clr-dg-column>
+
+
+      <clr-dg-column [clrDgField]="' active'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Active
+        </ng-container></clr-dg-column>
+
+
+      <!-- who column -->
+      <clr-dg-column> <ng-container *clrDgHideableColumn="{hidden: false}">
+          <clr-icon shape="bars"></clr-icon> Action
+        </ng-container></clr-dg-column>
+      <!-- end -->
+
+      <clr-dg-row *clrDgItems="let user of product?.slice()?.reverse()" [clrDgItem]="user">
+
+        <clr-dg-cell>{{user. name }}</clr-dg-cell>
+
+
+        <clr-dg-cell (click)="goToReplaceStringdescription (user.description)"
+          style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
+        </clr-dg-cell>
+
+
+        <clr-dg-cell>{{user. active }}</clr-dg-cell>
+
+
+        <!-- who column -->
+        <clr-dg-cell>
+          <clr-signpost>
+            <span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success"
+                style="color: rgb(0, 130, 236);"></clr-icon></span>
+            <clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
+              <h5 style="margin-top: 0">Who Column</h5>
+              <div>Account ID: <code class="clr-code">{{user.accountId}}</code></div>
+              <div>Created At: <code class="clr-code">{{user.createdAt| date}}</code></div>
+              <div>Created By: <code class="clr-code">{{user.createdBy}}</code></div>
+              <div>Updated At: <code class="clr-code">{{user.updatedAt | date}}</code></div>
+              <div>Updated By: <code class="clr-code">{{user.updatedBy}}</code></div>
+            </clr-signpost-content>
+          </clr-signpost>
+
+          <!-- Doosra icon (plus) with left margin for spacing -->
+          <clr-icon shape="list" style="color: #1976d2; cursor: pointer; margin-left: 12px;"
+            title="Open Stepper Workflow" (click)="gotoStepper(user.id)">
+          </clr-icon>
+
+        </clr-dg-cell>
+
+        <!-- who colmn -->
+
+        <clr-dg-action-overflow>
+          <button class="action-item" (click)="onEdit(user)">Edit</button>
+          <button class="action-item" (click)="onDelete(user)">Delete</button>
+        </clr-dg-action-overflow>
+      </clr-dg-row>
+      <clr-dg-footer>
+        <clr-dg-pagination #pagination [clrDgPageSize]="10">
+          <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
+          {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+          of {{pagination.totalItems}} users
+        </clr-dg-pagination>
+      </clr-dg-footer>
+    </clr-datagrid> </ng-container>
+  <ng-template #showInfo>
+    <div class="alert alert-info" role="alert">
+      <div class="alert-items">
+        <div class="alert-item static">
+          <span class="alert-text">
+            <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
+            Data could be found. Loading..
+            <clr-spinner [clrMedium]="true">Loading ...</clr-spinner>
+          </span>
+        </div>
+      </div>
+    </div>
+  </ng-template><ng-container *ngIf="isCardview">
+    <div *ngIf="product; else showInfo" class="clr-row clr-align-items-start clr-justify-content-start">
+      <div *ngFor="let app of product| filter:search; let index = i" class="clr-col-auto">
+        <div class="clr-row">
+          <div class="clr-col-lg-12 clr-col-md-4 clr-col-sm-4 clr-col-12" style="width: 410px;">
+            <div class="card" style="padding: 10px; "
+              [style.background-color]="cardmodal.cardColor !== '' ? cardmodal.cardColor : 'white'">
+              <div class="card-body"
+                style="display: grid; grid-template-columns: repeat(13, 1fr); grid-template-rows: repeat(7, 1fr); gap: 5px;">
+                <ng-container *ngFor="let item of dashboardArray">
+                  <div [style.gridColumn]="item.x + 1" [style.gridRow]="item.y + 1"
+                    [style.gridColumnEnd]="item.x + item.cols + 1" [style.gridRowEnd]="item.y + item.rows + 1">
+                    <div *ngIf="item.name === 'textField'" class="title-card card-title"
+                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
+                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
+                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
+                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
+                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
+                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
+          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
+                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
+                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'"
+                      [style.background-color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditionbackgroundcolor : item.backgroundcolor"
+                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
+                      {{beforeText(item.fieldtext)}}
+                      {{ app[transform(item.fieldtext) ] }}
+                      {{afterText(item.fieldtext)}}
+                    </div>
+
+                    <div *ngIf="item.name === 'dateField'" class="title-card card-title"
+                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
+                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
+                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
+                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
+                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
+                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
+          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
+                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
+                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'"
+                      [style.background-color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditionbackgroundcolor : item.backgroundcolor"
+                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
+                      {{beforeText(item.fieldtext)}}
+                      {{ app[transform(item.fieldtext) ] | date}}
+                      {{afterText(item.fieldtext)}}
+                    </div>
+                    <div *ngIf="item.name === 'numberField'" class="title-card card-title"
+                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
+                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
+                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
+                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
+                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
+                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
+          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
+                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
+                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'"
+                      [style.background-color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditionbackgroundcolor : item.backgroundcolor"
+                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
+                      {{beforeText(item.fieldtext)}}
+                      {{ app[transform(item.fieldtext) ]}}
+                      {{afterText(item.fieldtext)}}
+                    </div>
+
+                    <div *ngIf="item.name === 'Line'" class="title-card card-title"
+                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
+                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
+                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
+                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
+                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
+                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
+          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
+                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
+                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'">
+                      <hr>
+                    </div>
+
+
+                    <div *ngIf="item.name === 'Icon'" class="icon-card"
+                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
+                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
+                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
+                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
+                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
+                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
+          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
+                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
+                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'">
+                      <clr-icon [attr.shape]="item.iconName"></clr-icon>
+                    </div>
+
+                    <div *ngIf="item.name == 'Image'"
+                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
+                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
+                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
+                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
+                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
+                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
+          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
+                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
+                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'"
+                      [style.background-color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditionbackgroundcolor : item.backgroundcolor"
+                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
+                      <img id="filePreview" [src]="item.imageURL" alt="File Preview"
+                        [style.width]="item.imagewidth !== '' ? item.imagewidth + 'px' : '100px'"
+                        [style.height]="item.imagewidth !== '' ? item.imagewidth + 'px' : '100px'">
+                    </div>
+                  </div>
+                </ng-container>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</div>
+
+
+
+<clr-modal [(clrModalOpen)]="rsModaldescription" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
+  <div class="modal-body">
+    <textarea class="form-control" style="width:100%; height: 400px;" readonly>{{rowSelected}}</textarea>
+  </div>
+</clr-modal>
+
+
+
+<!-- //		EDIT DATA......... -->
+<clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Update Stepper Workflow
+    <!--update button -->
+
+
+
+
+
+  </h3>
+  <div class="modal-body" *ngIf="rowSelected.id">
+    <h2 class="heading">{{rowSelected.id}}</h2>
+    <!-- button -->
+    <form>
+      <div class="clr-row">
+        <div class="clr-col-sm-12">
+          <label>Name</label>
+          <input class="clr-input" type="text" [(ngModel)]="rowSelected.name" name="name" />
+        </div>
+
+        <div class="clr-col-sm-12">
+          <label> Description</label>
+          <textarea cols="10" rows="2" [(ngModel)]="rowSelected.description" name="description "
+            placeholder="Textarea">  </textarea>
+        </div>
+
+        <div class="clr-col-sm-12">
+          <label> Active</label>
+          <input type="checkbox" name="active" clrToggle [(ngModel)]="rowSelected.active" />
+        </div>
+
+      </div>
+
+
+
+
+
+
+      <!-- form code start -->
+      <div *ngIf="checkFormCode">
+        <h4 style="font-weight: 300;display: inline;">Extension</h4>
+        <br>
+        <hr>
+        <div class="clr-row">
+          <div class="clr-col-4" *ngFor="let field of additionalFieldsFromBackend">
+            <ng-container *ngIf="field.formCode === formcode" [ngSwitch]="field.fieldType">
+              <!-- Text Input --> <label *ngSwitchCase="'text'">{{ field.fieldName }}</label>
+              <input *ngSwitchCase="'text'" [type]="field.fieldType" name="{{ field.extValue }}"
+                [(ngModel)]="rowSelected[field.extValue]" class="clr-input" />
+
+              <!-- Date Input --> <label *ngSwitchCase="'date'">{{ field.fieldName }}</label>
+              <input *ngSwitchCase="'date'" [type]="field.fieldType" name="{{ field.extValue }}"
+                [(ngModel)]="rowSelected[field.extValue]" class="clr-input" />
+
+              <!-- Textarea --> <label *ngSwitchCase="'textarea'">{{ field.fieldName }}</label>
+              <textarea *ngSwitchCase="'textarea'" name="{{ field.extValue }}" [(ngModel)]="rowSelected[field.extValue]"
+                col="10" row="2"></textarea>
+
+              <!-- Checkbox --> <label *ngSwitchCase="'checkbox'">{{ field.fieldName }}</label><br>
+              <input *ngSwitchCase="'checkbox'" [type]="field.fieldType" name="{{ field.extValue }}"
+                [(ngModel)]="rowSelected[field.extValue]" class="clr-checkbox" />
+            </ng-container>
+          </div>
+        </div>
+      </div>
+
+      <!-- form code end -->
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modalEdit = false">Cancel</button>
+        <button type="submit" class="btn btn-primary" (click)="onUpdate(rowSelected.id)">Update</button>
+      </div>
+    </form>
+  </div>
+</clr-modal>
+<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <div class="modal-body" *ngIf="rowSelected.id">
+    <h1 class="delete">Are You Sure Want to delete?</h1>
+    <h2 class="heading">{{rowSelected.id}}</h2>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
+      <button type="button" (click)="delete(rowSelected.id)" class="btn btn-primary">Delete</button>
+    </div>
+  </div>
+</clr-modal>
+<!-- ADD FORM ..... -->
+<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Add Stepper Workflow
+
+
+
+
+
+
+    <!-- aeroplane icon -->
+    &nbsp; &nbsp; &nbsp; &nbsp;
+    <a *ngIf="userrole.includes('ADMIN')" style="float: right;" href="javascript:void(0)" role="tooltip"
+      aria-haspopup="true" class="tooltip tooltip-sm tooltip-bottom-left">
+      <a id="build_extension" [routerLink]="['../extension/all']"
+        [queryParams]="{ formCode: 'Stepper_workflow_formCode' }">
+        <clr-icon shape="airplane" size="32"></clr-icon>
+      </a>
+      <span class="tooltip-content">Form Extension</span>
+    </a>
+  </h3>
+  <div class="modal-body">
+    <form [formGroup]="entryForm">
+      <div class="clr-row" style="height: fit-content;">
+
+        <div class="clr-col-sm-12">
+          <label> Name</label>
+          <input class="clr-input" type="text" formControlName="name" />
+        </div>
+
+        <div class="clr-col-sm-12">
+          <label> Description</label>
+          <textarea cols="10" rows="2" formControlName="description" placeholder="Textarea">  </textarea>
+        </div>
+
+        <div class="clr-col-sm-12">
+          <label> Active</label>
+          <input type="checkbox" formControlName="active" clrToggle />
+        </div>
+
+
+      </div>
+
+
+
+
+
+
+
+
+      <!-- form code start -->
+      <div *ngIf="checkFormCode">
+        <h4 style="font-weight: 300;display: inline;">Extension</h4>
+        <br>
+        <hr>
+        <div class="clr-row">
+          <div class="clr-col-4" *ngFor="let field of additionalFieldsFromBackend">
+            <ng-container *ngIf="field.formCode === formcode" [ngSwitch]="field.fieldType">
+              <!-- Text Input --> <label *ngSwitchCase="'text'">{{ field.fieldName }}</label>
+              <input *ngSwitchCase="'text'" [type]="field.fieldType" [formControlName]="field.extValue"
+                class="clr-input" />
+              <!-- Date Input --> <label *ngSwitchCase="'date'">{{ field.fieldName }}</label>
+              <input *ngSwitchCase="'date'" [type]="field.fieldType" [formControlName]="field.extValue"
+                class="clr-input" />
+              <!-- Textarea --> <label *ngSwitchCase="'textarea'">{{ field.fieldName }}</label>
+              <textarea *ngSwitchCase="'textarea'" [formControlName]="field.extValue" col="10" row="2"></textarea>
+              <!-- Checkbox --> <label *ngSwitchCase="'checkbox'">{{ field.fieldName }}</label><br>
+              <input *ngSwitchCase="'checkbox'" [type]="field.fieldType" [formControlName]="field.extValue"
+                class="clr-checkbox" />
+            </ng-container>
+          </div>
+        </div>
+      </div>
+      <!-- form code end -->
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
+        <button type="submit" class="btn btn-primary" (click)="onSubmit()">ADD</button>
+      </div>
+    </form>
+  </div>
+</clr-modal>
+
+
+
+
+
+
+<!-- htmlpopup -->
@@ -0,0 +1,78 @@
+//@import "../../../../assets/scss/var";
+.s-info-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  button {
+    outline: none;
+  }
+}
+.delete,.heading{
+  text-align: center;
+  color: red;
+}
+.entry-pg {
+  width: 750px;
+}
+
+.button1::after {
+  content: none;
+}
+.button1:hover::after {
+  content: "ADD ROWS";
+}
+
+.section {
+  background-color: #dddddd;
+  height: 40px;
+}
+
+.section p {
+  //color: white;
+  padding: 10px;
+  font-size: 18px;
+}
+
+.clr-input {
+  color: #212529;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  padding: 0.75rem 0.75rem;
+  margin-top: 3px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.clr-file {
+  color: #212529;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  //padding: 0.6rem 0.75rem;
+  margin-top: 3px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.center {
+  text-align: center;
+}
+select{
+  width: 100%;
+  margin-top: 3px;
+  padding: 5px 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+input[type=text],[type=date],[type=number],textarea {
+  width: 100%;
+  padding: 15px 15px;
+  background-color:rgb(255, 255, 255);
+ // margin: 8px 0;
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+.error_mess {
+  color: red;
+}
@@ -0,0 +1,259 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { AlertService } from 'src/app/services/alert.service';
+import { Stepper_workflowservice } from './Stepper_workflow.service';
+import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators, ValidationErrors } from '@angular/forms';
+import { ExtensionService } from 'src/app/services/fnd/extension.service';
+import { DashboardContentModel2 } from 'src/app/models/builder/dashboard';
+import { Stepper_workflowcardvariable } from './Stepper_workflow_cardvariable';
+import { UserInfoService } from 'src/app/services/user-info.service';
+import { ActivatedRoute, Router } from '@angular/router';
+
+declare var JsBarcode: any;
+@Component({
+  selector: 'app-Stepper_workflow',
+  templateUrl: './Stepper_workflow.component.html',
+  styleUrls: ['./Stepper_workflow.component.scss']
+})
+export class Stepper_workflowComponent implements OnInit {
+  cardButton = Stepper_workflowcardvariable.cardButton;
+  cardmodeldata = Stepper_workflowcardvariable.cardmodeldata;
+  public dashboardArray: DashboardContentModel2[];
+  isCardview = Stepper_workflowcardvariable.cardButton;
+  cardmodal; changeView() {
+    this.isCardview = !this.isCardview;
+  }
+  beforeText(fieldtext: string): string { // Extract the text before the first '<'
+    const index = fieldtext.indexOf('<');
+    return index !== -1 ? fieldtext.substring(0, index) : fieldtext;
+  }
+  afterText(fieldtext: string): string { // Extract the text after the last '>'
+    const index = fieldtext.lastIndexOf('>');
+    return index !== -1 ? fieldtext.substring(index + 1) : '';
+  }
+  transform(fieldtext: string): string {
+    const match = fieldtext.match(/<([^>]*)>/);
+    return match ? match[1] : ''; // Extract the text between '<' and '>'
+  }
+  userrole;
+  rowSelected: any = {};
+  modaldelete = false;
+  modalEdit = false;
+  modalAdd = false;
+  public entryForm: FormGroup;
+  loading = false;
+  product;
+  modalOpenedforNewLine = false;
+  newLine: any;
+  additionalFieldsFromBackend: any[] = [];
+  formcode = 'Stepper_workflow_formCode'
+  tableName = 'Stepper_workflow'; checkFormCode; selected: any[] = []; constructor(
+    private extensionService: ExtensionService,
+    private userInfoService: UserInfoService,
+    private mainService: Stepper_workflowservice,
+    private alertService: AlertService,
+    private toastr: ToastrService,
+    private _fb: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute,
+  ) { }
+  // component button 
+  ngOnInit(): void {
+    if (this.cardmodeldata !== '') {
+      this.cardmodal = JSON.parse(this.cardmodeldata);
+      this.dashboardArray = this.cardmodal.dashboard.slice();
+      console.log(this.dashboardArray)
+    }
+    this.userrole = this.userInfoService.getRoles();
+    this.getData();
+    this.entryForm = this._fb.group({
+      name: [null],
+
+      description: [null],
+
+      active: [true],
+
+
+
+    }); // component_button200
+    // form code start
+    this.extensionService.getJsonObjectsByFormCodeList(this.formcode).subscribe(data => {
+      console.log(data);
+      const jsonArray = data.map((str) => JSON.parse(str));
+      this.additionalFieldsFromBackend = jsonArray;
+      this.checkFormCode = this.additionalFieldsFromBackend.some(field => field.formCode === "Stepper_workflow_formCode");
+      console.log(this.checkFormCode);
+      console.log(this.additionalFieldsFromBackend);
+      if (this.additionalFieldsFromBackend && this.additionalFieldsFromBackend.length > 0) {
+        this.additionalFieldsFromBackend.forEach(field => {
+          if (field.formCode === this.formcode) {
+            if (!this.entryForm.contains(field.extValue)) {
+              // Add the control only if it doesn't exist in the form
+              this.entryForm.addControl(field.extValue, this._fb.control(field.fieldValue));
+            }
+          }
+        });
+      }
+    });
+    console.log(this.entryForm.value);
+    // form code end 
+
+
+  }
+
+
+  error;
+  getData() {
+    this.mainService.getAll().subscribe((data) => {
+      console.log(data);
+      this.product = data;
+      if (this.product.length == 0) {
+        this.error = "No Data Available"
+      }
+    }, (error) => {
+      console.log(error);
+      if (error) {
+        this.error = "Server Error";
+      }
+    });
+  }
+  onEdit(row) {
+    this.rowSelected = row;
+
+    this.modalEdit = true;
+  }
+  onDelete(row) {
+    this.rowSelected = row;
+    this.modaldelete = true;
+  }
+  delete(id) {
+    this.modaldelete = false;
+    console.log("in delete  " + id);
+    this.mainService.delete(id).subscribe(
+      (data) => {
+        console.log(data);
+        this.ngOnInit();
+        if (data) { this.toastr.success('Deleted successfully'); }
+      });
+  }
+  onUpdate(id) {
+    this.modalEdit = false;
+
+
+    //console.log("in update");
+    console.log("id  " + id);
+    console.log(this.rowSelected);
+    //console.log("out update");
+    this.mainService.update(id, this.rowSelected).subscribe(
+      (data) => {
+        console.log(data);
+        if (data || data.status >= 200 && data.status <= 299) {
+          this.toastr.success("Update Successfully");
+        }
+        setTimeout(() => {
+          this.ngOnInit();
+        }, 500);
+
+      }, (error) => {
+        console.log(error);
+        if (error.status >= 200 && error.status <= 299) {
+          // this.toastr.success("update Succesfully");
+        }
+        if (error.status >= 400 && error.status <= 499) {
+          this.toastr.error("Not Updated");
+        }
+        if (error.status >= 500 && error.status <= 599) {
+          this.toastr.error("Not Updated");
+        }
+      });
+    setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+  }
+  onCreate() {
+    this.modalAdd = false;
+
+    this.mainService.create(this.entryForm.value).subscribe(
+      (data) => {
+        console.log(data);
+        if (data || data.status >= 200 && data.status <= 299) {
+          this.toastr.success("Added Successfully");
+        }
+        setTimeout(() => {
+          this.ngOnInit();
+        }, 500);
+
+      }, (error) => {
+        console.log(error);
+        if (error.status >= 200 && error.status <= 299) {
+          // this.toastr.success("Added Succesfully");
+        }
+        if (error.status >= 400 && error.status <= 499) {
+          this.toastr.error("Not Added");
+        }
+        if (error.status >= 500 && error.status <= 599) {
+          this.toastr.error("Not Added");
+        }
+      });
+    setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+  }
+  goToAdd(row) {
+    this.modalAdd = true;
+    this.submitted = false;
+
+  }
+  submitted = false;
+  onSubmit() {
+    console.log(this.entryForm.value);
+    this.submitted = true;
+    if (this.entryForm.invalid) {
+      return;
+    } this.onCreate();
+
+  }
+
+
+  rsModaldescription = false;
+  goToReplaceStringdescription(row) {
+    this.rowSelected = row; this.rsModaldescription = true;
+  }
+
+
+  gotoStepper(id) {
+
+    console.log('id is ', id)
+
+    // stepper route
+
+
+
+
+  }
+
+  // updateaction
+}
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { Observable } from "rxjs";
+import { HttpClient, HttpHeaders, HttpParams, } from "@angular/common/http";
+import { ApiRequestService } from "src/app/services/api/api-request.service";
+import { environment } from 'src/environments/environment';
+@Injectable({
+  providedIn: 'root'
+})
+export class Stepper_workflowservice{
+  private baseURL = "Stepper_workflow/Stepper_workflow" ;  constructor(
+    private http: HttpClient,
+    private apiRequest: ApiRequestService,
+  ) { }
+  getAll(page?: number, size?: number): Observable<any> {
+    return this.apiRequest.get(this.baseURL);
+  }
+  getById(id: number): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.get(_http);
+  }
+  create(data: any): Observable<any> {
+    return this.apiRequest.post(this.baseURL, data);
+  }
+  update(id: number, data: any): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.put(_http, data);
+  }
+  delete(id: number): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.delete(_http);
+  }
+
+
+
+
+
+
+// updateaction
+}
@@ -0,0 +1,4 @@
+export const Stepper_workflowcardvariable = {
+    "cardButton": false,
+    "cardmodeldata": ``
+}
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+<title>gaurav</title>
+
+</head>
+
+<body>
+    <h1>this is h1</h1>
+    <h2>this is h1</h2>
+    <h3>this is h1</h3>
+    <h4>this is h1</h4>
+    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa fuga, asperiores mollitia iste vitae repellendus adipisci atque eum corrupti ad placeat unde voluptatum quia perferendis neque expedita, sequi iure quo. Ut error adipisci ex cum sint, suscipit, voluptatem repellat nemo dolorum unde dolores quasi aut. A earum quo mollitia voluptatibus!</p>
+   
+
+</body>
+
+</html>
+
@@ -0,0 +1,13 @@
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://" [routerLink]="['/main']">Home</a></li>
+  <li><a href="javascript://">About Us</a></li>
+</ol>
+
+<div class="text-center">
+  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+  <h1 style="color: rgb(30, 122, 228)">
+    <a href="https://angular.io/" target="_blank">Angular {{ version.full }} </a>
+    and <a href="https://clarity.design" target="_blank">Clarity Design System 15.2.0</a>
+  </h1>
+  <strong>UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences</strong>
+</div>
@@ -0,0 +1,15 @@
+a:link {
+  text-decoration: none;
+}
+
+a:visited {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a:active {
+  text-decoration: none;
+}
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+  let component: AboutComponent;
+  let fixture: ComponentFixture<AboutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AboutComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,14 @@
+import { Component, OnInit, VERSION } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.scss']
+})
+export class AboutComponent implements OnInit {
+  version: any = VERSION;
+  constructor() { }
+
+  ngOnInit() {}
+
+}
@@ -0,0 +1,18 @@
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li>
+    <a href="javascript://" [routerLink]="['/main']">
+      <clr-icon shape="home"></clr-icon> {{ 'BREADCRUMB_HOME' | translate }}
+    </a>
+  </li>
+  <li>
+    <a href="javascript://">{{ 'BREADCRUMB_ABOUT_US' | translate }}</a>
+  </li>
+</ol>
+
+<div class="text-center" style="margin-top: 10px;">
+  <img width="200" alt="Image" src="../../../../../assets/images/copyfromPrj.png">
+  <h1 style="color: rgb(30, 122, 228)">
+    <b>{{ 'ABOUT_TITLE' | translate }}</b>
+  </h1>
+  <strong>{{ 'ABOUT_DESCRIPTION' | translate }}</strong>
+</div>
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+  let component: AboutComponent;
+  let fixture: ComponentFixture<AboutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AboutComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,19 @@
+import { Component, OnInit, VERSION } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.scss']
+})
+export class AboutComponent implements OnInit {
+  version: any = VERSION;
+
+  constructor(private translate: TranslateService) { }
+
+  ngOnInit() {}
+
+  switchLanguage(language: string) {
+    this.translate.use(language);
+  }
+}
@@ -0,0 +1,204 @@
+
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
+  <li><a href="javascript://"><clr-icon shape="lock"></clr-icon>{{'SECURITY' | translate}}</a></li>
+  <li><a href="javascript://">{{'accessType' | translate}}</a></li>
+</ol>
+
+
+
+  <div class="clr-row">
+    <div class="clr-col-8">
+      <h3>{{'accessType' | translate}}</h3>
+  </div>
+    <div class="clr-col-4" style="text-align: right;">
+      <button id="add"   class="btn btn-primary" (click)="goToAdd()">
+        <clr-icon shape="plus"></clr-icon>{{'ADD' | translate}}
+      </button>
+      <button id="add"   class="btn btn-primary" (click)="goTomodules()">
+        <clr-icon shape="plus"></clr-icon>{{'modules' | translate}}
+      </button>
+    </div>
+  </div>
+
+
+  <clr-datagrid [clrDgLoading]="loading"  [(clrDgSelected)]="selected">
+    <clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
+      <div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>
+
+      <clr-dg-column><ng-container *clrDgHideableColumn="{hidden: false}">{{'name' | translate}}</ng-container></clr-dg-column>
+      <clr-dg-column><ng-container *clrDgHideableColumn="{hidden: false}">{{'default' | translate}}</ng-container></clr-dg-column>
+      <clr-dg-column><ng-container *clrDgHideableColumn="{hidden: false}">{{'description' | translate}}</ng-container></clr-dg-column>
+
+
+
+    <clr-dg-row *clrDgItems="let user of data;let i = index" [clrDgItem]="user">
+      <clr-dg-cell >{{user.name}}</clr-dg-cell>
+      <clr-dg-cell><input type="checkbox"  [checked]="selected1 ===user.defaultvalue"></clr-dg-cell>
+      <clr-dg-cell >{{user.description}}</clr-dg-cell>
+
+
+      <clr-dg-action-overflow>
+        <button class="action-item" (click)="gomodules(user)">{{'addModules' | translate}} <clr-icon shape="edit" class="is-error"></clr-icon></button>
+        <button class="action-item" (click)="goToEdit(user)">{{'edit' | translate}} <clr-icon shape="edit" class="is-error"></clr-icon></button>
+        <button class="action-item" (click)="onDelete(user)">{{'delete' | translate}} <clr-icon shape="trash" class="is-error"></clr-icon></button>
+      </clr-dg-action-overflow>
+
+    </clr-dg-row>
+    <clr-dg-footer>
+      <clr-dg-pagination #pagination [clrDgPageSize]="10">
+        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{'usersPerPage' | translate}}</clr-dg-page-size>
+        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+        {{'of' | translate}} {{pagination.totalItems}} {{'users' | translate}}
+      </clr-dg-pagination>
+    </clr-dg-footer>
+  </clr-datagrid>
+
+  <clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title">{{'addAccessType' | translate}}</h3>
+    <div class="modal-body">
+          <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
+        <div class="clr-row">
+
+          <div class="clr-col-sm-12">
+            <label for="name">{{'name' | translate}}<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" formControlName="name" name="menuId">
+           <div *ngIf="submitted && entryForm.controls.name.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.name.errors.required" class="error_mess">*This field is Required</div>
+        </div>
+          </div>
+          <div class="clr-col-sm-12">
+            <label for="name">{{'default' | translate}}<span class="required-field">*</span></label>
+           <input type="checkbox" clrCheckbox name="mvisible" formControlName="defaultvalue">
+           <div *ngIf="submitted && entryForm.controls.defaultvalue.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.defaultvalue.errors.required" class="error_mess">*This field is Required</div>
+        </div>
+          </div>
+          <div class="clr-col-sm-12">
+            <label for="tags">{{'description' | translate}}</label>
+            <input type="text" class="clr-input" formControlName="description">
+            <div *ngIf="submitted && entryForm.controls.description.errors" class="error_mess">
+              <div *ngIf="submitted && entryForm.controls.description.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+            </div>
+        </div>
+        <br>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline" (click)="modalAdd = false">{{'cancel' | translate}}</button>
+          <button type="submit" class="btn btn-primary" >{{'ADD' | translate}}</button>
+          </div>
+  </form>
+    </div>
+
+  </clr-modal>
+
+  <clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+
+    <div class="modal-body" *ngIf="rowSelected.id">
+      <h1 class="delete">{{'areYouSureDelete' | translate}}</h1>
+      <h2 class="heading">{{rowSelected.id}}</h2>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modaldelete = false">{{'cancel' | translate}}</button>
+      <button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary" >{{'delete' | translate}}</button>
+      </div>
+    </div>
+  </clr-modal>
+
+
+  <clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title">{{'updateAccessType' | translate}}</h3>
+    <div class="modal-body" *ngIf="rowSelected.id">
+      <h2 class="heading">{{rowSelected.id}}</h2>
+          <form (ngSubmit)="onUpdate(rowSelected.id)">
+        <div class="clr-row">
+
+          <div class="clr-col-sm-12">
+            <label for="name">{{'name' | translate}}<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" name="menuId" [(ngModel)]="rowSelected.name">
+          </div>
+          <div class="clr-col-sm-12">
+            <label for="name">{{'default' | translate}}<span class="required-field">*</span></label>
+           <input type="checkbox" clrCheckbox name="is_default" [(ngModel)]="rowSelected.defaultvalue">
+          </div>
+          <div class="clr-col-sm-12">
+            <label for="tags">{{'description' | translate}}</label>
+            <input type="text" class="clr-input" name="description" [(ngModel)]="rowSelected.description">
+            </div>
+
+        </div>
+        <br>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline" (click)="modaledit = false">{{'cancel' | translate}}</button>
+          <button type="submit" class="btn btn-primary" >{{'update' | translate}}</button>
+          </div>
+  </form>
+    </div>
+
+  </clr-modal>
+
+
+  <clr-modal [(clrModalOpen)]="moduleAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title"> Add Module</h3>
+    <div class="modal-body" *ngIf="rowSelected.id">
+      <h2 class="heading">{{rowSelected.id}}</h2>
+          <form [formGroup]="mentryForm">
+        <div class="clr-row">
+          <div class="clr-col-sm-12">
+
+            <select name="" id="" style="width: 100%;padding: 5px 5px;border: 1px solid #ccc;border-radius: 4px;"  formControlName="modulename">
+              <option *ngFor="let sub of moduledata" [value]="sub.modules">{{sub.modules}}</option>
+            </select>          </div>
+          <div class="clr-col-sm-12" >
+
+            <button type="submit" class="btn btn-primary"style="margin-top: -5px;" (click)="addmodules(rowSelected.id)">ADD</button>
+          </div>
+
+        </div>
+        <clr-datagrid [clrDgLoading]="loading"  >
+          <clr-dg-placeholder> <ng-template #loadingSpinner><clr-spinner [clrMedium]="true">Loading ... </clr-spinner></ng-template>
+            <div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>
+
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+            No
+          </ng-container></clr-dg-column>
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+           Modules
+          </ng-container></clr-dg-column>
+          <clr-dg-row *clrDgItems="let user of moduledata1;let i = index" [clrDgItem]="user">
+            <clr-dg-cell >{{i+1}}</clr-dg-cell>
+            <clr-dg-cell>{{user.modulename}}</clr-dg-cell>
+            </clr-dg-row>
+
+          <clr-dg-footer>
+            <clr-dg-pagination #pagination [clrDgPageSize]="5">
+              <clr-dg-page-size [clrPageSizeOptions]="[5,10,20,50,100]">Users per page</clr-dg-page-size>
+              {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+              of {{pagination.totalItems}} users
+            </clr-dg-pagination>
+          </clr-dg-footer>
+        </clr-datagrid>
+        <br>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline" (click)="moduleAdd = false">{{'cancel' | translate}}</button>
+          </div>
+  </form>
+    </div>
+
+  </clr-modal>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -0,0 +1,62 @@
+input[type=text],[type=date],[type=password] {
+  width: 100%;
+  padding: 15px 20px;
+ // margin: 3px 0;
+ background-color:rgb(255, 255, 255);
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+.required-field{
+  color: red;
+font-size: 18px;
+
+}
+.green{
+  background-color: rgb(156, 231, 156);
+  color: black;
+}
+.blue{
+  background-color: #57abcf;//rgb(82, 87, 161);
+  color: black;
+}
+.td-title {
+  text-align: center;
+  width: 150px;
+color: white;
+  font-weight: bold;
+  background-color: rgba(63, 122, 231, 0.863);
+  //color: rgb(24, 13, 13);
+}
+th{
+  //background-color:rgb(170, 169, 169);
+  font-weight: bold;
+}
+.td-content{
+  text-align: left;
+}
+.delete,.heading{
+  text-align: center;
+  color: red;
+}
+.section p {
+background-color: rgb(206, 201, 201);
+  padding: 10px;
+  font-size: 18px;
+}
+
+select{
+  width: 100%;
+  padding: 5px 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+input.ng-invalid.ng-touched {
+  border-color: red;
+}
+
+.error_mess {
+  color: red;
+}
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccesstypeComponent } from './accesstype.component';
+
+describe('AccesstypeComponent', () => {
+  let component: AccesstypeComponent;
+  let fixture: ComponentFixture<AccesstypeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AccesstypeComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccesstypeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,189 @@
+import { Component, OnInit } from '@angular/core';
+import { Form, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { AccesstypeService } from 'src/app/services/admin/accesstype.service';
+
+@Component({
+  selector: 'app-accesstype',
+  templateUrl: './accesstype.component.html',
+  styleUrls: ['./accesstype.component.scss']
+})
+export class AccesstypeComponent implements OnInit {
+  loading = false;
+  selected: any[] = [];
+  rowSelected: any = {};
+  modaldelete = false;
+  modalAdd = false;
+  modaledit = false;
+  moduleAdd = false;
+  error;
+  data;
+  module;
+  moduledata;
+  submitted = false;
+  selected1 = "true";
+  public entryForm: FormGroup;
+  public mentryForm: FormGroup;
+  constructor(private _fb: FormBuilder, private toastr: ToastrService,
+    private router: Router, private accesstype: AccesstypeService,
+    private route: ActivatedRoute,
+  ) { }
+
+  ngOnInit(): void {
+    this.entryForm = this._fb.group({
+
+      name: ['', [Validators.required]],
+      defaultvalue: ['', [Validators.required]],
+      description: ['', [Validators.required]],
+
+    });
+    this.mentryForm = this._fb.group({
+      modulename: [null],
+    })
+    this.getdata();
+    this.getdata1();
+  }
+  getdata() {
+    this.accesstype.getAll().subscribe(resp => {
+      this.data = resp;
+      console.log('menus: ', this.data);
+      if (this.data.length == 0) {
+        this.error = "No data Available";
+        console.log(this.error)
+      }
+    }, (error) => {
+      console.log(error);
+      if (error) {
+        this.error = "Server Error";
+      }
+    })
+  }
+  getdata1() {
+    this.accesstype.getAll1().subscribe(resp => {
+      this.moduledata = resp;
+      console.log('menus: ', this.moduledata);
+      if (this.moduledata.length == 0) {
+        this.error = "No data Available";
+        console.log(this.error)
+      }
+    }, (error) => {
+      console.log(error);
+      if (error) {
+        this.error = "Server Error";
+      }
+    })
+  }
+  goToAdd() {
+    this.modalAdd = true;
+  }
+  onSubmit() {
+    console.log(this.entryForm.value);
+    this.submitted = true;
+    if (this.entryForm.invalid) {
+      return;
+    }
+    console.log(this.entryForm.value);
+    this.accesstype.create(this.entryForm.value).subscribe((data) => {
+      console.log(data);
+      if (data) {
+        this.toastr.success('Added successfully');
+      }
+      this.ngOnInit();
+    },
+      (error) => {
+        console.log('Error in adding data...', error);
+        if (error) {
+          this.toastr.error('Not added Data Getting Some Error');
+        }
+        this.ngOnInit();
+
+      });
+    this.modalAdd = false;
+  }
+  goToEdit(row) {
+    this.rowSelected = row;
+    console.log(row)
+    this.modaledit = true;
+    //this.router.navigate(["../edit/" + id], { relativeTo: this.route });
+  }
+  onDelete(row) {
+    this.rowSelected = row;
+    this.modaldelete = true;
+  }
+
+  delete(id) {
+    this.modaldelete = false;
+    console.log("in delete  " + id);
+    this.accesstype.delete(id).subscribe((data) => {
+      console.log(data);
+      if (data) {
+        this.toastr.success('Deleted successfully');
+      }
+      this.ngOnInit();
+    },
+      (error) => {
+        console.log('Error in adding data...', error);
+        if (error) {
+          this.toastr.error('Not Deleted Data Getting Some Error');
+        }
+        this.ngOnInit();
+      });
+
+  }
+  onUpdate(id) {
+    this.modaledit = false;
+    this.accesstype.update(id, this.rowSelected).subscribe((data) => {
+      console.log(data);
+      if (data) {
+        this.toastr.success('Updated successfully');
+      }
+      this.ngOnInit();
+    },
+      (error) => {
+        console.log('Error in adding data...', error);
+        if (error) {
+          this.toastr.error('Not updated Data Getting Some Error');
+        }
+        this.ngOnInit();
+      });
+  }
+  goTomodules() {
+    this.router.navigate(["../acmodules"], { relativeTo: this.route });
+  }
+  accessid;
+  gomodules(row) {
+    this.rowSelected = row;
+    this.moduleAdd = true;
+    this.accessid = row.id
+    this.getallidmodules(this.accessid)
+  }
+  moduledata1;
+  getallidmodules(id) {
+    this.accesstype.getById(id).subscribe((data) => {
+      console.log(data);
+      this.moduledata1 = data;
+      if (this.moduledata1.length == 0) {
+        this.error = "No data Available";
+        console.log(this.error)
+      }
+    })
+  }
+  addmodules(id) {
+    console.log(this.mentryForm.value);
+    this.accesstype.addById(id, this.mentryForm.value).subscribe((data) => {
+      console.log(data);
+      if (data) {
+        this.toastr.success("Added Successfully");
+      }
+      this.ngOnInit();
+    }, (error) => {
+      console.log('Error in adding data...', error);
+      if (error) {
+        this.toastr.error('Not Added Data Getting Some Error');
+      }
+      this.ngOnInit();
+    })
+    this.moduleAdd = false;
+  }
+}
@@ -0,0 +1,128 @@
+
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://" [routerLink]="['/']">Home</a></li>
+  <li><a href="javascript://">Document Master</a></li>
+
+</ol>
+
+
+<div class="dg-wrapper">
+  <div class="clr-row">
+
+    <div class="clr-col-12" style="text-align: right;">
+      <button class="btn btn-outline" (click)="onExport()">
+        <clr-icon shape="export"></clr-icon> xlsx
+      </button>
+      <button id="add" class="btn btn-primary" (click)="goToAdd()">
+        <clr-icon shape="plus"></clr-icon>ADD
+      </button>
+    </div>
+  </div>
+
+
+
+
+
+
+
+  <clr-datagrid [clrDgLoading]="loading">
+    <clr-dg-placeholder> data not found!</clr-dg-placeholder>
+
+    <clr-dg-column [clrDgField]="'no'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+    NO
+    </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'StructureID'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      Structure ID
+    </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'StructureName'"><ng-container *clrDgHideableColumn="{hidden: false}">
+      Structure Name
+      </ng-container></clr-dg-column >
+    <clr-dg-column [clrDgField]="'StructureSeq'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      Structure Seq
+    </ng-container></clr-dg-column>
+
+
+
+    <clr-dg-row *clrDgItems="let user of givendata;let i = index" [clrDgItem]="user">
+      <clr-dg-cell>{{i+1}}</clr-dg-cell>
+      <clr-dg-cell>{{user.StructureID}}</clr-dg-cell>
+      <clr-dg-cell >{{user.StructureName}}</clr-dg-cell>
+      <clr-dg-cell>{{user.StructureSeq}}</clr-dg-cell>
+
+
+      <clr-dg-action-overflow>
+
+        <button class="action-item" (click)="goToEdit(user)">Edit</button>
+
+      </clr-dg-action-overflow>
+
+      <clr-dg-row-detail *clrIfExpanded>
+        <table class="table">
+          <tr>
+            <td class="td-title">StructureName</td>
+            <td class="td-content">{{user.StructureName}}</td>
+          </tr>
+
+
+        </table>
+      </clr-dg-row-detail>
+    </clr-dg-row>
+
+    <clr-dg-footer>
+      <clr-dg-pagination #pagination [clrDgPageSize]="10">
+        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
+        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+        of {{pagination.totalItems}} Records
+      </clr-dg-pagination>
+    </clr-dg-footer>
+  </clr-datagrid>
+</div>
+
+<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Document Master Add Mode</h3>
+  <div class="modal-body">
+        <form>
+      <div class="clr-row">
+        <div class="clr-col-md-6 clr-col-sm-12">
+          <label for="name">Structure Name<span class="required-field">*</span></label>
+         <input type="text" class="clr-input" >
+        </div>
+      </div>
+      <br>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
+        <button type="submit" class="btn btn-primary" >ADD</button>
+        </div>
+</form>
+  </div>
+
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Document Master Edit Mode</h3>
+
+
+  <div class="modal-body" *ngIf="rowSelected.usrGrp">
+    <h2 class="heading">{{rowSelected.usrGrp}}</h2>
+        <form>
+      <div class="clr-row">
+        <div class="clr-col-md-6 clr-col-sm-12">
+          <label for="name">Structure ID<span class="required-field">*</span></label>
+         <input type="text" class="clr-input" name="stid">
+        </div>
+        <div class="clr-col-md-6 clr-col-sm-12">
+          <label for="name">Structure Name<span class="required-field">*</span></label>
+         <input type="text" class="clr-input"  name="stname">
+        </div>
+
+
+      </div>
+      <br>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
+        <button type="submit" class="btn btn-primary" >Update</button>
+        </div>
+</form>
+  </div>
+
+</clr-modal>
@@ -0,0 +1 @@
+@import '../../../../../styles1.scss';
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DocumentmasterComponent } from './documentmaster.component';
+
+describe('DocumentmasterComponent', () => {
+  let component: DocumentmasterComponent;
+  let fixture: ComponentFixture<DocumentmasterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DocumentmasterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DocumentmasterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { ExcelService } from '../../../../services/excel.service';
+import * as moment from 'moment';
+@Component({
+  selector: 'app-documentmaster',
+  templateUrl: './documentmaster.component.html',
+  styleUrls: ['./documentmaster.component.scss']
+})
+export class DocumentmasterComponent implements OnInit {
+  loading = false;
+  public entryForm: FormGroup;
+  givendata;
+  orders;
+  modalAdd= false;
+  modaledit=false;
+  rowSelected :any= {};
+  constructor(private excel: ExcelService,) { }
+
+  ngOnInit(): void {
+  }
+  onExport() {
+    this.excel.exportAsExcelFile(this.givendata, 'user_',
+      moment().format('YYYYMMDD_HHmmss'))
+  }
+  goToAdd() {
+    this.modalAdd=true;
+    //this.router.navigate(["../usermaintanceadd"],{relativeTo:this.route});
+    }
+}
@@ -0,0 +1,180 @@
+
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://" [routerLink]="['/']">Home</a></li>
+  <li><a href="javascript://">Document Reference</a></li>
+
+</ol>
+
+
+<div class="dg-wrapper">
+  <div class="clr-row">
+
+    <div class="clr-col-12" style="text-align: right;">
+      <button class="btn btn-outline" (click)="onExport()">
+        <clr-icon shape="export"></clr-icon> xlsx
+      </button>
+      <button id="add" class="btn btn-primary" (click)="goToAdd()">
+        <clr-icon shape="plus"></clr-icon>ADD
+      </button>
+    </div>
+  </div>
+
+
+
+
+
+
+
+  <clr-datagrid [clrDgLoading]="loading">
+    <clr-dg-placeholder> data not found!</clr-dg-placeholder>
+
+    <clr-dg-column [clrDgField]="'no'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+    NO
+    </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'Document Code'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      Document Code
+    </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'Pad Zero'"><ng-container *clrDgHideableColumn="{hidden: false}">
+      Pad Zero
+      </ng-container></clr-dg-column >
+    <clr-dg-column [clrDgField]="'Start With'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      Start With
+    </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'Last Number'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      Last Number
+    </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'Max Length'"><ng-container *clrDgHideableColumn="{hidden: false}">
+      Max Length
+      </ng-container></clr-dg-column >
+    <clr-dg-column [clrDgField]="'Structure ID'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      Structure ID
+    </ng-container></clr-dg-column>
+
+
+    <clr-dg-row *clrDgItems="let user of givendata;let i = index" [clrDgItem]="user">
+      <clr-dg-cell>{{i+1}}</clr-dg-cell>
+      <clr-dg-cell>{{user. DocumentCode}}</clr-dg-cell>
+      <clr-dg-cell >{{user. PadZero}}</clr-dg-cell>
+      <clr-dg-cell>{{user. StartWith}}</clr-dg-cell>
+      <clr-dg-cell>{{user. LastNumber}}</clr-dg-cell>
+      <clr-dg-cell >{{user. MaxLength}}</clr-dg-cell>
+      <clr-dg-cell>{{user. StructureID}}</clr-dg-cell>
+
+
+      <clr-dg-action-overflow>
+
+        <button class="action-item" (click)="goToEdit(user)">Edit</button>
+
+      </clr-dg-action-overflow>
+
+      <clr-dg-row-detail *clrIfExpanded>
+        <table class="table">
+          <tr>
+            <td class="td-title"> StructureID</td>
+            <td class="td-content">{{user. StructureID}}</td>
+          </tr>
+
+
+        </table>
+      </clr-dg-row-detail>
+    </clr-dg-row>
+
+    <clr-dg-footer>
+      <clr-dg-pagination #pagination [clrDgPageSize]="10">
+        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
+        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+        of {{pagination.totalItems}} Records
+      </clr-dg-pagination>
+    </clr-dg-footer>
+  </clr-datagrid>
+</div>
+
+<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Document Reference Add Mode</h3>
+  <div class="modal-body">
+        <form>
+      <div class="clr-row">
+        <div class="clr-col-md-4 clr-col-sm-12">
+          <label for="name">Document Type<span class="required-field">*</span></label>
+         <input type="text" class="clr-input" >
+        </div>
+        <div class="clr-col-md-4 clr-col-sm-12">
+          <label for="tags">Pad Zero's?</label>
+          <select  id="">
+            <option value="Y">Y</option>
+            <option  value="N">N</option>
+            </select>
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Start With</label>
+           <input type="text" class="clr-input" NAME="start_with" SIZE="20" MAXLENGTH="15" VALUE="1">
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Last No.</label>
+           <input type="text" class="clr-input" NAME="Last No." SIZE="20" MAXLENGTH="15" >
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="name">Max Length</label>
+           <input type="text" class="clr-input" NAME="Last No." SIZE="20" MAXLENGTH="15" value="5" >
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="tags">Document Structure</label>
+            <select  id="">
+              <option value="1">Running Sequence Number</option>
+              </select>
+            </div>
+      </div>
+      <br>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
+        <button type="submit" class="btn btn-primary" >ADD</button>
+        </div>
+</form>
+  </div>
+
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Document Reference Edit Mode</h3>
+  <div class="modal-body">
+    <form>
+  <div class="clr-row">
+    <div class="clr-col-md-4 clr-col-sm-12">
+      <label for="name">Document Type<span class="required-field">*</span></label>
+     <input type="text" class="clr-input" >
+    </div>
+    <div class="clr-col-md-4 clr-col-sm-12">
+      <label for="tags">Pad Zero's?</label>
+      <select  id="">
+        <option value="Y">Y</option>
+        <option  value="N">N</option>
+        </select>
+      </div>
+      <div class="clr-col-md-4 clr-col-sm-12">
+        <label for="name">Start With</label>
+       <input type="text" class="clr-input" NAME="start_with" SIZE="20" MAXLENGTH="15" VALUE="1">
+      </div>
+      <div class="clr-col-md-4 clr-col-sm-12">
+        <label for="name">Last No.</label>
+       <input type="text" class="clr-input" NAME="Last No." SIZE="20" MAXLENGTH="15" >
+      </div>
+      <div class="clr-col-md-4 clr-col-sm-12">
+        <label for="name">Max Length</label>
+       <input type="text" class="clr-input" NAME="Last No." SIZE="20" MAXLENGTH="15" value="5" >
+      </div>
+      <div class="clr-col-md-4 clr-col-sm-12">
+        <label for="tags">Document Structure</label>
+        <select  id="">
+          <option value="1">Running Sequence Number</option>
+          </select>
+        </div>
+  </div>
+  <br>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline" (click)="modaledit= false">Cancel</button>
+    <button type="submit" class="btn btn-primary" >UPDATE</button>
+    </div>
+</form>
+</div>
+
+</clr-modal>
@@ -0,0 +1 @@
+@import '../../../../../styles1.scss';
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DocumentreferenceComponent } from './documentreference.component';
+
+describe('DocumentreferenceComponent', () => {
+  let component: DocumentreferenceComponent;
+  let fixture: ComponentFixture<DocumentreferenceComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DocumentreferenceComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DocumentreferenceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { ExcelService } from '../../../../services/excel.service';
+import * as moment from 'moment';
+@Component({
+  selector: 'app-documentreference',
+  templateUrl: './documentreference.component.html',
+  styleUrls: ['./documentreference.component.scss']
+})
+export class DocumentreferenceComponent implements OnInit {
+  loading = false;
+  public entryForm: FormGroup;
+  givendata;
+  orders;
+  modalAdd= false;
+  modaledit=false;
+  rowSelected :any= {};
+  constructor(private excel: ExcelService,) { }
+
+  ngOnInit(): void {
+  }
+  onExport() {
+    this.excel.exportAsExcelFile(this.givendata, 'user_',
+      moment().format('YYYYMMDD_HHmmss'))
+  }
+  goToAdd() {
+    this.modalAdd=true;
+    //this.router.navigate(["../usermaintanceadd"],{relativeTo:this.route});
+    }
+}
@@ -0,0 +1,56 @@
+<h3 class="modal-title">Document Structure-Edit Mode</h3>
+<hr>
+<div class="dg-wrapper">
+  <div class="clr-row">
+
+    <div class="clr-col-12" style="text-align: right;">
+      For Structure ID <select  id="" style="height: 30px;">
+        <option >N/A</option>
+        <option >Running Sequence Number</option>
+
+      </select>
+      <button id="add" class="btn btn-primary" style="margin-left: 20px;">Reload </button>
+    </div>
+  </div>
+
+  <!--<div >
+    <table class="table" >
+        <thead>
+         <tr>
+         <th>No</th>
+          <th>Menu Item Name</th>
+           <th>Create <input type="checkbox"></th>
+           <th>View <input type="checkbox"></th>
+           <th>Edit <input type="checkbox"></th>
+           <th>Query <input type="checkbox" ></th>
+           <th>Delete <input type="checkbox" ></th>
+            </tr>
+          </thead>
+             <tbody >
+              <tr >
+                <td></td>
+                <td ></td>
+                <td>
+                </td>
+              </tr>
+          </tbody>
+        </table> </div>-->
+
+        <clr-datagrid [clrDgLoading]="loading">
+
+          <clr-dg-placeholder> No Result Found</clr-dg-placeholder>
+          <clr-dg-column>No</clr-dg-column>
+          <clr-dg-column>Seq</clr-dg-column>
+          <clr-dg-column>Prefix <input type="checkbox"></clr-dg-column>
+          <clr-dg-column>Type <input type="checkbox"></clr-dg-column>
+          <clr-dg-column>Delete <input type="checkbox"></clr-dg-column>
+
+          <clr-dg-row *clrDgItems="" [clrDgItem]="user" >
+            <clr-dg-cell></clr-dg-cell>
+            <clr-dg-cell></clr-dg-cell>
+            <clr-dg-cell></clr-dg-cell>
+            <clr-dg-cell></clr-dg-cell>
+          </clr-dg-row>
+
+          <clr-dg-footer> users</clr-dg-footer>
+        </clr-datagrid>
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DocumentstructureComponent } from './documentstructure.component';
+
+describe('DocumentstructureComponent', () => {
+  let component: DocumentstructureComponent;
+  let fixture: ComponentFixture<DocumentstructureComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DocumentstructureComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DocumentstructureComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-documentstructure',
+  templateUrl: './documentstructure.component.html',
+  styleUrls: ['./documentstructure.component.scss']
+})
+export class DocumentstructureComponent implements OnInit {
+  loading = false;
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
@@ -0,0 +1,65 @@
+// // @import '../../../../assets/scss/var';
+// .s-info-bar {
+//     display: flex;
+//     flex-direction: row;
+//     justify-content: space-between;
+//     button {
+//         outline: none;
+//     }
+// }
+
+// .grid-pg {
+//     width:750px;
+// }
+
+
+// #add {
+//     position: absolute;
+//     //position: fixed;
+//     transition: .5s ease;
+//     top: 16%;
+//     left: 79%; 
+// }
+
+input[type=text],[type=date], select {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+  .required-field{
+    color: red;
+  
+  }
+  .horizontal{
+    width: 50%;
+    padding: 10px;
+  }
+  
+  .td-title {
+    text-align: center;
+  color: white;
+    font-weight: bold;
+    background-color: rgba(63, 122, 231, 0.863);
+    //color: rgb(24, 13, 13);
+  }
+  th{
+    background-color:rgb(170, 169, 169);
+    font-weight: bold;
+  }
+  .td-content{
+    text-align: left;
+  }
+  .delete,.heading{
+    text-align: center;
+    color: red;
+  }
+  .section p {
+  background-color: rgb(206, 201, 201);
+    padding: 10px;
+    font-size: 18px;
+  }
+  
@@ -0,0 +1,506 @@
+import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MenuGroupService } from '../../../../../services/admin/menu-group.service';
+import { MenuRegisterService } from '../../../../../services/admin/menu-register.service';
+
+import { ToastrService } from 'ngx-toastr';
+import { university } from '../../../../../models/fnd/university';
+import { AlertService } from '../../../../../services/alert.service';
+import { UniversityService } from 'src/app/services/admin/university.service';
+import { ExcelService } from '../../../../../services/excel.service';
+import * as moment from 'moment';
+import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+    selector: 'app-all-menu-group',
+    templateUrl: './all-menu-group.component.html',
+    styleUrls: ['./all-menu-group.component.scss'],
+})
+export class AllMenuGroupComponent implements OnInit {
+
+    rowSelected: any = {};
+    modaldelete = false;
+    modalEdit = false;
+    modalAdd = false;
+    public entryForm: FormGroup;
+
+    loading = false;
+    university;
+    modalOpenedforNewLine = false;
+    newLine: university = new university();
+
+    hname = ['ashwini', 'akash', 'satyam', 'ganesh', 'krishna'];
+
+    email = ['a@gmail.com', 'b@gmail.com', 'c@gmail.com', 'd@gmail.com', 'k@gmail.com'];
+
+    subject = ['marathi', 'hindi', 'english'];
+
+    booktype = ['maths', 'language', 'science'];
+
+    bookname: string[] = ['rich dad poor dad', 'The one thing', 'The momb who head farai', 'trump', 'lucky', 'syamchi aai',
+        'aai', 'ek hota karwar', 'chawa', 'mutunjay', 'duniyadari', 'dad',
+        'story book', 'horror story', 'poem'];
+
+    writer = ['true', 'false'];
+
+
+    price = ['100', '200'];
+
+    basic: boolean = false;
+
+    id: number;
+    submitted = false;
+    currentUrl = "";
+    selected: any[] = [];
+
+    constructor(
+        private _mg: MenuGroupService,
+        private _mr: MenuRegisterService,
+        private mainService: UniversityService,
+        private alertService: AlertService,
+        private toastr: ToastrService,
+        private excel: ExcelService,
+        private _fb: FormBuilder,
+        private router: Router,
+        private route: ActivatedRoute,
+    ) {
+
+    }
+
+    ngOnInit() {
+
+        this.getData();
+
+    }
+    getData() {
+        this._mg.getAll().subscribe((data) => {
+            console.log(data);
+            this.university = data;
+            this.university = this.university.items;
+            console.log(this.university);
+
+        });
+
+        this.entryForm = this._fb.group({
+            menu_name: [null],
+            description: [null],
+            active: [null],
+            start_date_1: [null],
+            end_date_1: [null],
+            start_date: [null],
+            end_date: [null],
+
+
+            menu_group_lines: this._fb.array([this.initLinesForm()]),
+
+
+
+        });
+
+    }
+
+    initLinesForm() {
+        return this._fb.group({
+
+            menu_id: 23,
+            menu_name: [null],
+            name: [null],
+            active: [null],
+            seq: 32,
+            type: [null],
+
+        });
+    }
+
+    onEdit(row) {
+        this.rowSelected = row;
+        console.log(this.rowSelected);
+
+        this.modalEdit = true;
+    }
+
+    onDelete(row) {
+        this.rowSelected = row;
+        this.modaldelete = true;
+    }
+
+    delete(id) {
+        this.modaldelete = false;
+        console.log("in delete  " + id);
+        // this.mainService.delete(id).subscribe(
+        //     (data) => {
+        //         console.log(data);
+
+        //         this.ngOnInit();
+
+        //     },
+        // );
+
+        this._mg.deleteById(id).subscribe(
+            (data: any)=>{
+                console.log('Deletion success...');
+                this.ngOnInit();
+            }
+        );
+        if (id) {
+            this.toastr.success('Deleted successfully');
+        }
+
+    }
+
+    onUpdate(id) {
+        this.modalEdit = false;
+        //console.log("in update");
+        console.log("id  " + id);
+        console.log(this.rowSelected);
+        //console.log("out update");
+        // this.mainService.update(id, this.rowSelected).subscribe(
+        //     (data) => {
+        //         console.log(data);
+
+        //     },
+
+        // );
+        this._mg.updateGroupHeader(id, this.rowSelected).subscribe(
+            (data: any)=>{
+                console.log(data);
+                console.log('Update Success...');
+                this.modalEdit = false;
+                this.ngOnInit();
+
+            },
+            (error: any)=>{
+                console.log(error);
+
+            }
+        );
+        if (id) {
+            this.toastr.success('Updated successfully');
+        }
+
+    }
+    onExport() {
+        this.excel.exportAsExcelFile(this.university, 'user_',
+            moment().format('YYYYMMDD_HHmmss'))
+    }
+    goToAdd(row) {
+
+        this.modalAdd = true;
+
+    }
+    onSubmit() {
+
+
+
+        //console.warn("calling submit");
+
+        //console.log(this.entryForm.value);
+        this.submitted = true;
+        if (this.entryForm.invalid) {
+            return;
+        }
+        this.onCreate();
+    }
+
+
+
+    onCreate() {
+        this.modalAdd = false;
+
+        this._mg.addToDb(this.entryForm.value).subscribe(
+            (data: any)=>{
+                console.log(data);
+                this.ngOnInit();
+            },
+            (error: any)=>{
+                console.log(error);
+
+            }
+        );
+        if (this.entryForm.value) {
+            this.toastr.success('Added successfully');
+
+        }
+    }
+
+    get controls() {
+        return (this.entryForm.get("menu_group_lines") as FormArray).controls;
+    }
+
+    onRemoveLines(index: number) {
+        (<FormArray>this.entryForm.get("menu_group_lines")).removeAt(index);
+    }
+    onAddLines() {
+        (<FormArray>this.entryForm.get("menu_group_lines")).push(this.initLinesForm());
+    }
+    update() {
+        this.mainService.update(this.id, this.university).subscribe(
+            (data) => {
+                console.log(data);
+
+            },
+            (error: HttpErrorResponse) => {
+                console.log(error.message);
+            }
+        );
+    }
+
+}
+
+
+
+
+
+
+// import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+// import { MenuGroupService } from 'src/app/services/api/menu-group.service';
+// import { MenuRegisterService } from 'src/app/services/api/menu-register.service';
+
+
+// @Component({
+//     selector: 'app-all-menu-group',
+//     templateUrl: './all-menu-group.component.html',
+//     styleUrls: ['./all-menu-group.component.scss'],
+//     encapsulation: ViewEncapsulation.Emulated
+// })
+// export class AllMenuGroupComponent implements OnInit {
+//     @ViewChild('getById') selectById: TemplateRef<any>;
+//     @ViewChild('txId') txId: TemplateRef<any>;
+//     basic: boolean = false;
+//     columns: any[];
+//     rows: any[];
+//     temp = [];
+
+//     filterData: string;
+//     isLoading: boolean = false;
+
+//     modalEdit: false;
+//     loading = false;
+//     openEdit = false;
+//     openAdd = false;
+//     openAddLine = false;
+//     openEditHeader = false;
+
+//     mgdata: any;
+//     linesData: Array<any>;
+//     lines = [];
+
+//     updata = {
+//         id: '',
+//         active: '',
+//         createdAt: '',
+//         createdBy: '',
+//         description: '',
+//         end_date: '',
+//         end_date_1: '',
+//         menu_name: '',
+//         start_date: '',
+//         start_date_1: '',
+//         updatedAt: '',
+//         updatedBy: '',
+//         menu_group_lines: [
+//             {
+//                 id: '',
+//                 active: '',
+//                 createdAt: '',
+//                 createdBy: '',
+//                 menu_id: '',
+//                 manu_name: '',
+//                 name: '',
+//                 seq: '',
+//                 type: '',
+//                 updatedAt: '',
+//                 updatedBy: ''
+//             },
+//         ],
+//     }
+
+//     updateHeader = {
+//         id: '',
+//         active: '',
+//         createdAt: '',
+//         createdBy: '',
+//         description: '',
+//         end_date: '',
+//         end_date_1: '',
+//         menu_name: '',
+//         start_date: '',
+//         start_date_1: '',
+//         updatedAt: '',
+//         updatedBy: '',
+//     }
+
+//     menu_group_line =
+//             {
+//                 id: '',
+//                 menu_id: '',
+//                 menu_name: '',
+//                 name: '',
+//                 active: '',
+//                 seq: '',
+//                 type: '',
+//                 menu_group_header: {
+//                     id: ''
+//                 }
+//             }
+
+//     headerAdd = {
+//         menu_name: '',
+//         description: '',
+//         active: false,
+//         start_date_1: '',
+//         end_date_1: ''
+//     }
+
+//     lineAdd = {
+//         name: '',
+//         menu_name: '',
+//         active: false,
+//         type: '',
+//         menu_group_header: {
+//             id: ''
+//         }
+//     }
+
+//     constructor(
+//         private _mg: MenuGroupService,
+//         private _mr: MenuRegisterService
+//     ) {
+//         this.linesData = new Array<any>();
+//      }
+
+//     ngOnInit() {
+
+//         this._mg.getAll().subscribe(
+//             (data: any) => {
+//                 this.mgdata = data;
+//                 console.log(this.mgdata);
+
+//             }
+//         );
+
+//     }
+
+//     addData() {
+//         console.log(this.headerAdd);
+//         this._mg.addToDb(this.headerAdd).subscribe(
+//             (data: any) => {
+//                 console.log('Data addedd successfully...');
+//                 this.openAdd = false;
+//                 this.ngOnInit();
+//             },
+//             (error: any) => {
+//                 console.log(error);
+
+//             }
+
+//         );
+//     }
+
+//     openAddLinef(id: any) {
+//         this.openAddLine = true;
+//         console.log(id);
+//         this.lineAdd.menu_group_header.id = id;
+
+
+//     }
+//     saveD() {
+//         console.log(this.lineAdd);
+//         this._mg.addLineToDb(this.lineAdd).subscribe(
+//             (data: any) => {
+//                 console.log('data added success...');
+//                 this.openAddLine = false;
+//                 this.ngOnInit();
+//             },
+//             (error: any) => {
+//                 console.log(error);
+
+//             }
+//         );
+//     }
+
+//     openEditGroup(id: any) {
+//         this.openEdit = true;
+//         console.log(id);
+//         this._mg.getOneById(id).subscribe(
+//             (data: any) => {
+//                 this.updata = data;
+//                 this.lines = this.updata.menu_group_lines;
+//                 for(let val of this.updata.menu_group_lines){
+//                     this.linesData.push(val);
+//                 }
+//                 console.log('New Data of Lines : ');
+//                 console.log(this.lines);
+//             },
+//             (error: any) => {
+//                 console.log(error);
+
+//             }
+//         );
+
+//     }
+
+//     perfUpdate(){
+//         console.log(this.updata);
+//         this.updateHeader.id = this.updata.id;
+//         this.updateHeader.active = this.updata.active;
+//         this.updateHeader.createdAt = this.updata.createdAt;
+//         this.updateHeader.createdBy = this.updata.createdBy;
+//         this.updateHeader.description = this.updata.description;
+//         this.updateHeader.end_date = this.updata.end_date;
+//         this.updateHeader.end_date_1 = this.updata.end_date_1;
+//         this.updateHeader.menu_name = this.updata.menu_name;
+//         this.updateHeader.start_date = this.updata.start_date;
+//         this.updateHeader.start_date_1 = this.updata.start_date_1;
+//         this.updateHeader.updatedAt = this.updata.updatedAt;
+//         this.updateHeader.updatedBy = this.updata.updatedBy;
+
+//         this._mg.updateGroupHeader(this.updateHeader.id, this.updateHeader).subscribe(
+//             (datah: any)=>{
+//                 console.log('Data(header) updated successsfully...');
+//                 console.log(datah);
+
+//                 for(let val of this.lines){
+//                     this.menu_group_line.id = val.id;
+//                     this.menu_group_line.menu_id = val.menu_id;
+//                     this.menu_group_line.menu_name = val.menu_name;
+//                     this.menu_group_line.name = val.name;
+//                     this.menu_group_line.seq = val.seq;
+//                     this.menu_group_line.type = val.type;
+//                     // this.menu_group_line.menu_group_header.id = datah.id;
+//                     this.menu_group_line.menu_group_header.id = this.updateHeader.id;
+
+//                     this._mg.updateLineById(this.menu_group_line).subscribe(
+//                         (data: any)=>{
+//                             console.log('Data(Line) Updated Successfully...');
+//                             console.log(data);
+//                             this.linesData = [];
+//                             this.openEdit = false;
+//                             this.ngOnInit();
+//                             console.log(this.linesData);
+
+//                         },
+//                         (error: any)=>{
+//                             console.log(error);
+
+//                         }
+//                     );
+//                 }
+//             },
+//             (error: any)=>{
+//                 console.log(error);
+
+//             }
+//         );
+//     }
+
+//     closeM(){
+//         this.openEdit = false;
+//         this.linesData = [];
+//     }
+
+
+
+// }
+
@@ -0,0 +1,99 @@
+<!-- <div class="container">
+    <h3 class="center"><b>Menu Group Edit Form</b></h3>
+    <br />
+
+    <div class="section">
+        <p> Menu Group Header </p>
+    </div>
+    <form (ngSubmit)="onSubmit()">
+        <div class="clr-row">
+            <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="menu_name">Menu Name</label>
+                <input id="menu_name" type="text" name="menu_name" placeholder="Enter Menu Name"
+                    [(ngModel)]="rn_menu_group_header.menu_name" class="clr-input">
+            </div>
+
+
+            <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="description">Menu Description</label>
+                <input id="description" type="text" name="description" [(ngModel)]="rn_menu_group_header.description"
+                    placeholder="Enter Menu Description" class="clr-input">
+            </div>
+            <div class="clr-col-md-4 clr-col-sm-12">
+                <div class="toggle-switch">
+                    <input type="checkbox" id="active" name="active" [(ngModel)]="rn_menu_group_header.active" />
+                    <label for="active">Status</label>
+                </div>
+            </div>
+            <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="start_date">Start Date</label>
+                <input id="start_date" type="text" name="start_date" [(ngModel)]="rn_menu_group_header.start_date"
+                    clrDate class="clr-input">
+            </div>
+            <div class="clr-col-md-4 clr-col-sm-12">
+                <label for="end_date">End Date</label>
+                <input id="end_date" type="date" name="end_date" [(ngModel)]="rn_menu_group_header.end_date" clrDate
+                    class="clr-input">
+            </div>
+        </div>
+        <br>
+        <div class="section">
+            <p>Menu Group Lines Details</p>
+        </div>
+        <div class="clr-row">
+            <div class="clr-col-lg-12">
+                <table id="lines" class="table" style="width:100%;">
+                    <thead>
+                        <tr>
+                            <th class="left" style="width:125px;">Name</th>
+                            <th class="left" style="width:125px;">Type</th>
+                            <th class="left" style="width:125px;">Menu Name</th>
+                            <th class="left" style="width:125px;">Active</th>
+                            <th class="left" style="width:125px;">Start Date</th>
+                            <th class="left" style="width:125px;">End Date</th>
+                            <th class="left" style="width:125px;">Order</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let line of rn_menu_group_line">
+                            <td class="left">
+                                <input type="text" [name]="line.name" [(ngModel)]="line.name"
+                                    [ngModelOptions]="{standalone: true}" placeholder="Enter Name" class="clr-input">
+                            </td>
+                            <td class="left">
+                                <select [name]="line.type" [(ngModel)]="line.type" [ngModelOptions]="{standalone: true}"
+                                    class="clr-dropdown">
+                                    <option value="null">Choose Type</option>
+                                    <option *ngFor="let type of types" [ngValue]="type">{{ type }}</option>
+                                </select>
+                            </td>
+                            <td class="left">
+                                <select [name]="line.menu_id" [(ngModel)]="line.menu_id"
+                                    [ngModelOptions]="{standalone: true}" class="clr-dropdown">
+                                    <option value="null">Choose Menu</option>
+                                    <option *ngFor="let menu of menuDropDown" [ngValue]="menu.id">{{ menu.name }}
+                                    </option>
+                                </select>
+                            </td>
+                            <td class="left">
+                                <div class="toggle-switch">
+                                    <input type="checkbox" [attr.id]="line.active" [name]="line.active"
+                                        [(ngModel)]="line.active" [ngModelOptions]="{standalone: true}" />
+                                    <label [attr.for]="line.active"></label>
+                                </div>
+                                
+                            </td>
+                            
+
+                            <td class="left">
+                                <input type="date" [attr.name]="line.seq" [(ngModel)]="line.seq"
+                                    [ngModelOptions]="{standalone: true}" class="clr-input" />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <button type="submit" form-control class="btn btn-primary">UPDATE</button>
+    </form>
+</div> -->
@@ -0,0 +1,97 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { HttpClient, HttpErrorResponse } from "@angular/common/http";
+// import { Rn_Menu_Group_Line } from "src/app/models/Rn_Menu_Group_Line";
+// import { Rn_Menu_Group_Header } from "src/app/models/Rn_Menu_Group_Header";
+// import { MenuGroupService } from "src/app/services/api/menu-group.service";
+// import { MenuRegisterService } from "src/app/services/api/menu-register.service";
+
+@Component({
+  selector: "edit-menu-group",
+  templateUrl: "./edit-menu-group.component.html",
+  styleUrls: ["./edit-menu-group.scss"],
+})
+export class EditMenuGroupComponent implements OnInit {
+  updated = false;
+  // rn_menu_group_header: Rn_Menu_Group_Header;
+  // rn_menu_group_line: Rn_Menu_Group_Line[];
+  id: number;
+
+  types = ['user', 'admin', 'mis report', 'bi report'];
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    // private menuRegisterService: MenuRegisterService,
+    // private menuGroupService: MenuGroupService
+  ) {}
+
+  ngOnInit() {
+    //this.getMapings();
+
+    // this.rn_menu_group_header = new Rn_Menu_Group_Header();
+    // this.id = this.route.snapshot.params["id"];
+    // console.log("update with id = ", this.id);
+    // this.getById(this.id);
+  }
+
+//   getById(id: number) {
+//     this.menuGroupService.getById(id).subscribe((data) => {
+//       this.rn_menu_group_header = data;
+//       this.rn_menu_group_line = data.menu_group_lines;
+//     });
+//   }
+
+//   update() {
+//     this.menuGroupService.update(this.id, this.rn_menu_group_header).subscribe(
+//       (resp) => {
+//         console.log(resp);
+//         this.router.navigate(["../../all"], { relativeTo: this.route });
+//       },
+//       (error: HttpErrorResponse) => {
+//         console.log(error.message);
+//       }
+//     );
+//     this.rn_menu_group_header = new Rn_Menu_Group_Header();
+//   }
+
+//   onSubmit() {
+//     this.updated = true;
+//     this.update();
+//   }
+  
+// /*   getMapings() {
+//     this.httpService
+//       .get<Mapping[]>('./assets/json/form-setup-mapping.json')
+//       .subscribe(data => {
+//         console.log(data);
+//         this.mappings = data;
+//         }, err => console.log(err)
+//       )
+//   } */
+
+//   menuDate: any[];
+//   menuDropDown: any[];
+//   getMenuData() {
+//     //this.menuRegisterService.getAll().subscribe((data) => {
+//     this.menuRegisterService.getByAccountId().subscribe((data) => {
+//       this.menuDate = data;
+//       console.log('Menu List by Account Id : ', this.menuDate);
+//       const keys = this.menuDate.map((item) => {
+//         const container = {id: '', name: ''};
+//         container.id = item.id;
+//         container.name = item.main_menu_name;
+//           return container;
+//         });
+//         console.log('Menu dropdown: ', keys);
+//         this.menuDropDown = keys;
+//       }, (err) => {
+//         console.log(err)
+//       }
+//     );
+//   }
+
+//   back() {
+//     this.router.navigate(["../../all"], { relativeTo: this.route });
+//   }
+}
@@ -0,0 +1,51 @@
+// @import '../../../../assets/scss/var';
+
+.s-info-bar{
+    display:flex;
+    flex-direction: row;
+    justify-content:space-between;
+    button{outline:none;}
+}
+
+.edit-pg {
+    width:750px;
+}
+
+#lines {
+    table, th, td {
+    border: 0.5px solid  #f1f0f0;
+    border-collapse: collapse;
+  }
+  input, input :focus {
+    //-webkit-appearance: none;
+    outline: none;
+    border-width:0px;
+    border:none;
+  }
+}
+
+.clr-input {
+  color: #212529;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  padding: 0.75rem 0.75rem;
+  margin-top: 3px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.center {
+  text-align: center;
+}
+
+$bg-color: #dddddd;
+.section {
+  background-color: $bg-color;
+  height: 40px;
+}
+
+.section p {
+  //color: white;
+  padding: 10px;
+  font-size: 18px;
+}
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
@@ -0,0 +1,16 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-menu-group',
+  templateUrl: './menu-group.component.html',
+  styleUrls: ['./menu-group.component.scss'],
+  // encapsulation: ViewEncapsulation.Emulated
+})
+export class MenuGroupComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
@@ -0,0 +1,94 @@
+<!-- <div class="read-only-pg pad-16">
+    <h3>READ ONLY FORM <a (click)="goToWhoColumns()">
+        <clr-icon shape="help"  class="is-solid" size="32"></clr-icon>
+    </a></h3>
+    
+
+    <clr-modal [(clrModalOpen)]="basic">
+        <h3 class="modal-title"><b>Transaction History</b></h3>
+        <div class="modal-body">
+            <table s-header>
+                <tr>
+                    <td><b>Account Id: </b></td>
+                    <td> {{ rn_menu_group_header.accountId }} </td>
+                </tr>
+                <tr>
+                    <td><b>Created By: </b></td>
+                    <td> {{ rn_menu_group_header.createdBy }} </td>
+                </tr>
+                <tr>
+                    <td><b>Created At: </b></td>
+                    <td> {{ rn_menu_group_header.createdAt | date:'medium' }} </td>
+                </tr>
+                <tr>
+                    <td><b>Updated At: </b></td>
+                    <td> {{ rn_menu_group_header.updatedAt | date:'medium' }} </td>
+                </tr>
+                <tr>
+                    <td><b>Updated By: </b></td>
+                    <td> {{ rn_menu_group_header.updatedBy }} </td>
+                </tr>
+            </table>
+            
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-outline" (click)="basic = false">Cancel</button>
+            <button type="button" class="btn btn-primary" (click)="basic = false">Ok</button>
+        </div>
+    </clr-modal>
+    <br/>
+    <table class="s-header">
+        <tr>
+            <td>Form Name </td>
+            <td> {{ rn_menu_group_header.menu_name }} </td>
+        </tr>
+        <tr>
+            <td>Form Description </td>
+            <td> {{ rn_menu_group_header.description }} </td>
+        </tr>
+        <tr>
+            <td>Related To </td>
+            <td> {{ rn_menu_group_header.active }} </td>
+        </tr>
+        <tr>
+            <td>Page Event </td>
+            <td> {{ rn_menu_group_header.start_date }} </td>
+        </tr>
+        <tr>
+            <td>Button Caption </td>
+            <td> {{ rn_menu_group_header.end_date }} </td>
+        </tr>
+    </table>
+    <div class="row">
+        <div class="col-lg-12">
+            <table class="s-order-line table" style="width:100%;">
+                <thead>
+                    <tr>
+                        <th class="left" style="width:200px;">Line Name</th>
+                        <th class="left" style="width:200px;">Line Active</th>
+                        
+                        <th class="left" style="width:200px;">Menu Id</th>
+                        <th class="left" style="width:200px;">Order</th>
+                        <th class="left" style="width:200px;">Type</th>
+                        
+                    </tr>
+                </thead>
+                <tbody *ngIf="rn_menu_group_header.menu_group_lines">
+                    <tr *ngFor="let rn_menu_group_line of rn_menu_group_header.menu_group_lines">
+                        <td class="left">{{ rn_menu_group_line.name }}</td>
+                        <td class="left">{{ rn_menu_group_line.active }}</td>
+                        
+                        <td class="left">{{ rn_menu_group_line.menu_id }}</td>
+                        <td class="left">{{ rn_menu_group_line.seq }}</td>
+                        <td class="left">{{ rn_menu_group_line.type }}</td>
+
+                        
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <button (click)="back()" class="btn btn-primary">
+            <clr-icon shape="caret left"></clr-icon>Back
+        </button>
+    </div>
+</div> -->
@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+// import { Rn_Forms_Setup } from 'src/app/models/Rn_Forms_Setup';
+// import { FormSetupService } from 'src/app/services/api/form-setup.service';
+// import { Rn_Menu_Group_Header } from 'src/app/models/Rn_Menu_Group_Header';
+// import { MenuGroupService } from 'src/app/services/api/menu-group.service';
+
+@Component({
+	selector: 'readonly-menu-group',
+	templateUrl: './readonly-menu-group.component.html',
+    styleUrls: [ './readonly-menu-group.scss'],
+})
+export class ReadOnlyMenuGroupComponent implements OnInit {
+    basic: boolean = false;
+    id: number;
+    // rn_menu_group_header: Rn_Menu_Group_Header;
+    constructor(
+        private router: Router,
+        private route: ActivatedRoute,
+        //  private menuGroupService: MenuGroupService
+    ) { }
+
+    ngOnInit() {
+        // this.getById();
+    }
+
+    // getById() {
+    //     this.rn_menu_group_header = new Rn_Menu_Group_Header();
+    //     this.id = this.route.snapshot.params['id'];
+    //     this.menuGroupService.getById(this.id)
+    //         .subscribe(data => {
+    //             console.log(data);
+    //             this.rn_menu_group_header = data;
+    //         });
+    // }
+
+    // goToWhoColumns() {
+    //     this.basic = !this.basic;
+    // }
+
+    // back() {
+    //     this.router.navigate(['../../all'], {relativeTo: this.route});
+    // }
+}
@@ -0,0 +1,23 @@
+// @import '../../../../assets/scss/var';
+.s-info-bar {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    button {
+        outline: none;
+    }
+}
+
+.read-only-pg {
+    width:750px;
+}
+
+
+
+#build_btn {
+    position: absolute;
+    transition: .5s ease;
+    top: 404px;
+    left: 644px;
+}
+
@@ -0,0 +1 @@
+<p>add-menur works!</p>
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddMenurComponent } from './add-menur.component';
+
+describe('AddMenurComponent', () => {
+  let component: AddMenurComponent;
+  let fixture: ComponentFixture<AddMenurComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddMenurComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddMenurComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-add-menur',
+  templateUrl: './add-menur.component.html',
+  styleUrls: ['./add-menur.component.scss']
+})
+export class AddMenurComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
@@ -0,0 +1,203 @@
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://" [routerLink]="['/']">Home</a></li>
+  <li><a href="javascript://">Menu Groups</a></li>
+</ol>
+
+<div class="dg-wrapper">
+  <div class="clr-row">
+      <div class="clr-col-8">
+          <h3 style="text-transform: uppercase;">menu register </h3>
+      </div>
+      <div class="clr-col-4" style="text-align: right;">
+          <button class="btn btn-outline">
+              <clr-icon shape="export"></clr-icon> xlsx
+          </button>
+          <button id="add" class="btn btn-primary" (click)="openAdd=true">
+              <clr-icon shape="plus"></clr-icon>ADD
+          </button>
+      </div>
+  </div>
+  <clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected">
+      <clr-dg-placeholder>user not found!</clr-dg-placeholder>
+      <clr-dg-column [clrDgField]="'id'">
+          <ng-container *clrDgHideableColumn="{hidden: false}">
+              Sr. No
+          </ng-container>
+      </clr-dg-column>
+      <clr-dg-column [clrDgField]="'main_menu_name'">
+          <ng-container *clrDgHideableColumn="{hidden: false}">
+              Menu Name
+          </ng-container>
+      </clr-dg-column>
+      <clr-dg-column [clrDgField]="'main_menu_action_name'">
+          <ng-container *clrDgHideableColumn="{hidden: false}">
+              Action Link
+          </ng-container>
+      </clr-dg-column>
+      <clr-dg-column [clrDgField]="'main_menu_icon'">
+          <ng-container *clrDgHideableColumn="{hidden: false}">
+              Menu Icon
+          </ng-container>
+      </clr-dg-column>
+      <clr-dg-column [clrDgField]="'enable_flag'">
+          <ng-container *clrDgHideableColumn="{hidden: false}">
+              Flag
+          </ng-container>
+      </clr-dg-column>
+      <clr-dg-column [clrDgField]="'end_date_1'">
+          <ng-container *clrDgHideableColumn="{hidden: false}">
+              End Date
+          </ng-container>
+      </clr-dg-column>
+
+      <clr-dg-row *clrDgItems="let user of regData; let i=index;" [clrDgItem]="user">
+          <clr-dg-cell>{{i + 1}}</clr-dg-cell>
+          <clr-dg-cell>{{user.main_menu_name}}</clr-dg-cell>
+          <clr-dg-cell>{{user.main_menu_action_name}}</clr-dg-cell>
+          <clr-dg-cell>{{user.main_menu_icon}}</clr-dg-cell>
+          <clr-dg-cell>{{user.enable_flag}}</clr-dg-cell>
+          <clr-dg-cell>{{user.end_date_1}}</clr-dg-cell>
+          <clr-dg-action-overflow>
+              <button class="action-item" (click)="editReg(user.id)">Edit</button>
+              <button class="action-item" (click)="delete(user.id)">Delete</button>
+          </clr-dg-action-overflow>˝
+          <!-- <clr-dg-row-detail *clrIfExpanded>
+              <table class="table">
+                  <tr>
+                      <td class="td-title">picture</td>
+                      <td class="td-content"><img class="img-class" src="../../../../assets/images/default.jpg"></td>
+                  </tr>
+                  <tr>
+                      <td class="td-title">id</td>
+                      <td class="td-content">{{user.user_id}}</td>
+                  </tr>
+                  <tr>
+                      <td class="td-title">location</td>
+                      <td class="td-content">{{user.address1}}, {{user.country}} -
+                          {{user.postal}} </td>
+                  </tr>
+                  <tr>
+                      <td class="td-title">register</td>
+                      <td class="td-content">{{user.created_at}}</td>
+                  </tr>
+                  <tr>
+                      <td class="td-title">tel</td>
+                      <td class="td-content">phone: {{user.phone}}</td>
+                  </tr>
+              </table>
+          </clr-dg-row-detail> -->
+      </clr-dg-row>
+
+      <clr-dg-footer>
+          <clr-dg-pagination #pagination [clrDgPageSize]="10">
+              <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
+              {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+              of {{pagination.totalItems}} users
+          </clr-dg-pagination>
+      </clr-dg-footer>
+  </clr-datagrid>
+</div>
+
+<clr-modal [(clrModalOpen)]="openAdd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Add Menu Register</h3>
+  <div class="modal-body">
+      <h2></h2>
+      <form clrForm>
+          <div class="clr-row">
+              <div class="clr-col-12">
+                  <!-- {{addReg | json}} -->
+                  <clr-input-container>
+                      <label>Menu Name</label>
+                      <input [(ngModel)]="addReg.main_menu_name" style="width: 100%;" clrInput type="text" name="main_menu_name" />
+                  </clr-input-container>
+                  <clr-input-container>
+                      <label>Action Link</label>
+                      <input [(ngModel)]="addReg.main_menu_action_name" style="width: 100%;" clrInput type="text" name="main_menu_action_name" />
+                  </clr-input-container>
+                  <clr-input-container>
+                      <label>Menu Icon</label>
+                      <input [(ngModel)]="addReg.main_menu_icon" style="width: 100%;" clrInput type="text" name="main_menu_icon" />
+                  </clr-input-container>
+                  <clr-toggle-container>
+                      <label>Flag</label>
+                      <clr-toggle-wrapper>
+                        <input [(ngModel)]="addReg.enable_flag" type="checkbox" clrToggle name="enable_flag" required value="option1" />
+                        <label>Current Status</label>
+                      </clr-toggle-wrapper>
+                      <!-- <clr-control-helper>Click on it to make change.</clr-control-helper> -->
+                    </clr-toggle-container>
+
+
+                  <clr-input-container>
+                      <label>End Date</label>
+                      <input [(ngModel)]="addReg.end_date_1" style="width: 100%;" clrInput type="date" name="end_date_1" />
+                  </clr-input-container>
+              </div>
+          </div>
+      </form>
+
+  </div>
+  <div class="modal-footer">
+      <button type="button" class="btn btn-outline" (click)="openAdd = false">Cancel</button>
+      <button type="button" class="btn btn-primary" (click)="saveData()">Save</button>
+  </div>
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="openEdit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Edit Menu Register</h3>
+  <div class="modal-body">
+      <h2></h2>
+      <form clrForm>
+          <div class="clr-row">
+              <div class="clr-col-12">
+                  <clr-input-container>
+                      <label>ID</label>
+                      <input [(ngModel)]="upReg.id" style="width: 100%;" clrInput type="text" name="id" readonly/>
+                  </clr-input-container>
+                  <clr-input-container>
+                      <label>Menu Name</label>
+                      <input [(ngModel)]="upReg.main_menu_name" style="width: 100%;" clrInput type="text" name="email" />
+                  </clr-input-container>
+                  <clr-input-container>
+                      <label>Action Link</label>
+                      <input [(ngModel)]="upReg.main_menu_action_name" style="width: 100%;" clrInput type="text" name="main_menu_action_name" />
+                  </clr-input-container>
+                  <clr-input-container>
+                      <label>Menu Icon</label>
+                      <input [(ngModel)]="upReg.main_menu_icon" style="width: 100%;" clrInput type="text" name="main_menu_icon" />
+                  </clr-input-container>
+                  <clr-toggle-container>
+                      <label>Flag</label>
+                      <clr-toggle-wrapper>
+                        <input [(ngModel)]="upReg.enable_flag" type="checkbox" clrToggle name="enable_flag" required/>
+                        <label>Current Status: {{ upReg.enable_flag }}</label>
+                      </clr-toggle-wrapper>
+                    </clr-toggle-container>
+
+
+                  <clr-input-container>
+                      <label>End Date</label>
+                      <input [(ngModel)]="upReg.end_date_1" style="width: 100%;" clrInput type="date" name="end_date_1" />
+                  </clr-input-container>
+              </div>
+          </div>
+      </form>
+
+  </div>
+  <div class="modal-footer">
+      <button type="button" class="btn btn-outline" (click)="openEdit = false">Cancel</button>
+      <button type="button" class="btn btn-primary" (click)="performup()">Update</button>
+  </div>
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+
+  <div class="modal-body">
+      <h1 class="delete">Are You Sure Want to delete?</h1>
+      <h2 class="heading">{{tempid}}</h2>
+      <div class="modal-footer">
+          <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
+          <button type="button" (click)="del()" class="btn btn-primary">Delete</button>
+      </div>
+  </div>
+</clr-modal>
@@ -0,0 +1,14 @@
+input[type=text],[type=date], select {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+
+  .delete,.heading{
+    text-align: center;
+    color: red;
+  }
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AllMenurComponent } from './all-menur.component';
+
+describe('AllMenurComponent', () => {
+  let component: AllMenurComponent;
+  let fixture: ComponentFixture<AllMenurComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AllMenurComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AllMenurComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,187 @@
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { MenuGroupService } from '../../../../../services/admin/menu-group.service';
+import { MenuRegisterService } from '../../../../../services/admin/menu-register.service';
+
+@Component({
+  selector: 'app-all-menur',
+  templateUrl: './all-menur.component.html',
+  styleUrls: ['./all-menur.component.scss']
+})
+export class AllMenurComponent implements OnInit {
+
+  basic: boolean = false;
+  columns: any[];
+  rows: any[];
+  temp = [];
+  selected: any[] = [];
+  filterData: string;
+  isLoading: boolean = false;
+
+  modalEdit: false;
+  loading = false;
+
+  openEdit = false;
+  openAdd = false;
+
+  modaldelete = false;
+  tempid: any;
+
+  regData: any;
+
+  addReg = {
+    main_menu_name: '',
+    main_menu_action_name: '',
+    main_menu_icon: '',
+    enable_flag: false,
+    end_date_1: ''
+  }
+
+  upReg = {
+    id: '',
+    main_menu_name: '',
+    main_menu_action_name: '',
+    main_menu_icon: '',
+    enable_flag: '',
+    end_date_1: ''
+  }
+
+  line = {
+    id: '',
+    menu_id: '',
+    menu_name: '',
+    name: '',
+    active: true,
+    seq: '',
+    type: '',
+    menu_group_header: {
+      id: 5,
+    }
+  };
+
+  lenReg: any;
+
+  constructor(
+    private _mr: MenuRegisterService,
+    private _mg: MenuGroupService,
+    private toastr: ToastrService,
+  ) { }
+
+  ngOnInit(): void {
+
+    this._mr.getd().subscribe(
+      (data: any) => {
+        this.regData = data.items;
+        this.lenReg = this.regData.length;
+        console.log(this.regData);
+        console.log(this.lenReg);
+
+
+      }
+    );
+
+
+  }
+
+  saveData() {
+    console.log(this.addReg);
+
+    this._mr.add(this.addReg).subscribe(
+      (data: any) => {
+        console.log('Data Success...');
+
+        this.line.menu_id = data.id;
+        this.line.active = true;
+        this.line.type = 'admin';
+        // this.line.menu_group_header.id = '5';
+
+        this._mr.getd().subscribe(
+          (data: any)=>{
+            this.lenReg = data.length;
+          }
+        );
+
+        this.line.seq = this.lenReg + 1;
+
+        this._mg.addLineToDb(this.line).subscribe(
+          (data: any)=>{
+            console.log('both success..');
+
+          },
+          (error: any)=>{
+            console.log(error);
+
+          }
+        );
+
+        this.openAdd = false;
+        this.addReg = {
+          main_menu_name: '',
+          main_menu_action_name: '',
+          main_menu_icon: '',
+          enable_flag: false,
+          end_date_1: ''
+        };
+        this.ngOnInit();
+        this.toastr.success('Added successfully');
+      },
+      (error: any) => {
+        console.log(error);
+
+      }
+    );
+  }
+
+  editReg(id: any) {
+    this.openEdit = true;
+    console.log(id);
+    this._mr.getById(id).subscribe(
+      (data: any) => {
+        this.upReg = data;
+        console.log(this.upReg);
+      },
+      (error: any) => {
+        console.log(error);
+      }
+    );
+  }
+
+  performup() {
+    this._mr.update(this.upReg.id, this.upReg).subscribe(
+      (data: any) => {
+        console.log('updation success...');
+        this.toastr.success('Updated successfully');
+        this.openEdit = false;
+        this.ngOnInit();
+
+      },
+      (error: any) => {
+        console.log(error);
+
+      }
+    );
+  }
+
+  delete(id: any) {
+    this.tempid = id;
+    this.modaldelete = true;
+
+  }
+
+  del() {
+    console.log('Id of row u clicked is : ' + this.tempid);
+    this._mr.deleteById(this.tempid).subscribe(
+      (data: any) => {
+        console.log('Deletion successful..');
+        this.ngOnInit();
+        this.modaldelete = false;
+        this.toastr.success('Deleted successfully');
+      },
+      (error: any) => {
+        console.log(error);
+
+      }
+    );
+  }
+
+}
@@ -0,0 +1 @@
+<p>edit-menur works!</p>
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditMenurComponent } from './edit-menur.component';
+
+describe('EditMenurComponent', () => {
+  let component: EditMenurComponent;
+  let fixture: ComponentFixture<EditMenurComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EditMenurComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditMenurComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-edit-menur',
+  templateUrl: './edit-menur.component.html',
+  styleUrls: ['./edit-menur.component.scss']
+})
+export class EditMenurComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuRegisterComponent } from './menu-register.component';
+
+describe('MenuRegisterComponent', () => {
+  let component: MenuRegisterComponent;
+  let fixture: ComponentFixture<MenuRegisterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MenuRegisterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MenuRegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-menu-register',
+  templateUrl: './menu-register.component.html',
+  styleUrls: ['./menu-register.component.scss']
+})
+export class MenuRegisterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
@@ -0,0 +1 @@
+<p>readonly-menur works!</p>
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReadonlyMenurComponent } from './readonly-menur.component';
+
+describe('ReadonlyMenurComponent', () => {
+  let component: ReadonlyMenurComponent;
+  let fixture: ComponentFixture<ReadonlyMenurComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ReadonlyMenurComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReadonlyMenurComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-readonly-menur',
+  templateUrl: './readonly-menur.component.html',
+  styleUrls: ['./readonly-menur.component.scss']
+})
+export class ReadonlyMenurComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
@@ -0,0 +1,279 @@
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
+  <li><a href="javascript://"><clr-icon shape="lock"></clr-icon>{{'SECURITY' | translate}}</a></li>
+  <li><a href="javascript://">{{ 'MENU_ACCESS_CONTROL' | translate }}</a></li>
+</ol>
+
+<div class="clr-row">
+  <div class="clr-col-6" style="display:flex ;">
+    <div style="margin-right: 25px;">
+      <h4 style="font-weight:300;">{{ 'MENU_ACCESS_CONTROL' | translate }} </h4>
+    </div>
+    <div style="margin-top:27px ; position: relative;">
+      <span class="label label-light-blue" style="display: inline;">{{ 'EDIT_MODE' | translate }}</span>
+    </div>
+  </div>
+  <div class="clr-col-6" style="text-align: right;">
+    {{ 'FOR' | translate }} <select id="" style="height: 30px;" (change)="idofselected($event.target.value)">
+      <option *ngFor="let sub of givendata" [value]="sub.usrGrp" [selected]="sub.usrGrp== 40">{{sub.groupName}}</option>
+    </select>
+    <button id="add" class="btn btn-primary" style="margin-left: 20px;" (click)="getbyuseriddata()"> {{ 'RELOAD' |
+      translate }} </button>
+    <span *ngIf="!toggle">{{ 'SHOW_ALL' | translate }} </span><span *ngIf="toggle">{{ 'ONLY_MAIN_MENU' | translate
+      }}</span>
+    <label class="switch">
+      <input type="checkbox" ([ngModel])="toggle" checked (click)="toggleCheckbox()">
+      <span class="slider round"></span>
+    </label>
+  </div>
+</div>
+<hr>
+
+<div class="dg-wrapper">
+  <div class="clr-row">
+
+    <div class="clr-col-12" style="text-align: right;">
+
+      <button id="add" class="btn btn-primary" style="margin-left: 20px;" (click)="modaladd()" [disabled]="!toggle">
+        <clr-icon shape="plus"></clr-icon>{{ 'ADD' | translate }} </button>
+      <div *ngIf="!toggle" class="error-message" style="color: red; font-size: 14px; margin-top: 5px;">
+        {{ ' Close toggle to activate Add button. ' | translate }}
+      </div>
+    </div>
+  </div>
+
+
+  <clr-datagrid [clrDgLoading]="loading" *ngIf="!toggle">
+    <clr-dg-placeholder>
+      <ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
+      <div *ngIf="alldata?.length === 0;else loadingSpinner">{{ 'NO_DATA_AVAILABLE' | translate }}</div>
+    </clr-dg-placeholder>
+
+    <clr-dg-column [clrDgField]="'no'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        {{ 'NO' | translate }}
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'menuname'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        {{ 'MENU_ITEM_NAME' | translate }}
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mvisible'"><ng-container *clrDgHideableColumn="{hidden: false}">
+        {{ 'VIEW' | translate }}
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mcreate'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        {{ 'CREATE' | translate }}
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'medit'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        {{ 'EDIT' | translate }}
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mdelete'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        {{ 'DELETE' | translate }}
+        <!-- <input type="checkbox" clrCheckbox name="mdelete" [checked]="colvalue" (change)="changedelete($event.target.checked)"> -->
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mquery'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        {{ 'QUERY' | translate }}
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mexport'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        {{ 'EXPORT' | translate }}
+      </ng-container></clr-dg-column>
+
+    <clr-dg-row *ngFor="let all of alldata;let i=index">
+      <clr-dg-cell>{{i+1}}</clr-dg-cell>
+      <clr-dg-cell *ngIf="all.menuId==0"><b>{{all.menuItemDesc}}</b></clr-dg-cell>
+      <clr-dg-cell *ngIf="all.menuId!==0">&nbsp;&nbsp;&nbsp;{{all.menuItemDesc}}</clr-dg-cell>
+      <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mvisible"></clr-dg-cell>
+      <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mcreate"></clr-dg-cell>
+      <clr-dg-cell> <input type="checkbox" [checked]="selected ===all.medit"></clr-dg-cell>
+      <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mdelete"></clr-dg-cell>
+      <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mquery"></clr-dg-cell>
+      <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mexport"></clr-dg-cell>
+
+      <clr-dg-action-overflow>
+        <button class="action-item" (click)="modalEdit(all)">{{ 'EDIT' | translate }} <clr-icon shape="edit"
+            class="is-error"></clr-icon></button>
+        <button class="action-item" *ngIf="all.menuId!==0" (click)="modalDelete(all)">{{ 'DELETE' | translate }}
+          <clr-icon shape="trash" class="is-error"></clr-icon></button>
+        <button class="action-item" *ngIf="all.menuId==0" (click)="modaldeletemainmenu(all)">{{ 'DELETE_MENU_SUBMENU' |
+          translate }}
+          <clr-icon shape="edit" class="is-error"></clr-icon></button>
+
+      </clr-dg-action-overflow>
+
+      <clr-dg-row-detail *clrIfExpanded>
+        <table class="table">
+          <tr>
+            <td class="td-title">Menuname</td>
+            <td class="td-content"></td>
+          </tr>
+
+
+        </table>
+      </clr-dg-row-detail>
+    </clr-dg-row>
+
+    <clr-dg-footer>
+      <clr-dg-pagination #pagination [clrDgPageSize]="10">
+        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
+        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+        of {{pagination.totalItems}} Records
+      </clr-dg-pagination>
+    </clr-dg-footer>
+  </clr-datagrid>
+
+  <clr-datagrid [clrDgLoading]="loading" *ngIf="toggle">
+    <clr-dg-placeholder>
+      <ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
+      <div *ngIf="alldata?.length === 0;else loadingSpinner">No data available</div>
+    </clr-dg-placeholder>
+
+    <clr-dg-column [clrDgField]="'no'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        NO
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'menuname'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        Menu Item Name
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mvisible'"><ng-container *clrDgHideableColumn="{hidden: false}">
+        View
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mcreate'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        Create
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'medit'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        Edit
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mdelete'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        Delete
+        <!-- <input type="checkbox" clrCheckbox name="mdelete" [checked]="colvalue" (change)="changedelete($event.target.checked)"> -->
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mquery'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        Query
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'mexport'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+        Export
+      </ng-container></clr-dg-column>
+    <ng-container *ngFor="let all of alldata;let i=index">
+      <clr-dg-row *ngIf="all.menuId==0">
+        <clr-dg-cell>{{i+1}}</clr-dg-cell>
+        <clr-dg-cell><b>{{all.menuItemDesc}}</b></clr-dg-cell>
+        <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mvisible"></clr-dg-cell>
+        <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mcreate"></clr-dg-cell>
+        <clr-dg-cell> <input type="checkbox" [checked]="selected ===all.medit"></clr-dg-cell>
+        <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mdelete"></clr-dg-cell>
+        <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mquery"></clr-dg-cell>
+        <clr-dg-cell><input type="checkbox" [checked]="selected ===all.mexport"></clr-dg-cell>
+        <clr-dg-action-overflow>
+          <button class="action-item" (click)="Sync(all.menuItemId?.menuItemId,all)">Sync <clr-icon shape="shrink"
+              class="is-error"></clr-icon> </button>
+        </clr-dg-action-overflow>
+        <clr-dg-row-detail *clrIfExpanded>
+          <table class="table">
+            <tr>
+              <td class="td-title">Menuname</td>
+              <td class="td-content"></td>
+            </tr>
+          </table>
+        </clr-dg-row-detail>
+      </clr-dg-row>
+    </ng-container>
+    <clr-dg-footer>
+      <clr-dg-pagination #pagination [clrDgPageSize]="10">
+        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
+        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+        of {{pagination.totalItems}} Records
+      </clr-dg-pagination>
+    </clr-dg-footer>
+  </clr-datagrid>
+
+  <clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title">Add Menu Access Control</h3>
+    <div class="modal-body">
+      <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
+        <div class="clr-row">
+          <div class="clr-col-sm-12">
+            <label for="name">Menu Name<span class="required-field">*</span></label>
+            <select name="" id="" style="width: 100%;padding: 5px 5px;border: 1px solid #ccc;border-radius: 4px;"
+              (change)="idselected($event.target.value)">
+              <option *ngFor="let sub of menus" [value]="sub.menuItemId">{{sub.menuItemDesc}}</option>
+            </select>
+          </div>
+        </div>
+        <br>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
+          <button type="submit" class="btn btn-primary">ADD</button>
+        </div>
+      </form>
+    </div>
+
+  </clr-modal>
+
+  <clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title">Update Menu Access Control</h3>
+    <div class="modal-body" *ngIf="rowSelected.menuItemId">
+      <h2 class="heading">{{rowSelected.menuItemId.menuItemId}}</h2>
+      <form (ngSubmit)="onUpdate(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)">
+        <div class="clr-row">
+          <div class="clr-col-md-3 clr-col-sm-12">
+            <label for="tags">View</label>
+            <input type="checkbox" clrCheckbox name="mvisible" [(ngModel)]="selected ===rowSelected.mvisible"
+              (change)="rowSelected.mvisible === $event.target.checked ? 'y' : 'n'">
+          </div>
+          <div class="clr-col-md-3 clr-col-sm-12">
+            <label for="name">Create</label>
+            <input type="checkbox" clrCheckbox name="mcreate" name="mcreate"
+              [(ngModel)]="selected ===rowSelected.mcreate"
+              (change)="rowSelected.mcreate === $event.target.checked ? 'y' : 'n'">
+          </div>
+          <div class="clr-col-md-3 clr-col-sm-12">
+            <label for="tags">Edit</label>
+            <input type="checkbox" clrCheckbox name="medit" [(ngModel)]="selected ===rowSelected.medit"
+              (change)="rowSelected.medit === $event.target.checked ? 'y' : 'n'">
+          </div>
+          <div class="clr-col-md-3 clr-col-sm-12">
+            <label for="tags">Delete</label>
+            <input type="checkbox" clrCheckbox name="mdelete" [(ngModel)]="selected ===rowSelected.mdelete"
+              (change)="rowSelected.mdelete === $event.target.checked ? 'y' : 'n'">
+          </div>
+          <div class="clr-col-md-3 clr-col-sm-12">
+            <label for="tags">Query</label>
+            <input type="checkbox" clrCheckbox name="mquery" [(ngModel)]="selected ===rowSelected.mquery"
+              (change)="rowSelected.mquery === $event.target.checked ? 'y' : 'n'">
+          </div>
+          <div class="clr-col-md-3 clr-col-sm-12">
+            <label for="tags">Export</label>
+            <input type="checkbox" clrCheckbox name="mexport" [(ngModel)]="selected ===rowSelected.mexport"
+              (change)="rowSelected.mexport === $event.target.checked ? 'y' : 'n'">
+          </div>
+
+        </div>
+        <br>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
+          <button type="submit" class="btn btn-primary">UPDATE</button>
+        </div>
+      </form>
+    </div>
+  </clr-modal>
+
+  <clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+
+    <div class="modal-body" *ngIf="rowSelected.menuItemId">
+      <h1 class="delete">Are You Sure Want to delete?</h1>
+      <h2 class="heading">{{rowSelected.menuItemId.menuItemId}}</h2>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
+        <button type="submit" (click)="delete(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)"
+          class="btn btn-primary">Delete</button>
+      </div>
+    </div>
+  </clr-modal>
+  <clr-modal [(clrModalOpen)]="modaldelete1" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+
+    <div class="modal-body" *ngIf="rowSelected.menuItemId">
+      <h1 class="delete">Are You Sure Want to delete Main menu with submenu?</h1>
+      <h2 class="heading">{{rowSelected.menuItemId.menuItemId}}</h2>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modaldelete1 = false">Cancel</button>
+        <button type="submit" (click)="delete1(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)"
+          class="btn btn-primary">Delete</button>
+      </div>
+    </div>
+  </clr-modal>
@@ -0,0 +1,99 @@
+input[type=text],[type=date],[type=password],[type=checkbox] {
+  width: 100%;
+  padding: 15px 20px;
+ // margin: 3px 0;
+ background-color:rgb(255, 255, 255);
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+.required-field{
+  color: red;
+font-size: 18px;
+
+}
+// select{
+//   width: 100%;
+//   padding: 5px 5px;
+//   border: 1px solid #ccc;
+//   border-radius: 4px;
+// }
+.td-title {
+  text-align: center;
+  width: 150px;
+color: white;
+  font-weight: bold;
+  background-color: rgba(63, 122, 231, 0.863);
+  //color: rgb(24, 13, 13);
+}
+th{
+  //background-color:rgb(170, 169, 169);
+  font-weight: bold;
+}
+.td-content{
+  text-align: left;
+}
+.delete,.heading{
+  text-align: center;
+  color: red;
+}
+//toggle button
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #0072a3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #0072a3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+      .slider.round {
+        border-radius: 34px;
+      }
+
+      .slider.round:before {
+        border-radius: 50%;
+      }
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuaccesscontrolComponent } from './menuaccesscontrol.component';
+
+describe('MenuaccesscontrolComponent', () => {
+  let component: MenuaccesscontrolComponent;
+  let fixture: ComponentFixture<MenuaccesscontrolComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MenuaccesscontrolComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MenuaccesscontrolComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,246 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { MenuGroupService } from 'src/app/services/admin/menu-group.service';
+import { MenumaintanceService } from 'src/app/services/admin/menumaintance.service';
+import { UsergrpmaintainceService } from 'src/app/services/admin/usergrpmaintaince.service';
+import { UsermaintanceService } from '../../../../services/admin/usermaintance.service';
+@Component({
+  selector: 'app-menuaccesscontrol',
+  templateUrl: './menuaccesscontrol.component.html',
+  styleUrls: ['./menuaccesscontrol.component.scss']
+})
+export class MenuaccesscontrolComponent implements OnInit {
+  loading = false;
+  givendata;
+  alldata;
+  colvalue = "true";
+  usergrpid = 1;
+  secmenuaccessdata;
+  modalAdd = false;
+  modaledit = false;
+  modaldelete = false;
+  modaldelete1 = false;
+  rowSelected: any = {};
+  public entryForm: FormGroup;
+  selected = "true";
+  menudata;
+  menus;
+  menuselectid = 1;
+  msg;
+  error;
+  mcreate;
+  medit;
+  mdelete;
+  toggle: boolean = false;
+  maindata;
+  showdata;
+  constructor(private mainservice: UsermaintanceService,
+    private _fb: FormBuilder,
+    private toastr: ToastrService,
+    private route: ActivatedRoute,
+    private usergrpservice: UsergrpmaintainceService,
+    private menuGroupService: MenuGroupService,
+    private menuservice: MenumaintanceService,) { }
+
+  ngOnInit(): void {
+    this.showdata = this.menuGroupService.getdata();
+    console.log(this.showdata);
+    this.mcreate = this.showdata.mcreate;
+    console.log(this.mcreate);
+    this.mdelete = this.showdata.mdelete
+    console.log(this.mdelete);
+    this.medit = this.showdata.medit
+    console.log(this.medit);
+    this.dropddowngetdata();
+    // this.getall();
+    this.getbyuseriddata();
+
+    this.entryForm = this._fb.group({
+      grpid: this.usergrpid,
+      gmenuid: this.menuselectid,
+    });
+
+  }
+  dropddowngetdata() {
+    this.usergrpservice.getAll().subscribe((data) => {
+      console.log(data);
+      this.givendata = data;
+    });
+  }
+  getdata() {
+    this.menuservice.getByCurrentUserMenuGroupId1().subscribe(resp => {
+      this.menus = resp;
+      console.log('menus: ', this.menus);
+    })
+  }
+  getall() {
+    this.usergrpservice.getall().subscribe((data) => {
+      this.secmenuaccessdata = data
+      console.log(data);
+    })
+  }
+  idofselected(val) {
+    console.log(val);
+    this.usergrpid = val;
+
+  }
+  idselected(val) {
+    console.log(val)
+    this.menuselectid = val;
+  }
+  getbyuseriddata() {
+    this.usergrpservice.getbyusergrpid(this.usergrpid).subscribe((data) => {
+      this.alldata = data;
+      console.log(this.alldata);
+      if (this.alldata.array?.length === 0) {
+        this.msg = 'No Data Availabel'
+      }
+      for (this.alldata; this.alldata >= 100; this.alldata++) {
+        this.maindata = this.alldata.menuId === 0
+        console.log(this.maindata)
+      }
+
+      // console.log(this.menudata)
+    },
+      (error) => {
+        console.log('Error in adding data...', error);
+        if (error) {
+          this.error = "No data Available"
+        }
+      });
+  }
+  modaladd() {
+    this.modalAdd = true;
+    this.getdata();
+  }
+  onSubmit() {
+    this.modalAdd = false;
+    this.entryForm.value.grpid = this.usergrpid;
+    this.entryForm.value.gmenuid = this.menuselectid;
+    console.log(this.entryForm.value);
+    this.menuservice.create2(this.entryForm.value).subscribe((data) => {
+      console.log(data);
+      if (data) {
+        this.toastr.success('Added successfully');
+      }
+      this.ngOnInit();
+
+    },
+      (error) => {
+        console.log('Error in adding data...', error);
+        if (error.status == 400) {
+          this.toastr.error(error.error);
+
+        } else if (error) {
+          this.toastr.error('Not added Data Getting Some Error');
+        }
+        this.ngOnInit();
+      });
+
+  }
+  modalEdit(row) {
+    this.rowSelected = row;
+    console.log(this.rowSelected);
+    this.modaledit = true;
+  }
+  modalDelete(row) {
+    this.rowSelected = row;
+    console.log(this.rowSelected)
+    this.modaldelete = true;
+  }
+  delete(id, usrgrp) {
+    this.modaldelete = false;
+    this.usergrpservice.delete(id, usrgrp).subscribe((data) => {
+      console.log(data);
+      if (data) {
+        this.toastr.success('Deleted successfully');
+      }
+      this.ngOnInit();
+    }, (error) => {
+      console.log('Error in adding data...', error);
+      if (error) {
+        this.toastr.error('Not Deleted Data Getting Some Error');
+      }
+      this.ngOnInit();
+    });
+  }
+  modaldeletemainmenu(row) {
+    this.rowSelected = row;
+    console.log(this.rowSelected)
+    this.modaldelete1 = true;
+  }
+  delete1(id, usrgrp) {
+    this.modaldelete1 = false;
+    this.usergrpservice.deletemain(id, usrgrp).subscribe((data) => {
+      console.log(data);
+      if (data) {
+        this.toastr.success('Deleted successfully');
+      }
+      this.ngOnInit();
+    }, (error) => {
+      console.log('Error in adding data...', error);
+      if (error) {
+        this.toastr.error('Not Deleted Data Getting Some Error');
+      }
+      this.ngOnInit();
+    });
+  }
+  onUpdate(id: any, usrgrp: any) {
+    this.modaledit = false;
+    console.log(id, usrgrp);
+    this.menuservice.update2(id, usrgrp, this.rowSelected).subscribe((data) => {
+      console.log(data);
+      if (data) {
+        this.toastr.success('Updated successfully');
+      }
+      this.ngOnInit();
+    }, (error) => {
+      console.log('Error in adding data...', error);
+      if (error) {
+        this.toastr.error('Not Updated Data Getting Some Error');
+      }
+      this.ngOnInit();
+    });
+  }
+  onChecked(value) {
+    if (value == "y") {
+      this.selected = "y"
+      console.log(this.selected);  // make a call for checked
+    }
+    else {
+      this.selected = "n"// make a call for unchecked
+    }
+  }
+  changedelete(val) {
+    console.log(val);
+    val = this.colvalue = val;
+    console.log(val);
+  }
+  data: {};
+  Sync(id: any, row) {
+    this.rowSelected = row;
+    console.log(id);
+    if (this.rowSelected.subMenus != 0) {
+      this.rowSelected.subMenus = []
+    } console.log(this.rowSelected);
+    this.menuservice.sink(id, this.rowSelected).subscribe((data) => {
+      console.log(data);
+      if (data) {
+        this.toastr.success('SYNC successfully');
+      }
+      this.ngOnInit();
+    }, (error) => {
+      console.log(error);
+      if (error) {
+        this.toastr.error('Not SYNC Data Getting Some Error');
+      }
+      this.ngOnInit();
+    })
+  }
+  toggleCheckbox() {
+    this.toggle = !this.toggle;
+    //this.dataService.setDivToggler(this.toggler);
+  }
+}
@@ -0,0 +1,441 @@
+
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
+  <li><a href="javascript://"><clr-icon shape="lock"></clr-icon>{{ 'SECURITY' | translate }}</a></li>
+  <li><a href="javascript://">{{ 'MENU_MAINTENANCE' | translate }}</a></li>
+</ol>
+
+
+  <!-- <div class="clr-row">
+    <div class="clr-col-12" style="text-align: right;">
+      <button id="add" *ngIf="mcreate == 'true'"  class="btn btn-primary" (click)="goToAdd()">
+        <clr-icon shape="plus"></clr-icon>ADD New
+      </button>
+    </div>
+  </div> -->
+  <div class="clr-row" style="margin-top: 15px;">
+    <div class="clr-col">
+      <h3 style="font-weight: 300;display: inline;">{{ 'MENU_MAINTENANCE' | translate }} </h3>
+    <span class="label label-light-blue" style="display: inline;margin-left: 30px;">{{ 'MAIN_MENU' | translate }}</span><br>
+
+    </div>
+
+    <div class="clr-col" style="text-align: right;">
+      <div class="btn-group">
+        <button class="btn text-dark" (click)="downloadFiles()"><b>{{ 'DOWNLOAD_TEMPLATE' | translate }}</b></button>
+
+    </div>
+    
+    <button class="btn btn-primary" (click)="csvImport()">{{ 'IMPORT' | translate }}</button>
+
+    <button class="btn btn-outline" (click)="onExport()">
+      <clr-icon shape="export"></clr-icon> {{ 'EXPORT_XLSX' | translate }}
+    </button>
+        <button id="add"  class="btn btn-primary"  (click)="goToAdd()">
+            <clr-icon shape="plus"></clr-icon> {{ 'ADD' | translate }}
+        </button>
+    </div>
+</div>
+  <!-- <table class="table">
+    <thead>
+      <tr>
+        <th>NO.</th>
+        <th>Menu Item Name</th>
+        <th>ID</th>
+        <th >Sequence</th>
+        <th>Module Name</th>
+        <th>Orignal Menu</th>
+        <th>Status</th>
+        <th>Submenu</th>
+      </tr>
+    </thead>
+    <tbody>
+      <TR align=middle bgColor=#ffffff vAlign=top>
+        <TD class="x1l x4x" align=right>1. </TD>
+        <TD class="x1l x4x" nowrap>
+          <A href="viewmode">
+     Home</A>
+       </TD>
+        <TD class="x1l x4x" align=left>500</TD>
+        <TD class="x1l x4x">0</TD>
+        <TD class="x1l x4x" align=left>main</TD>
+        <TD class="x1l x4x">Home Menu</TD>
+        <TD class="x1l x4x">E</TD>
+        <TD class="x1l x4x" nowrap>
+        <A href="MenuList.jsp?menu_item_id=500">
+          <clr-icon shape="bullet-list"></clr-icon></A>
+       </TD></TR>
+       <TR align=middle bgColor=#ffffff vAlign=top>
+        <TD class="x1l x4x" align=right>2. </TD>
+        <TD class="x1l x4x" nowrap>
+          <A href="MenuEdit.jsp?action=V&menu_item_id=2000&caller_menu_item_id=0">
+     Admin</A>
+       </TD>
+        <TD class="x1l x4x" align=left>2000</TD>
+        <TD class="x1l x4x">1</TD>
+     <TD class="x1l x4x" align=left>-</TD>
+        <TD class="x1l x4x">Home Menu</TD>
+        <TD class="x1l x4x">E</TD>
+        <TD class="x1l x4x" nowrap>
+        <A href="MenuList.jsp?menu_item_id=2000">
+          <clr-icon shape="bullet-list"></clr-icon></A>
+       </TD></TR>
+       <TR align=middle bgColor=#ffffff vAlign=top>
+        <TD class="x1l x4x" align=right>3. </TD>
+        <TD class="x1l x4x" nowrap>
+          <A href="MenuEdit.jsp?action=V&menu_item_id=2500&caller_menu_item_id=0">
+     Job</A>
+       </TD>
+        <TD class="x1l x4x" align=left>2500</TD>
+        <TD class="x1l x4x">2</TD>
+     <TD class="x1l x4x" align=left>-</TD>
+        <TD class="x1l x4x">Home Menu</TD>
+        <TD class="x1l x4x">E</TD>
+        <TD class="x1l x4x" nowrap>
+        <A href="MenuList.jsp?menu_item_id=2500">
+          <clr-icon shape="bullet-list"></clr-icon></A>
+       </TD></TR>
+       <TR align=middle bgColor=#ffffff vAlign=top>
+        <TD class="x1l x4x" align=right>4. </TD>
+        <TD class="x1l x4x" nowrap>
+          <A href="MenuEdit.jsp?action=V&menu_item_id=3000&caller_menu_item_id=0">
+     Security</A>
+       </TD>
+        <TD class="x1l x4x" align=left>3000</TD>
+        <TD class="x1l x4x">3</TD>
+     <TD class="x1l x4x" align=left>-</TD>
+        <TD class="x1l x4x">Home Menu</TD>
+        <TD class="x1l x4x">E</TD>
+        <TD class="x1l x4x" nowrap>
+        <A href="MenuList.jsp?menu_item_id=3000">
+          <clr-icon shape="bullet-list"></clr-icon></A>
+       </TD></TR>
+       <TR align=middle bgColor=#ffffff vAlign=top>
+        <TD class="x1l x4x" align=right>5. </TD>
+        <TD class="x1l x4x" nowrap>
+          <A href="MenuEdit.jsp?action=V&menu_item_id=5000&caller_menu_item_id=0">
+     Sure Board</A>
+       </TD>
+        <TD class="x1l x4x" align=left>5000</TD>
+        <TD class="x1l x4x">4</TD>
+     <TD class="x1l x4x" align=left>-</TD>
+        <TD class="x1l x4x">Home Menu</TD>
+        <TD class="x1l x4x">E</TD>
+        <TD class="x1l x4x" nowrap>
+        <A href="MenuList.jsp?menu_item_id=5000">
+          <clr-icon shape="bullet-list"></clr-icon></A>
+       </TD></TR>
+       <TR align=middle bgColor=#ffffff vAlign=top>
+        <TD class="x1l x4x" align=right>6. </TD>
+        <TD class="x1l x4x" nowrap>
+          <A href="MenuEdit.jsp?action=V&menu_item_id=6000&caller_menu_item_id=0">
+     Projects</A>
+       </TD>
+        <TD class="x1l x4x" align=left>6000</TD>
+        <TD class="x1l x4x">5</TD>
+     <TD class="x1l x4x" align=left>-</TD>
+        <TD class="x1l x4x">Home Menu</TD>
+        <TD class="x1l x4x">E</TD>
+        <TD class="x1l x4x" nowrap>
+        <A href="MenuList.jsp?menu_item_id=6000">
+          <clr-icon shape="bullet-list"></clr-icon></A>
+       </TD></TR>
+
+
+    </tbody>
+  </table> -->
+  <clr-datagrid [clrDgLoading]="loading"  [(clrDgSelected)]="selected">
+    <clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>{{'LOADING'|translate}} ... </clr-spinner></ng-template>
+      <div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>
+      <clr-dg-column [clrDgField]="''" style="max-width: 40px;">
+        <ng-container *clrDgHideableColumn="{hidden: false}"></ng-container>
+      </clr-dg-column>
+      
+      <clr-dg-column>
+        <ng-container *clrDgHideableColumn="{hidden: false}">
+          {{'NO' | translate}}
+        </ng-container>
+      </clr-dg-column>
+      
+      <clr-dg-column>
+        <ng-container *clrDgHideableColumn="{hidden: false}">
+          {{'MENU_ITEM_NAME' | translate}}
+        </ng-container>
+      </clr-dg-column>
+      
+      <clr-dg-column>
+        <ng-container *clrDgHideableColumn="{hidden: false}">
+          {{'ID' | translate}}
+        </ng-container>
+      </clr-dg-column>
+      
+      <clr-dg-column>
+        <ng-container *clrDgHideableColumn="{hidden: false}">
+          {{'SEQUENCE' | translate}}
+        </ng-container>
+      </clr-dg-column>
+      
+      <clr-dg-column>
+        <ng-container *clrDgHideableColumn="{hidden: false}">
+          {{'MODULE_NAME' | translate}}
+        </ng-container>
+      </clr-dg-column>
+      
+      <clr-dg-column>
+        <ng-container *clrDgHideableColumn="{hidden: false}">
+          {{'MENU_ACTION_LINK' | translate}}
+        </ng-container>
+      </clr-dg-column>
+      
+      <clr-dg-column>
+        <ng-container *clrDgHideableColumn="{hidden: false}">
+          {{'STATUS' | translate}}
+        </ng-container>
+      </clr-dg-column>
+      
+      <clr-dg-column>
+        <ng-container *clrDgHideableColumn="{hidden: false}">
+          {{'SUB_MENU' | translate}}
+        </ng-container>
+      </clr-dg-column>
+      
+      <clr-dg-column>
+        <ng-container *clrDgHideableColumn="{hidden: false}">
+          <clr-icon shape="bars"></clr-icon>
+          {{'ACTION' | translate}}
+        </ng-container>
+      </clr-dg-column>
+      
+
+    <clr-dg-row *clrDgItems="let user of menus;let i = index" [clrDgItem]="user">
+      <clr-dg-cell style="max-width: 40px;">
+        <span style="cursor: pointer;"><clr-icon shape="edit" (click)="goToEdit(user)" class="red is-error" style="color:red;"></clr-icon></span>
+      </clr-dg-cell>
+      <clr-dg-cell >{{i+1}}</clr-dg-cell>
+      <clr-dg-cell>{{user.menuItemDesc}}</clr-dg-cell>
+      <clr-dg-cell >{{user.menuId}}</clr-dg-cell>
+      <clr-dg-cell >{{user.itemSeq}}</clr-dg-cell>
+      <clr-dg-cell > {{user.moduleName}} </clr-dg-cell>
+      <clr-dg-cell > {{user.main_menu_action_name}}</clr-dg-cell>
+      <clr-dg-cell >{{user.status}} </clr-dg-cell>
+      <clr-dg-cell ><clr-icon shape="bullet-list" (click)="submenu(user.menuItemId)" style="color: rgb(108, 108, 194);"></clr-icon> </clr-dg-cell>
+      <clr-dg-cell>
+        <span style="cursor: pointer;padding: 10px; "><clr-icon shape="trash"  (click)="onDelete(user)" class="red is-error" style="color: red;"></clr-icon></span>
+        <clr-signpost>
+          <span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span>
+          <clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
+            <h5 style="margin-top: 0">{{'WHO_COLUMN'|translate}} </h5>
+                  <div>{{'ACCOUNT_ID'|translate}} <code class="clr-code">{{user.accountId}}</code></div>
+                  <div>{{'CREATED_AT'|translate}}  <code class="clr-code">{{user.createdAt| date}}</code></div>
+                  <div>{{'CREATED_BY'|translate}}  <code class="clr-code">{{user.createdBy}}</code></div>
+                  <div>{{'UPDATED_AT'|translate}} <code class="clr-code">{{user.updatedAt | date}}</code></div>
+                  <div>{{'UPDATED_BY'|translate}} <code class="clr-code">{{user.updatedBy}}</code></div>
+          </clr-signpost-content>
+        </clr-signpost>
+      </clr-dg-cell>
+      <!-- <clr-dg-action-overflow>
+        <button class="action-item" *ngIf="medit == 'true'"  (click)="goToEdit(user)">Edit <clr-icon shape="edit" class="is-error"></clr-icon></button>
+        <button class="action-item" *ngIf="mdelete == 'true'"  (click)="onDelete(user)">Delete<clr-icon shape="trash" class="is-error"></clr-icon></button>
+      </clr-dg-action-overflow> -->
+
+                <clr-dg-row-detail *clrIfExpanded >
+                  <table class="table">
+                    <tr>
+                      <td class="td-title">Menu Name: </td>
+                      <td class="td-content">{{user.menuItemDesc}}</td>
+                    </tr>
+                  </table>
+                </clr-dg-row-detail>
+    </clr-dg-row>
+
+    <clr-dg-footer>
+      <clr-dg-pagination #pagination [clrDgPageSize]="10">
+        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
+        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+        of {{pagination.totalItems}} users
+      </clr-dg-pagination>
+    </clr-dg-footer>
+  </clr-datagrid>
+
+  <clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title">Add Menu Maintenance</h3>
+    <div class="modal-body">
+          <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
+        <div class="clr-row">
+           <!-- <div class="clr-col-sm-12">
+            <label for="name">Menu Item ID<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" formControlName="menuItemId">
+          </div> -->
+          <div class="clr-col-sm-12">
+            <label for="name">Menu ID<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" formControlName="menuId" name="menuId" [(ngModel)]="mainid" readonly>
+          </div>
+          <div class="clr-col-sm-12">
+            <label for="name">Menu Item Name<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" formControlName="menuItemDesc">
+           <div *ngIf="submitted && entryForm.controls.menuItemDesc.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.menuItemDesc.errors.required" class="error_mess">*This field is Required</div>
+        </div>
+          </div>
+          <div class="clr-col-sm-12">
+            <label for="tags">Sequence</label>
+            <input type="text" class="clr-input" formControlName="itemSeq">
+            <div *ngIf="submitted && entryForm.controls.itemSeq.errors" class="error_mess">
+              <div *ngIf="submitted && entryForm.controls.itemSeq.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+          <div *ngIf="submitted && entryForm.controls.itemSeq.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.itemSeq.errors.pattern" class="error_mess">*Required Only Number</div>
+        </div>
+            </div>
+            <div class="clr-col-sm-12">
+              <label for="tags">Module Name</label>
+              <input type="text" class="clr-input" formControlName="moduleName">
+              <div *ngIf="submitted && entryForm.controls.moduleName.errors" class="error_mess">
+                <div *ngIf="submitted && entryForm.controls.moduleName.errors.required" class="error_mess">*This field is Required</div>
+            </div>
+              </div>
+            <div class="clr-col-sm-12">
+              <label for="tags">Status</label>
+              <select  id="" formControlName="status">
+                <option value="Enable">Enable</option>
+                <option value="Disable">Disable</option>
+                </select>
+                <div *ngIf="submitted && entryForm.controls.status.errors" class="error_mess">
+                  <div *ngIf="submitted && entryForm.controls.status.errors.required" class="error_mess">*This field is Required</div>
+              </div>
+              </div>
+              <div class="clr-col-sm-12">
+                <label for="tags">Menu Action Link</label>
+                <input type="text" class="clr-input" formControlName="main_menu_action_name">
+                <div *ngIf="submitted && entryForm.controls.main_menu_action_name.errors" class="error_mess">
+                  <div *ngIf="submitted && entryForm.controls.main_menu_action_name.errors.required" class="error_mess">*This field is Required</div>
+              </div>
+                <!-- <select NAME="menu_id" >
+                  <option SELECTED >Home Menu
+                          <OPTION >Home
+      <OPTION >Job
+
+      <OPTION >&nbsp;&nbsp;&nbsp;Job logs
+      <OPTION >&nbsp;&nbsp;&nbsp;Pending Jobs
+      <OPTION >&nbsp;&nbsp;&nbsp;Defined Jobs
+      <OPTION >&nbsp;&nbsp;&nbsp;Surewebsocket
+
+      <OPTION >Security
+      <OPTION >&nbsp;&nbsp;&nbsp;User Maintance
+      <OPTION >&nbsp;&nbsp;&nbsp;User Group Maintance
+      <OPTION >&nbsp;&nbsp;&nbsp;System parametrs
+      <OPTION >&nbsp;&nbsp;&nbsp;Menu access control
+      <OPTION >&nbsp;&nbsp;&nbsp;Menu Maintance
+
+      <OPTION >SureBoard
+      <OPTION >&nbsp;&nbsp;&nbsp;Road Map
+      <OPTION >&nbsp;&nbsp;&nbsp;Iteration Release
+      <OPTION >&nbsp;&nbsp;&nbsp;Milestone
+      <OPTION >&nbsp;&nbsp;&nbsp;Goal
+      <OPTION >&nbsp;&nbsp;&nbsp;Wbs Task Board
+
+
+      <OPTION >Projects
+      <OPTION >&nbsp;&nbsp;&nbsp;My projects
+      <OPTION >&nbsp;&nbsp;&nbsp;All Projects
+      <OPTION >&nbsp;&nbsp;&nbsp;Templates
+      <OPTION >&nbsp;&nbsp;&nbsp;Repositories
+      <OPTION >&nbsp;&nbsp;&nbsp;Recently Modify
+      <OPTION >&nbsp;&nbsp;&nbsp;Recently Archived
+      <OPTION >&nbsp;&nbsp;&nbsp;Shared with Me
+      <OPTION >&nbsp;&nbsp;&nbsp;My Fav
+
+
+
+      </select> -->
+                </div>
+                <div class="clr-col-sm-12">
+                  <label for="tags">Menu Icon Name</label>
+                  <input type="text" class="clr-input" formControlName="main_menu_icon_name">
+                  <div *ngIf="submitted && entryForm.controls.main_menu_icon_name.errors" class="error_mess">
+                    <div *ngIf="submitted && entryForm.controls.main_menu_icon_name.errors.required" class="error_mess">*This field is Required</div>
+                </div>
+                    </div>
+        </div>
+        <br>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
+          <button type="submit" class="btn btn-primary" >ADD</button>
+        </div>
+  </form>
+    </div>
+
+  </clr-modal>
+
+  <clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+
+    <div class="modal-body" *ngIf="rowSelected.menuItemId">
+      <h1 class="delete">Are You Sure Want to delete?</h1>
+      <h2 class="heading">{{rowSelected.menuItemId}}</h2>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
+      <button type="submit" (click)="delete(rowSelected.menuItemId)" class="btn btn-primary" >Delete</button>
+      </div>
+    </div>
+  </clr-modal>
+
+
+  <clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title">Update Menu Maintenance</h3>
+    <div class="modal-body" *ngIf="rowSelected.menuItemId">
+      <h2 class="heading">{{rowSelected.menuItemId}}</h2>
+          <form (ngSubmit)="onUpdate(rowSelected.menuItemId)">
+        <div class="clr-row">
+
+          <div class="clr-col-sm-12">
+            <label for="name">Menu ID<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" name="menuId" [(ngModel)]="rowSelected.menuId" readonly>
+          </div>
+          <div class="clr-col-sm-12">
+            <label for="name">Menu Item Name<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" name="menuItemDesc" [(ngModel)]="rowSelected.menuItemDesc">
+          </div>
+          <div class="clr-col-sm-12">
+            <label for="tags">Sequence</label>
+            <input type="text" class="clr-input" name="itemSeq" [(ngModel)]="rowSelected.itemSeq">
+            </div>
+            <div class="clr-col-sm-12">
+              <label for="tags">Module Name</label>
+              <input type="text" class="clr-input" name="moduleName" [(ngModel)]="rowSelected.moduleName">
+              </div>
+            <div class="clr-col-sm-12">
+              <label for="tags">Status</label>
+              <select  id="" name="status" [(ngModel)]="rowSelected.status">
+                <option value="Enable">Enable</option>
+                <option value="Disable">Disable</option>
+                </select>
+              </div>
+              <div class="clr-col-sm-12">
+                <label for="tags">Menu Action Link</label>
+                <input type="text" class="clr-input" name="main_menu_action_name" [(ngModel)]="rowSelected.main_menu_action_name">
+                </div>
+                <div class="clr-col-sm-12">
+                  <label for="tags">Menu Icon Name </label>
+                  <input type="text" class="clr-input" name="main_menu_icon_name" [(ngModel)]="rowSelected.main_menu_icon_name">
+                  </div>
+        </div>
+        <br>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
+          <button type="submit" class="btn btn-primary" >Update</button>
+          </div>
+  </form>
+    </div>
+
+  </clr-modal>
+
+
+  <clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
+    <h3 class="modal-title">Import File</h3>
+    <div class="modal-body">
+        <input type="file" name="file" class="file" (change)="selectFile($event)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
+    </div>
+    <div class="modal-footer">
+        <button class="btn btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
+    </div>
+  </clr-modal>
@@ -0,0 +1,62 @@
+input[type=text],[type=date],[type=password] {
+  width: 100%;
+  padding: 15px 20px;
+ // margin: 3px 0;
+ background-color:rgb(255, 255, 255);
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+.required-field{
+  color: red;
+font-size: 18px;
+
+}
+.green{
+  background-color: rgb(156, 231, 156);
+  color: black;
+}
+.blue{
+  background-color: #57abcf;//rgb(82, 87, 161);
+  color: black;
+}
+input.ng-invalid.ng-touched {
+  border-color: red;
+}
+
+.error_mess {
+  color: red;
+}
+.td-title {
+  text-align: center;
+  width: 150px;
+color: white;
+  font-weight: bold;
+  background-color: rgba(63, 122, 231, 0.863);
+  //color: rgb(24, 13, 13);
+}
+th{
+  //background-color:rgb(170, 169, 169);
+  font-weight: bold;
+}
+.td-content{
+  text-align: left;
+}
+.delete,.heading{
+  text-align: center;
+  color: red;
+}
+.section p {
+background-color: rgb(206, 201, 201);
+  padding: 10px;
+  font-size: 18px;
+}
+
+select{
+  width: 100%;
+  padding: 5px 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenumaintanceComponent } from './menumaintance.component';
+
+describe('MenumaintanceComponent', () => {
+  let component: MenumaintanceComponent;
+  let fixture: ComponentFixture<MenumaintanceComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MenumaintanceComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MenumaintanceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,216 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ToastrService } from 'ngx-toastr';
+import { MenumaintanceService } from '../../../../services/admin/menumaintance.service';
+import { Rn_Main_Menu } from '../../../../models/builder/Rn_Main_Menu';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MenuGroupService } from 'src/app/services/admin/menu-group.service';
+import { CsvService } from 'src/app/services/csv.service';
+import { ExcelService } from 'src/app/services/excel.service';
+import * as moment from 'moment';
+import { TranslateService } from '@ngx-translate/core';
+@Component({
+  selector: 'app-menumaintance',
+  templateUrl: './menumaintance.component.html',
+  styleUrls: ['./menumaintance.component.scss']
+})
+export class MenumaintanceComponent implements OnInit {
+  loading = false;
+  selected: any[] = [];
+  rowSelected: any = {};
+  modaldelete = false;
+  modalAdd = false;
+  modaledit = false;
+  givendata;
+  menus: Rn_Main_Menu[];
+  mainid = 0;
+  public entryForm: FormGroup;
+  mcreate;
+  mdelete;
+  medit;
+  showdata;
+  error;
+  submitted = false;
+  constructor(private menuservice: MenumaintanceService,
+    private toastr: ToastrService,
+    private excel: ExcelService,
+    private _fb: FormBuilder,
+    private route: ActivatedRoute,
+    private menuGroupService: MenuGroupService,
+    private csvService: CsvService,
+    private translate: TranslateService,
+    private router: Router,) { }
+
+  ngOnInit(): void {
+    this.showdata = this.menuGroupService.getdata();
+    console.log(this.showdata);
+    this.mcreate = this.showdata.mcreate;
+    console.log(this.mcreate);
+    this.mdelete = this.showdata.mdelete
+    console.log(this.mdelete);
+    this.medit = this.showdata.medit
+    console.log(this.medit);
+
+    // this.menuservice.getAll().subscribe((data) => {
+    //   console.log(data);
+    //   this.givendata = data;
+    // });
+
+    this.entryForm = this._fb.group({
+      // menuItemId:[null],
+      menuId: [null],
+      menuItemDesc: ['', [Validators.required]],
+      itemSeq: ['', [Validators.required, Validators.pattern(/^-?(0|[1-9]\d*)?$/)]],
+      moduleName: ['', [Validators.required]],
+      status: ['', [Validators.required]],
+      main_menu_action_name: ['', [Validators.required]],
+      main_menu_icon_name: ['', [Validators.required]]
+    });
+    this.getdata();
+  }
+
+  switchLanguage(language: string) {
+    this.translate.use(language);
+  }
+  getdata() {
+    this.menuservice.getByCurrentUserMenuGroupId1().subscribe(resp => {
+      this.menus = resp;
+      console.log('menus: ', this.menus);
+      if (this.menus.length == 0) {
+        this.error = "No data Available";
+        console.log(this.error)
+      }
+    }, (error) => {
+      console.log(error);
+      if (error) {
+        this.error = "Server Error";
+      }
+    })
+  }
+  onSubmit() {
+    this.submitted = true;
+    if (this.entryForm.invalid) {
+      return;
+    }
+    this.menuservice.create1(this.entryForm.value).subscribe((data) => {
+      console.log(data);
+      if (data) {
+        this.toastr.success('Added successfully');
+      }
+      this.ngOnInit();
+    },
+      (error) => {
+        console.log('Error in adding data...', error);
+        if (error) {
+          this.toastr.error('Not added Data Getting Some Error');
+        }
+        this.getdata();
+      });
+    this.modalAdd = false;
+  }
+  goToAdd() {
+    this.modalAdd = true;
+  }
+  submenu(id: any) {
+    this.router.navigate(["../submenu/" + id], { relativeTo: this.route })
+  }
+  data: {};
+  shrink(id: any, row) {
+    this.rowSelected = row;
+    console.log(this.rowSelected);
+    if (this.rowSelected.subMenus != 0) {
+      this.rowSelected.subMenus = []
+    } console.log(this.rowSelected);
+    this.menuservice.sink(id, this.rowSelected).subscribe((data) => {
+      console.log(data);
+    })
+  }
+  goToEdit(row) {
+    this.rowSelected = row;
+    console.log(row)
+    this.modaledit = true;
+    //this.router.navigate(["../edit/" + id], { relativeTo: this.route });
+  }
+  onDelete(row) {
+    this.rowSelected = row;
+    this.modaldelete = true;
+  }
+
+  delete(id) {
+    this.modaldelete = false;
+    console.log("in delete  " + id);
+    this.menuservice.delete1(id).subscribe((data) => {
+      console.log(data);
+      this.toastr.success('Deleted successfully');
+      this.ngOnInit();
+    },
+      (error) => {
+        console.log('Error in adding data...', +error);
+        if (error) {
+          this.toastr.error('Not Deleted Data Getting Some Error');
+        }
+      });
+
+  }
+  onUpdate(id) {
+    this.modaledit = false;
+    this.menuservice.update1(id, this.rowSelected).subscribe((data) => {
+      console.log(data);
+      if (data) {
+        this.toastr.success('Updated successfully');
+      }
+      this.ngOnInit();
+
+    },
+      (error) => {
+        console.log('Error in adding data...', error);
+        if (error) {
+          this.toastr.error('Not updated Data Getting Some Error');
+        }
+        this.ngOnInit();
+
+      });
+  }
+
+  onExport() {
+    this.excel.exportAsExcelFile(this.givendata, 'menumaintanance_',
+      moment().format('YYYYMMDD_HHmmss'))
+  }
+
+  // csv
+
+  modalCsv = false;
+  selectedFiles: File;
+  fileList;
+  ttype = 'menumaintenance';
+
+
+  // Import CSV
+  public selectFile(event) {
+    this.selectedFiles = event.target.files[0];
+    // this.saveCsv();
+  }
+
+  csvImport() {
+    console.log("import CSV");
+    this.modalCsv = true;
+  }
+  saveCsv() {
+    this.csvService.importCsv(this.selectedFiles, this.ttype).subscribe(data => {
+      console.log(data);
+      this.fileList = data;
+      this.modalCsv = false;
+    },
+      (error) => {
+        console.log(error);
+        if (error.status == 202) {
+          this.toastr.success(error.error.text)
+        }
+      });
+  }
+
+  downloadFiles() {
+    this.csvService.downloadCsvs(this.ttype);
+
+  }
+}
@@ -0,0 +1,146 @@
+
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
+  <li><a href="javascript://"><clr-icon shape="lock"></clr-icon>Security</a></li>
+  <li><a href="javascript://">Access Type</a></li>
+  <li><a href="javascript://">Modules</a></li>
+</ol>
+
+
+
+  <div class="clr-row">
+    <div class="clr-col-8">
+      <h3>Modules</h3>
+  </div>
+    <div class="clr-col-4" style="text-align: right;">
+      <button id="add"   class="btn btn-primary" (click)="goToAdd()">
+        <clr-icon shape="plus"></clr-icon>ADD
+      </button>
+
+    </div>
+  </div>
+
+
+  <clr-datagrid [clrDgLoading]="loading"  [(clrDgSelected)]="selected">
+    <clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
+      <div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>
+
+    <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+      Modules
+    </ng-container></clr-dg-column>
+    <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+      Description
+    </ng-container></clr-dg-column>
+    <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+     Access Exclusive
+    </ng-container></clr-dg-column>
+
+
+
+    <clr-dg-row *clrDgItems="let user of data;let i = index" [clrDgItem]="user">
+      <clr-dg-cell >{{user.modules}}</clr-dg-cell>
+      <clr-dg-cell >{{user.description}}</clr-dg-cell>
+      <clr-dg-cell >{{user.access_exclusive}}</clr-dg-cell>
+
+
+      <clr-dg-action-overflow>
+
+        <button class="action-item"   (click)="goToEdit(user)">Edit <clr-icon shape="edit" class="is-error"></clr-icon></button>
+        <button class="action-item"  (click)="onDelete(user)">Delete<clr-icon shape="trash" class="is-error"></clr-icon></button>
+                </clr-dg-action-overflow>
+
+
+    </clr-dg-row>
+
+    <clr-dg-footer>
+      <clr-dg-pagination #pagination [clrDgPageSize]="10">
+        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
+        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+        of {{pagination.totalItems}} users
+      </clr-dg-pagination>
+    </clr-dg-footer>
+  </clr-datagrid>
+
+  <clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title">Add Modules</h3>
+    <div class="modal-body">
+          <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
+        <div class="clr-row">
+
+          <div class="clr-col-sm-12">
+            <label for="name">Module<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" formControlName="modules" name="menuId">
+           <div *ngIf="submitted && entryForm.controls.modules.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.modules.errors.required" class="error_mess">*This field is Required</div>
+        </div>
+          </div>
+
+          <div class="clr-col-sm-12">
+            <label for="tags">Description</label>
+            <input type="text" class="clr-input" formControlName="description">
+            <div *ngIf="submitted && entryForm.controls.description.errors" class="error_mess">
+              <div *ngIf="submitted && entryForm.controls.description.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+            </div>
+            <div class="clr-col-sm-12">
+              <label for="tags">Access Exclusive</label>
+              <input type="text" class="clr-input" formControlName="access_exclusive">
+              <div *ngIf="submitted && entryForm.controls.access_exclusive.errors" class="error_mess">
+                <div *ngIf="submitted && entryForm.controls.access_exclusive.errors.required" class="error_mess">*This field is Required</div>
+            </div>
+              </div>
+        </div>
+        <br>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
+          <button type="submit" class="btn btn-primary" >ADD</button>
+          </div>
+  </form>
+    </div>
+
+  </clr-modal>
+
+  <clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+
+    <div class="modal-body" *ngIf="rowSelected.id">
+      <h1 class="delete">Are You Sure Want to delete?</h1>
+      <h2 class="heading">{{rowSelected.id}}</h2>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
+      <button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary" >Delete</button>
+      </div>
+    </div>
+  </clr-modal>
+
+
+  <clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title">Update Modules</h3>
+    <div class="modal-body" *ngIf="rowSelected.id">
+      <h2 class="heading">{{rowSelected.id}}</h2>
+          <form (ngSubmit)="onUpdate(rowSelected.id)">
+        <div class="clr-row">
+
+          <div class="clr-col-sm-12">
+            <label for="name">Module<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" name="modules" [(ngModel)]="rowSelected.modules">
+          </div>
+
+          <div class="clr-col-sm-12">
+            <label for="tags">Description</label>
+            <input type="text" class="clr-input" name="description" [(ngModel)]="rowSelected.description">
+            </div>
+            <div class="clr-col-sm-12">
+              <label for="tags">Access Exclusive</label>
+              <input type="text" class="clr-input" name="access_exclusive" [(ngModel)]="rowSelected.access_exclusive">
+              </div>
+
+        </div>
+        <br>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
+          <button type="submit" class="btn btn-primary" >Update</button>
+          </div>
+  </form>
+    </div>
+
+  </clr-modal>
@@ -0,0 +1,62 @@
+input[type=text],[type=date],[type=password] {
+  width: 100%;
+  padding: 15px 20px;
+ // margin: 3px 0;
+ background-color:rgb(255, 255, 255);
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+.required-field{
+  color: red;
+font-size: 18px;
+
+}
+.green{
+  background-color: rgb(156, 231, 156);
+  color: black;
+}
+.blue{
+  background-color: #57abcf;//rgb(82, 87, 161);
+  color: black;
+}
+input.ng-invalid.ng-touched {
+  border-color: red;
+}
+
+.error_mess {
+  color: red;
+}
+.td-title {
+  text-align: center;
+  width: 150px;
+color: white;
+  font-weight: bold;
+  background-color: rgba(63, 122, 231, 0.863);
+  //color: rgb(24, 13, 13);
+}
+th{
+  //background-color:rgb(170, 169, 169);
+  font-weight: bold;
+}
+.td-content{
+  text-align: left;
+}
+.delete,.heading{
+  text-align: center;
+  color: red;
+}
+.section p {
+background-color: rgb(206, 201, 201);
+  padding: 10px;
+  font-size: 18px;
+}
+
+select{
+  width: 100%;
+  padding: 5px 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModulesComponent } from './modules.component';
+
+describe('ModulesComponent', () => {
+  let component: ModulesComponent;
+  let fixture: ComponentFixture<ModulesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ModulesComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModulesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,121 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ToastrService } from 'ngx-toastr';
+import { AccesstypeService } from 'src/app/services/admin/accesstype.service';
+
+@Component({
+  selector: 'app-modules',
+  templateUrl: './modules.component.html',
+  styleUrls: ['./modules.component.scss']
+})
+export class ModulesComponent implements OnInit {
+  loading = false;
+  selected: any[] = [];
+  rowSelected: any = {};
+  modaldelete = false;
+  modalAdd = false;
+  modaledit = false;
+  error;
+  data;
+  submitted = false;
+  public entryForm: FormGroup;
+  constructor(private _fb: FormBuilder, private accesstype: AccesstypeService,
+    private toastr: ToastrService,) { }
+
+  ngOnInit(): void {
+    this.entryForm = this._fb.group({
+      modules: ['', [Validators.required]],
+      description: ['', [Validators.required]],
+      access_exclusive: ['', [Validators.required]],
+    });
+    this.getdata();
+  }
+  getdata() {
+    this.accesstype.getAll1().subscribe(resp => {
+      this.data = resp;
+      console.log('menus: ', this.data);
+      if (this.data.length == 0) {
+        this.error = "No data Available";
+        console.log(this.error)
+      }
+    }, (error) => {
+      console.log(error);
+      if (error) {
+        this.error = "Server Error";
+      }
+    })
+  }
+  goToAdd() {
+    this.modalAdd = true;
+  }
+  onSubmit() {
+    console.log(this.entryForm.value);
+    this.submitted = true;
+    if (this.entryForm.invalid) {
+      return;
+    }
+    this.accesstype.create1(this.entryForm.value).subscribe((data) => {
+      console.log(data);
+      if (data) {
+        this.toastr.success('Added successfully');
+      }
+      this.ngOnInit();
+    },
+      (error) => {
+        console.log('Error in adding data...', error);
+        if (error) {
+          this.toastr.error('Not added Data Getting Some Error');
+        }
+        this.ngOnInit();
+
+      });
+    this.modalAdd = false;
+  }
+  goToEdit(row) {
+    this.rowSelected = row;
+    console.log(row)
+    this.modaledit = true;
+    //this.router.navigate(["../edit/" + id], { relativeTo: this.route });
+  }
+  onDelete(row) {
+    this.rowSelected = row;
+    this.modaldelete = true;
+  }
+
+  delete(id) {
+    this.modaldelete = false;
+    console.log("in delete  " + id);
+    this.accesstype.delete1(id).subscribe((data) => {
+      console.log(data);
+      if (data) {
+        this.toastr.success('Deleted successfully');
+      }
+      this.ngOnInit();
+    },
+      (error) => {
+        console.log('Error in adding data...', error);
+        if (error) {
+          this.toastr.error('Not Deleted Data Getting Some Error');
+        }
+        this.ngOnInit();
+      });
+
+  }
+  onUpdate(id) {
+    this.modaledit = false;
+    this.accesstype.update1(id, this.rowSelected).subscribe((data) => {
+      console.log(data);
+      if (data) {
+        this.toastr.success('Updated successfully');
+      }
+      this.ngOnInit();
+    },
+      (error) => {
+        console.log('Error in adding data...', error);
+        if (error) {
+          this.toastr.error('Not updated Data Getting Some Error');
+        }
+        this.ngOnInit();
+      });
+  }
+}
@@ -0,0 +1,85 @@
+.s-info-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.s-info-bar button {
+  outline: none;
+}
+
+.delete, .heading {
+  text-align: center;
+  color: red;
+}
+
+.entry-pg {
+  width: 750px;
+}
+
+.button1::after {
+  content: none;
+}
+
+.button1:hover::after {
+  content: "ADD ROWS";
+}
+
+.section {
+  background-color: #dddddd;
+  height: 40px;
+}
+
+.section p {
+  padding: 10px;
+  font-size: 18px;
+}
+
+.clr-input {
+  color: #212529;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  padding: 0.75rem 0.75rem;
+  margin-top: 3px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.clr-file {
+  color: #212529;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  margin-top: 3px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.center {
+  text-align: center;
+}
+
+select {
+  width: 100%;
+  margin-top: 3px;
+  padding: 5px 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+input[type=text], [type=date], [type=number], textarea {
+  width: 100%;
+  padding: 15px 15px;
+  background-color: rgb(255, 255, 255);
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.error_mess {
+  color: red;
+}
+
+.required-field {
+  color: red;
+  font-size: 18px;
+}/*# sourceMappingURL=myworkspace.component.css.map */
@@ -0,0 +1 @@
+{"version":3,"sources":["myworkspace.component.scss","myworkspace.component.css"],"names":[],"mappings":"AAWA;EACE,aAAA;EACA,mBAAA;EACA,8BAAA;ACVF;ADWE;EACE,aAAA;ACTJ;;ADYA;EACE,kBAAA;EACA,UAAA;ACTF;;ADWA;EACE,YAAA;ACRF;;ADWA;EACE,aAAA;ACRF;;ADUA;EACE,mBAAA;ACPF;;ADUA;EACE,yBAAA;EACA,YAAA;ACPF;;ADUA;EAEE,aAAA;EACA,eAAA;ACRF;;ADWA;EACE,cAAA;EACA,yBAAA;EACA,sBAAA;EACA,wBAAA;EACA,eAAA;EACA,WAAA;EACA,mBAAA;ACRF;;ADWA;EACE,cAAA;EACA,yBAAA;EACA,sBAAA;EAEA,eAAA;EACA,WAAA;EACA,mBAAA;ACTF;;ADYA;EACE,kBAAA;ACTF;;ADWA;EACE,WAAA;EACA,eAAA;EACA,gBAAA;EACA,sBAAA;EACA,kBAAA;ACRF;;ADUA;EACE,WAAA;EACA,kBAAA;EACA,oCAAA;EAEA,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,sBAAA;ACRF;;ADUA;EACE,UAAA;ACPF;;ADUA;EACE,UAAA;EACF,eAAA;ACPA","file":"myworkspace.component.css"}
@@ -0,0 +1,309 @@
+<div class="pad-16">
+  <h3><b>Organization and Workspaces</b></h3>
+  <br />
+
+  <section class="form-block" style="margin-top:32px">
+    <!--  <form (ngSubmit)="onSubmit()"> -->
+    <table *ngIf="sys_account">
+      <tr>
+        <td><b>Organization:</b> </td>
+        <td> {{ sys_account.companyName }}</td>
+      </tr>
+      <tr>
+        <td><b>Account Id:</b> </td>
+        <td>{{ sys_account.gstNumber }}</td>
+      </tr>
+
+        <tr>
+        <td><b> Selected Workspace: </b></td>
+        <td>{{sys_account.workspace }}</td>
+        <span  class="label label-light-green p7" style="margin-top: .4em; display: inline; cursor: pointer;margin-left: 20px;" (click)="allworksapce()">switch</span>
+      </tr>
+    </table>
+    <!-- <a routerLink="/create-workspace">create new workspace</a> -->
+  </section>
+
+  <clr-tabs>
+    <clr-tab>
+      <button clrTabLink>Users</button>
+      <clr-tab-content *clrIfActive>
+        <button class="btn btn-primary" (click)="addUsers()">INVITE USER</button>
+        <clr-datagrid [clrDgLoading]="loading"  >
+          <clr-dg-placeholder><clr-spinner [clrMedium]="true">Loading ...</clr-spinner></clr-dg-placeholder>
+
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+            No
+          </ng-container></clr-dg-column>
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+           Name
+          </ng-container></clr-dg-column>
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+            Account Type
+          </ng-container></clr-dg-column>
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+            Status
+          </ng-container></clr-dg-column>
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+            Actions
+          </ng-container></clr-dg-column>
+          <clr-dg-row *clrDgItems="let user of alluser;let i = index" [clrDgItem]="user">
+            <clr-dg-cell >{{i+1}}</clr-dg-cell>
+            <clr-dg-cell><img class="avatar" src="assets/download.png" alt=""  height="50px">
+             {{user.fullName}}<br>{{user.username}}<clr-icon shape="dot-circle"></clr-icon>{{user.email}}</clr-dg-cell>
+            <clr-dg-cell ></clr-dg-cell>
+            <!-- {{user.roles[0].description}} -->
+            <clr-dg-cell > {{user.status}} </clr-dg-cell>
+            <clr-dg-cell > <clr-icon shape="bullet-list"></clr-icon></clr-dg-cell>
+              </clr-dg-row>
+
+          <clr-dg-footer>
+            <clr-dg-pagination #pagination [clrDgPageSize]="10">
+              <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
+              {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+              of {{pagination.totalItems}} users
+            </clr-dg-pagination>
+          </clr-dg-footer>
+        </clr-datagrid>
+      </clr-tab-content>
+    </clr-tab>
+    <clr-tab>
+      <button  clrTabLink>Guest</button>
+      <clr-tab-content *clrIfActive>
+        <button class="btn btn-primary" (click)="addguest()">INVITE GUEST</button>
+        <clr-datagrid [clrDgLoading]="loading"  >
+          <clr-dg-placeholder><clr-spinner [clrMedium]="true">Loading ...</clr-spinner></clr-dg-placeholder>
+
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+            No
+          </ng-container></clr-dg-column>
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+           Name
+          </ng-container></clr-dg-column>
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+            Account Type
+          </ng-container></clr-dg-column>
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+            Status
+          </ng-container></clr-dg-column>
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+            Access Till
+          </ng-container></clr-dg-column>
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+            Actions
+          </ng-container></clr-dg-column>
+          <clr-dg-row *clrDgItems="let user of allguest;let i = index" [clrDgItem]="user">
+            <clr-dg-cell >{{i+1}}</clr-dg-cell>
+            <clr-dg-cell><img class="avatar" src="assets/download.png" alt=""  height="50px">
+              {{user.fullName}}<br>{{user.username}}<clr-icon shape="dot-circle"></clr-icon>{{user.email}}</clr-dg-cell>
+             <clr-dg-cell >{{user.roles[0].description}}</clr-dg-cell>
+             <clr-dg-cell > {{user.status}} </clr-dg-cell>
+            <clr-dg-cell >{{user.access_duration}}</clr-dg-cell>
+            <clr-dg-cell > <clr-icon shape="bullet-list"></clr-icon>
+            </clr-dg-cell>
+              </clr-dg-row>
+
+          <clr-dg-footer>
+            <clr-dg-pagination #pagination [clrDgPageSize]="10">
+              <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
+              {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+              of {{pagination.totalItems}} users
+            </clr-dg-pagination>
+          </clr-dg-footer>
+        </clr-datagrid>
+      </clr-tab-content>
+    </clr-tab>
+    <clr-tab>
+      <button clrTabLink>Teams</button>
+      <clr-tab-content *clrIfActive>
+        <button class="btn btn-primary" (click)="addteam()">ADD TEAM</button>
+        <clr-datagrid [clrDgLoading]="loading"  >
+          <clr-dg-placeholder><clr-spinner [clrMedium]="true">Loading ...</clr-spinner></clr-dg-placeholder>
+
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+            No
+          </ng-container></clr-dg-column>
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+            Team Name
+          </ng-container></clr-dg-column>
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+            Owner
+          </ng-container></clr-dg-column>
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+            Count
+          </ng-container></clr-dg-column>
+          <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+            Members
+          </ng-container></clr-dg-column>
+          <!-- <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+            Actions
+          </ng-container></clr-dg-column> -->
+          <clr-dg-row *clrDgItems="let user of allworkspacedata;let i = index" [clrDgItem]="user">
+            <clr-dg-cell >{{i+1}}</clr-dg-cell>
+            <clr-dg-cell>{{user.name}}</clr-dg-cell>
+            <clr-dg-cell >{{user.owner_id}}</clr-dg-cell>
+            <clr-dg-cell >3</clr-dg-cell>
+            <clr-dg-cell > <div (click)="manage(user.id)"> <img class="avatar" src="assets/images/profile-icon.png" alt=""  height="50px">
+              <img class="avatar" src="assets/images/profile-icon.png" alt=""  height="50px">
+              <img class="avatar" src="assets/images/profile-icon.png" alt=""  height="50px"></div>
+            </clr-dg-cell>
+            <!-- <clr-dg-cell >
+              <clr-icon shape="user" (click)="manage(user.id)"></clr-icon>
+            </clr-dg-cell> -->
+              </clr-dg-row>
+
+          <clr-dg-footer>
+            <clr-dg-pagination #pagination [clrDgPageSize]="10">
+              <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
+              {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+              of {{pagination.totalItems}} users
+            </clr-dg-pagination>
+          </clr-dg-footer>
+        </clr-datagrid>
+      </clr-tab-content>
+    </clr-tab>
+
+  </clr-tabs>
+
+
+
+
+
+
+  <!-- ADD USERS [hidden]="isAdmin()" -->
+  <!-- <button class="btn btn-primary" (click)="addUsers()">ADD USER</button>
+  <button class="btn btn-primary" (click)="addguest()">ADD GUEST</button>
+  <button class="btn btn-primary" (click)="addteam()">ADD TEAM</button>
+
+
+  <hr> -->
+
+
+</div>
+
+
+<clr-modal [(clrModalOpen)]="modalteam" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h5 class="modal-title">Add A Team To Real It Solutions</h5>
+  <div class="modal-body">
+    <form [formGroup]="teamForm">
+      <div class="clr-row">
+        <div class="clr-col-md-6 clr-col-sm-12" >
+          <label>Name: </label>
+        <input class="clr-input"  type="text" name="name"  placeholder="Enter name" formControlName="name">
+        </div>
+
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modalteam = false">Cancel</button>
+      <button type="submit"  class="btn btn-primary"  [disabled]="!teamForm.valid"  (click)="oncreateteam()">Add</button>
+      </div>
+    </form>
+  </div>
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="modalguest" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h5 class="modal-title">Invite Guest To REALITS-WS</h5>
+  <div class="modal-body">
+    <form [formGroup]="guestForm" >
+      <div class="clr-row">
+        <div class="clr-col-md-12 clr-col-sm-12" >
+          <label>To:  <span class="required-field">*</span></label>
+          <input class="clr-input" type="email" formControlName="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"  placeholder="name@dekatc.com">
+          <div *ngIf="guestForm.controls['email'].errors" class="error_mess">
+                                <div *ngIf="guestForm.controls['email'].hasError('pattern')" class="error_mess">* Email must be a valid email address
+                                  </div>  </div>
+          <!-- <textarea name="" id="" cols="30" rows="4" placeholder="name@dekatc.com" formControlName="email"></textarea> -->
+        </div>
+      </div>
+      <div class="clr-row">
+        <div class="clr-col-md-4 clr-col-sm-12" >
+          <label>Access duration: <span class="required-field">*</span></label>
+          <select formControlName="access_duration">
+            <option value="30" selected>30 day</option>
+            <option value="60">60 day</option>
+            <option value="90">90 day</option>
+          </select>
+        </div>
+
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modalguest= false">Cancel</button>
+      <button type="submit"  class="btn btn-primary" [disabled]="!guestForm.valid" (click)="onCreateguest()">Add</button>
+      </div>
+    </form>
+  </div>
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="modaluser" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <h5 class="modal-title">Invite People To REALITS-WS</h5>
+  <div class="modal-body">
+    <form [formGroup]="userForm" >
+      <div class="clr-row">
+        <div class="clr-col-md-12 clr-col-sm-12" >
+          <label>To: </label>
+          <input class="clr-input" type="email" formControlName="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"  placeholder="name@dekatc.com">
+          <div *ngIf="userForm.controls['email'].errors" class="error_mess">
+                                <div *ngIf="userForm.controls['email'].hasError('pattern')" class="error_mess">* Email must be a valid email address
+                                  </div>  </div>
+          <!-- <textarea name="" id="" cols="30" rows="4" formControlName="email" placeholder="name@dekatc.com" ></textarea> -->
+        </div>
+      </div>
+<a style="float: left;" ><clr-icon shape="link"></clr-icon>Copy Invite Link</a>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modaluser = false">Cancel</button>
+      <button type="submit"  class="btn btn-primary" [disabled]="!userForm.valid" (click)="onCreateuser()">Add</button>
+      </div>
+    </form>
+  </div>
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="allworkmodal" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h5 class="modal-title">Invite People To REALITS-WS</h5>
+  <div class="modal-body">
+    <clr-datagrid [clrDgLoading]="loading"  >
+      <clr-dg-placeholder><clr-spinner [clrMedium]="true">Loading ...</clr-spinner></clr-dg-placeholder>
+
+      <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+        No
+      </ng-container></clr-dg-column>
+      <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+        Team Name
+      </ng-container></clr-dg-column>
+      <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+        Owner
+      </ng-container></clr-dg-column>
+      <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+        Count
+      </ng-container></clr-dg-column>
+      <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+        Members
+      </ng-container></clr-dg-column>
+      <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+        Actions
+      </ng-container></clr-dg-column>
+      <clr-dg-row *clrDgItems="let user of allwdata;let i = index" [clrDgItem]="user">
+        <clr-dg-cell >{{i+1}}</clr-dg-cell>
+        <clr-dg-cell>{{user.team_name}}</clr-dg-cell>
+        <clr-dg-cell >{{user.owner_id}}</clr-dg-cell>
+        <clr-dg-cell >3</clr-dg-cell>
+        <clr-dg-cell > <img class="avatar" src="assets/images/profile-icon.png" alt=""  height="50px">
+          <img class="avatar" src="assets/images/profile-icon.png" alt=""  height="50px">
+          <img class="avatar" src="assets/images/profile-icon.png" alt=""  height="50px">
+        </clr-dg-cell>
+        <clr-dg-cell > <clr-icon shape="bullet-list"></clr-icon>
+
+        </clr-dg-cell>
+          </clr-dg-row>
+
+      <clr-dg-footer>
+        <clr-dg-pagination #pagination [clrDgPageSize]="10">
+          <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
+          {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+          of {{pagination.totalItems}} users
+        </clr-dg-pagination>
+      </clr-dg-footer>
+    </clr-datagrid>
+  </div>
+</clr-modal>
+
+
+
@@ -0,0 +1,94 @@
+// input[type=text],[type=date], select,textarea {
+//   width: 100%;
+//   padding: 12px 20px;
+//   margin: 8px 0;
+//   display: inline-block;
+//   border: 1px solid #ccc;
+//   border-radius: 4px;
+//   box-sizing: border-box;
+// }
+
+//@import "../../../../assets/scss/var";
+.s-info-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  button {
+    outline: none;
+  }
+}
+.delete,.heading{
+  text-align: center;
+  color: red;
+}
+.entry-pg {
+  width: 750px;
+}
+
+.button1::after {
+  content: none;
+}
+.button1:hover::after {
+  content: "ADD ROWS";
+}
+
+.section {
+  background-color: #dddddd;
+  height: 40px;
+}
+
+.section p {
+  //color: white;
+  padding: 10px;
+  font-size: 18px;
+}
+
+.clr-input {
+  color: #212529;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  padding: 0.75rem 0.75rem;
+  margin-top: 3px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.clr-file {
+  color: #212529;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  //padding: 0.6rem 0.75rem;
+  margin-top: 3px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.center {
+  text-align: center;
+}
+select{
+  width: 100%;
+  margin-top: 3px;
+  padding: 5px 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+input[type=text],[type=date],[type=number],textarea {
+  width: 100%;
+  padding: 15px 15px;
+  background-color:rgb(255, 255, 255);
+ // margin: 8px 0;
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+.error_mess {
+  color: red;
+}
+
+.required-field{
+  color: red;
+font-size: 18px;
+
+}
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MyworkspaceComponent } from './myworkspace.component';
+
+describe('MyworkspaceComponent', () => {
+  let component: MyworkspaceComponent;
+  let fixture: ComponentFixture<MyworkspaceComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MyworkspaceComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MyworkspaceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,206 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { UserProfileService } from 'src/app/services/admin/user-profile.service';
+import { UserInfoService } from 'src/app/services/user-info.service';
+import { Sys_Account } from 'src/app/services/admin/user-registration.service';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ToastrService } from 'ngx-toastr';
+import { MyworkspaceService } from './myworkspace.service';
+@Component({
+  selector: 'app-myworkspace',
+  templateUrl: './myworkspace.component.html',
+  styleUrls: ['./myworkspace.component.scss']
+})
+export class MyworkspaceComponent implements OnInit {
+  loading = false;
+  selected: any[] = [];
+  sys_account: Sys_Account;
+
+  userEmail: string;
+  companyName: string;
+  workspace: string;
+  gstNumber: string;
+  modalteam = false;
+  modaluser = false;
+  modalguest = false;
+  allworkmodal = false;
+  allworkspacedata;
+  alluser;
+  allguest;
+  allwdata;
+  public teamForm: FormGroup;
+  public userForm: FormGroup;
+  public guestForm: FormGroup;
+  public entryForm: FormGroup;
+  constructor(private router: Router,
+    private route: ActivatedRoute,
+    private userProfileService: UserProfileService,
+    private userInfoService: UserInfoService,
+    private _fb: FormBuilder,
+    private toastr: ToastrService,
+    private mywork: MyworkspaceService) { }
+
+  ngOnInit(): void {
+    //addteam
+    this.teamForm = this._fb.group({
+      name: [null, [Validators.required]],
+    });
+    //add user
+    this.userForm = this._fb.group({
+      email: [null, [Validators.required, Validators.pattern("[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$")]],
+    });
+    //add guest
+    this.guestForm = this._fb.group({
+      email: [null, [Validators.required, Validators.pattern("[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$")]],
+      access_duration: [null, [Validators.required]],
+    })
+    this.getUserAccount();
+    this.getUserRoles();
+    this.getallmyworkspace();
+    this.getalluser();
+    this.getallguest();
+  }
+  getUserAccount() {
+    this.userProfileService.getUserAccountDetails().subscribe(resp => {
+      this.sys_account = resp;
+      console.log("array", this.sys_account);
+    }, err => { console.log(err); }
+    )
+  }
+
+
+  addUsers() {
+    this.modaluser = true;
+    //this.router.navigate(["../users"], { relativeTo: this.route });
+  }
+  manage(id: any) {
+    this.router.navigate(["../manageteam/" + id], { relativeTo: this.route });
+  }
+  goToResetPassword() {
+    this.router.navigate(["../passwordreset"], { relativeTo: this.route });
+  }
+
+  roles: string[]
+  role: string;
+  getUserRoles() {
+    const role = this.userInfoService.getRoles();
+    console.log('roles = ', role);
+
+    // if(role !== null) {
+    //   this.roles = role.split(',');
+    // }
+    this.role = role;
+    console.log(this.role);
+  }
+
+  isAdmin(): boolean {
+    const role: string = this.userInfoService.getRoles();
+    if (role.includes('ADMIN')) {
+      return true;
+    }
+    return false;
+  }
+  addteam() {
+    this.modalteam = true;
+  }
+  addguest() {
+    this.modalguest = true;
+  }
+  getalluser() {
+    this.mywork.getalluser().subscribe((data) => {
+      this.alluser = data;
+      console.log(this.alluser);
+    })
+  }
+  getallguest() {
+    this.mywork.getallguest().subscribe((data) => {
+      this.allguest = data;
+      console.log(this.allguest);
+    })
+  }
+  getallmyworkspace() {
+    this.mywork.getall().subscribe((data) => {
+      this.allworkspacedata = data;
+      console.log(this.allworkspacedata);
+    })
+  }
+
+  onCreateuser() {
+    let email = this.userForm.value.email;
+    console.log(email);
+    this.mywork.adduser(this.userForm.value.email).subscribe((data) => {
+      this.mywork.storeEmail(email);
+      console.log(data);
+      if (data) {
+        this.toastr.success('Email Send successfully');
+      }
+      this.getalluser();
+    }, (error) => {
+      console.log(error);
+      if (error.status >= 200 && error.status <= 299) {
+        this.toastr.success(error.error.text);
+      }
+      if (error.status >= 400 && error.status <= 499) {
+        this.toastr.error(error.error.message);
+      }
+      if (error.status >= 500 && error.status <= 599) {
+        this.toastr.error("Server Error");
+      }
+    });
+    this.modaluser = false;
+  }
+
+  onCreateguest() {
+    this.mywork.addguest(this.guestForm.value.email, this.guestForm.value.access_duration).subscribe((data) => {
+      console.log(data);
+      if (data) {
+        this.toastr.success('Email Send successfully');
+      }
+      this.getallguest();
+    }, (error) => {
+      console.log(error);
+      if (error.status >= 200 && error.status <= 299) {
+        this.toastr.success(error.error.text);
+      }
+      if (error.status >= 400 && error.status <= 499) {
+        this.toastr.error(error.error.message);
+      }
+      if (error.status >= 500 && error.status <= 599) {
+        this.toastr.error("Server Error");
+      }
+    })
+    this.modalguest = false;
+  }
+  oncreateteam() {
+    this.modalteam = false;
+    this.mywork.addteam(this.teamForm.value).subscribe((data) => {
+      console.log(data);
+      if (data) {
+        this.toastr.success('Team Added successfully');
+      }
+      this.getallmyworkspace();
+    }, (error) => {
+      console.log('Error in adding data...', error);
+      if (error) {
+        this.toastr.error('Not added  Getting Some Error');
+      }
+    })
+  }
+  allworksapce() {
+    this.allworkmodal = true;
+    this.mywork.getallworkspace().subscribe((data) => {
+      this.allwdata = data;
+      console.log(data);
+    })
+  }
+
+  copyInputMessage(inputElement) {
+    inputElement.select();
+    document.execCommand('copy');
+    inputElement.setSelectionRange(0, 0);
+
+    if (inputElement.setSelectionRange) {
+      this.toastr.success("Link Copy Succesfully");
+    }
+  }
+}
@@ -0,0 +1,115 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+import { ApiRequestService } from 'src/app/services/api/api-request.service';
+import baseUrl from 'src/app/services/api/helper';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MyworkspaceService {
+  public localStorage: Storage = localStorage;
+  constructor(private _http: HttpClient,private apiRequest: ApiRequestService) { }
+  public add(r: any){
+    return this._http.post(`${baseUrl}/api/menu-register`, r);
+  }
+
+  public getall(){
+    return this._http.get(`${baseUrl}/Workspace_team/SecTeam/AccountId`);
+  }
+  public getalluser(){
+    return this._http.get(`${baseUrl}/User_workSpace/GetAllUser`);
+  }
+  public getallguest(){
+    return this._http.get(`${baseUrl}/User_workSpace/GetAllGuest`);
+  }
+  public adduser(email:any){
+    let params: HttpParams = new HttpParams();
+    params = params.append("email", email);
+    return this._http.post(`${baseUrl}/api/userviaadmin`,params);
+  }
+  storeEmail(email: string) {
+    this.localStorage.setItem("registeredEmail", email);
+  }
+  //Store userinfo from session storage
+
+  //Get email from session storage ( WILL REMOVE AFTER REGISTER)
+  getStoredEmail(): string | null {
+    try {
+      let email: string = this.localStorage.getItem(
+       "registeredEmail"
+      );
+      if (email) {
+        return email;
+      } else {
+        return null;
+      }
+    } catch (e) {
+      return null;
+    }
+  }
+  adduserdetails(data:any,token:any):Observable<any>{
+    return this._http.post(`${baseUrl}/api/admin/adduser/${token}`,data);
+  }
+
+  addguest(email:any,duration:any){
+    let params: HttpParams = new HttpParams();
+    params = params.append("email", email);
+    params=params.append("access_duration",duration)
+    return this._http.post(`${baseUrl}/api/guest_via_admin`,params);
+  }
+
+  addguestdetails(data:any,token:any):Observable<any>{
+    return this._http.post(`${baseUrl}/api/admin/addguest/${token}`,data);
+  }
+  addteam(data:any){
+    return this._http.post(`${baseUrl}/Workspace_team/SecTeam`,data);
+  }
+  public getallteammeme(id:any){
+    return this._http.get(`${baseUrl}/User_workSpace/GetAllMember/${id}`);
+  }
+  getallusertosameaccid(){
+    return this._http.get(`${baseUrl}/User_workSpace/GetAll/AccountId`);
+  }
+  addteammem(id:any,user_id:any,data:any){
+    return this._http.post(`${baseUrl}/User_workSpace/add_team/${id}/${user_id}`,data);
+  }
+  getallworkspace(){
+    return this._http.get(`${baseUrl}/Workspace_workspace/FindByaccount`);
+  }
+  addsecworkspaceuser(usrid:any,id:any,data:any,){
+    return this._http.post(`${baseUrl}/workspace/secworkspaceuser/add_workspace/users/${usrid}/${id}`,data);
+  }
+  addsecworkteam(pid:any,tid:any,data:any){
+    return this._http.post(`${baseUrl}/workspace/secworkspaceuser/addteam/${pid}/${tid}`,data);
+  }
+  getallsecworkspace(id:any):Observable<any>{
+    return this._http.get(`${baseUrl}/workspace/secworkspaceuser/get_by_projectid/${id}`);
+  }
+  // public getById(id: any){
+  //   return this._http.get(`${baseUrl}/api/menu-register/${id}`);
+  // }
+
+  // public update(id:any, reg:any){
+  //   return this._http.put(`${baseUrl}/api/menu-register/${id}`, reg);
+  // }
+
+  // public deleteById(id: any){
+  //   return this._http.delete(`${baseUrl}/api/menu-register/${id}`);
+  // }
+
+
+
+////////////////////project users
+
+addprojectuser(userId: any, projectId: any, duration: any, role: string):Observable<any> {
+  const params = new HttpParams().set('role', role);
+  return this._http.post(`${baseUrl}/workspace/secworkspaceuser/add_workspace/users/${userId}/${projectId}/${duration}`, {}, { params });
+}
+
+///for team
+public addprojectteam(projectId:any,teamId:any){
+  return this._http.post(`${baseUrl}/workspace/secworkspaceuser/addteam/${projectId}/${teamId}`, {});
+}
+}
@@ -0,0 +1,43 @@
+<div class="container">
+  <div class="display_msg">
+    <h2>Please Reset Your Password</h2>
+    <p>you're signed in as {{ email }}</p>
+    <br>
+
+    <form class="form" [formGroup]="resetPasswordForm" (ngSubmit)="onSubmit()">
+      <label><b>Enter Old Password</b></label><br>
+      <input class="form__field" type="password" [type]="oldpHide ? 'password': 'text'" formControlName="oldPassword"
+        placeholder="Enter Old Password" />
+      <clr-icon [attr.shape]="oldIcon" (click)="oldShapeChanger()"></clr-icon>
+      <div *ngIf="f.oldPassword.invalid && (f.oldPassword.dirty || f.oldPassword.touched)"
+        style="color:indianred; font-weight: bold">
+        <div *ngIf="f.oldPassword.errors.required">Password is required</div>
+      </div>
+      <br>
+      <label><b>Enter New Password</b></label><br>
+      <input class="form__field" type="password" [type]="newpHide ? 'password': 'text'" formControlName="newPassword"
+        placeholder="Enter New Password" />
+      <clr-icon [attr.shape]="newIcon" (click)="newShapeChanger()"></clr-icon>
+      <div *ngIf="f.newPassword.invalid && (f.newPassword.dirty || f.newPassword.touched)"
+        style="color:indianred; font-weight: bold">
+        <div *ngIf="f.newPassword.errors.required">password is required</div>
+        <div *ngIf="f.newPassword.errors.minlength">Password must be Minimum 3 Characters</div>
+      </div>
+      <br>
+      <label><b>Re-Enter New Password</b></label><br>
+      <input class="form__field" type="password" [type]="cpHide ? 'password': 'text'" formControlName="confirmPassword"
+        placeholder="Re-Enter  New Password" />
+      <clr-icon [attr.shape]="conIcon" (click)="comfShapeChanger()"></clr-icon>
+      <div *ngIf="f.confirmPassword.invalid && (f.confirmPassword.dirty || f.confirmPassword.touched)"
+        style="color:indianred; font-weight: bold">
+        <div *ngIf="f.confirmPassword.errors.required">Password is required.</div>
+        <div *ngIf="f.confirmPassword.errors.confirmedValidator">Password and Confirm Password must be match.</div>
+      </div>
+      <br>
+      <button type="submit" class="btn btn--primary uppercase" [disabled]="!resetPasswordForm.valid">continue</button>
+    </form>
+    <br>
+    <br>
+    <p> Wrong account? <a routerLink="/login">Log in</a> instead.</p>
+  </div>
+</div>
@@ -0,0 +1,83 @@
+//@import '../../../../../styles1.scss';
+
+
+//** variables
+$background: #f5f6fa;
+$text: #9c9c9c;
+$input-bg-color: #fff;
+$input-text-color: #a3a3a3;
+$button-bg-color: #7f8ff4;
+$button-text-color: #fff;
+$google-button-bg-color: #7f8ff4;
+$linkedin-button-bg-color: #4b76eb;
+
+//** root
+:root {
+	background: $background;
+	color: $text;
+	font: 1rem "PT Sans", sans-serif;
+}
+
+//** helper
+.display_msg {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.form {
+	/* margin-left: auto;
+	margin-right: auto; */
+	 &__field {
+	// 	width: 360px;
+	// 	//background: #fff;
+	// 	color: $input-text-color;
+	// 	font: inherit;
+	// 	//box-shadow: 0 6px 10px 0 rgba(0, 0, 0 , .1);
+	// 	border: 1 solid rgb(235, 230, 230);
+  //   background-color:rgb(255, 255, 255);
+  // display: inline-block;
+  //   border-radius: 4px;
+  // box-sizing: border-box;
+	// 	//outline: 0;
+	// 	padding: 6px 9px;
+  width: 360px;
+  padding: 9px 11px;
+ // margin: 3px 0;
+ background-color:rgb(255, 255, 255);
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+	}
+}
+
+.btn {
+	display: inline-block;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	border: 0;
+	outline: 0;
+	padding: 0;
+	transition: all 200ms ease-in;
+	cursor: pointer;
+
+	&--primary {
+		background: $button-bg-color;
+		color: $button-text-color;
+		box-shadow: 0 0 10px 2px rgba(0, 0, 0, .1);
+		border-radius: 2px;
+		width: 100%;
+
+		&:hover {
+			background: darken($button-bg-color, 4%);
+		}
+
+		&:active {
+			background: $button-bg-color;
+			box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, .2);
+		}
+	}
+}
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PasswordResetComponent } from './password-reset.component';
+
+describe('PasswordResetComponent', () => {
+  let component: PasswordResetComponent;
+  let fixture: ComponentFixture<PasswordResetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PasswordResetComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PasswordResetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,109 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { UserRegistrationService } from 'src/app/services/admin/user-registration.service';
+import { UserInfoService } from 'src/app/services/user-info.service';
+
+export interface ResetPasswordRequest {
+  oldPassword: string;
+  newPassword: string;
+}
+@Component({
+  selector: 'app-password-reset',
+  templateUrl: './password-reset.component.html',
+  styleUrls: ['./password-reset.component.scss']
+})
+export class PasswordResetComponent implements OnInit {
+
+  emailErrMsg: string = ""
+  oldpHide: boolean = true;
+  oldIcon: string = "eye";
+  oldShapeChanger() {
+    this.oldpHide = !this.oldpHide;
+    if(this.oldpHide){
+      this.oldIcon = 'eye'
+    } else {
+      this.oldIcon = 'eye-hide'
+    }
+  }
+  newpHide: boolean = true;
+  newIcon: string = "eye";
+  newShapeChanger() {
+    this.newpHide = !this.newpHide;
+    if(this.newpHide){
+      this.newIcon = 'eye'
+    } else {
+      this.newIcon = 'eye-hide'
+    }
+  }
+  cpHide: boolean = true;
+  conIcon: string = "eye";
+  comfShapeChanger() {
+    this.cpHide = !this.cpHide;
+    if(this.cpHide){
+      this.conIcon = 'eye'
+    } else {
+      this.conIcon = 'eye-hide'
+    }
+  }
+
+  constructor( private _fb: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute,
+    private userRegistrationService: UserRegistrationService,
+    private userInfoService: UserInfoService) { }
+
+    email: string;
+    resetPasswordForm: FormGroup;
+userid;
+  ngOnInit(): void {
+    this.email = this.userInfoService.getEmail();
+    this.userid=this.userInfoService.getUserId();
+    console.log(this.userid);
+
+    this.resetPasswordForm = this._fb.group({
+      userId:this.userid,
+      oldPassword: ['', Validators.required],
+      newPassword: ['', [Validators.required, Validators.minLength(3)]],
+      confirmPassword: ['', [Validators.required]]
+    }, {
+      validator: ConfirmedValidator('newPassword', 'confirmPassword')
+    });
+  }
+  get f() { return this.resetPasswordForm.controls; }
+
+  submitted = false;
+  onSubmit() {
+    console.log('this.resetPasswordForm.value : ', this.resetPasswordForm.value);
+    this.submitted = true;
+    if(this.resetPasswordForm.invalid){
+      return;
+    }
+    this.resetPassword();
+  }
+
+  resetPassword() {
+    this.userRegistrationService.resetPassword(this.resetPasswordForm.value)
+      .subscribe((res) => {
+        console.log('success ', res);
+        this.router.navigate(["../user-account"], { relativeTo: this.route });
+        },(err) => {
+          console.log('failure ', err);
+      });
+  }
+}
+
+export function ConfirmedValidator(controlName: string, matchingControlName: string){
+  return (formGroup: FormGroup) => {
+      const control = formGroup.controls[controlName];
+      const matchingControl = formGroup.controls[matchingControlName];
+      if (matchingControl.errors && !matchingControl.errors.confirmedValidator) {
+          return;
+      }
+      if (control.value !== matchingControl.value) {
+          matchingControl.setErrors({ confirmedValidator: true });
+      } else {
+          matchingControl.setErrors(null);
+      }
+  }
+}
@@ -0,0 +1,266 @@
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"> <clr-icon shape="home"></clr-icon></a></li>
+  <li><a href="javascript://"> <clr-icon shape="user"></clr-icon>  Profile Settings</a></li>
+</ol>
+<br>
+
+
+ <!-- <div class="pad-16" *ngIf="userProfile">
+  <h3><b>My Profile Settings</b></h3>
+  <br />
+  <div *ngIf="image; else def">
+    <img [src]="image" alt="Avatar" style="height:100px;width:100px;border-radius:50%;">
+  </div>
+  <ng-template #def>
+    <img src="../../../assets/images/profile-icon.png" alt="Avatar" style="height:100px;width:100px;border-radius:50%;">
+  </ng-template>
+  <div *ngIf="message" style="color:indianred; font-weight: bold"> {{ message }}</div>
+  <input
+    style="display: none"
+    type="file" accept="image/*"
+    (change)="onSelectFile($event)"
+    #fileInput>
+    <a (click)="fileInput.click()">upload your photo</a>
+
+
+  <section class="form-block" style="margin-top:32px">
+      <form (ngSubmit)="onSubmit()">
+
+
+
+          <table>
+              <tr>
+                  <td>Your Full Name: </td>
+                  <td colspan="2"><input type="text" name="fullName" [(ngModel)]="userProfile.fullName"></td>
+              </tr>
+              <tr>
+                  <td>Pronouns</td>
+                  <td colspan="2"><input type="text" name="pronouns" [(ngModel)]="userProfile.pronouns"> </td>
+              </tr>
+              <tr>
+                  <td>Role:</td>
+                  <td colspan="2"><input type="text" name="role" [(ngModel)]="userProfile.role"> </td>
+              </tr>
+              <tr>
+                  <td>Department or Team</td>
+                  <td><input colspan="2" type="text" name="department" [(ngModel)]="userProfile.department" style="width:180px" /></td>
+              </tr>
+              <tr>
+                  <td style="width:125px;">Email </td>
+                  <td>
+                      <input colspan="2" readonly type="text" name="email" [(ngModel)]="userProfile.email" style="width:180px" />
+                  </td>
+              </tr>
+              <tr>
+                <td style="width:125px;">About Me </td>
+                <td>
+                    <textarea colspan="2" rows="4" cols="50" name="about" [(ngModel)]="userProfile.about" style="width:180px"></textarea>
+                </td>
+            </tr>
+          </table>
+          <br>
+          <button type="submit" form-control class="btn btn-primary">UPDATE</button>
+      </form>
+  </section>
+</div> -->
+
+
+
+<div class="pad-16">
+  <h3><b>My Profile Settings</b></h3>
+
+  <div  *ngIf="image; else def">
+    <img [src]="image" alt="Avatar" style="height:100px;width:100px;border-radius:50%;">
+  </div>
+  <ng-template #def>
+    <img src="../../../../assets/images/profile-icon.png" alt="Avatar" style="height:100px;width:100px;border-radius:50%;">
+  </ng-template>
+  <div *ngIf="message" style="color:indianred; font-weight: bold"> {{ message }}</div>
+  <input
+    style="display: none"
+    type="file" accept="image/*"
+    (change)="onSelectFile($event)"
+    #fileInput>
+    <button class="btn btn-primary"> <a (click)="fileInput.click()">upload your photo</a></button>
+<button class="btn btn-primary" (click)="openmodal()">cropimage</button>
+
+
+
+
+  <section class="form-block" style="margin-top:20px">
+
+      <form (ngSubmit)="onSubmit()" *ngIf="userProfile">
+        <div class="clr-row">
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="projectName">Your Full Name</label>
+            <input id="projectName" type="text"  placeholder="Enter full Name"  name="fullName" [(ngModel)]="userProfile.fullName"
+              class="clr-input">
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="projectName">Pronouns</label>
+            <input id="projectName" type="text"  placeholder="Enter Pronouns" name="pronouns" [(ngModel)]="userProfile.pronouns"
+              class="clr-input">
+          </div>
+          <div class="clr-col-md-4 clr-col-sm-12">
+            <label for="projectName">Role</label>
+            <input id="projectName" type="text"  placeholder="Enter Role" name="role" [(ngModel)]="userProfile.role"
+              class="clr-input">
+          </div>
+          </div>
+          <div class="clr-row">
+            <div class="clr-col-md-4 clr-col-sm-12">
+              <label for="projectName">Department or Team</label>
+              <input id="projectName" type="text"  placeholder="Enter Department"  name="department" [(ngModel)]="userProfile.department"
+                class="clr-input">
+            </div>
+            <div class="clr-col-md-4 clr-col-sm-12">
+              <label for="projectName">Email</label>
+              <input id="projectName" type="text"  placeholder="Enter email" name="email" [(ngModel)]="userProfile.email"
+                class="clr-input">
+            </div>
+            </div>
+            <div class="clr-row">
+            <div class="clr-col-md-4 clr-col-sm-12">
+              <label for="projectName">About Me</label>
+              <textarea  id="" cols="10" rows="2"  name=" about"  placeholder="Enter Description" name="about" [(ngModel)]="userProfile.about">
+              </textarea>
+
+
+            </div>
+            </div>
+
+          <br>
+          <button type="submit" form-control class="btn btn-primary">UPDATE</button>
+      </form>
+  </section>
+
+  <hr>
+<!-- PASSWORD RESET -->
+<section class="form-block" style="margin-top:32px">
+  <table>
+    <tr>
+      <td><b>Password:</b> </td><br />
+      <td>Change Password for your account <a routerLink="../passwordreset">Change password</a></td>
+      <!--routerLink="../reset-password"  (click)="goToResetPassword() -->
+    </tr>
+  </table>
+</section>
+<hr>
+
+<!-- KILL SESSION -->
+<section class="form-block" style="margin-top:32px">
+  <table>
+    <tr>
+      <td><b>Security: </b> </td><br>
+      <td>Logout of all sessions except this current browser <a routerLink="../../login">Logout other
+            sessions</a></td>
+    </tr>
+  </table>
+</section>
+<hr>
+
+<!-- DEACTIVATE ACCOUNT -->
+<section class="form-block" style="margin-top:32px">
+  <table>
+    <tr>
+      <td><b>Deactivation: </b> </td><br />
+      <td>Remove access to all organizations and workspace in cloudnsure  <a
+            routerLink="/deactivate-account">Deactivate account</a></td>
+    </tr>
+  </table>
+</section>
+
+</div>
+<!-- <hr>
+<h2 style="text-align:center ;">Crop Image</h2>
+<div style="text-align:center ;"><input type="file" (change)="fileChangeEvent($event)" /></div>
+
+<br />
+<button class="btn btn-primary" (click)="rotateLeft()">Rotate left</button>
+<button class="btn btn-primary" (click)="rotateRight()">Rotate right</button>
+<button class="btn btn-primary" (click)="flipHorizontal()">Flip horizontal</button>
+<button class="btn btn-primary" (click)="flipVertical()">Flip vertical</button>
+<button class="btn btn-primary" (click)="toggleContainWithinAspectRatio()">{{containWithinAspectRatio?'Fill Aspect Ratio':'Contain Within Aspect Ratio'}}</button>
+<button class="btn btn-primary" (click)="zoomOut()">Zoom -</button> <button class="btn btn-primary" (click)="zoomIn()">Zoom +</button>
+<br>
+<div class="clr-col-md-4 clr-col-sm-12">
+  <input class="clr-input" [(ngModel)]="rotation" placeholder="Rotation" type="number" (keyup)="updateRotation()" />
+</div>
+
+ <image-cropper
+    [imageChangedEvent]="imageChangedEvent"
+    [maintainAspectRatio]="true"
+    [aspectRatio]="4 / 3"
+    format="png"
+    (imageCropped)="imageCropped($event)"
+
+    (cropperReady)="cropperReady()"
+    (loadImageFailed)="loadImageFailed()"
+></image-cropper>
+
+ <image-cropper
+[imageChangedEvent]="imageChangedEvent"
+[maintainAspectRatio]="true"
+[containWithinAspectRatio]="containWithinAspectRatio"
+[aspectRatio]="4 / 3"
+[resizeToWidth]="256"
+[cropperMinWidth]="128"
+[onlyScaleDown]="true"
+[roundCropper]="false"
+[canvasRotation]="canvasRotation"
+[transform]="transform"
+[alignImage]="'left'"
+[style.display]="showCropper ? null : 'none'"
+format="png"
+(imageCropped)="imageCropped($event)"
+(imageLoaded)="imageLoaded()"
+(cropperReady)="cropperReady($event)"
+(loadImageFailed)="loadImageFailed()"
+></image-cropper>
+<img [src]="croppedImage" />
+ -->
+
+
+
+<clr-modal [(clrModalOpen)]="model" [clrModalSize]="'lg'">
+  <h3 class="modal-title"><b>Profile Photo</b></h3>
+  <div class="modal-body">
+    <!-- <div  *ngIf="image; else def" style="text-align: center;">
+      <img [src]="image" alt="Avatar" style="height:278px;width:278x;border-radius:50%;">
+    </div>
+    <hr> -->
+    <input type="file" (change)="fileChangeEvent($event)" />
+    <br>
+    <image-cropper
+[imageChangedEvent]="imageChangedEvent"
+[maintainAspectRatio]="true"
+[containWithinAspectRatio]="containWithinAspectRatio"
+[aspectRatio]="4 / 3"
+[resizeToWidth]="256"
+[cropperMinWidth]="128"
+[onlyScaleDown]="true"
+[roundCropper]="false"
+[canvasRotation]="canvasRotation"
+[transform]="transform"
+[alignImage]="'left'"
+[style.display]="showCropper ? null : 'none'"
+format="png"
+(imageCropped)="imageCropped($event)"
+(imageLoaded)="imageLoaded()"
+(cropperReady)="cropperReady($event)"
+(loadImageFailed)="loadImageFailed()"
+
+></image-cropper>
+    <button class="btn btn-primary" (click)="toggleContainWithinAspectRatio()"><i class="fa fa-percent"></i></button>
+    <button class="btn btn-primary" (click)="rotateLeft()"><i class="fa fa-rotate-left"></i></button>
+    <button class="btn btn-primary" (click)="rotateRight()"> <i class="fa fa-rotate-right"></i></button>
+    <button class="btn btn-primary" (click)="flipVertical()"><clr-icon shape="ellipsis-vertical"></clr-icon></button>
+   <button class="btn btn-primary" (click)="flipHorizontal()"><clr-icon shape="ellipsis-horizontal"></clr-icon></button>
+   <button class="btn btn-primary" (click)="zoomOut()"><clr-icon shape="minus-circle"></clr-icon></button>
+   <button class="btn btn-primary" (click)="zoomIn()"><clr-icon shape="plus-circle"></clr-icon></button>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-outline" (click)="model = false">Cancel</button>
+      <button type="submit" class="btn btn-primary" (click)="picUpload()">Upload</button>
+    </div>
+  </div>
+</clr-modal>
@@ -0,0 +1,10 @@
+input[type=text],[type=date],textarea,[type=number] {
+  width: 100%;
+  padding: 15px 15px;
+ // margin: 8px 0;
+ background-color:rgb(255, 255, 255);
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileSettingComponent } from './profile-setting.component';
+
+describe('ProfileSettingComponent', () => {
+  let component: ProfileSettingComponent;
+  let fixture: ComponentFixture<ProfileSettingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProfileSettingComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProfileSettingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,223 @@
+
+import { HttpClient, HttpEventType } from '@angular/common/http';
+import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { UserProfile, UserProfileService } from '../../../../services/admin/user-profile.service';
+import { DomSanitizer } from '@angular/platform-browser';
+import { AlertService } from '../../../../services/alert.service';
+import { ToastrService } from 'ngx-toastr';
+import { Dimensions, ImageCroppedEvent, ImageTransform } from 'ngx-image-cropper';
+//import { ImageCroppedEvent } from '../image-cropper/interfaces/image-cropped-event.interface';
+//import { ImageCropperComponent } from '../image-cropper/component/image-cropper/image-cropper.component';
+@Component({
+  selector: 'app-profile-setting',
+  templateUrl: './profile-setting.component.html',
+  styleUrls: ['./profile-setting.component.scss']
+})
+export class ProfileSettingComponent implements OnInit {
+  updated = false;
+  userProfile: UserProfile;
+  roles = ['user', 'admin', 'mis report', 'bi report'];
+  transform: ImageTransform = {};
+  model=false;
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private userProfileService: UserProfileService,
+    private http: HttpClient,
+    private alertService: AlertService,
+    private _sanitizer: DomSanitizer,
+    private toastr: ToastrService,
+  ) { }
+
+  ngOnInit(): void {
+
+    this.getUserProfile();
+    this.getProfilePic();
+  }
+  getUserProfile() {
+    this.userProfileService.getUserProfile().subscribe(res => {
+      console.log(res);
+      this.userProfile = res;
+    })
+  }
+
+  update() {
+    this.userProfileService.updateUserProfile(this.userProfile).subscribe(
+      (resp) => {
+        console.log(resp);
+        //this.router.navigate(["../../all"], { relativeTo: this.route });
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+    //this.picUpload();
+  }
+
+  public profilePic: File = null;
+  onSelectFile(event) {
+    let flag = 0;
+    const mimeType = event.target.files[0].type;
+    if(mimeType.match(/image\/*/) === null ){
+      this.message = 'Only Image Type Is Supported';
+      flag = flag + 1;
+      return;
+    }
+    const size = event.target.files[0].size;
+    if(size > 5000000) {
+      flag = flag + 1;
+      this.message = 'Plese Select image file under 2 MB';
+      return;
+    }
+    console.log('flag value = ', flag);
+    if(flag === 0) {
+      this.profilePic = <File> event.target.files[0];
+      console.log(this.profilePic);
+      const reader = new FileReader();
+      this.image = this.profilePic;
+      reader.readAsDataURL(this.profilePic);
+      reader.onload = (_event) => {
+      this.image = reader.result;
+      }
+      this.picUpload();
+    }
+
+  }
+
+  message: string;
+  picUpload() {
+    this.userProfileService.uploadUserProfilePic(this.profilePic).subscribe(res => {
+      console.log(res);
+      if(res.type === HttpEventType.UploadProgress){
+        console.log('Upload Progress : ', + Math.round(res.loaded / res.total * 100) + '%');
+      } else if(res.type === HttpEventType.Response) {
+        if (res.status === 200) {
+          this.alertService.success('Image uploaded successfully');
+          //this.message = 'Image uploaded successfully';
+        } else {
+          this.message = 'Image not uploaded';
+        }
+      }
+    }, err => {console.log(err);
+    });
+  }
+  image: any;
+  getProfilePic() {
+    this.userProfileService.getProfilePic().subscribe(res => {
+      console.log(res);
+      this.image = this._sanitizer.bypassSecurityTrustResourceUrl(res.image);
+    }, err => {console.log(err);}
+    );
+  }
+
+  /*picUpload() {
+    const uploadImageData = new FormData();
+    uploadImageData.append('imageFile', this.profilePic, this.profilePic.name);
+    this.http.post('http://localhost:9119/api/upload', uploadImageData, { observe: 'response' })
+      .subscribe((res) => {
+        console.log(res);
+        if (res.status === 200) {
+          this.message = 'Image uploaded successfully';
+        } else {
+          this.message = 'Image not uploaded successfully';
+        }
+      }
+      );
+  }*/
+
+
+  onSubmit() {
+    this.updated = true;
+    this.update();
+  }
+  imageChangedEvent: any = '';
+    croppedImage: any = '';
+    canvasRotation = 0;
+    rotation = 0;
+    scale = 1;
+    showCropper = false;
+    containWithinAspectRatio = false;
+    fileChangeEvent(event: any): void {
+        this.imageChangedEvent = event;
+    }
+    imageCropped(event: ImageCroppedEvent) {
+        this.croppedImage = event.base64;
+        this.profilePic=this.croppedImage;
+
+    }
+     imageLoaded() {
+      this.showCropper = true;
+      console.log('Image loaded');
+     }
+
+    cropperReady(sourceImageDimensions: Dimensions) {
+      console.log('Cropper ready', sourceImageDimensions);
+  }
+    loadImageFailed() {
+        // show message
+    }
+    rotateLeft() {
+      this.canvasRotation--;
+      this.flipAfterRotate();
+  }
+
+  rotateRight() {
+      this.canvasRotation++;
+      this.flipAfterRotate();
+  }
+
+  private flipAfterRotate() {
+      const flippedH = this.transform.flipH;
+      const flippedV = this.transform.flipV;
+      this.transform = {
+          ...this.transform,
+          flipH: flippedV,
+          flipV: flippedH
+      };
+  }
+
+
+  flipHorizontal() {
+      this.transform = {
+          ...this.transform,
+          flipH: !this.transform.flipH
+      };
+  }
+
+  flipVertical() {
+      this.transform = {
+          ...this.transform,
+          flipV: !this.transform.flipV
+      };
+  }
+  zoomOut() {
+    this.scale -= .1;
+    this.transform = {
+        ...this.transform,
+        scale: this.scale
+    };
+}
+
+zoomIn() {
+    this.scale += .1;
+    this.transform = {
+        ...this.transform,
+        scale: this.scale
+    };
+}
+
+toggleContainWithinAspectRatio() {
+    this.containWithinAspectRatio = !this.containWithinAspectRatio;
+}
+
+updateRotation() {
+    this.transform = {
+        ...this.transform,
+        rotate: this.rotation
+    };
+}
+openmodal(){
+  this.model=true;
+}
+}
@@ -0,0 +1,99 @@
+
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
+  <li><a href="" > <clr-icon shape="eye"></clr-icon>Log Management</a></li>
+  <li><a href="" > Session Logger</a></li>
+
+
+</ol>
+
+
+<div class="dg-wrapper">
+  <div class="clr-row">
+    <div class="clr-col-8">
+      <h3>Session Logger</h3>
+  </div>
+    <div class="clr-col-4" style="text-align: right;">
+
+      <button class="btn btn-outline" (click)="onExport()">
+        <clr-icon shape="export"></clr-icon> xlsx
+      </button>
+
+    </div>
+  </div>
+
+
+
+
+
+
+
+  <clr-datagrid [clrDgLoading]="loading">
+    <clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
+      <div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>
+
+    <clr-dg-column [clrDgField]="'clientIp'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      Client Ip
+    </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'lastAccessDate'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      lastAccessDate
+    </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'logintime'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      Log In Time
+    </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'logouttime'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      Log Out Time
+    </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'creationdate'" style="width: 320px;"><ng-container *clrDgHideableColumn="{hidden: false}">
+      Session Id
+      </ng-container></clr-dg-column >
+    <clr-dg-column [clrDgField]="'logFileName'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      User Id
+    </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'status'"> <ng-container *clrDgHideableColumn="{hidden: false}">
+      User Name
+    </ng-container></clr-dg-column>
+
+
+
+
+
+    <clr-dg-row *clrDgItems="let user of data;let i = index" [clrDgItem]="user">
+      <clr-dg-cell>{{user.clientIp}}</clr-dg-cell>
+      <clr-dg-cell>{{user.lastAccessDate}}</clr-dg-cell>
+      <clr-dg-cell>{{user.logintime}} </clr-dg-cell>
+      <clr-dg-cell>{{user.logouttime}}</clr-dg-cell>
+      <clr-dg-cell >{{user.sessionId}}</clr-dg-cell>
+      <clr-dg-cell>{{user.userId.userId}}</clr-dg-cell>
+      <clr-dg-cell>{{user.userId.username}}</clr-dg-cell>
+
+      <clr-dg-action-overflow>
+
+        <button class="action-item"  (click)="modaldel(user)">Delete</button>
+
+      </clr-dg-action-overflow>
+
+
+    </clr-dg-row>
+
+    <clr-dg-footer>
+      <clr-dg-pagination #pagination [clrDgPageSize]="10">
+        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
+        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+        of {{pagination.totalItems}} Records
+      </clr-dg-pagination>
+    </clr-dg-footer>
+  </clr-datagrid>
+</div>
+
+<clr-modal [(clrModalOpen)]="modaldelete"  [clrModalStaticBackdrop]="true">
+
+  <div class="modal-body" *ngIf="rowSelected?.userId?.userId">
+    <h1 class="delete">Are You Sure Want to delete?</h1>
+    <h2 class="heading">{{rowSelected.userId.userId}}</h2>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
+      <button type="button"  class="btn btn-primary" (click)="delete(rowSelected.userId.userId)">Delete</button>
+    </div>
+  </div>
+</clr-modal>
@@ -0,0 +1,4 @@
+.delete,.heading{
+  text-align: center;
+  color: red;
+}
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SessionloggerComponent } from './sessionlogger.component';
+
+describe('SessionloggerComponent', () => {
+  let component: SessionloggerComponent;
+  let fixture: ComponentFixture<SessionloggerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SessionloggerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SessionloggerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,69 @@
+import { Component, OnInit } from '@angular/core';
+import { SessionloggerService } from 'src/app/services/admin/sessionlogger.service';
+import * as moment from 'moment';
+import { ExcelService } from 'src/app/services/excel.service';
+import { ToastrService } from 'ngx-toastr';
+import { HttpErrorResponse } from '@angular/common/http';
+@Component({
+  selector: 'app-sessionlogger',
+  templateUrl: './sessionlogger.component.html',
+  styleUrls: ['./sessionlogger.component.scss']
+})
+export class SessionloggerComponent implements OnInit {
+  loading = false;
+  error;
+  data;
+  modaldelete=false;
+  rowSelected :any= {};
+  constructor(private sessionservice:SessionloggerService,private excel: ExcelService,
+    private toastr: ToastrService,) { }
+
+  ngOnInit(): void {
+    this.getdata();
+  }
+  getdata(){
+    this.sessionservice.getAll().subscribe((data)=>{
+      this.data=data;
+      console.log(this.data);
+      if(this.data.length==0){
+        this.error="No data Available plz add if Required";
+        console.log(this.error)
+      }
+    },(error) => {
+      console.log(error);
+      if(error){
+       this.error="server Error";
+     }
+    });
+
+
+  }
+  onExport(){
+    this.excel.exportAsExcelFile(this.data, 'user_',
+    moment().format('YYYYMMDD_HHmmss'))
+  }
+  modaldel(row){
+    this.rowSelected = row;
+    this.modaldelete=true;
+    console.log(this.rowSelected);
+  }
+  delete(id)
+  {
+    console.log("in delete  "+id);
+    this.sessionservice.delete(id).subscribe(
+      (data) => {
+        console.log(data);
+        //this.ngOnInit();
+      },(error:HttpErrorResponse) => {
+        console.log(error);
+        if(error.status==200){
+         this.toastr.success(error.error.text);
+       }
+       if(error.status==404){
+        this.toastr.error(error.error);
+      }
+
+      });
+      this.modaldelete=false;
+  }
+}
@@ -0,0 +1,250 @@
+
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
+  <li><a href="javascript://"><clr-icon shape="lock"></clr-icon>Security</a></li>
+  <li><a href="javascript://">Menu Maintenance</a></li>
+  <li><a href="javascript://">Sub Menu</a></li>
+</ol>
+<!-- <label for=""><h3 style="font-weight: 300;display: inline;">Menu Maintenance</h3></label>
+<span class="label label-light-blue" style="display: inline;margin-left: 30px;">Sub Menu</span><br> -->
+
+
+<div class="clr-row" style="margin-top: 15px;">
+  <div class="clr-col-8">
+    <h3 style="font-weight: 300;display: inline;">Sub-Menu Maintenance </h3>
+    <span class="label label-light-blue" style="display: inline;margin-left: 30px;">Sub Menu</span><br>
+
+</div>
+  <div class="clr-col-4" style="text-align: right;">
+    <button id="add" class="btn btn-primary" (click)="goToAdd()">
+      <clr-icon shape="plus"></clr-icon>ADD New
+    </button>
+  </div>
+</div>
+
+
+
+  <clr-datagrid [clrDgLoading]="loading"  >
+    <clr-dg-placeholder><clr-spinner [clrMedium]="true">Loading ...</clr-spinner></clr-dg-placeholder>
+
+    <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+      NO.
+    </ng-container></clr-dg-column>
+    <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+      Sub-Menu Item Name
+    </ng-container></clr-dg-column>
+    <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+      ID
+    </ng-container></clr-dg-column>
+    <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+      Sequence
+    </ng-container></clr-dg-column>
+    <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+      Module Name
+    </ng-container></clr-dg-column>
+    <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+     Menu Action Link
+    </ng-container></clr-dg-column>
+    <clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
+      Status
+    </ng-container></clr-dg-column>
+
+    <clr-dg-row *clrDgItems="let user of sub;let i = index" [clrDgItem]="user">
+      <clr-dg-cell >{{i+1}}</clr-dg-cell>
+      <clr-dg-cell>{{user.menuItemDesc}}</clr-dg-cell>
+      <clr-dg-cell >{{user.menuId}}</clr-dg-cell>
+      <clr-dg-cell >{{user.itemSeq}}</clr-dg-cell>
+      <clr-dg-cell > {{user.moduleName}} </clr-dg-cell>
+      <clr-dg-cell > {{user.main_menu_action_name}}</clr-dg-cell>
+      <clr-dg-cell >{{user.status}} </clr-dg-cell>
+
+      <clr-dg-action-overflow>
+        <button class="action-item" (click)="goToEdit(user)">Edit <clr-icon shape="edit" class="is-error"></clr-icon></button>
+        <button class="action-item" (click)="onDelete(user)">Delete<clr-icon shape="trash" class="is-error"></clr-icon></button>
+                </clr-dg-action-overflow>
+
+                <clr-dg-row-detail *clrIfExpanded >
+                  <table class="table">
+                    <tr>
+                      <td class="td-title">Menu Name: </td>
+                      <td class="td-content">{{user.menuItemDesc}}</td>
+                    </tr>
+                  </table>
+                </clr-dg-row-detail>
+        </clr-dg-row>
+
+    <clr-dg-footer>
+      <clr-dg-pagination #pagination [clrDgPageSize]="10">
+        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
+        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+        of {{pagination.totalItems}} users
+      </clr-dg-pagination>
+    </clr-dg-footer>
+  </clr-datagrid>
+
+  <clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title">Add Sub Menu Maintenance</h3>
+    <div class="modal-body">
+          <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
+        <div class="clr-row">
+           <!-- <div class="clr-col-sm-12">
+            <label for="name">Menu Item ID<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" formControlName="menuItemId">
+          </div> -->
+          <div class="clr-col-sm-12">
+            <label for="name">Menu ID<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" formControlName="menuId" name="menuId" [(ngModel)]="mainid" readonly>
+          </div>
+          <div class="clr-col-sm-12">
+            <label for="name">Menu Item Name<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" formControlName="menuItemDesc">
+           <div *ngIf="submitted && entryForm.controls.menuItemDesc.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.menuItemDesc.errors.required" class="error_mess">*This field is Required</div>
+        </div>
+          </div>
+<!-- Existing HTML code -->
+
+<div class="clr-col-sm-12">
+  <label for="tags">Sequence</label>
+  <input type="text" class="clr-input" formControlName="itemSeq">
+  <div *ngIf="submitted && entryForm.controls.itemSeq.errors" class="error_mess">
+    <div *ngIf="submitted && entryForm.controls.itemSeq.errors.required" class="error_mess">*This field is Required</div>
+    <div *ngIf="submitted && entryForm.controls.itemSeq.errors.pattern" class="error_mess">*Must be a valid number</div>
+  </div>
+</div>
+
+<!-- Existing HTML code -->
+
+            <div class="clr-col-sm-12">
+              <label for="tags">Module Name</label>
+              <input type="text" class="clr-input" formControlName="moduleName">
+              <div *ngIf="submitted && entryForm.controls.moduleName.errors" class="error_mess">
+                <div *ngIf="submitted && entryForm.controls.moduleName.errors.required" class="error_mess">*This field is Required</div>
+            </div>
+              </div>
+            <div class="clr-col-sm-12">
+              <label for="tags">Status</label>
+              <select  id="" formControlName="status">
+                <option >Enable</option>
+                <option >Disable</option>
+                </select>
+                <div *ngIf="submitted && entryForm.controls.status.errors" class="error_mess">
+                  <div *ngIf="submitted && entryForm.controls.status.errors.required" class="error_mess">*This field is Required</div>
+              </div>
+              </div>
+              <div class="clr-col-sm-12">
+                <label for="tags">Menu Action Link</label>
+                <input type="text" class="clr-input" formControlName="main_menu_action_name">
+                <div *ngIf="submitted && entryForm.controls.main_menu_action_name.errors" class="error_mess">
+                  <div *ngIf="submitted && entryForm.controls.main_menu_action_name.errors.required" class="error_mess">*This field is Required</div>
+              </div>
+                <!-- <select NAME="menu_id" >
+                  <option SELECTED >Home Menu
+                          <OPTION >Home
+      <OPTION >Job
+
+      <OPTION >&nbsp;&nbsp;&nbsp;Job logs
+      <OPTION >&nbsp;&nbsp;&nbsp;Pending Jobs
+      <OPTION >&nbsp;&nbsp;&nbsp;Defined Jobs
+      <OPTION >&nbsp;&nbsp;&nbsp;Surewebsocket
+
+      <OPTION >Security
+      <OPTION >&nbsp;&nbsp;&nbsp;User Maintance
+      <OPTION >&nbsp;&nbsp;&nbsp;User Group Maintance
+      <OPTION >&nbsp;&nbsp;&nbsp;System parametrs
+      <OPTION >&nbsp;&nbsp;&nbsp;Menu access control
+      <OPTION >&nbsp;&nbsp;&nbsp;Menu Maintance
+
+      <OPTION >SureBoard
+      <OPTION >&nbsp;&nbsp;&nbsp;Road Map
+      <OPTION >&nbsp;&nbsp;&nbsp;Iteration Release
+      <OPTION >&nbsp;&nbsp;&nbsp;Milestone
+      <OPTION >&nbsp;&nbsp;&nbsp;Goal
+      <OPTION >&nbsp;&nbsp;&nbsp;Wbs Task Board
+
+
+      <OPTION >Projects
+      <OPTION >&nbsp;&nbsp;&nbsp;My projects
+      <OPTION >&nbsp;&nbsp;&nbsp;All Projects
+      <OPTION >&nbsp;&nbsp;&nbsp;Templates
+      <OPTION >&nbsp;&nbsp;&nbsp;Repositories
+      <OPTION >&nbsp;&nbsp;&nbsp;Recently Modify
+      <OPTION >&nbsp;&nbsp;&nbsp;Recently Archived
+      <OPTION >&nbsp;&nbsp;&nbsp;Shared with Me
+      <OPTION >&nbsp;&nbsp;&nbsp;My Fav
+
+
+
+      </select> -->
+                </div>
+        </div>
+        <br>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
+          <button type="submit" class="btn btn-primary" >ADD</button>
+          </div>
+  </form>
+    </div>
+
+  </clr-modal>
+
+  <clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+
+    <div class="modal-body" *ngIf="rowSelected.menuItemId">
+      <h1 class="delete">Are You Sure Want to delete?</h1>
+      <h2 class="heading">{{rowSelected.menuItemId}}</h2>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
+      <button type="submit" (click)="delete(rowSelected.menuItemId)" class="btn btn-primary" >Delete</button>
+      </div>
+    </div>
+  </clr-modal>
+
+
+  <clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title">Update Sub Menu Maintenance</h3>
+    <div class="modal-body" *ngIf="rowSelected.menuItemId">
+      <h2 class="heading">{{rowSelected.menuItemId}}</h2>
+          <form (ngSubmit)="onUpdate(rowSelected.menuItemId)">
+        <div class="clr-row">
+
+          <div class="clr-col-sm-12">
+            <label for="name">Menu ID<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" name="menuId" [(ngModel)]="rowSelected.menuId" readonly>
+          </div>
+          <div class="clr-col-sm-12">
+            <label for="name">Menu Item Name<span class="required-field">*</span></label>
+           <input type="text" class="clr-input" name="menuItemDesc" [(ngModel)]="rowSelected.menuItemDesc">
+          </div>
+          <div class="clr-col-sm-12">
+            <label for="tags">Sequence</label>
+            <input type="text" class="clr-input" name="itemSeq" [(ngModel)]="rowSelected.itemSeq">
+            </div>
+            <div class="clr-col-sm-12">
+              <label for="tags">Module Name</label>
+              <input type="text" class="clr-input" name="moduleName" [(ngModel)]="rowSelected.moduleName">
+              </div>
+            <div class="clr-col-sm-12">
+              <label for="tags">Status</label>
+              <select  id="" name="status" [(ngModel)]="rowSelected.status">
+                <option >Enable</option>
+                <option >Disable</option>
+                </select>
+              </div>
+              <div class="clr-col-sm-12">
+                <label for="tags">Menu Action Link</label>
+                <input type="text" class="clr-input" name="main_menu_action_name" [(ngModel)]="rowSelected.main_menu_action_name">
+
+                </div>
+        </div>
+        <br>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
+          <button type="submit" class="btn btn-primary" >Update</button>
+          </div>
+  </form>
+    </div>
+
+  </clr-modal>
+
+
@@ -0,0 +1,62 @@
+input[type=text],[type=date],[type=password],[type=number] {
+  width: 100%;
+  padding: 15px 20px;
+ // margin: 3px 0;
+ background-color:rgb(255, 255, 255);
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.required-field{
+  color: red;
+font-size: 18px;
+
+}
+.green{
+  background-color: rgb(156, 231, 156);
+  color: black;
+}
+.blue{
+  background-color: #57abcf;//rgb(82, 87, 161);
+  color: black;
+}
+.td-title {
+  text-align: center;
+  width: 150px;
+color: white;
+  font-weight: bold;
+  background-color: rgba(63, 122, 231, 0.863);
+  //color: rgb(24, 13, 13);
+}
+th{
+  //background-color:rgb(170, 169, 169);
+  font-weight: bold;
+}
+.td-content{
+  text-align: left;
+}
+.delete,.heading{
+  text-align: center;
+  color: red;
+}
+.section p {
+background-color: rgb(206, 201, 201);
+  padding: 10px;
+  font-size: 18px;
+}
+
+select{
+  width: 100%;
+  padding: 5px 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+input.ng-invalid.ng-touched {
+  border-color: red;
+}
+
+.error_mess {
+  color: red;
+}
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubmenuComponent } from './submenu.component';
+
+describe('SubmenuComponent', () => {
+  let component: SubmenuComponent;
+  let fixture: ComponentFixture<SubmenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SubmenuComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SubmenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["myworkspace.component.scss","myworkspace.component.css"],"names":[],"mappings":"AAWA;EACE,aAAA;EACA,mBAAA;EACA,8BAAA;ACVF;ADWE;EACE,aAAA;ACTJ;;ADYA;EACE,kBAAA;EACA,UAAA;ACTF;;ADWA;EACE,YAAA;ACRF;;ADWA;EACE,aAAA;ACRF;;ADUA;EACE,mBAAA;ACPF;;ADUA;EACE,yBAAA;EACA,YAAA;ACPF;;ADUA;EAEE,aAAA;EACA,eAAA;ACRF;;ADWA;EACE,cAAA;EACA,yBAAA;EACA,sBAAA;EACA,wBAAA;EACA,eAAA;EACA,WAAA;EACA,mBAAA;ACRF;;ADWA;EACE,cAAA;EACA,yBAAA;EACA,sBAAA;EAEA,eAAA;EACA,WAAA;EACA,mBAAA;ACTF;;ADYA;EACE,kBAAA;ACTF;;ADWA;EACE,WAAA;EACA,eAAA;EACA,gBAAA;EACA,sBAAA;EACA,kBAAA;ACRF;;ADUA;EACE,WAAA;EACA,kBAAA;EACA,oCAAA;EAEA,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,sBAAA;ACRF;;ADUA;EACE,UAAA;ACPF;;ADUA;EACE,UAAA;EACF,eAAA;ACPA","file":"myworkspace.component.css"}