tango-app-ui-shared 3.5.0-alpha.9 → 3.5.1-task.2

package/src/lib/modules/layout/toolbar/single-store/single-store.component.ts

@@ -0,0 +1,186 @@
+import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import  dayjs from 'dayjs';
+import 'dayjs/locale/en';
+import { AuthService } from '../../../../services/auth.service';
+import { GlobalStateService } from 'tango-app-ui-global';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'lib-single-store',
+  templateUrl: './single-store.component.html',
+  styleUrl: './single-store.component.scss'
+})
+export class SingleStoreComponent implements OnInit,OnChanges {
+  @Input() urlString:any;
+  dayjs = dayjs
+  isCustomDate = (m: dayjs.Dayjs) => {
+    const isValidDate =  m > this.dayjs();    
+    return isValidDate ? 'invalid-date' : false;
+}
+  selectedDateRange: any = {};
+  storeList:any = []
+  selectedClient:any
+  selectedFilters: any = {
+    client: null,
+    clientName:null,
+    clients: [],
+    store: null,
+    stores: [],
+    date: null,
+
+  };
+  URL: any;
+  baseurl:any;
+  constructor(private auth:AuthService, private gs:GlobalStateService, private cd:ChangeDetectorRef,private router:Router){
+    const currentUrl = this.router.url;
+    const updatedUrl = currentUrl.replace(
+      /\/manage\/stores\/\d+-\d+\//,
+      `/manage/stores/`
+    );
+    const url = updatedUrl;
+    this.baseurl = url.split("?")[1];
+    this.URL= url.split("?")[0].split('/');
+  }
+  ngOnInit(): void {
+    const headerFilters: any = JSON.parse(
+      localStorage.getItem("header-filters") || "{}"
+    );
+    if(headerFilters?.client){
+    this.auth.getStores(headerFilters?.client).subscribe({
+      next: (e) => {
+        if (e) {
+          
+          this.storeList = e.data.result;
+          const headerFilters: any = JSON.parse(
+            localStorage.getItem("header-filters") || "{}"
+          );
+          this.selectedDateRange = {
+            startDate: this.dayjs(headerFilters?.date?.startDate,"DD-MM-YYYY").format("YYYY-MM-DD"),
+            endDate: this.dayjs(headerFilters?.date?.endDate, "DD-MM-YYYY").format("YYYY-MM-DD")
+          };
+          if (headerFilters?.store) {
+            this.storeList.find((obj: any) => {
+              if (obj.storeId === headerFilters.store) {
+                this.selectedClient = obj;
+              }
+            });
+              this.selectedFilters.store =  headerFilters.store;
+              this.selectedFilters.client =  headerFilters.client;
+              this.selectedFilters.clientName =  headerFilters.clientName;
+              this.selectedFilters.clients =  headerFilters.clients;  
+              this.selectedFilters.date = headerFilters.date;
+              this.selectedFilters.storeName =  headerFilters.storeName; 
+              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.gs.dataRangeValue.next(this.selectedFilters);
+              this.cd.detectChanges();
+          } else {
+            this.selectedClient = this.storeList[0];
+            this.selectedFilters.store =  this.selectedClient.storeId; 
+            this.selectedFilters.client =  headerFilters.client;
+            this.selectedFilters.clientName =  headerFilters.clientName;
+            this.selectedFilters.clients =  headerFilters.clients;  
+            this.selectedFilters.storeName =  headerFilters.storeName;  
+            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.gs.dataRangeValue.next(this.selectedFilters);
+            this.cd.detectChanges();
+          }
+        }
+      },
+    });
+  }
+  }
+  onClientSelect(event:any){
+    this.selectedClient = event
+  }
+
+  ranges: any = {
+    Today: [
+      this.dayjs(),
+      this.dayjs(),
+    ],
+    'Yesterday': [this.dayjs().subtract(1, 'days'), this.dayjs().subtract(1, 'days')],
+    'This Week': [this.dayjs().subtract(7, "days"), this.dayjs().subtract(1, "days")],
+    'Last Week': [this.dayjs().subtract(14, 'days').startOf('days'), this.dayjs().subtract(8, 'days').endOf('days')],
+   "This Month": [
+    this.dayjs().subtract(30, "days"), // Start date is 30 days before today
+    this.dayjs().subtract(1, "days") // End date is Yesterday
+  ],
+    '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.gs.dataRangeValue.next(headerFilters);
+  } 
+}
+
+Apply() {
+  const headerFilters: any = JSON.parse(
+    localStorage.getItem("header-filters") || "{}"
+  );
+  this.selectedFilters = headerFilters;
+  this.selectedFilters.store = this.selectedClient.storeId;
+  this.gs.dataRangeValue.next(this.selectedFilters);
+  localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+}
+
+queryString:any = ''
+
+ngOnChanges(changes: SimpleChanges): void {
+  this.urlString = changes?.urlString?.currentValue.split('?')[0].split('/');
+  if(changes?.urlString?.currentValue.split('?').length > 1) {
+    this.queryString = changes?.urlString?.currentValue.split('?')[1];
+  }
+}
+}

