@aggdirect/coolmap 2.9.6 → 2.9.8

package/src/lib/component/route-jobcode-list/job-code-list-card/job-code-list-card.component.spec.ts

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

package/src/lib/component/route-jobcode-list/job-code-list-card/job-code-list-card.component.ts

@@ -0,0 +1,43 @@
+import { Component, EventEmitter, Input, Output, Inject } from '@angular/core';
+import { CoolmapConfigModel, Route, UtilsService } from '@aggdirect/coolmap-services';
+
+@Component({
+  selector: 'app-job-code-list-card',
+  templateUrl: './job-code-list-card.component.html',
+  styleUrls: ['./job-code-list-card.component.scss']
+})
+export class JobCodeListCardComponent {
+  @Input() public route!: Route;
+  @Output() public routeSeletion = new EventEmitter();
+  @Output() public toggleDrivermenu = new EventEmitter();
+  @Input() public emitJobdetails: any;
+  @Input() public preventCloseDetails!: boolean;
+  constructor(public utils: UtilsService,
+    @Inject('memberData') public config: CoolmapConfigModel) { }
+
+  selectRoute(route: Route) { this.routeSeletion.emit(route) }
+  toggleDriverlist(mouseevntType: boolean | string, route: Route, isHoverOut?: boolean) {
+    const data = { mouseevntType, route, isHoverOut }
+    this.toggleDrivermenu.emit(data);
+    if (mouseevntType === 'click') this.utils.setdictValue('driver-details', JSON.stringify(this.route));
+  }
+  toggleJobCodeDetails(mouseEventType: boolean, route: Route) {
+    if (mouseEventType) { route['type'] = 'jobcode'; this.emitJobdetails.emitroute.emit(route) }
+    else if(!mouseEventType && this.preventCloseDetails){
+      route = this.utils.getdictValue('route-details');
+      route['type'] = 'jobcode'; this.emitJobdetails.emitroute.emit(route)
+     }
+    else if (!mouseEventType && !this.preventCloseDetails) this.emitJobdetails.clearJobDetailsFromList.emit(true);
+  }
+  calculateStatusPercentage(type: string, route: any) {
+    const total = route['Done'] + route['Ongoing'] + route['Open'];
+    if (type === 'done') { return Math.round((100 * route['Done']) / total) }
+    else if (type === 'ongoing') { return Math.round((100 * route['Ongoing']) / total) }
+    else if (type === 'open') { return Math.round((100 * route['Open']) / total) }
+    else { return null }
+  }
+  setRouteItem(){
+    this.utils.preVentJobdetailclose.next(true);
+    this.utils.setdictValue('route-details', JSON.stringify(this.route));
+  }
+}

package/src/lib/component/route-jobcode-list/route-jobcode-list.component.html

