Merge pull request #4 from sartography/dashboard

Dashboard

package.json

@@ -36,8 +36,11 @@
     "@ngx-formly/core": "^5.8.0",
     "@ngx-formly/material": "^5.8.0",
     "bwip-js": "^2.0.11",
+    "chart.js": "^2.9.4",
+    "chartjs-plugin-datalabels": "^0.7.0",
     "code-128-encoder": "^3.1.1",
     "lodash.isequal": "^4.5.0",
+    "ng2-charts": "^2.4.2",
     "ngx-qrcode-svg": "^2.0.0",
     "rfdc": "^1.1.4",
     "rxjs": "~6.6.3",
@@ -46,7 +49,7 @@
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1001.2",
+    "@angular-devkit/build-angular": "^0.1101.1",
     "@angular/cli": "^10.1.2",
     "@angular/compiler-cli": "~11.0.0-next.2",
     "@angular/language-service": "~11.0.0-next.2",

src/app/app-routing.module.ts

@@ -1,11 +1,15 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-import {ThisEnvironment} from '../environments/environment.injectable';
-import {CountComponent} from './count/count.component';
-import {PrintComponent} from './print/print.component';
-import {SampleComponent} from './sample/sample.component';
-import {SettingsComponent} from './settings/settings.component';
-import {MultipleLabelsComponent} from './multiple-labels/multiple-labels.component';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ThisEnvironment } from '../environments/environment.injectable';
+import { CountComponent } from './count/count.component';
+import { PrintComponent } from './print/print.component';
+import { SampleComponent } from './sample/sample.component';
+import { SettingsComponent } from './settings/settings.component';
+import { MultipleLabelsComponent } from './multiple-labels/multiple-labels.component';
+import { DepositsComponent } from './deposits/deposits.component';
+import { GraphsComponent } from './graphs/graphs.component';
+import { ImportedFilesComponent } from './imported-files/imported-files.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
 
 export const routes: Routes = [
   {
@@ -13,6 +17,28 @@ export const routes: Routes = [
     pathMatch: 'full',
     component: SampleComponent
   },
+  {
+    path: 'dashboard',
+    component: SidebarComponent,
+    children: [
+      {
+        path: '', // child route path
+        component: GraphsComponent, // child route component that the router renders
+      },
+      {
+        path: 'graphs', // child route path
+        component: GraphsComponent, // child route component that the router renders
+      },
+      {
+        path: 'imports',
+        component: ImportedFilesComponent
+      },
+      {
+        path: 'deposits',
+        component: DepositsComponent
+      },
+    ],
+  },
   {
     path: 'sample',
     pathMatch: 'full',
@@ -50,7 +76,7 @@ export const routes: Routes = [
   ],
   exports: [RouterModule],
   providers: [
-    {provide: 'APP_ENVIRONMENT', useClass: ThisEnvironment},
+    { provide: 'APP_ENVIRONMENT', useClass: ThisEnvironment },
   ]
 })
 export class AppRoutingModule {

src/app/app.component.ts

@@ -1,6 +1,8 @@
-import {Component, Inject} from '@angular/core';
-import {Title} from '@angular/platform-browser';
-import {AppEnvironment} from './models/appEnvironment.interface';
+import { Component, Inject, OnInit} from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { AppEnvironment } from './models/appEnvironment.interface';
+
+declare var jQuery: any;
 
 @Component({
   selector: 'app-root',
@@ -18,7 +20,6 @@ export class AppComponent {
     this.titleService.setTitle(this.environment.title);
   }
 
-
   reload() {
     this.loading = true;
     setTimeout(() => this.loading = false, 300);

src/app/app.module.ts

@@ -1,9 +1,11 @@
 import {APP_BASE_HREF, PlatformLocation} from '@angular/common';
-import {HttpClientModule} from '@angular/common/http';
+import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatCardModule} from '@angular/material/card';
 import {MatOptionModule} from '@angular/material/core';
 import {MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule} from '@angular/material/form-field';
@@ -32,11 +34,29 @@ import {PrintLayoutComponent} from './print-layout/print-layout.component';
 import {PrintComponent} from './print/print.component';
 import {SampleComponent} from './sample/sample.component';
 import {ApiService} from './services/api.service';
+import {GraphService} from './services/graph.service';
 import {CacheService} from './services/cache.service';
 import {SettingsService} from './services/settings.service';
 import {SettingsComponent} from './settings/settings.component';
 import {MultipleLabelsComponent} from './multiple-labels/multiple-labels.component';
 import {RectangleDatamatrixRectangularComponent} from './label-layout/formats/rectangle-datamatrix-rectangular/rectangle-datamatrix-rectangular.component';
+import { BrowserModule } from '@angular/platform-browser';
+import { DepositsComponent } from './deposits/deposits.component';
+import { ImportedFilesComponent } from './imported-files/imported-files.component';
+import { GraphsComponent } from './graphs/graphs.component';
+import { ChartsModule } from 'ng2-charts';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule, DateAdapter } from '@angular/material/core';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import { MatTableModule } from '@angular/material/table';
+import {MatGridListModule} from '@angular/material/grid-list';
+import {MatDividerModule} from '@angular/material/divider';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import {MatListModule} from '@angular/material/list';
+import { ChangeDatePipe } from './change_date.pipe';
+import {DevHeaderInterceptorInterceptor} from './dev-header-interceptor.interceptor';
+
+
 
 /**
  * This function is used internal to get a string instance of the `<base href="" />` value from `index.html`.
@@ -72,8 +92,23 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     RectangleDatamatrixRectangularComponent,
     SampleComponent,
     SettingsComponent,
+    DepositsComponent,
+    GraphsComponent,
+    ImportedFilesComponent,
+    SidebarComponent,
+    ChangeDatePipe
   ],
   imports: [
+    MatPaginatorModule,
+    MatListModule,
+    MatSidenavModule,
+    MatDividerModule,
+    MatGridListModule,
+    MatTableModule,
+    MatNativeDateModule,
+    MatCheckboxModule,
+    BrowserModule,
+    ChartsModule,
     BrowserAnimationsModule,
     FlexLayoutModule,
     FormlyModule,
@@ -81,6 +116,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     HttpClientModule,
     MatButtonModule,
     MatCardModule,
+    MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
@@ -92,13 +128,17 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     ReactiveFormsModule,
     AppRoutingModule, // <-- This line MUST be last (https://angular.io/guide/router#module-import-order-matters)
   ],
+
   providers: [
     ApiService,
+    GraphService,
     CacheService,
     SettingsService,
+    MatDatepickerModule,
     {provide: 'APP_ENVIRONMENT', useClass: ThisEnvironment},
     {provide: APP_BASE_HREF, useFactory: getBaseHref, deps: [PlatformLocation]},
     {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}},
+    {provide: HTTP_INTERCEPTORS, useClass: DevHeaderInterceptorInterceptor, multi: true}
   ],
   bootstrap: [AppComponent],
   entryComponents: []

src/app/change_date.pipe.ts

@@ -0,0 +1,27 @@
+
+/** Adapts the native JS Date for use with cdk-based components that work with dates. */
+import { Pipe, PipeTransform } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+@Pipe({ name: 'changed_date' })
+export class ChangeDatePipe implements PipeTransform {
+  // adding a default value in case you don't want to pass the format then 'yyyy-MM-dd' will be used
+  transform(date: Date | string, day: number, format: string = 'yyyy-MM-dd'): string {
+    date = new Date(date);  // if orginal type was a string
+    date.setDate(date.getDate() - day);
+    return new DatePipe('en-US').transform(date, format);
+  }
+}
+
+// @Pipe({ name: 'date' })
+// @Injectable()
+// export class CustomDateAdapter extends NativeDateAdapter implements PipeTransform  {
+//   transform(value: any, ...args: any[]) {
+//     throw new Error('Method not implemented.');
+//   }
+
+//   getFirstDayOfWeek(): number {
+//    return 1;
+//   }
+
+// }

src/app/deposits/deposits.component.html

@@ -0,0 +1,89 @@
+<div
+  class="full-height bg-primary"
+  fxLayout="row"
+  fxLayoutAlign="center center"
+  fxLayoutGap="40px"
+>
+  <mat-card fxFlex="50%">
+    <mat-card-header>
+      <h1>Inventory Deposits</h1>
+    </mat-card-header>
+        <mat-card-header> <h4 class="card-title">(Total Inventory - Total Prints) since 10/5/2020: {{topBarData[7]}} Labels
+        Remaining</h4>
+    </mat-card-header>
+
+    <mat-card-content fxLayout="row wrap" fxLayoutAlign="center center">
+      <table mat-table [dataSource]="depositList" class="mat-elevation-z8">
+
+        <!--- Note that these columns can bea defined in any order.
+              The actual rendered columns are set as a property on the row definition" -->
+    
+        <!-- Position Column -->
+        <ng-container matColumnDef="position">
+          <th mat-header-cell *matHeaderCellDef> Date Added <br>
+            <input matInput 
+            [(ngModel)]="dateTemp" 
+            [value] = "dateTemp" 
+            [matDatepicker]="picker"
+            (keyup.enter)="addDeposit()">
+            <mat-datepicker #picker></mat-datepicker>
+            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+          </th>
+          <td mat-cell *matCellDef="let element"> {{element.date_added |changed_date : 0:"medium"}} </td>
+        </ng-container>
+      
+        <!-- Name Column -->
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef> Amount <br>
+            <input 
+            [(ngModel)]="newDeposit.amount" 
+            (keyup.enter)="addDeposit()">
+          </th>
+          <td mat-cell *matCellDef="let element"> {{element.amount}} </td>
+        </ng-container>
+      
+        <!-- Weight Column -->
+        <ng-container matColumnDef="weight">
+          <th mat-header-cell *matHeaderCellDef> Notes 
+            <br> <input 
+            [(ngModel)]="newDeposit.notes"
+            (keyup.enter)="addDeposit()">
+          </th>
+          <td mat-cell *matCellDef="let element"> {{element.notes}} </td>
+        </ng-container>
+        
+        <ng-container matColumnDef="text">
+          <mat-header-cell *matHeaderCellDef> Index </mat-header-cell>
+          <mat-cell *matCellDef="let element; let i = index;">{{i}}</mat-cell>
+        </ng-container>
+        
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
+      <mat-card-actions>
+        <button
+        mat-flat-button
+        class="btn-lg"
+        color="accent"
+        fxFlex="50%"
+        (click) = "prev()"
+      ><mat-icon>navigate_before</mat-icon>Prev </button>
+        <button
+          id="btn_next"
+          #nextButton="matButton"
+          mat-flat-button
+          class="btn-lg"
+          color="accent"
+          fxFlex="50%"
+          (click) = "next()"
+        >Next <mat-icon>navigate_next</mat-icon></button>
+       
+      </mat-card-actions>
+ 
+
+     
+    </mat-card-content>
+    
+  </mat-card>
+
+</div>

src/app/deposits/deposits.component.spec.ts

@@ -0,0 +1,61 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {APP_BASE_HREF} from '@angular/common';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {Router} from '@angular/router';
+import {ApiService} from '../services/api.service';
+import {CacheService} from '../services/cache.service';
+import {SettingsService} from '../services/settings.service';
+import {MockEnvironment} from '../testing/environment.mock';
+
+import { DepositsComponent } from './deposits.component';
+
+describe('DepositsComponent', () => {
+  let component: DepositsComponent;
+  let fixture: ComponentFixture<DepositsComponent>;
+  const mockRouter = {navigate: jasmine.createSpy('navigate')};
+  let httpMock: HttpTestingController;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DepositsComponent ],
+      imports: [
+        HttpClientTestingModule,
+        MatButtonModule,
+        MatCardModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        NoopAnimationsModule,
+        ReactiveFormsModule,
+      ],
+      providers: [
+        {provide: 'APP_ENVIRONMENT', useClass: MockEnvironment},
+        {provide: APP_BASE_HREF, useValue: '/'},
+        {provide: Router, useValue: mockRouter},
+        ApiService,
+        CacheService,
+        SettingsService,
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+
+    httpMock = TestBed.inject(HttpTestingController);
+    fixture = TestBed.createComponent(DepositsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/deposits/deposits.component.ts

@@ -0,0 +1,84 @@
+import { Component, OnInit } from '@angular/core';
+import { GraphService } from '../services/graph.service';
+import { PageEvent } from '@angular/material/paginator';
+import { ApiService } from '../services/api.service';
+import { InventoryDeposit } from '../models/deposit.interface';
+import { SearchForm } from '../models/search_form';
+@Component({
+  selector: 'app-deposits',
+  templateUrl: './deposits.component.html',
+  styleUrls: ['./deposits.component.css']
+})
+export class DepositsComponent implements OnInit {
+  constructor(
+    private depositService: ApiService,
+    private graphService: GraphService) {
+  }
+  depositList: InventoryDeposit[] = [];
+  newDeposit: InventoryDeposit = {
+    amount: 0,
+    date_added: '',
+    notes: ''
+  };
+
+  dateTemp = new Date(Date.now());
+
+
+  form: SearchForm = {
+    startDate: '10/05/2020',
+    endDate: new Date().toLocaleDateString(),
+    studentId: '',
+    location: '',
+    computeId: '',
+    includeTests: false
+  };
+
+  remainingLabels: number;
+
+  topBarData: Array<number> = [0, 0, 0, 0, 0, 0, 0, 0];
+
+  currentPage = 0;
+
+  pageSize = 10;
+  pageSizeOptions: number[] = [10, 20, 50, 100];
+  displayedColumns: string[] = ['position', 'name', 'weight'];
+  addDeposit(): void {
+    this.newDeposit.date_added = this.dateTemp.toLocaleDateString();
+
+    this.depositService.addDeposit(this.newDeposit).subscribe();
+    this.loadPage(0);
+  }
+
+  changePage(event: PageEvent) {
+    this.currentPage = event.pageIndex;
+    this.depositService.getDeposits(this.currentPage).subscribe(searchResult => this.depositList = searchResult);
+  }
+
+  loadPage(event: number) {
+    this.currentPage = event;
+    this.depositService.getDeposits(this.currentPage).subscribe(searchResult => this.depositList = searchResult);
+    this.graphService.getTopBarData(this.form).subscribe(tempData => {
+      this.topBarData = tempData;
+    });
+  }
+
+  next(){
+    if (this.depositList.length > 0){
+    this.currentPage += 1;
+    this.loadPage(this.currentPage);
+  }
+  }
+
+  prev(){
+    if (this.currentPage > 0){
+      this.currentPage -= 1;
+      this.loadPage(this.currentPage);
+    }
+  }
+
+  ngOnInit(): void {
+
+    this.loadPage(0);
+  }
+
+}

src/app/dev-header-interceptor.interceptor.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DevHeaderInterceptorInterceptor } from './dev-header-interceptor.interceptor';
+
+describe('DevHeaderInterceptorInterceptor', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    providers: [
+      DevHeaderInterceptorInterceptor
+      ]
+  }));
+
+  it('should be created', () => {
+    const interceptor: DevHeaderInterceptorInterceptor = TestBed.inject(DevHeaderInterceptorInterceptor);
+    expect(interceptor).toBeTruthy();
+  });
+});

src/app/dev-header-interceptor.interceptor.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpRequest,
+  HttpHandler,
+  HttpEvent,
+  HttpInterceptor
+} from '@angular/common/http';
+import { Observable } from 'rxjs';
+import {environment} from '../environments/environment.runtime';
+
+@Injectable()
+export class DevHeaderInterceptorInterceptor implements HttpInterceptor {
+  // This adds a uid header to all requests in development mode to mimic the data that is added
+  // automatically by the shibboleth single-sign-on service that the production system sits behind.
+
+  constructor() {}
+
+  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    // Clone the request to add the new header
+    if (!environment.production) {
+      const clonedRequest = request.clone({ headers: request.headers.append('X-Remote-Uid', 'devuser') });
+      return next.handle(clonedRequest);
+    } else {
+      return next.handle(request);
+    }
+  }
+}