package/src/lib/modules/layout/toolbar/single-storedate/single-storedate.component.html

@@ -0,0 +1,17 @@
+
+<div  class="d-flex align-items-center position-relative my-1">
+    <span class="svg-icon svg-icon-1 position-absolute ms-3">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path
+                d="M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z"
+                stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    </span>
+    <input class="fx-date-range form-control ps-14" style="width:165px !important" type="text" matInput ngxDaterangepickerMd [singleDatePicker]="true" [drops]="'down'"
+    [opens]="'left'" [alwaysShowCalendars]="false"
+    [keepCalendarOpeningWithRange]="true" [showCancel]="true" autocomplete="off" [(ngModel)]="selectedDateRange"  (startDateChanged)="onStartDateChange($event)"  [isCustomDate]="isCustomDate"
+    [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
+    (datesUpdated)="datechange($event)" name="daterange" [readonly]="true"  [autoApply]="true"/>
+</div>
+
+<!-- <div class="btn btn-primary ms-2" (click)="Apply()">Apply</div> -->

package/src/lib/modules/layout/toolbar/single-storedate/single-storedate.component.scss

@@ -0,0 +1,172 @@
+.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: 365px !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 td.available.invalid-date {
+    //     text-decoration: line-through;
+    //     pointer-events: none;
+    //     color: darkgray;
+    // }
+    
+    // .md-drppicker td.available.today {
+    //     /* Styles for today if it's valid */
+    //     text-decoration: unset; /* No line-through */
+    //     pointer-events: auto; /* Enable pointer events */
+    //     color: unset; /* Default color */
+    // }
+    
+    // .md-drppicker td.available.today.invalid-date {
+    //     /* Styles for today if it's invalid */
+    //     text-decoration: line-through; /* Line-through to indicate invalid */
+    //     pointer-events: none; /* Disable interaction */
+    //     color: darkgray; /* Gray color to indicate invalid */
+    // }
+        .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;
+          }
+}
+.wrapper {
+    min-width: 200px;
+}
+.btn-primary{
+    line-height: 18px !important; 
+}

package/src/lib/modules/layout/toolbar/single-storedate/single-storedate.component.spec.ts

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

package/src/lib/modules/layout/toolbar/single-storedate/single-storedate.component.ts

