tango-app-ui-shared 3.7.3-dev6-copilot → 3.7.3-dev6-demo7

package/src/lib/modules/layout/toolbar/classic/classic.component.scss

@@ -0,0 +1,238 @@
+.dropdown1 {
+    .dropdown-title {
+        color: var(--Gray-900, #101828);
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 24px
+    }
+
+    .dropdown {
+        position: relative;
+        display: inline-block;
+
+        span {
+            color: var(--Gray-700, #344054);
+            font-size: 14px;
+            font-weight: 600;
+            line-height: 20px;
+        }
+    }
+ 
+    .dropdown-content {
+        z-index: 1;
+        padding: 0px;
+        background-color: white;
+        border-radius: 8px;
+        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+        min-height: auto;
+        max-height: 250px;
+        overflow: auto;
+
+        label {
+            color: var(--Gray-700, #344054);
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 20px;
+        }
+    }
+
+    .dropdown-content a {
+        color: black;
+        padding: 12px 16px;
+        text-decoration: none;
+        display: block;
+    }
+
+    .dropdown button {
+        padding: 10px;
+        font-size: 16px;
+        cursor: pointer;
+    }
+
+    input[type='checkbox'] {
+        width: 16px !important;
+        height: 16px !important;
+        margin: -3px 5px;
+        border-radius: 4px !important;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        -o-appearance: none;
+        appearance: none;
+        outline: 1px solid var(--gray-300, #D0D5DD);
+        box-shadow: none;
+        font-size: 0.8em;
+        text-align: center;
+        line-height: 1em;
+        background: white;
+    }
+
+    input[type='checkbox']:checked {
+        outline: 1px solid var(--primary-600, #00A3FF);
+        background-color: var(--primary-50, #EAF8FF);
+    }
+
+    input[type='checkbox']:checked:after {
+        content: '';
+        transform: rotate(45deg);
+        border-bottom: 2px solid #00A3FF;
+        border-right: 2px solid #00A3FF;
+        display: inline-block;
+        width: 0.2em;
+        padding-left: 0px;
+        padding-top: 9px;
+        padding-right: 4px;
+    }
+}
+
+.daterangepicker {
+    display: block !important;
+    top: 153.85px !important;
+    left: 900px !important;
+    right: 0px;
+}
+.form-control {
+    color: var(--Gray-700, #344054) !important;
+    font-size: 14px !important;
+    font-weight: 600;   
+    line-height: 20px; 
+    text-transform: capitalize; 
+}
+::ng-deep .applyBtn {
+    display: none !important;
+  }
+:host::ng-deep {
+    .md-drppicker .btn {
+        line-height: 10px !important;
+    }
+    .daterangepicker-input + .ngx-daterangepicker-material .applyBtn {
+        display: none;
+    }
+    .md-drppicker.drops-down-right.ltr.double.show-ranges.shown {
+        top: 65px !important;
+        left: -470px !important;
+        height: 400px !important;
+    }
+
+        .md-drppicker .btn {
+            border-radius: 8px !important;
+            border: 1px solid var(--Primary-600, #00A3FF) !important;
+            background: var(--Primary-600, #00A3FF) !important;
+            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+            color: var(--White, #FFF) !important;
+            font-size: 14px !important;
+            font-weight: 600 !important;
+            line-height: 20px;
+            text-transform: capitalize;
+        }
+
+    .md-drppicker .ranges ul li button {
+        padding: 12px 16px;
+        width: 160px;
+        color: var(--Gray-700, #344054);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        background: none;
+        border: none;
+        text-align: left;
+        cursor: pointer;
+    }
+    .md-drppicker td.active,
+    .md-drppicker td.active:hover {
+        background-color: #029cf4 !important;
+        border-radius: 20px !important;
+        color: var(--White, #FFF) !important;
+        text-align: center !important;
+        font-size: 14px !important;
+        font-weight: 500 !important;
+        line-height: 20px;
+    }
+
+    .md-drppicker.ltr .ranges {
+        float: left;
+        margin-top: 10px !important;
+    }
+
+    .md-drppicker td.in-range {
+        background: var(--Primary-50, #EAF8FF);
+    }
+
+    .md-drppicker .ranges ul li button.active {
+        background: var(--Primary-50, #EAF8FF) !important;
+        border-radius: 8px !important;
+        color: var(--Primary-700, #009BF3);
+        font-size: 14px !important;
+        font-weight: 500 !important;
+        line-height: 20px !important;
+    }
+    table th,
+    table td {
+        width: 40px !important;
+        height: 40px !important;
+        padding: 10px 8px !important;
+    }
+
+    .md-drppicker td.available.prev,
+    .md-drppicker th.available.prev {
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+        background-repeat: no-repeat !important;
+        background-size: 0.5em !important;
+        background-position: center !important;
+    }
+
+    .md-drppicker td.available.next,
+    .md-drppicker th.available.next {
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+        background-repeat: no-repeat !important;
+        background-size: 0.5em !important;
+        background-position: center !important;
+    }
+
+    table th {
+        border-bottom: 0px solid var(--Gray-200, #EAECF0) !important;
+        background: transparent !important;
+        color: var(--Gray-700, #344054) !important;
+        text-align: center;
+        font-size: 16px !important;
+        font-weight: 500 !important;
+        line-height: 24px;
+    }
+
+    .md-drppicker td.available.invalid-date {
+        text-decoration: line-through;
+        pointer-events: none;
+        color: darkgray;
+    }
+
+    .md-drppicker td.available.today:not(.invalid-date) {
+        text-decoration: unset;
+        pointer-events: unset;
+        color: unset;
+    }
+        .md-drppicker .btn.btn-default {
+            border-radius: 8px !important;
+            border: 1px solid var(--Gray-300, #D0D5DD) !important;
+            background: var(--White, #FFF) !important;
+            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+            color: var(--Gray-700, #344054) !important;
+            font-size: 14px !important;
+            font-weight: 600 !important;
+            line-height: 20px;
+            text-transform: capitalize;
+            margin-right:10px !important;
+        }
+        .md-drppicker td.available.invalid-date  {
+            text-decoration: line-through;
+            pointer-events: none;
+            color: darkgray;
+          }
+          
+          .md-drppicker td.available.today:not(.invalid-date)   {
+            text-decoration: unset;
+            pointer-events: unset;
+            color: unset;
+          }
+}
+.btn-primary{
+    line-height: 18px !important; 
+}

package/src/lib/modules/layout/toolbar/classic/classic.component.spec.ts

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

package/src/lib/modules/layout/toolbar/classic/classic.component.ts

@@ -0,0 +1,389 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  HostListener,
+  Input,
+  OnDestroy,
+  OnInit,
+} from "@angular/core";
+
+import { Subscription } from "rxjs";
+import { LayoutService } from "tango-app-ui-global";
+import  dayjs from "dayjs";
+import "dayjs/locale/en";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import { AuthService } from '../../../../services/auth.service';
+import { GlobalStateService } from 'tango-app-ui-global';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+@Component({
+  selector: "lib-classic",
+  templateUrl: "./classic.component.html",
+  styleUrls: ["./classic.component.scss"],
+})
+export class ClassicComponent implements OnInit, OnDestroy {
+  dayjs = dayjs
+  private unsubscribe: Subscription[] = [];
+
+  dataObject: any = [{ Description: "Clients", Issues: [] }];
+
+  isCustomDate = (m: dayjs.Dayjs) => {
+    const isValidDate =  m > this.dayjs();    
+    return isValidDate ? 'invalid-date' : false;
+}
+  dummyArray: any = [];
+  noFilter: boolean = false;
+  searchValue: any;
+  responseArray: any = [];
+  getClientList: any = [];
+  constructor(
+    private layout: LayoutService,
+    private globalService: GlobalStateService,
+    private service: AuthService,
+    private cd: ChangeDetectorRef
+  ) {}
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+  // @Input() dataObject: any[] = [];
+  Opendropdown: boolean = false;
+
+  permission = [
+    {
+      group: "Super Admin",
+      description: "Lorem ipsum dolor sit amet, consectetur ",
+    },
+    { group: "Admin", description: "Lorem ipsum dolor sit amet, consectetur " },
+    { group: "User", description: "Lorem ipsum dolor sit amet, consectetur " },
+  ];
+
+  showdropdown: any;
+  selectedValues: string[] = [];
+  selectedValuesArray: any[] = [];
+  selectedDateRange: any = {};
+  selectedFilters: any = {
+    client: null,
+    clients: [],
+    store: null,
+    stores: [],
+    date: null,
+  };
+  ngOnInit(): void {
+    this.service.getClients().subscribe({
+      next: (res: any) => {
+        
+        this.getClientList = res?.data?.result;
+        if ("header-filters" in localStorage) {
+          const headerFilters: any = JSON.parse(
+            localStorage.getItem("header-filters") || "{}"
+          );
+          if(headerFilters.clients.length >0 && headerFilters.date?.startDate){
+            this.dataObject[0].Issues = this.getClientList;
+          this.toggleCheckbox("Select All", 0);
+          this.dummyArray = JSON.parse(JSON.stringify(this.dataObject));
+          this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
+            const currentIssues =  this.dummyArray[0].Issues.map(
+              (item: any) => item.clientId 
+            );
+            this.selectedFilters.clients = currentIssues;
+            this.selectedFilters.client =  headerFilters.client;
+            this.selectedFilters.store =  headerFilters.store;
+            this.selectedFilters.date = headerFilters.date;
+
+            this.selectedDateRange = {
+              startDate:this.dayjs( headerFilters.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
+              endDate: this.dayjs( headerFilters.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
+            };
+         
+            localStorage.setItem(
+              "header-filters",
+              JSON.stringify(this.selectedFilters)
+            );
+            this.globalService.dataRangeValue.next(this.selectedFilters);
+          // this.cd.detectChanges();
+          }else {
+            this.dataObject[0].Issues = this.getClientList;
+            this.toggleCheckbox("Select All", 0);
+            this.dummyArray = JSON.parse(JSON.stringify(this.dataObject));
+            this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
+            const currentIssues =  this.dummyArray[0].Issues.map(
+              (item: any) => item.clientId 
+            );
+            this.selectedFilters.clients = currentIssues;
+            this.selectedFilters.client =  headerFilters.client;
+            this.selectedFilters.store =  headerFilters.store;
+            this.selectedDateRange = {
+              startDate: this.dayjs().format("DD-MM-YYYY"),
+              endDate: this.dayjs().format("DD-MM-YYYY"),
+            };
+            var datetime = {
+              startDate: this.dayjs().format("YYYY-MM-DD"),
+              endDate: this.dayjs().format("YYYY-MM-DD"),
+            };
+            this.selectedFilters.date = datetime;
+            localStorage.setItem(
+              "header-filters",
+              JSON.stringify(this.selectedFilters)
+            );
+            this.globalService.dataRangeValue.next(this.selectedFilters);
+          }
+        } else {
+          
+          this.dataObject[0].Issues = this.getClientList;
+          this.toggleCheckbox("Select All", 0);
+          this.dummyArray = JSON.parse(JSON.stringify(this.dataObject));
+          this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
+          const currentIssues =  this.dummyArray[0].Issues.map(
+            (item: any) => item.clientId 
+          );
+          this.selectedFilters.clients = currentIssues;
+          this.selectedFilters.client =  currentIssues[0];
+          this.selectedDateRange = {
+            startDate: this.dayjs().format("DD-MM-YYYY"),
+            endDate: this.dayjs().format("DD-MM-YYYY"),
+          };
+          var datetime = {
+            startDate: this.dayjs().format("YYYY-MM-DD"),
+            endDate: this.dayjs().format("YYYY-MM-DD"),
+          };
+          this.selectedFilters.date = datetime;
+          localStorage.setItem(
+            "header-filters",
+            JSON.stringify(this.selectedFilters)
+          );
+          this.globalService.dataRangeValue.next(this.selectedFilters);
+          this.cd.detectChanges();
+        }
+      },
+    });
+    const subscr = this.layout.layoutConfigSubject
+      .asObservable()
+      .subscribe(() => {
+      });
+    this.unsubscribe.push(subscr);
+  }
+
+  getclients(){
+    this.service.getClients().subscribe({
+      next: (res: any) => {
+        this.getClientList = res?.data?.result;
+        this.toggleCheckbox("Select All", 0);
+        this.dummyArray = JSON.parse(JSON.stringify(this.dataObject));
+        this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
+      }
+      })
+  }
+  @HostListener("document:click", ["$event"])
+  onClick(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    if (!target.closest(".dropdown1")) {
+      this.Opendropdown = false;
+    }
+    if (!target.closest(".dropdown-content")) {
+      this.dataObject.forEach((item: any, i: any) => {
+        item.isOpen = false;
+      });
+    }
+  }
+
+  opendropdown(e: MouseEvent) {
+    e.stopPropagation();
+    this.Opendropdown = !this.Opendropdown;
+  }
+
+  Dropdown(value: any, index: number, event: MouseEvent) {
+    event.stopPropagation();
+    this.dataObject.forEach((item: any, i: any) => {
+      if (i !== index) {
+        item.isOpen = false; 
+      }
+    });
+    this.dataObject[index].isOpen = !this.dataObject[index].isOpen;
+
+    // if (this.dataObject[index].isOpen) {
+    //   document.addEventListener('click', this.clickOutsideDropdownContent.bind(this, index));
+    // } else {
+    //   document.removeEventListener('click', this.clickOutsideDropdownContent.bind(this, index));
+    // }
+  }
+
+  // clickOutsideDropdownContent(index: number, event: Event) {
+  //   if (!this.elementRef.nativeElement.contains(event.target as Node)) {
+  //     this.dataObject[index].isOpen = false;
+  //     document.removeEventListener('click', this.clickOutsideDropdownContent.bind(this, index));
+  //   }
+  // }
+  searchData(event: any, i: any) {
+    const filteredIssues = this.dummyArray[i].Issues.filter((item: any) =>
+      new RegExp(event.target.value, "i").test(item.clientName) || this.selectedValuesArray[i].includes(item.clientName)
+    );
+    this.dataObject[i].Issues = filteredIssues;
+    if (filteredIssues.length) {
+      this.noFilter = false;
+    } else {
+      this.noFilter = true;
+    }
+  }
+  toggleCheckbox(issue: string, index: number) {
+    const currentIssues = this.dataObject[index].Issues;
+    this.selectedValuesArray[index] = this.selectedValuesArray[index] || [];
+    const selectedValues = this.selectedValuesArray[index]; // Retrieve selected values array for the current dropdown index
+
+    if (issue === "Select All") {
+      const currentIssues = this.dataObject[index].Issues.map(
+        (item: any) => item.clientId
+      );
+      if (selectedValues.length === currentIssues.length) {
+        // If all items are already selected, deselect all
+        this.selectedValuesArray[index] = [];
+      } else {
+        // Otherwise, select all items
+        this.selectedValuesArray[index] = [...currentIssues];
+      }
+      this.cd.detectChanges();
+    } else {
+      if (selectedValues.includes(issue)) {
+        this.selectedValuesArray[index] = selectedValues.filter(
+          (item: any) => item !== issue
+        ); // Deselect the individual item if already selected
+      } else {
+        this.selectedValuesArray[index].push(issue); // Select the individual item if not already selected
+      }
+    }
+
+    // Update "Select All" checkbox status based on selected values
+    const selectAllId = `selectall${index}`;
+    const selectAllElement = document.getElementById(
+      selectAllId
+    ) as HTMLInputElement;
+    if (selectAllElement) {
+      selectAllElement.checked 
+      //= selectedValues.length === currentIssues.length;
+    }
+
+    // Update checkboxes based on selected values
+    currentIssues.forEach((item: string) => {
+      const isChecked = this.selectedValuesArray[index].includes(item);
+      const checkboxId = `option${item}`;
+      const checkboxElement = document.getElementById(
+        checkboxId
+      ) as HTMLInputElement;
+      if (checkboxElement) {
+        checkboxElement.checked = isChecked;
+      }
+    });
+  }
+
+  Reset() {
+    this.selectedValuesArray = [];
+    this.Opendropdown = false;
+  }
+
+  Apply() {
+    
+    var selectedValue: any = [];
+    for (let i = 0; i < this.selectedValuesArray.length; i++) {
+      const selectedValues = this.selectedValuesArray[i];
+      const issues = this.dummyArray[i].Issues; // const issues = this.dataObject[i].Issues;
+
+      if (selectedValues) {
+        this.selectedValuesArray[i] = selectedValues.map((selectedId: any) => {
+          const issue = issues.find(
+            (issueItem: any) => issueItem.clientId === selectedId
+          );
+          selectedValue.push(issue);
+          return issue ? issue : ""; // Get the text corresponding to the id
+        });
+      }
+    }
+
+
+    this.Opendropdown = false;
+    this.selectedValuesArray.forEach((item: any, index: any) => {
+      item = item.map((ele: any) => ele.clientId);
+      this.selectedValuesArray[index] = item;
+    });
+    this.responseArray.forEach((item: any, index: any) => {
+      item.Issues = this.selectedValuesArray[index]
+        ? this.selectedValuesArray[index]
+        : [];
+    });
+    this.selectedFilters.clients = this.responseArray[0].Issues;
+    this.globalService.dataRangeValue.next(this.selectedFilters);
+    this.cd.detectChanges();
+  }
+
+  ranges: any = {
+    "Today": [this.dayjs(), this.dayjs()],
+    "Yesterday": [this.dayjs().subtract(1, "days"), this.dayjs().subtract(1, "days")],
+    "This Week": [this.dayjs().subtract(6, "days"), dayjs()],
+    "Last Week": [
+      this.dayjs().subtract(14, "days").startOf("days"),
+      this.dayjs().subtract(8, "days").endOf("days"),
+    ],
+    "This Month": [this.dayjs().startOf("month"), this.dayjs().endOf("month")],
+    "Last Month": [
+      this.dayjs().subtract(1, "month").startOf("month"),
+      this.dayjs().subtract(1, "month").endOf("month"),
+    ],
+  };
+
+  onStartDateChange(event: any) {
+    if (this.dayjs(event.startDate).isValid()) {
+      this.isCustomDate = (m: dayjs.Dayjs) => {
+        const isValidDate =
+          m > this.dayjs() || m > this.dayjs(event.startDate.add(90, "days"));
+        return isValidDate ? "invalid-date" : false;
+      };
+    }
+  }
+
+  datechange(event: any) {
+    
+    if (event && event.startDate && event.endDate) {
+      if (
+        this.dayjs(event.startDate).isValid() &&
+        this.dayjs(event.endDate).isValid()
+      ) {
+        this.selectedDateRange.startDate = event.startDate
+        this.selectedDateRange.endDate = event.endDate
+        var datetime = {
+          startDate: this.dayjs(event.startDate,"DD-MM-YYYY").format("YYYY-MM-DD"),
+          endDate: this.dayjs(event.endDate,"DD-MM-YYYY").format("YYYY-MM-DD"),
+        };
+        this.selectedFilters.date = datetime;
+      }
+      localStorage.setItem(
+        "header-filters",
+        JSON.stringify(this.selectedFilters)
+      );
+    }  else {
+      const headerFilters: any = JSON.parse(
+            localStorage.getItem("header-filters") || "{}"
+          );
+          this.selectedDateRange.startDate = this.dayjs(headerFilters.date?.startDate,"YYYY-MM-DD").format("DD-MM-YYYY");
+          this.selectedDateRange.endDate = this.dayjs(headerFilters.date?.endDate,"YYYY-MM-DD").format("DD-MM-YYYY");
+          this.globalService.dataRangeValue.next(headerFilters);
+    }
+    // else {
+    //   const headerFilters: any = JSON.parse(
+    //     localStorage.getItem("header-filters") || "{}"
+    //   );
+    //   this.selectedFilters.date = headerFilters.date;
+    //   if(headerFilters.date?.startDate&&headerFilters.date?.endDate){
+    //     this.selectedDateRange = headerFilters.date;
+ 
+    //   }else{
+    //     this.selectedDateRange = {
+    //       startDate: dayjs().format("YYYY-MM-DD"),
+    //       endDate: dayjs().format("YYYY-MM-DD")
+    //     }
+ 
+    //   }
+    // }
+    // this.selectedFilters.date = this.selectedDateRange;
+  }
+}

package/src/lib/modules/layout/toolbar/client-settings/client-settings.component.html

@@ -0,0 +1,4 @@
+    <div class="wrapper" >
+        <lib-select [items]="clientList" [multi]="false" [searchField]="'clientName'" [disabled]="false" [idField]="'clientId'"
+            (selected)="onClientSelect($event)" [selectedValues]="[selectedClient]"></lib-select>
+    </div>

package/src/lib/modules/layout/toolbar/client-settings/client-settings.component.scss

@@ -0,0 +1,3 @@
+.wrapper {
+    min-width: 200px;
+}

package/src/lib/modules/layout/toolbar/client-settings/client-settings.component.spec.ts

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