@@ -0,0 +1,73 @@
+<div class="scrollprt addroutelist" [class.viewroute]="visiblesection('addroute')"
+  [class.jobList]="visiblesection('jobcode')">
+  <button (click)="showRoute()" [disabled]="loader" *ngIf="selectedRoute.selected.length" class="show_routebtn">Show all
+    route</button>
+    <cdk-virtual-scroll-viewport itemSize="50" [class.jobscroll]="visiblesection('jobcode')" class="example-viewport">
+      <mat-spinner *ngIf="loader"></mat-spinner>
+      <ul *ngIf="!loader && data.length > 0">
+        <li [class.active]="route['isActive'] && visiblesection('addroute')" *ngFor="let route of data">
+            <app-job-code-list-card *ngIf="visiblesection('jobcode')" 
+                                    (toggleDrivermenu)="toggleDrivermenu($event)"
+                                    (routeSeletion)="selectRoute($event)" 
+                                    [preventCloseDetails]="preventDetailsClose" 
+                                    [emitJobdetails]="{emitroute, clearJobDetailsFromList}" 
+                                    [route]="checkroutes(route)">
+            </app-job-code-list-card>
+            <app-view-route-list-card *ngIf="visiblesection('addroute')"
+                                      [emitrouteevent]="emitroute" 
+                                      [route]="route">
+            </app-view-route-list-card>
+        </li>
+      </ul>
+      <p *ngIf="!loader && data.length === 0">{{visiblesection('addroute') ? 'No Route found' : 'No Job code found.'}}</p>
+    </cdk-virtual-scroll-viewport>
+</div>
+
+<div class="driver_list" *ngIf="isDriverList">
+  <div class="driver_headingprt">
+    <h2>Driver List</h2>
+    <button *ngIf="driverList.driver_list?.length > 0" (click)="isSmsList = true">SMS</button>
+    <div class="closebtn" (click)="isDriverList = false; preventMouseout = false; isSmsList = false">
+      <mat-icon>clear</mat-icon>
+    </div>
+  </div>
+  <ul class="driverList" *ngIf="driverList && driverList.driver_list">
+    <li *ngFor="let driver of driverList?.driver_list">
+      <img src="assets/images/driver_icon.png" [alt]="driver['driver_name']" />
+      <div class="driver_detail">
+        <b>{{driver['driver_name']}}</b> <span>{{driver['trucking_company']}}</span>
+        <div class="cont_del">
+          <small>Driver contact: <b>{{driver['driver_phone'] ? driver['driver_phone'] : 'N/A'}}</b></small>
+          <small>Company contact: <b>{{driver['trucking_company_phone'] ? driver['trucking_company_phone'] : 'N/A'}}</b></small>
+        </div>
+      </div>
+    </li>
+    <p *ngIf="driverList.driver_list?.length === 0" style="font-weight:700; text-align:center;">
+      No Driver found
+    </p>
+  </ul>
+  <div class="smslist" *ngIf="isSmsList">
+    <div class="heading">
+      <h2>SMS All Drivers</h2>
+      <div class="closebtn" (click)="isSmsList = false">
+        <mat-icon>clear</mat-icon>
+      </div>
+    </div>
+    <div class="detailprt">
+      <app-sms-card-details-overview [jobValue]="driverList"></app-sms-card-details-overview>
+      <div class="form_input">
+        <mat-form-field class="example-full-width">
+          <textarea matInput placeholder="Text here..." autocomplete="nope" column="10"
+            [formControl]="driverMessage"></textarea>
+          <mat-hint>{{driverMessage.value?.length}} / 256</mat-hint>
+        </mat-form-field>
+        <button *ngIf="!messageLoader" [disabled]="!driverMessage.value || driverMessage.invalid" (click)="sendMessage()">
+          Send SMS
+        </button>
+      </div>
+    </div>
+    <div class="loader">
+      <mat-spinner *ngIf="messageLoader"></mat-spinner>
+    </div>
+  </div>
+</div>

package/src/lib/component/route-jobcode-list/route-jobcode-list.component.scss

