Client Management Dashboard - Copy this Angular, Css Component to your project
<div class="card card custom gutter b"> <! Card Header with Search and Add Client Button > <div class="card header d flex justify content between align items center"> <! Search Form > <div class="card title"> <form class="d flex flex center rounded border pl 3" [formGroup]="searchGroup"> <span class="svg icon svg icon lg svg icon primary"> <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"> <path d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z" fill="#000000" opacity="0.3"></path> <path d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z" fill="#000000"></path> </svg> </span> <input type="text" class="form control border 0 font weight bold pl 2" name="searchText" placeholder="Search" formControlName="searchTerm"> </form> </div> <! Add Client Button > <div class="card toolbar"> <button type="button" class="btn btn primary" (click)="add()">Add Client</button> </div> </div> <! Card Body with Table > <div class="card body"> <div class="table responsive"> <table class="table table head custom table vertical center"> <! Table Header > <thead> <tr> <th>Business Name</th> <th>DBA Name</th> <th>Website</th> <th>USDOT</th> <th>E Mail</th> <th>Phone</th> <th>Status</th> <th>Actions</th> </tr> </thead> <! Table Body > <tbody class="fw semibold text gray 600"> <tr *ngFor="let Corp of corporateService.items$ | async"> <td> <a class="font weight bold cursor pointer" (click)="viewEdit(Corp.companyID)"> {{Corp.legalBusinessName}} </a> </td> <td>{{Corp.dbaName}}</td> <td> <a *ngIf="Corp.typeOfBusinessName === 'Broker'" [href]="Corp.website" target="_blank">{{ Corp.website }}</a> <a *ngIf="Corp.typeOfBusinessName === 'Carrier'" [href]="Corp.website" target="_blank">{{ Corp.website }}</a> <a *ngIf="Corp.typeOfBusinessName === 'Shipper'" [href]="Corp.website" target="_blank">{{ Corp.website }}</a> <span *ngIf="Corp.typeOfBusinessName !== 'Broker' && Corp.typeOfBusinessName !== 'Carrier' && Corp.typeOfBusinessName !== 'Shipper'">{{ Corp.website }}</span> </td> <td>{{Corp.usdotNumber}}</td> <td>{{Corp.emailID}}</td> <td>{{Corp.phoneNo}}</td> <td> <span class="label label lg label inline" [class.label light danger]="Corp.enabled === false" [class.label light success]="Corp.enabled === true"> <ng container *ngIf="Corp.enabled === null">Pending</ng container> <ng container *ngIf="Corp.enabled === true">Active</ng container> <ng container *ngIf="Corp.enabled === false">Inactive</ng container> </span> </td> <td> <div class="dropdown dropdown inline"> <a class="btn btn clean btn hover light primary btn sm btn icon" data toggle="dropdown" aria haspopup="true" aria expanded="false"> <i class="ki ki bold more ver"></i> </a> <div class="dropdown menu dropdown menu md dropdown menu right"> <ul class="navi"> <li class="navi item"> <a title="Edit vendor" class="navi link" (click)="edit(Corp.companyID)"> <span class="navi icon"><i class="fa fa pencil alt"></i></span> <span class="navi text">Edit</span> </a> </li> <li class="navi item"> <a class="navi link"> <span class="navi icon"><i class="fa fa user small"></i></span> <span class="navi text">Client</span> </a> </li> <li class="navi item"> <a class="navi link" (click)="open(content, Corp.companyID)"> <span class="navi icon"><i class="fa fa paper plane"></i></span> <span class="navi text">Send Request</span> </a> </li> </ul> </div> </div> </td> </tr> </tbody> </table> </div> </div> <! Modal for Send Request > <div class="example preview"> <span *ngIf="closeResult"> <pre>{{closeResult}}</pre> </span> <div> <ng template #content let c="close" let d="dismiss"> <div class="modal header"> <h5 class="modal title">Send Authorization Request</h5> <button type="button" class="close" data dismiss="modal" aria label="Close" (click)="c('Close click')"> <i aria hidden="true" class="ki ki close"></i> </button> </div> <div class="modal body"> <div class="row"> <! Email Selection > <div class="col md 12 form group"> <label class="form label">Where we are sending the request</label> <select class="form control form control solid form control lg" [(ngModel)]="selectedEmail" (change)="onChangeEmail($event)"> <option [ngValue]="null">Select Email</option> <option *ngFor="let c of EmailList" [value]="c.emailID">{{c.emailID}}</option> </select> </div> <! Email Input > <div class="col md 12 form group"> <label class="form label">Enter the email address to send the authorization request</label> <input type="text" class="form control form control solid form control lg" [(ngModel)]="toEmail" placeholder="Email Address" /> </div> <! From Email > <div class="col md 12 form group"> <label class="form label">Who wants to know when the customer is done?</label> <input type="text" class="form control form control solid form control lg" [(ngModel)]="fromEmail" placeholder="From Email" /> <div class="p 5"></div> <! Confirmation Email Toggle > <div class="form group"> <label class="checkbox mb 0 switch"> <input type="checkbox" /><span class="slider round"></span> Send Confirmation Email? </label> </div> </div> </div> </div> <div class="modal footer"> <button type="button" class="btn btn secondary" (click)="c('Close click')">Close</button> <button type="button" class="btn btn primary" (click)="sendAcc()">Send</button> </div> </ng template> </div> </div> <! Paginator Component > <app paginator class="d flex justify content between col 12 p 8 align items center flex wrap" [paginator]="paginator" [isLoading]="isLoading" (paginate)="paginate($event)"></app paginator> </div>