src/app/graphs/graphs.component.css

@@ -0,0 +1,36 @@
+/* https://css-tricks.com/dont-overthink-flexbox-grids/ */
+.flex-grid {
+  display: flex;
+  align-items: center;
+}
+
+.flex-grid-plot .col {
+  flex: 2;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+mat-form-field {
+  margin: 20px;
+
+}
+
+mat-card {
+  margin: 20px;
+}
+
+body {
+  padding: 20px;
+}
+button {
+  padding: 20px;
+}
+.flex-grid { 
+  margin: 0 20px 20px 0;
+}
+.col {
+  padding: 20px;
+}
+

src/app/graphs/graphs.component.html

@@ -0,0 +1,175 @@
+<div class="full-height flex-container bg-primary">
+  <div class="flex-grid">
+    <mat-card class="col">
+      <h5 class="card-title text-uppercase text-muted">Total Samples within<br> {{form.startDate |changed_date : 0}}
+        -
+        {{form.endDate |changed_date : 0}}</h5>
+      <span class="h2 font-weight-bold">{{topBarData[0]}}</span>
+    </mat-card>
+
+    <mat-card class="col">
+      <h5 class="card-title text-uppercase text-muted mb-0">Total Samples within <br> {{form.startDate | changed_date: 7:'mediumDate'}}
+        -
+        {{form.endDate | changed_date: 7: 'mediumDate'}}</h5>
+      <span class="h2 font-weight-bold ">{{topBarData[1]}}</span>
+    </mat-card>
+
+    <mat-card class="col">
+      <h5 class="card-title text-uppercase text-muted ">Total Samples within <br> {{form.startDate |
+        changed_date: 14:'mediumDate'}}
+        -
+        {{form.endDate | changed_date: 14:'mediumDate'}}</h5>
+      <span class="h2 font-weight-bold ">{{topBarData[2]}}</span>
+    </mat-card>
+
+    <mat-card class="col">
+      <h5 class="card-title text-uppercase text-muted ">Email Notifications within <br>
+        {{form.startDate |
+       changed_date : 0}} - {{form.endDate |changed_date : 0}}</h5>
+      <span class="h2 font-weight-bold "><span style="color:green">{{topBarData[3]}}</span>/<span
+          style="color:red">{{topBarData[4]}}</span></span>
+    </mat-card>
+
+    <mat-card class="col">
+      <h5 class="card-title text-uppercase text-muted ">Text Notifications within <br>
+        {{form.startDate |
+       changed_date : 0}} - {{form.endDate |changed_date : 0}}</h5>
+      <span class="h2 font-weight-bold"><span style="color:green">{{topBarData[5]}}</span>/<span
+          style="color:red">{{topBarData[6]}}</span></span>
+    </mat-card>
+  </div>
+  <mat-card>
+
+    <div class="flex-grid">
+      <div class="col" style="width: 300px">
+        <h1>Search</h1> 
+        <button mat-raised-button class="btn-lg" color="primary" (click)="searchToday()">Today</button>
+        <button mat-raised-button class="btn-lg" color="primary" (click)="searchAll()">All</button>
+        <button mat-raised-button class="btn-lg" color="primary" (click)="updateGraphData()">Run</button>
+        <br>
+        <mat-checkbox [(ngModel)]="form.includeTests">Include Test Labels</mat-checkbox>
+      </div>
+      <div class="col" style="width: flex">
+          <mat-form-field>
+            <mat-date-range-input [rangePicker]="picker">
+              <input matStartDate [(ngModel)]="startDate">
+              <input matEndDate [(ngModel)]="endDate">
+            </mat-date-range-input>
+              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+              <mat-date-range-picker #picker></mat-date-range-picker>
+          </mat-form-field>
+        <mat-form-field>
+          <mat-label>Location ID(s)</mat-label>
+          <textarea matInput [(ngModel)]="form.location" placeholder="Location Codes"></textarea>
+        </mat-form-field>
+  
+        <mat-form-field>
+          <mat-label>Student ID(s)</mat-label>
+          <textarea matInput [(ngModel)]="form.studentId" placeholder="Ex. 00224483"></textarea>
+        </mat-form-field>
+  
+        <mat-form-field>
+          <mat-label>Compute ID(s)</mat-label>
+          <textarea matInput [(ngModel)]="form.computeId" placeholder="Ex. ECC8Z"></textarea>
+        </mat-form-field>
+        
+      </div>
+    </div>
+  
+  </mat-card>
+  <div class="flex-grid flex-grid-plot">
+    <mat-card class="col">
+      <mat-card-header>
+        <h1>{{ChartName}}</h1>
+      </mat-card-header>
+
+      <div style="display: block">
+        <canvas baseChart [datasets]="dailyChartsData" [labels]="dailyChartLabels" [options]="barChartOptions"
+          [legend]="true" chartType="bar" (chartClick)="chartClicked($event)">
+        </canvas>
+      </div>
+    </mat-card>
+
+    <mat-card class="col">
+      <mat-card-header>
+        <h1>Average Count By Weekday For {{form.startDate |changed_date : 0}} - {{form.endDate |changed_date : 0}}</h1>
+      </mat-card-header>
+
+      <div style="display: block">
+        <canvas baseChart [datasets]="weekdayChartsData" [labels]="weekdayChartLabels" [options]="barChartOptions"
+          [legend]=false chartType="horizontalBar">
+        </canvas>
+      </div>
+    </mat-card>
+
+    <mat-card class="col">
+      <mat-card-header>
+        <h1>Average Count By Hour For {{form.startDate |changed_date : 0}} - {{form.endDate |changed_date : 0}}</h1>
+      </mat-card-header>
+
+      <div style="display: block">
+        <canvas baseChart [datasets]="hourlyChartsData" [labels]="hourlyChartLabels" [options]="barChartOptions"
+          [legend]=false chartType="horizontalBar">
+        </canvas>
+      </div>
+    </mat-card>
+  </div>
+
+  <mat-card>
+    <mat-card-header>
+      <h3 class="mb-0">Records to be processed </h3>
+    </mat-card-header>
+
+    <table mat-table [dataSource]="searchResult" class="mat-elevation-z8">
+
+      <!--- Note that these columns can bea defined in any order.
+              The actual rendered columns are set as a property on the row definition" -->
+
+      <!-- Position Column -->
+      <ng-container matColumnDef="position">
+        <th mat-header-cell *matHeaderCellDef> Barcode </th>
+
+        <td mat-cell *matCellDef="let sample; "> {{sample.barcode}} </td>
+      </ng-container>
+
+      <!-- Name Column -->
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Date </th>
+
+        <td mat-cell *matCellDef="let sample; "> {{sample.date}}</td>
+      </ng-container>
+
+      <!-- Weight Column -->
+      <ng-container matColumnDef="weight">
+        <th mat-header-cell *matHeaderCellDef> Location </th>
+
+        <td mat-cell *matCellDef="let sample; "> Location: {{sample.location}}<br>Station:
+          {{sample.station}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="email">
+
+        <th mat-header-cell *matHeaderCellDef> IDs </th>
+        <td mat-cell *matCellDef="let sample; ">
+          Compute ID: {{sample.computeId}}<br>Student ID: {{sample.studentId}}
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="text">
+        <th mat-header-cell *matHeaderCellDef> Contacts </th>
+        <td mat-cell *matCellDef="let sample; ">
+          Phone: {{sample.phone}}<br>Email: {{sample.email}}
+        </td>
+      </ng-container>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+    <mat-paginator #paginator [length]="topBarData[0]" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
+    (page)="updatePage($event)">
+  </mat-paginator> 
+  </mat-card>
+
+</div>
+
+<!-- 
+
+-->

src/app/graphs/graphs.component.spec.ts

@@ -0,0 +1,51 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GraphsComponent } from './graphs.component';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
+import {RouterTestingModule} from '@angular/router/testing';
+import {ApiService} from '../services/api.service';
+import {APP_BASE_HREF} from '@angular/common';
+import {Router} from '@angular/router';
+import {MockEnvironment} from '../testing/environment.mock';
+import { ChangeDatePipe } from '../change_date.pipe';
+
+describe('GraphsComponent', () => {
+  let component: GraphsComponent;
+  let fixture: ComponentFixture<GraphsComponent>;
+  let httpMock: HttpTestingController;
+  const mockEnvironment = new MockEnvironment();
+  const mockRouter = {
+    createUrlTree: jasmine.createSpy('createUrlTree'),
+    navigate: jasmine.createSpy('navigate')
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        GraphsComponent,
+        ChangeDatePipe
+      ],
+      imports: [
+        HttpClientTestingModule,
+        MatBottomSheetModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        ApiService,
+        {provide: 'APP_ENVIRONMENT', useValue: mockEnvironment},
+        {provide: APP_BASE_HREF, useValue: '/'},
+        {provide: Router, useValue: mockRouter},
+        {provide: Location, useValue: location},
+      ]
+    });
+    httpMock = TestBed.inject(HttpTestingController);
+    fixture = TestBed.createComponent(GraphsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/graphs/graphs.component.ts

@@ -0,0 +1,203 @@
+import { Component, OnInit } from '@angular/core';
+import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
+
+import { Label } from 'ng2-charts';
+import { GraphService } from '../services/graph.service';
+import { Sample } from '../models/sample.interface';
+import { SearchForm } from '../models/search_form';
+
+import {PageEvent} from '@angular/material/paginator';
+import * as pluginDataLabels from 'chartjs-plugin-datalabels';
+
+
+@Component({
+  selector: 'app-graphs',
+  templateUrl: './graphs.component.html',
+  styleUrls: ['./graphs.component.css']
+})
+
+export class GraphsComponent implements OnInit {
+
+  constructor(private graphService: GraphService) { }
+
+  topBarData: Array<number> = [0, 0, 0, 0, 0, 0, 0, 0];
+  ChartName = 'Location Activity';
+  dailyChartLabels: Label[] = [];
+  weekdayChartLabels: Label[] = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+  hourlyChartLabels: Label[] = ['1 AM', '2 AM', '3 AM', '4 AM', '5 AM', '6 AM', '7 AM', '8 AM', '9 AM', '10 AM', '11 AM', '12 AM', '1 PM', '2 PM', '3 PM', '4 PM', '5 PM', '6 PM', '7 PM', '8 PM', '9 PM', '10 PM', '11 PM', '12 PM'];
+  dailyChartsData: ChartDataSets[] = [];
+  hourlyChartsData: ChartDataSets[] = [];
+  weekdayChartsData: ChartDataSets[] = [];
+
+  barChartPlugins = [pluginDataLabels];
+  barChartOptions: ChartOptions = {
+    responsive: true,
+    // We use these empty structures as placeholders for dynamic theming.
+    scales: {
+      xAxes: [{
+        ticks: {
+          beginAtZero: true
+        },
+        stacked: true
+      }],
+      yAxes: [{
+        ticks: {
+          beginAtZero: true
+        },
+        stacked: true
+      }]
+    },
+    legend: {
+      onClick: (e, i) => {
+        this.form.location = String(i.text);
+        this.updateGraphData();
+      }
+    },
+    plugins: {
+      datalabels: {
+
+        rotation: -45,
+        anchor: 'end',
+        align: 'end',
+        formatter: (value: any, ctx: any) => {
+
+          const datasets = ctx.chart.data.datasets;
+          if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
+            let sum = 0;
+            datasets.map((dataset: any) => {
+              sum += dataset.data[ctx.dataIndex];
+            });
+            return sum;
+          } else {
+            return '';
+          }
+        }
+      }
+    }, layout: {
+      padding: {
+        left: 0,
+        right: 20,
+        top: 30,
+        bottom: 0
+      }
+    }
+  };
+  tempData: JSON = {} as JSON;
+
+  searchResult: Sample[] = [];
+  displayedColumns: string[] = ['position', 'name', 'weight', 'text', 'email'];
+
+  startDate: Date = new Date();
+  endDate: Date = new Date();
+
+  currentPage = 0;
+  pageSize = 10;
+  pageSizeOptions: number[] = [10, 20, 50, 100];
+
+  form: SearchForm = {
+    startDate: '',
+    endDate: '',
+    studentId: '',
+    location: '',
+    computeId: '',
+    includeTests: false
+  };
+
+  updatePage(event: PageEvent) {
+    this.currentPage = event.pageIndex;
+    this.graphService.getRawSearchData(this.form, this.currentPage).subscribe(searchResult => this.searchResult = searchResult);
+  }
+
+
+  searchToday(): void {
+    this.startDate = new Date();
+    this.endDate = new Date();
+    this.updateGraphData();
+  }
+
+  searchAll(): void {
+    this.startDate = new Date(2020, 9, 5);
+    this.endDate = new Date();
+    this.updateGraphData();
+  }
+
+  updateGraphData(): void {
+
+    if (this.form.location.trim().split(' ').length === 1) {
+      this.ChartName = 'Total Samples per Station @ Location ' + this.form.location;
+    } else {
+      this.ChartName = 'Total Samples per Location';
+    }
+    if (this.form.location.trim() === '') {
+      this.ChartName = 'Total Samples per Location';
+    }
+
+    this.form.startDate = this.startDate.toLocaleDateString();
+    this.form.endDate = this.endDate.toLocaleDateString();
+
+    const temp = new Date(this.startDate.getTime());
+    this.dailyChartLabels = [];
+    while (true) {
+      this.dailyChartLabels.push(temp.toLocaleDateString());
+      if (temp.toLocaleDateString() === this.endDate.toLocaleDateString()) {
+        break;
+      } else {
+        temp.setDate(temp.getDate() + 1);
+      }
+    }
+
+    this.graphService.getDayData(this.form).subscribe(tempData => {
+      this.tempData = tempData;
+      this.dailyChartsData = [];
+      Object.entries(this.tempData).forEach(([LOC_OR_STAT_NAME, totals]) => {
+        this.dailyChartsData.push({ data: totals, label: LOC_OR_STAT_NAME, stack: 'a' });
+      });
+    });
+
+    this.graphService.getWeekdayData(this.form).subscribe(tempData => {
+      this.tempData = tempData;
+      this.weekdayChartsData = [];
+      Object.entries(this.tempData).forEach(([LOC_OR_STAT_NAME, totals]) => {
+        this.weekdayChartsData.push({ data: totals, label: LOC_OR_STAT_NAME, stack: 'a' });
+      });
+    });
+
+    this.graphService.getHourData(this.form).subscribe(tempData => {
+      this.tempData = tempData;
+      this.hourlyChartsData = [];
+      Object.entries(this.tempData).forEach(([LOC_OR_STAT_NAME, totals]) => {
+        this.hourlyChartsData.push({ data: totals, label: LOC_OR_STAT_NAME, stack: 'c' });
+      });
+    });
+
+    this.graphService.getTopBarData(this.form).subscribe(tempData => {
+      this.topBarData = tempData;
+    });
+    this.graphService.getRawSearchData(this.form, 0).subscribe(searchResult => this.searchResult = searchResult);
+  }
+
+  ngOnInit(): void {
+    const endDate = new Date();
+    const startDate = new Date();
+    this.form.startDate = startDate.toLocaleDateString();
+    this.form.endDate = endDate.toLocaleDateString();
+    this.updateGraphData();
+  }
+
+  chartClicked(e: any): void {
+    if (e.active.length > 0) {
+      const chart = e.active[0]._chart;
+      const activePoints = chart.getElementAtEvent(e.event);
+      if (activePoints.length > 0) {
+        // get the internal index of slice in pie chart
+        const clickedElementIndex = activePoints[0]._index;
+        const label = chart.data.labels[clickedElementIndex];
+        // get value by index
+        const value = chart.data.datasets[0].data[clickedElementIndex];
+        console.log(clickedElementIndex, label, value);
+        // this.updateGraphData();
+      }
+    }
+  }
+
+}

src/app/imported-files/imported-files.component.html

@@ -0,0 +1,87 @@
+
+<div
+  class="full-height bg-primary"
+  fxLayout="row"
+  fxLayoutAlign="center center"
+  fxLayoutGap="40px"
+>
+  <mat-card fxFlex="50%">
+    <mat-card-header>
+      <h1>The following files were imported from IVY</h1>
+    </mat-card-header>
+
+    <mat-card-content fxLayout="row wrap" fxLayoutAlign="center center">
+        <table mat-table [dataSource]="fileDataList" class="mat-elevation-z8">
+
+            <!--- Note that these columns can bea defined in any order.
+                  The actual rendered columns are set as a property on the row definition" -->
+          
+            <!-- Position Column -->
+            <ng-container matColumnDef="position">
+              <th mat-header-cell *matHeaderCellDef> Date Added </th>
+              
+              <td mat-cell *matCellDef="let element; let i = index;"> {{element[0] |changed_date : 0:"medium"}} </td>
+            </ng-container>
+          
+            <!-- Name Column -->
+            <ng-container matColumnDef="name">
+              <th mat-header-cell *matHeaderCellDef> File Name </th>
+              
+              <td mat-cell *matCellDef="let element; let i = index;"> {{element[1]}} </td>
+            </ng-container>
+          
+            <!-- Weight Column -->
+            <ng-container matColumnDef="weight">
+              <th mat-header-cell *matHeaderCellDef> Sample Count </th>
+              
+              <td mat-cell *matCellDef="let element; let i = index;"> {{element[2]}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="email">
+
+              <th mat-header-cell *matHeaderCellDef> Email Notifications </th>
+              <td mat-cell *matCellDef="let element; let i = index;">
+                <span style="color:green">{{element[3]}}</span>/<span
+          style="color:red">{{element[4]}}</span>
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="text">
+              <th mat-header-cell *matHeaderCellDef> Text Notifications </th>
+              <td mat-cell *matCellDef="let element; let i = index;">
+                <span style="color:green">{{element[5]}}</span>/<span
+          style="color:red">{{element[6]}}</span>
+              </td>
+            </ng-container>
+
+        
+      
+          
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+          </table>
+          <mat-card-actions>
+            <button
+            mat-flat-button
+            class="btn-lg"
+            color="accent"
+            fxFlex="50%"
+            (click) = "prev()"
+          ><mat-icon>navigate_before</mat-icon>Prev </button>
+            <button
+              id="btn_next"
+              #nextButton="matButton"
+              mat-flat-button
+              class="btn-lg"
+              color="accent"
+              fxFlex="50%"
+              (click) = "next()"
+            >Next <mat-icon>navigate_next</mat-icon></button>
+           
+          </mat-card-actions>
+   
+    
+    </mat-card-content>
+    
+  </mat-card>
+
+</div>

src/app/imported-files/imported-files.component.spec.ts

@@ -0,0 +1,61 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {APP_BASE_HREF} from '@angular/common';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {Router} from '@angular/router';
+import {ApiService} from '../services/api.service';
+import {CacheService} from '../services/cache.service';
+import {SettingsService} from '../services/settings.service';
+import {MockEnvironment} from '../testing/environment.mock';
+
+import { ImportedFilesComponent } from './imported-files.component';
+
+describe('ImportedFilesComponent', () => {
+  let component: ImportedFilesComponent;
+  let fixture: ComponentFixture<ImportedFilesComponent>;
+  const mockRouter = {navigate: jasmine.createSpy('navigate')};
+  let httpMock: HttpTestingController;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ImportedFilesComponent ],
+      imports: [
+        HttpClientTestingModule,
+        MatButtonModule,
+        MatCardModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        NoopAnimationsModule,
+        ReactiveFormsModule,
+      ],
+      providers: [
+        {provide: 'APP_ENVIRONMENT', useClass: MockEnvironment},
+        {provide: APP_BASE_HREF, useValue: '/'},
+        {provide: Router, useValue: mockRouter},
+        ApiService,
+        CacheService,
+        SettingsService,
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+
+    httpMock = TestBed.inject(HttpTestingController);
+    fixture = TestBed.createComponent(ImportedFilesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/imported-files/imported-files.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { ApiService } from '../services/api.service';
+
+import { PageEvent } from '@angular/material/paginator';
+import { IvyFile } from '../models/ivyfile.interface';
+
+@Component({
+  selector: 'app-imported-files',
+  templateUrl: './imported-files.component.html',
+  styleUrls: ['./imported-files.component.css']
+})
+export class ImportedFilesComponent implements OnInit {
+
+  constructor(private fileService: ApiService) { }
+  fileDataList: any[][] = [];
+  displayedColumns: string[] = ['position', 'name', 'weight', 'text', 'email'];
+  currentPage = 0;
+  pageSize = 10;
+
+
+  ngOnInit(): void {
+    this.fileService.getFilesInfo(0).subscribe(fileList => this.fileDataList = fileList);
+
+  }
+
+  updatePage() {
+
+    this.fileService.getFilesInfo(this.currentPage).subscribe(fileList => this.fileDataList = fileList);
+  }
+  next() {
+    if (this.fileDataList.length > 0) {
+      this.currentPage += 1;
+      this.updatePage();
+    }
+  }
+  prev() {
+    if (this.currentPage > 0) {
+      this.currentPage -= 1;
+      this.updatePage();
+    }
+  }
+
+}
+

src/app/models/deposit.interface.ts

@@ -0,0 +1,5 @@
+export interface InventoryDeposit {
+    amount: number;
+    notes: string;
+    date_added: string;
+  }

src/app/models/ivyfile.interface.ts

@@ -0,0 +1,5 @@
+export interface IvyFile {
+    sample_count: number;
+    file_name: string;
+    date_added: Date;
+  }

src/app/models/sample.interface.ts

@@ -1,8 +1,11 @@
 export interface Sample {
   barcode: string;
+  date: Date;
   student_id: string;
   initials?: string;
-  date: Date;
   location: string;
+  station?: string;
   computing_id?: string;
+  phone?: string;
+  email?: string;
 }

src/app/models/search_form.ts

@@ -0,0 +1,8 @@
+export interface SearchForm{
+    startDate: string;
+    endDate: string;
+    studentId: string;
+    location: string;
+    computeId: string;
+    includeTests: boolean;
+}

src/app/models/user.interface.ts

@@ -0,0 +1,5 @@
+export interface User {
+    uid: string;
+    display_name: string;
+    is_admin: boolean;
+}

src/app/navbar/navbar.component.html

@@ -4,6 +4,8 @@
     <button id="nav_location" mat-button routerLink="/settings">{{locationId === '0000' ? 'Click here to set location' : 'Location: ' + locationId}}</button>
     <span fxFlex></span>
     <button id="nav_home" mat-icon-button routerLink="/"><mat-icon>home</mat-icon></button>
+    <button id="nav_dash" mat-icon-button [routerLink]="['/dashboard', 'graphs']"><mat-icon>dashboard</mat-icon></button>
     <button id="nav_settings" mat-icon-button routerLink="/settings"><mat-icon>settings</mat-icon></button>
+    <div *ngIf="user">{{user.display_name}}</div>
   </mat-toolbar-row>
 </mat-toolbar>

src/app/navbar/navbar.component.spec.ts

@@ -4,18 +4,33 @@ import {MatIconModule} from '@angular/material/icon';
 import {MatToolbarModule} from '@angular/material/toolbar';
 
 import { NavbarComponent } from './navbar.component';
+import {HttpClient} from '@angular/common/http';
+import {FakeMatIconRegistry} from '@angular/material/icon/testing';
+import {ApiService} from '../services/api.service';
+import {APP_BASE_HREF} from '@angular/common';
+import {MockEnvironment} from '../testing/environment.mock';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
 
 describe('NavbarComponent', () => {
   let component: NavbarComponent;
   let fixture: ComponentFixture<NavbarComponent>;
+  const mockEnvironment = new MockEnvironment();
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ NavbarComponent ],
       imports: [
+        HttpClientTestingModule,
         MatButtonModule,
         MatIconModule,
         MatToolbarModule,
+      ],
+      providers: [
+        HttpClient,
+        FakeMatIconRegistry,
+        ApiService,
+        {provide: 'APP_ENVIRONMENT', useValue: mockEnvironment},
+        {provide: APP_BASE_HREF, useValue: '/'},
       ]
     })
     .compileComponents();

src/app/navbar/navbar.component.ts

@@ -1,6 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {AppDefaults} from '../models/appDefaults.interface';
 import {SettingsService} from '../services/settings.service';
+import {ApiService} from '../services/api.service';
+import {User} from '../models/user.interface';
 
 @Component({
   selector: 'app-navbar',
@@ -10,12 +12,17 @@ import {SettingsService} from '../services/settings.service';
 export class NavbarComponent implements OnInit {
   settings: AppDefaults;
   locationId: string;
+  user: User;
 
-  constructor(private settingsService: SettingsService) {
+  constructor(private settingsService: SettingsService,
+              private apiService: ApiService) {
     this.settingsService.settings.subscribe(settings => {
       this.settings = settings;
       this.locationId = !this.hasDefaultId ? this.settings.locationId : '0000';
     });
+    this.apiService.getUser().subscribe(user => {
+      this.user = user;
+    });
   }
 
   get hasDefaultId(): boolean {

src/app/services/api.service.ts

@@ -1,12 +1,16 @@
-import {APP_BASE_HREF} from '@angular/common';
-import {HttpClient} from '@angular/common/http';
-import {Inject, Injectable} from '@angular/core';
-import {Router} from '@angular/router';
-import {Observable, throwError} from 'rxjs';
-import {catchError, timeout} from 'rxjs/operators';
-import {ApiError} from '../models/apiError.interface';
-import {AppEnvironment} from '../models/appEnvironment.interface';
-import {Sample} from '../models/sample.interface';
+import { APP_BASE_HREF } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable, throwError } from 'rxjs';
+import { catchError, timeout } from 'rxjs/operators';
+import { ApiError } from '../models/apiError.interface';
+import { AppEnvironment } from '../models/appEnvironment.interface';
+import { Sample } from '../models/sample.interface';
+import { InventoryDeposit } from '../models/deposit.interface';
+import { IvyFile } from '../models/ivyfile.interface';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import {User} from '../models/user.interface';
+
 
 
 @Injectable({
@@ -16,6 +20,9 @@ export class ApiService {
   apiRoot: string;
   endpoints = {
     sample: '/sample',
+    deposit: '/deposit',
+    ivy_file: '/ivy_file',
+    user: '/user'
   };
 
   constructor(
@@ -29,10 +36,42 @@ export class ApiService {
   /** Get the string value from a given URL */
   getStringFromUrl(url: string): Observable<string> {
     return this.httpClient
-      .get(url, {responseType: 'text'})
+      .get(url, { responseType: 'text' })
       .pipe(catchError(err => this._handleError(err)));
   }
 
+  /**  */
+  getDeposits(page: number): Observable<InventoryDeposit[]> {
+    const param = new HttpParams().set('page', String(page));
+
+    const url = this.apiRoot + this.endpoints.deposit;
+    return this.httpClient
+      .get<InventoryDeposit[]>(url, { params: param })
+      .pipe(timeout(1000), catchError(err => this._handleError(err)))
+      .pipe(catchError(err => this._handleError(err)));
+  }
+
+  /**  */
+  addDeposit(deposit: InventoryDeposit): Observable<InventoryDeposit> {
+    const url = this.apiRoot + this.endpoints.deposit;
+    return this.httpClient
+      .post<InventoryDeposit>(url, deposit)
+      .pipe(timeout(1000), catchError(err => this._handleError(err)))
+      .pipe(catchError(err => this._handleError(err)));
+  }
+
+
+  /**  */
+  getFilesInfo(page: number): Observable<Array<Array<any>>> {
+    const params = new HttpParams().set('page', String(page));
+    const url = this.apiRoot + this.endpoints.ivy_file;
+    return this.httpClient
+      .get<Array<Array<any>>>(url, { params })
+      .pipe(timeout(1000), catchError(err => this._handleError(err)))
+      .pipe(catchError(err => this._handleError(err)));
+  }
+
+
   /** Add new sample */
   addSample(sample: Sample): Observable<null> {
     const url = this.apiRoot + this.endpoints.sample;
@@ -43,6 +82,15 @@ export class ApiService {
       .pipe(catchError(err => this._handleError(err)));
   }
 
+  getUser(): Observable<User> {
+    const url = this.apiRoot + this.endpoints.user;
+
+    return this.httpClient
+      .get<User>(url)
+      .pipe(timeout(1000), catchError(err => this._handleError(err)))
+      .pipe(catchError(err => this._handleError(err)));
+  }
+
   private _handleError(error: ApiError): Observable<never> {
     return throwError(error.message || 'Could not complete your request; please try again later.');
   }

src/app/services/graph.service.spec.ts

@@ -0,0 +1,46 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GraphService } from './graph.service';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
+import {RouterTestingModule} from '@angular/router/testing';
+import {ApiService} from './api.service';
+import {APP_BASE_HREF} from '@angular/common';
+import {Router} from '@angular/router';
+import {MockEnvironment} from '../testing/environment.mock';
+
+describe('GraphService', () => {
+  let httpMock: HttpTestingController;
+  let location: Location;
+  let service: GraphService;
+  const mockEnvironment = new MockEnvironment();
+  const mockRouter = {
+    createUrlTree: jasmine.createSpy('createUrlTree'),
+    navigate: jasmine.createSpy('navigate')
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        HttpClientTestingModule,
+        MatBottomSheetModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        ApiService,
+        {provide: 'APP_ENVIRONMENT', useValue: mockEnvironment},
+        {provide: APP_BASE_HREF, useValue: '/'},
+        {provide: Router, useValue: mockRouter},
+        {provide: Location, useValue: location},
+      ]
+    });
+
+    httpMock = TestBed.inject(HttpTestingController);
+    service = TestBed.inject(GraphService);
+    location = TestBed.inject(Location);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/graph.service.ts

@@ -0,0 +1,85 @@
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { APP_BASE_HREF } from '@angular/common';
+import { Observable, throwError } from 'rxjs';
+import { catchError, timeout } from 'rxjs/operators';
+import { ApiError } from '../models/apiError.interface';
+import { AppEnvironment } from '../models/appEnvironment.interface';
+import { HttpParams } from '@angular/common/http';
+import { Sample } from '../models/sample.interface';
+
+import { SearchForm } from '../models/search_form';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GraphService {
+  apiRoot: string;
+  constructor(@Inject('APP_ENVIRONMENT') private environment: AppEnvironment,
+              @Inject(APP_BASE_HREF) public baseHref: string,
+              private httpClient: HttpClient,
+  ) {
+    this.apiRoot = environment.api;
+  }
+  getRawSearchData(form: SearchForm, page: number): Observable<Sample[]> {
+    let params = this.createParams(form);
+    params = params.set('page', String(page));
+
+    return this.httpClient
+      .get<Sample[]>(this.apiRoot + `/dashboard/search`, { params })
+      .pipe(timeout(1000), catchError(err => this._handleError(err)))
+      .pipe(catchError(err => this._handleError(err)));
+  }
+
+  getTopBarData(form: SearchForm): Observable<number[]> {
+    // let params = new HttpParams().set("start_date", form.start_date).set("end_date", form.end_date);
+    return this.httpClient
+      .get<number[]>(this.apiRoot + '/dashboard/tob_bar', { params: this.createParams(form)  })
+      .pipe(timeout(1000), catchError(err => this._handleError(err)))
+      .pipe(catchError(err => this._handleError(err)));
+
+  }
+
+  getDayData(form: SearchForm): Observable<JSON> {
+    return this.httpClient
+      .get<JSON>(this.apiRoot + '/dashboard/day', { params: this.createParams(form) })
+      .pipe(timeout(1000), catchError(err => this._handleError(err)))
+      .pipe(catchError(err => this._handleError(err)));
+  }
+
+  getWeekdayData(form: SearchForm): Observable<JSON> {
+    return this.httpClient
+      .get<JSON>(this.apiRoot + '/dashboard/weekday', { params: this.createParams(form) })
+      .pipe(timeout(1000), catchError(err => this._handleError(err)))
+      .pipe(catchError(err => this._handleError(err)));
+
+  }
+
+  getHourData(form: SearchForm): Observable<JSON> {
+    return this.httpClient
+      .get<JSON>(this.apiRoot + '/dashboard/hour', { params: this.createParams(form) })
+      .pipe(timeout(1000), catchError(err => this._handleError(err)))
+      .pipe(catchError(err => this._handleError(err)));
+  }
+
+  createParams(form: SearchForm): HttpParams {
+    const params = new HttpParams()
+      .set('start_date', form.startDate)
+      .set('end_date', form.endDate)
+      .set('student_id', form.studentId)
+      .set('compute_id', form.computeId)
+      .set('location', form.location)
+      .set('include_tests', String(form.includeTests));
+    return params;
+  }
+
+  private _handleError(error: ApiError): Observable<never> {
+    return throwError(error.message || 'Could not complete your request; please try again later.');
+  }
+  /** Log a HeroService message with the MessageService */
+  private log(message: string) {
+    console.log(message);
+  }
+}
+
+

src/app/services/settings.service.ts

@@ -1,5 +1,6 @@
 import {Injectable} from '@angular/core';
-import createClone from 'rfdc';
+// https://github.com/visjs/vis-network/issues/67
+import * as createClone from 'rfdc';
 import {BehaviorSubject} from 'rxjs';
 import serializeJs from 'serialize-javascript';
 import {defaultOptions} from '../config/defaults';

src/app/settings/settings.component.ts

@@ -8,8 +8,7 @@ import {AppDefaults} from '../models/appDefaults.interface';
 import {LabelLayout} from '../models/labelLayout.interface';
 import {Sample} from '../models/sample.interface';
 import {SettingsService} from '../services/settings.service';
-import createClone from 'rfdc';
-
+import * as createClone from 'rfdc';
 @Component({
   selector: 'app-settings',
   templateUrl: './settings.component.html',

src/app/sidebar/sidebar.component.html

@@ -0,0 +1,22 @@
+<mat-sidenav-container class="full-height flex-container bg-primary">
+	<mat-sidenav #sidenav mode="side" [(opened)]="opened">
+        <mat-nav-list >
+            <mat-list-item>
+            <div class="flex-items" [routerLink]="['/dashboard', 'graphs']"><p>View Graphs</p></div>
+            </mat-list-item>
+            <mat-list-item>
+                <div class="flex-items" [routerLink]="['/dashboard', 'imports']"><p>Imported Files</p></div>
+                </mat-list-item>
+                <mat-list-item>
+                    <div class="flex-items" [routerLink]="['/dashboard', 'deposits']"><p>Manage Label Inventory</p></div>
+                    </mat-list-item>
+        </mat-nav-list>
+	</mat-sidenav>
+
+	<mat-sidenav-content >
+		<p>
+            <button mat-raised-button class="btn-sm" color="white" (click)="Toggle()">Toggle Sidebar</button>
+					</p>
+		<router-outlet></router-outlet>
+	</mat-sidenav-content>
+</mat-sidenav-container>

src/app/sidebar/sidebar.component.spec.ts

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

src/app/sidebar/sidebar.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss']
+})
+export class SidebarComponent implements OnInit {
+
+  constructor() { }
+  opened = false;
+  Toggle(){
+    this.opened = !this.opened;
+  }
+  ngOnInit(): void {
+  }
+
+}

src/styles.scss

@@ -1,2 +1,5 @@
 @import './material-theme.scss';
 @include cr-connect-theme($cr-connect-theme);
+table {
+    width: 100%;
+  }

tsconfig.json

@@ -21,6 +21,7 @@
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
+    "strictInjectionParameters": true,
   }
+  
 }