@@ -0,0 +1,227 @@
+@import "../../../assets/variable.scss";
+.driver_iconprt{
+    position: absolute;
+    right: 10px;
+    top: 12px;
+    z-index: 9999;
+   img{
+    width: 25px;
+    height: 25px;
+   }
+}
+.driver_list{
+    background: $white;
+    position: fixed;
+    width: 300px;
+    top: 10px;
+    left: 360px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    .driver_headingprt{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 15px;
+        button{
+            background: none;
+            border: 1px solid #ccc;
+            border-radius: 10px;
+            padding: 5px 20px;
+            &:hover{
+                background: $blue;
+                color: $white;
+            }
+        }
+    }
+    h2{
+        font-size: 20px;
+    }
+    .driverList{
+        height: 300px;
+        overflow: auto;
+        li{
+            display: flex;
+            padding: 10px;
+            align-items: flex-start;
+            cursor: pointer;
+            border-bottom: 1px solid $white;
+            background: #eee;
+            img{
+                width: 35px;
+                height: 35px;
+                border-radius: 100%;
+                margin-right: 10px;
+            }
+            .driver_detail{
+                width: calc(100% - 45px);
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-start;
+                b{
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    max-width: 135px;
+                    font-size: 0.9rem;
+                }
+                span{
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    max-width: 150px;
+                    font-size: 0.8rem;
+                }
+            }
+        }
+    }
+
+    &:after{
+        height: 10px;
+        background: $white;
+        border-bottom-right-radius: 20px;
+        border-bottom-left-radius: 20px;
+        content: "";
+        position: absolute;
+        bottom: -9px;
+        width: 100%;
+    }
+}
+.smslist{
+    background: $white;
+    position: absolute;
+    width: 480px;
+    top: 0px;
+    left: 105%;
+    border-radius: 20px;
+    padding-bottom: 20px;
+    .heading{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 15px;
+    }
+    .detailprt{
+        padding: 0 15px;
+        span{
+            display: flex;
+            margin-bottom: 12px;
+            font-size: 0.8rem;
+            align-items: center;
+            label{
+                font-weight: 600;
+                width: 37%;
+            }
+        }
+        .form_input{
+            display: flex;
+            flex-direction: column;
+            font-size: 0.8rem;
+            button{
+                background: $blue;
+                padding: 10px 18px 10px 18px;
+                color: white;
+                font-size: 0.8125rem;
+                border-radius: 30px;
+                display: flex;
+                align-self: flex-end;
+            }
+        }
+    }
+}
+.closebtn{
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.11);
+    border-radius: 100%;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    background: #f5f5f5;
+}
+.show_routebtn{
+    font-size: 0.9rem;
+    margin-bottom: 20px;
+    padding: 6px 11px;
+    border-radius: 5%;
+    position: absolute;
+    top: 8px;
+    right: 10px;
+    background-color: transparent;
+    color: $buttoncolor;
+    border: 1px solid $buttoncolor;
+    border-radius: 10px;
+    box-shadow: none;
+    &:hover{
+        background-color: $buttoncolor;
+        color: $white;
+    }
+}
+.cont_del{
+    margin-top: 10px;
+    small{
+        display: block;
+    }
+}
+.jobList{
+    ul {
+        margin: 0 0.93em 0 0px;
+        width: 100%;
+        li{
+            position: relative;
+            background: $softwhite;
+            padding: 10px 10px;
+            border-radius: 15px;
+            margin-bottom: 5px;
+            border: 1px solid $softwhite;
+            border-left: 3px solid $softwhite;
+            cursor: pointer;
+            height: inherit;
+            width: 15.62em;
+           
+        }
+    }
+}
+.viewroute{
+    ul {
+        // margin: 0 15px 0 15px;
+        width: 100%;
+        li{
+            position: relative;
+            background: $softwhite;
+            padding: 7px 10px;
+            border-radius: 15px;
+            margin-bottom: 5px;
+            border: 1px solid $softwhite;
+            border-left: 3px solid $softwhite;
+            cursor: pointer;
+            // height: 16.4vh;
+            width: 15.62em;
+            // @media (min-width:1600px) {
+            //     height: 12.4vh;
+            // }
+
+            &.active{
+                border: 1px solid $green;
+                border-left: 3px solid $green;
+            }
+        }
+    }
+}
+.loader{
+    position: absolute;
+    height: 100%;
+    top: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+}
+
+
+.example-viewport {
+    height: 74vh;
+}
+  

package/src/lib/component/route-jobcode-list/route-jobcode-list.component.ts

