Got the basic requests grid in

src/Ombi/ClientApp/src/app/app.module.ts

@@ -68,7 +68,8 @@ const routes: Routes = [
     { loadChildren: "./settings/settings.module#SettingsModule", path: "Settings" },
     { loadChildren: "./wizard/wizard.module#WizardModule", path: "Wizard" },
     { loadChildren: "./usermanagement/usermanagement.module#UserManagementModule", path: "usermanagement" },
-    { loadChildren: "./requests/requests.module#RequestsModule", path: "requests" },
+    { loadChildren: "./requests/requests.module#RequestsModule", path: "requestsOld" },
+    { loadChildren: "./requests-list/requests-list.module#RequestsListModule", path: "requests" },
     { loadChildren: "./search/search.module#SearchModule", path: "search" },
     { loadChildren: "./recentlyAdded/recentlyAdded.module#RecentlyAddedModule", path: "recentlyadded" },
     { loadChildren: "./vote/vote.module#VoteModule", path: "vote" },

src/Ombi/ClientApp/src/app/requests-list/components/index.ts

@@ -0,0 +1,8 @@
+import { RequestsListComponent } from "./requests-list.component";
+import { MoviesGridComponent } from "./movies-grid/movies-grid.component";
+
+export const components: any[] = [
+    RequestsListComponent,
+    MoviesGridComponent,
+];
+

src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html

@@ -0,0 +1,47 @@
+<table *ngIf="dataSource" mat-table [dataSource]="dataSource.collection" class="mat-elevation-z8 table">
+
+  <!--- Note that these columns can be defined in any order.
+        The actual rendered columns are set as a property on the row definition" -->
+
+  <ng-container matColumnDef="requestedBy">
+    <th mat-header-cell *matHeaderCellDef> Requested By </th>
+    <td mat-cell *matCellDef="let element"> {{element.requestedUser.userAlias}} </td>
+  </ng-container>
+
+  <ng-container matColumnDef="title">
+    <th mat-header-cell *matHeaderCellDef> Title </th>
+    <td mat-cell *matCellDef="let element"> {{element.title}} ({{element.releaseDate | amLocal | amDateFormat: 'YYYY'}}) </td>
+  </ng-container>
+
+  <ng-container matColumnDef="requestedDate">
+    <th mat-header-cell *matHeaderCellDef> Request Date </th>
+    <td mat-cell *matCellDef="let element"> {{element.requestedDate | amLocal | amDateFormat: 'LL'}} </td>
+  </ng-container>
+  
+  <ng-container matColumnDef="status">
+    <th mat-header-cell *matHeaderCellDef> Status </th>
+    <td mat-cell *matCellDef="let element"> {{element.status}} </td>
+  </ng-container>
+
+    
+  <ng-container matColumnDef="requestStatus">
+    <th mat-header-cell *matHeaderCellDef> Request Status </th>
+    <td mat-cell *matCellDef="let element">   
+      <div *ngIf="element.approved && !element.available">{{'Common.ProcessingRequest' | translate}}</div>
+      <div *ngIf="element.requested && !element.approved && !element.available">{{'Common.PendingApproval' | translate}}
+      </div>
+      <div *ngIf="!element.requested && !element.available && !element.approved">{{'Common.NotRequested' | translate}}
+      </div>
+    </td>
+  </ng-container>  
+
+  <ng-container matColumnDef="actions">
+    <th mat-header-cell *matHeaderCellDef> </th>
+    <td mat-cell *matCellDef="let element"> 
+    <button mat-raised-button color="primary" [routerLink]="">Details</button>  
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>

src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from "@angular/core";
+import { RequestService } from "../../../services";
+import { IMovieRequests, OrderType, FilterType, IRequestsViewModel } from "../../../interfaces";
+
+@Component({
+    templateUrl: "./movies-grid.component.html",
+    selector: "movies-grid",
+    styleUrls: ["../requests-list.component.scss"]
+})
+export class MoviesGridComponent implements OnInit {
+    public dataSource: IRequestsViewModel<IMovieRequests>;
+
+    public displayedColumns: string[] = ['requestedBy', 'title', 'requestedDate', 'status', 'requestStatus', 'actions'];
+
+    constructor(private requestService: RequestService) {
+        
+    }
+
+    public async ngOnInit() {
+        this.dataSource = await this.requestService.getMovieRequests(30,0, OrderType.RequestedDateDesc,
+             {availabilityFilter: FilterType.None, statusFilter: FilterType.None}).toPromise();
+    }
+}

src/Ombi/ClientApp/src/app/requests-list/components/requests-list.component.html

@@ -0,0 +1,16 @@
+<div class="small-middle-container">
+  <mat-tab-group>
+    <mat-tab label="Movies">
+      <movies-grid></movies-grid>
+    </mat-tab>
+    <mat-tab label="TV Shows">
+      <h1>Some more tab content</h1>
+      <p>...</p>
+    </mat-tab>
+    <mat-tab label="Albums">
+      <h1>Some more tab content</h1>
+      <p>...</p>
+    </mat-tab>
+  </mat-tab-group>
+
+</div>

src/Ombi/ClientApp/src/app/requests-list/components/requests-list.component.scss

@@ -0,0 +1,8 @@
+.small-middle-container{
+	margin: auto;
+	width: 95%;
+}
+
+.table {
+    width: 100%;
+}

src/Ombi/ClientApp/src/app/requests-list/components/requests-list.component.ts

@@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+@Component({
+    templateUrl: "./requests-list.component.html",
+    styleUrls: ["./requests-list.component.scss"]
+})
+export class RequestsListComponent {
+}

src/Ombi/ClientApp/src/app/requests-list/requests-list.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { RequestService } from "../services";
+
+import { SharedModule } from "../shared/shared.module";
+import { PipeModule } from "../pipes/pipe.module";
+
+import { AuthGuard } from "../auth/auth.guard";
+
+import * as fromComponents from './components';
+import { RequestsListComponent } from "./components/requests-list.component";
+
+const routes: Routes = [
+    { path: "", component: RequestsListComponent, canActivate: [AuthGuard] },
+];
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes),
+        SharedModule,
+        PipeModule,
+    ],
+    declarations: [
+        ...fromComponents.components
+      ],
+    exports: [
+        RouterModule,
+    ],
+    entryComponents: [
+    ],
+    providers: [
+        RequestService,
+        ],
+
+})
+export class RequestsListModule { }

src/Ombi/ClientApp/src/app/shared/shared.module.ts

@@ -10,7 +10,7 @@ import { IssuesReportComponent } from "./issues-report.component";
 import { InputSwitchModule, SidebarModule } from "primeng/primeng";
 
 import {
-  MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatTooltipModule, MatSelectModule} from '@angular/material';
+  MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatTooltipModule, MatSelectModule, MatTableModule} from '@angular/material';
   import {  MatCardModule, MatInputModule, MatTabsModule, MatAutocompleteModule, MatCheckboxModule, MatExpansionModule, MatDialogModule, MatProgressSpinnerModule,
     MatChipsModule } from "@angular/material";
 import { EpisodeRequestComponent } from "./episode-request/episode-request.component";
@@ -76,6 +76,7 @@ import { EpisodeRequestComponent } from "./episode-request/episode-request.compo
       MatCheckboxModule,
       MatExpansionModule,
       MatDialogModule,
+      MatTableModule,
     ],
 })
 export class SharedModule {}