@@ -0,0 +1,179 @@
+import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import  dayjs from 'dayjs';
+import 'dayjs/locale/en';
+import { AuthService } from '../../../../services/auth.service';
+import { GlobalStateService } from 'tango-app-ui-global';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'lib-single-storedate',
+  templateUrl: './single-storedate.component.html',
+  styleUrl: './single-storedate.component.scss'
+})
+export class SingleStoredateComponent implements OnInit {
+  dayjs = dayjs
+  isCustomDate = (m: dayjs.Dayjs) => {
+    const isValidDate =  m > this.dayjs();    
+    return isValidDate ? 'invalid-date' : false;
+}
+  selectedDateRange: any = {};
+  storeList:any = []
+  selectedClient:any
+  selectedFilters: any = {
+    client: null,
+    clientName:null,
+    clients: [],
+    store: null,
+    stores: [],
+    date: null,
+  };
+  URL: any;
+  baseurl:any;
+  users:any;
+  headerFilters:any;
+  dataUser:any;
+  constructor(private auth:AuthService, private gs:GlobalStateService, private cd:ChangeDetectorRef,private router:Router,private activatedRoute:ActivatedRoute){
+  }
+ngOnInit(): void {
+  this.activatedRoute?.queryParams.subscribe(params => {
+    this.dataUser = params;
+
+    // Re-check date after params load
+    this.initializeFilters();
+  });
+
+  if ("user-info" in localStorage) {
+    const userData: any = JSON.parse(localStorage.getItem("user-info") || "{}");
+    this.users = userData;
+  }
+}
+
+initializeFilters(): void {
+  const clientFromRoute = this.dataUser?.client;
+  const clientFromHeader = localStorage.getItem("header-filters")
+    ? JSON.parse(localStorage.getItem("header-filters") || "{}").client
+    : null;
+  const clientFromUser = this.users?.clientId;
+
+  const headerFilters: any = localStorage.getItem("header-filters")
+    ? JSON.parse(localStorage.getItem("header-filters") || "{}")
+    : {};
+
+  this.headerFilters = headerFilters;
+
+  // Determine final client ID
+  const finalClient = clientFromRoute ?? clientFromHeader ?? clientFromUser;
+
+  this.selectedFilters.client = finalClient;
+  this.selectedFilters.clients = finalClient ? [finalClient] : [];
+  this.selectedFilters.clientName = headerFilters.clientName || "";
+  this.selectedFilters.store = this.dataUser?.storeId ?? headerFilters.store ?? "";
+  this.selectedFilters.storeName = headerFilters.storeName || "";
+    this.selectedFilters.group = headerFilters.group;
+            this.selectedFilters.location = headerFilters.location;
+            this.selectedFilters.country = headerFilters.country;
+  this.selectedFilters.stores = headerFilters.stores ?? "";
+  this.selectedFilters.zoneName = headerFilters.zoneName ?? "";
+  // ✅ Handle query param date if present
+  if (this.dataUser?.date) {
+    const date = this.dataUser.date;
+
+    this.selectedFilters.date = {
+      startDate: date,
+      endDate: date,
+    };
+
+    this.selectedDateRange = {
+      startDate: this.dayjs(date, "YYYY-MM-DD").format("DD-MM-YYYY"),
+      endDate: this.dayjs(date, "YYYY-MM-DD").format("DD-MM-YYYY"),
+    };
+
+  } else if (headerFilters?.date?.startDate && headerFilters?.date?.endDate) {
+    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"),
+    };
+
+  } else {
+    // Default to yesterday
+    const yesterday = this.dayjs().subtract(1, "days");
+    const formattedDate = {
+      startDate: yesterday.format("YYYY-MM-DD"),
+      endDate: yesterday.format("YYYY-MM-DD"),
+    };
+
+    this.selectedFilters.date = formattedDate;
+    this.selectedDateRange = {
+      startDate: yesterday.format("DD-MM-YYYY"),
+      endDate: yesterday.format("DD-MM-YYYY"),
+    };
+  }
+
+  // Save only if valid
+  if (finalClient && this.selectedFilters.date?.startDate && this.selectedFilters.store) {
+    localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
+  }
+
+  this.gs.dataRangeValue.next(this.selectedFilters);
+}
+
+
+  onClientSelect(event:any){
+    this.selectedClient = event
+  }
+
+
+  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;
+    }
+  } else {
+    const headerFilters: any = JSON.parse(
+      localStorage.getItem("header-filters") || "{}"
+    );  
+    this.selectedFilters.date = headerFilters.date;
+  }
+
+const clientId = this.users?.clientId ?? this.dataUser?.client ?? this.selectedFilters.client;
+this.selectedFilters.client = clientId;
+this.selectedFilters.clients = clientId ? [clientId] : [this.selectedFilters.client];
+this.selectedFilters.date = this.selectedFilters.date;
+this.selectedFilters.storeName = this.selectedFilters.storeName || '';
+
+  this.gs.dataRangeValue.next(this.selectedFilters);
+    localStorage.setItem(
+    "header-filters",
+    JSON.stringify(this.selectedFilters)
+  );
+this.cd.detectChanges();
+ 
+}
+Apply() {
+  const headerFilters: any = JSON.parse(
+    localStorage.getItem("header-filters") || "{}"
+  );
+  this.selectedFilters = headerFilters;
+  this.selectedFilters.store = this.selectedClient.storeId;
+  this.gs.dataRangeValue.next(this.selectedFilters);
+  localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+}
+}

package/src/lib/modules/layout/toolbar/storesingle/storesingle.component.html

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

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

@@ -0,0 +1,19 @@
+.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;
+}
+.wrapper {
+    min-width: 200px;
+}
+.btn-primary{
+    line-height: 18px !important; 
+}

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

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