@@ -0,0 +1,233 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { SelectionModel } from '@angular/cdk/collections';
+import { FormControl, Validators } from '@angular/forms';
+import { CoolmapService, Route, UtilsService } from '@aggdirect/coolmap-services';
+
+@Component({
+  selector: 'app-route-jobcode-list',
+  templateUrl: './route-jobcode-list.component.html',
+  styleUrls: ['./route-jobcode-list.component.scss']
+})
+export class RouteJobCodeListComponent implements OnInit, OnChanges {
+  @Input() public loader = true;
+  @Input() public type: string = '';
+  @Input() public data: Route[] = [];
+  @Input() public currentNav: string = ''
+  @Output() public emitroute = new EventEmitter();
+  @Output() public showAllRoute = new EventEmitter();
+  preventMouseout: boolean = false;
+  filterList: Route[] = this.data;
+  @Input() public searchTerm!: any;
+  isDriverList: boolean = false;
+  public selectedRoute = new SelectionModel<any>(true, [])
+  driverList!: any;
+  preventListSelect: boolean = false;
+  @Output() public clearJobDetailsFromList = new EventEmitter();
+  preventDetailsClose = false;
+  messageLoader: boolean = false;
+  driverMessage = new FormControl('', [Validators.maxLength(256)]);
+  @Input() public clearListSeletion: boolean;
+  isSmsList: boolean = false;
+  constructor(public coolMap: CoolmapService, public utils: UtilsService) { this.driverList = [] }
+  ngOnInit(): void {
+    this.utils.getpreVentJobdetailclose.subscribe(res => { this.preventDetailsClose = res });
+    this.utils.removeMapEntityUtility.subscribe((res: Route) => {this.passRoute(res)});
+  }
+  passRoute(job: Route) {
+    this.data.forEach((each) => { if (each['route_id'] !== job['route_id']) { each['isActive'] = false } else { each['isActive'] = true } });
+    if (this.type == 'addroute') this.filterList.forEach(ele => this.coolMap.filterRoute(ele['route_id'], 'none'));
+  }
+  selectRoute(route: any) {
+    if (!this.preventListSelect) {
+      this.preventListSelect = true;
+      this.selectedRoute.toggle(route);
+      this.clearJobDetailsFromList.emit(true);
+      this.utils.preVentJobdetailclose.next(false);
+      this.filterList.forEach(ele => this.coolMap.filterRoute(ele['job_id'], 'none'));
+      this.clearList();
+      this.selectedRoute.selected.forEach((ele, index) => {
+        this.coolMap.filterRoute(ele['job_id'], 'visible', ((this.selectedRoute.selected.length - 1) === index)).then(() => {
+          this.preventListSelect = false;
+        })
+      });
+      if (!this.selectedRoute.selected.length) {
+        this.preventListSelect = false
+        this.data.forEach(ele => this.coolMap.filterRoute(ele['job_id'], 'visible'));
+      };
+    }
+  }
+  checkroutes(route: Route) {
+    const selectedRoute = this.selectedRoute.selected;
+    this.filterList = this.filterList.map(ele => { ele['isSelected'] = false; return ele })
+    if (selectedRoute.length > 0) {
+      selectedRoute.forEach(ele => {
+        if (route['order_number'] === ele['order_number']) { ele['isSelected'] = true }
+      });
+    } return route
+  }
+  ngOnChanges(changes: SimpleChanges) {
+    setTimeout(() => {
+      if (this.currentNav === 'Addroute' && (this.data.length < this.filterList.length)) {
+        const index = this.filterList.findIndex(ele => ele.isActive);
+        if (index > 0) this.filterList[index].isActive = false;
+        this.data.forEach((ele: Route, indexForData: number) => {
+          const id = (ele['job_id'] ? ele['job_id'] : ele['route_id'])
+          this.coolMap.plotRoute(ele, id, this.type, false, (indexForData === (this.data.length - 1))).then((res) => {
+          });
+        });
+      }
+    }, 500);
+    if (changes['data'] && changes['data']['currentValue']) {
+      this.filterList = changes['data']['currentValue'];
+      if (this.searchTerm) {
+        if (this.searchTerm.length > 0) {
+          this.data = this.utils.getSearchResults(changes['data']['currentValue'], this.searchTerm);
+          this.filterList = this.data;
+        } else {
+          this.filterList = changes['data']['currentValue'];
+        }
+      }
+
+      if (this.type === 'jobcode') {
+        this.loader = true; this.clearList();
+        if (this.filterList.length === 0) this.loader = false;
+      }
+
+      if (this.type !== 'jobcode') {
+        if (changes['data']['previousValue'] && this.currentNav === 'addForm') {
+          const activeRoute = changes['data']['previousValue'].find((ele: Route) => ele.isActive);
+          if (activeRoute) {
+            this.filterList.map((item: any) => {
+              if (item.route_id === activeRoute.route_id) {
+                item.isActive = true;
+              }
+            })
+          }
+        }
+      }
+      if (changes['data']['previousValue'] && this.currentNav !== 'addForm') {
+        this.coolMap.removeJobFromMap(changes['data']['previousValue']);
+        this.selectedRoute.clear();
+      };
+      if (this.currentNav !== 'addForm') {
+        changes['data']['currentValue'].forEach((ele: Route, indexForData: number) => {
+          const id = (ele['job_id'] ? ele['job_id'] : ele['route_id'])
+          this.coolMap.plotRoute(ele, id, this.type, false, (indexForData === (this.data.length - 1))).then((res) => {
+            if (indexForData === (this.data.length - 1)) {
+              this.loader = false;
+              this.utils.preventnavChange.next(true);
+            }
+          });
+        });
+      }
+    }
+    if (changes['searchTerm']) {
+      if (this.filterList) {
+        this.data = this.filterList;
+        this.clearList();
+        if (changes['searchTerm']['currentValue'].length > 0) {
+          this.coolMap.removeRouteAndMarker(1);
+          this.data = this.utils.getSearchResults(this.data, changes['searchTerm']['currentValue']);
+        } else { this.data = this.filterList; }
+        setTimeout(() => {
+          this.coolMap.clearBoundWithCordinates();
+          if (this.currentNav !== 'addForm' && !this.selectedRoute['selected'].length) {
+            this.coolMap.removeRouteAndMarker(1);
+            this.toggleFilterRoute(this.filterList);
+          }
+        }, 500);
+        if (this.currentNav !== 'addForm' && this.selectedRoute['selected'].length) {
+          if (this.data && this.data.length > 0) {
+            this.clearList();
+            this.clearJobDetailsFromList.emit(true)
+            this.coolMap.removeJobFromMap(this.selectedRoute.selected);
+            setTimeout(() => {
+              this.data.forEach((ele, indexForData) => {
+                this.coolMap.plotRoute(ele, ele['job_id'], this.type, false, (indexForData === (this.data.length - 1))).then(() => {
+                  if (indexForData === (this.data.length - 1)) { this.loader = false; this.utils.preventnavChange.next(true) }
+                  if (this.selectedRoute['selected'].length && this.selectedRoute['selected'][0]['job_id'] === ele['job_id']) {
+                    this.selectedRoute.clear()
+                  }
+                });
+              })
+            }, 500);
+          }
+        }
+      }
+    }
+  }
+  showRoute() {
+    this.utils.preventnavChange.next(false);
+    this.loader = true; this.clearList();
+    this.showAllRoute.emit(true);
+    if (this.filterList && this.filterList.length > 0) {
+      this.coolMap.removeJobFromMap(this.selectedRoute.selected);
+      setTimeout(() => {
+        this.filterList.forEach((ele, indexForData) => {
+          this.coolMap.plotRoute(ele, ele['job_id'], this.type, false, (indexForData === this.filterList.length - 1)).then(() => {
+            if (indexForData === this.filterList.length - 1) { this.loader = false; this.utils.preventnavChange.next(true) }
+            if (this.selectedRoute['selected'].length && this.selectedRoute['selected'][0]['job_id'] === ele['job_id']) {
+              this.selectedRoute.clear();
+            }
+          });
+        })
+      }, 500);
+    }
+  }
+  toggleDrivermenu(event: any) {
+    const mouseevntType = event.mouseevntType; let route = event.route;
+    const isHoverOut = event.isHoverOut;
+    if(typeof(mouseevntType) === 'string') {if(this.preventMouseout){this.isDriverList = !this.isDriverList}; this.preventMouseout = true}
+    if (typeof(mouseevntType) === 'boolean' &&!mouseevntType && !this.preventMouseout) { this.isDriverList = mouseevntType };
+    if (typeof(mouseevntType) === 'boolean' && mouseevntType && !this.preventMouseout) { this.isDriverList = mouseevntType };
+    if(this.preventMouseout && !this.isDriverList) this.preventMouseout = false;
+    if (isHoverOut) {
+      if (this.preventMouseout) {
+        route = this.utils.getdictValue('driver-details');
+        this.driverList = route;
+      }
+      if (!this.preventMouseout) {
+        this.driverList = route
+      }
+    } else {
+      this.driverList = route
+    }
+  }
+  visiblesection(value: string) { if (this.type === value) { return true } else return false }
+  toggleFilterRoute(filterList: Route[]) {
+    filterList.forEach((ele) => {
+      const filterItem = (this.type === 'jobcode') ? 'job_id' : 'route_id';
+      const index = this.data.findIndex((ele1) => { return (ele1[`${filterItem}`] === ele[`${filterItem}`]) });
+      const id = (ele['job_id'] ? ele['job_id'] : ele['route_id']);
+      if (id && index < 0) this.coolMap.filterRoute(id, 'none');
+      if (id && index >= 0) {
+        this.data[index].isActive = false;
+        this.coolMap.filterRoute(id, 'visible');
+        this.coolMap.extendBound(ele['path'], (index === (this.data.length - 1)));
+      };
+    });
+  }
+  clearList() {
+    this.isDriverList = false; this.driverList = null; this.preventMouseout = false; this.isSmsList = false;
+  }
+  sendMessage() {
+    this.messageLoader = true
+    if (this.driverMessage.valid) {
+      const data = {
+        order_number: this.driverList['order_number'],
+        date: this.driverList['date'],
+        message: this.driverMessage.value,
+      }
+      this.utils.postdata('jobs_report_chat', data).subscribe((res: any) => {
+        if (res['data']['status'] === 'Success.') {
+          this.messageLoader = false;
+          this.driverMessage.reset();
+          this.utils.openSnackBar('Message Sent', 'success');
+        } else {
+          this.messageLoader = false;
+          this.utils.openSnackBar('Message not sent', 'error');
+        }
+      }, err => {if(err) {this.messageLoader = false}})
+    }
+ }
+}

