Create basic DARS Audit view.

src/app/dars/dars-view/dars-view.component.html

-<h1>Degree Audit (DARS)</h1>
+<mat-sidenav-container id="dars-container">
+    <mat-sidenav #auditPane id="dars-report-container" mode="over" position="end">
+        <button mat-button aria-label="Return to DARS audit list" color="primary" (click)="auditPane.close()">
+            <mat-icon>chevron_left</mat-icon>
+            Return to audit list
+        </button>
+    </mat-sidenav>
+    
+    <!-- Main DARS Content -->
+    <div id="dars-main">
+        <h2 class="mat-h1">Completed Audit Requests</h2>
+
+        <div id="dars-header-bar">
+            <div>
+                <h3 class="mat-h2">Degree Audit</h3>
+                <p class="mat-body">See the progress towards your current program of study and degree plans.</p>
+            </div>
+            <div>
+                <button mat-raised-button aria-label="Run new degree audit" color="primary">Run new degree audit</button>
+            </div>
+        </div>
+
+        <div id="aduits">
+                <table class="audit-table" mat-table [dataSource]="dataSource">
+
+                    <!-- View Column -->
+                    <ng-container matColumnDef="view">
+                        <th mat-header-cell *matHeaderCellDef></th>
+                        <td mat-cell *matCellDef="let audit">
+                            <button mat-raised-button color="primary" [disabled]="audit.pending" (click)="auditPane.open()">View</button>
+                        </td>
+                    </ng-container>
+
+                    <!-- School Column -->
+                    <ng-container matColumnDef="school">
+                        <th mat-header-cell *matHeaderCellDef>School/College</th>
+                        <td mat-cell *matCellDef="let audit">{{audit.school}}</td>
+                    </ng-container>
+
+                    <!-- Program Column -->
+                    <ng-container matColumnDef="program">
+                        <th mat-header-cell *matHeaderCellDef>Program of Study</th>
+                        <td mat-cell *matCellDef="let audit">{{audit.program}}</td>
+                    </ng-container>
+
+                    <!-- Honors Column -->
+                    <ng-container matColumnDef="honors">
+                        <th mat-header-cell *matHeaderCellDef>Honors Status</th>
+                        <td mat-cell *matCellDef="let audit">Keep current status</td>
+                    </ng-container>
+
+                    <!-- Plan Column -->
+                    <ng-container matColumnDef="plan">
+                        <th mat-header-cell *matHeaderCellDef>Degree Plan</th>
+                        <td mat-cell *matCellDef="let audit">Plan Title</td>
+                    </ng-container>
+
+                    <!-- Status Column -->
+                    <ng-container matColumnDef="status">
+                        <th mat-header-cell *matHeaderCellDef>Status</th>
+                        <td mat-cell *matCellDef="let audit">Status goes here</td>
+                    </ng-container>
+
+                    <!-- Status Column -->
+                    <ng-container matColumnDef="download">
+                        <th mat-header-cell *matHeaderCellDef></th>
+                        <td mat-cell *matCellDef="let audit">
+                            <button mat-raised-button>
+                                <mat-icon>vertical_align_bottom</mat-icon>
+                            </button>
+                        </td>
+                    </ng-container>
+
+                    <!-- Row definition -->
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                </table>
+        </div>
+
+        <div id="what-if-audits"></div>
+    </div>
+</mat-sidenav-container>
\ No newline at end of file

src/app/dars/dars-view/dars-view.component.scss

+#dars-container {
+  width: 100%;
+  height: 100%;
+  padding: 50px;
+}
+
+#dars-report-container {
+  width: 100%;
+  padding: 20px;
+}
+
+#dars-main {
+  max-width: 1200px;
+  margin: auto;
+}
+
+#dars-header-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.audit-table {
+  width: 100%;
+  background-color: transparent;
+
+  .mat-header-row {
+    box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.25);
+    border-color: #fafafa;
+  }
+
+  th {
+    font-size: 1rem;
+    font-weight: 300;
+  }
+
+  tr:not(.mat-header-row) td {
+    padding: 15px 10px;
+
+    &:first-child {
+      padding-left: 20px;
+    }
+
+    &:last-child {
+      padding-right: 20px;
+    }
+  }
+
+  .mat-column-download {
+    button {
+      padding: 0;
+      width: auto;
+    }
+  }
+}

src/app/dars/dars-view/dars-view.component.ts

-import { Component } from '@angular/core';
+import { Component, ViewChild, ElementRef } from '@angular/core';
+import { MatSidenav } from '@angular/material';
 
 @Component({
   selector: 'cse-dars-view',
@@ -6,5 +7,44 @@ import { Component } from '@angular/core';
   styleUrls: ['./dars-view.component.scss'],
 })
 export class DARSViewComponent {
-  // TODO
+  displayedColumns = [
+    'view',
+    'school',
+    'program',
+    'honors',
+    'plan',
+    'status',
+    'download',
+  ];
+
+  dataSource = [
+    {
+      pending: true,
+      school: 'Letters & Science',
+      program: 'Psychology',
+      honors: 'keep',
+      plan: 12345,
+    },
+    {
+      pending: false,
+      school: 'Letters & Science',
+      program: 'Psychology',
+      honors: 'keep',
+      plan: 12345,
+    },
+    {
+      pending: false,
+      school: 'Letters & Science',
+      program: 'Psychology',
+      honors: 'keep',
+      plan: 12345,
+    },
+    {
+      pending: false,
+      school: 'Letters & Science',
+      program: 'Psychology',
+      honors: 'keep',
+      plan: 12345,
+    },
+  ];
 }

src/app/dars/dars.module.ts

 import { NgModule } from '@angular/core';
 import { DARSViewComponent } from './dars-view/dars-view.component';
 import { EffectsModule } from '@ngrx/effects';
+import { SharedModule } from '@app/shared/shared.module';
 import { DARSEffects } from './store/effects';
 
 @NgModule({
-  imports: [EffectsModule.forRoot([DARSEffects])],
+  imports: [EffectsModule.forRoot([DARSEffects]), SharedModule],
   exports: [],
   declarations: [DARSViewComponent],
   entryComponents: [],

src/app/shared/shared.module.ts

@@ -8,6 +8,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatCardModule } from '@angular/material/card';
+import { MatTableModule } from '@angular/material/table';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -52,6 +53,7 @@ const modules = [
   MatTabsModule,
   MatExpansionModule,
   MatCardModule,
+  MatTableModule,
   MatSelectModule,
   FlexLayoutModule,
   MatSidenavModule,