package/src/lib/component/route-jobcode-list/sms-card-details-overview/sms-card-details-overview.component.html

@@ -0,0 +1,7 @@
+<ng-container *ngFor="let item of label">
+  <span>
+    <label>{{overViewEnum[item]}}</label>
+    <ng-container *ngIf="item !== 'values'">{{jobValue[item] ? jobValue[item] : 'N/A'}}</ng-container>
+    <ng-container *ngIf="item === 'values'">{{jobValue[item]['Done'] + jobValue[item]['Ongoing'] + jobValue[item]['Open']}}</ng-container>
+  </span>
+</ng-container>

package/src/lib/component/route-jobcode-list/sms-card-details-overview/sms-card-details-overview.component.scss

@@ -0,0 +1,10 @@
+span{
+  display: flex;
+  margin-bottom: 12px;
+  font-size: 0.8rem;
+  align-items: center;
+  label{
+      font-weight: 600;
+      width: 37%;
+  }
+}

package/src/lib/component/route-jobcode-list/sms-card-details-overview/sms-card-details-overview.component.spec.ts

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

package/src/lib/component/route-jobcode-list/sms-card-details-overview/sms-card-details-overview.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import { DriverSmsCardEnum, DriversmsCardKey } from '@aggdirect/coolmap-services';
+
+@Component({
+  selector: 'app-sms-card-details-overview',
+  templateUrl: './sms-card-details-overview.component.html',
+  styleUrls: ['./sms-card-details-overview.component.scss']
+})
+export class SmsCardDetailsOverviewComponent {
+  @Input() public jobValue: any;
+  label = DriversmsCardKey;
+  overViewEnum: any = DriverSmsCardEnum;
+  constructor() { }
+
+}