Made a new section as per TomS's request :-)

src/app/app.module.ts

@@ -43,6 +43,7 @@ import { DashboardModule } from './dashboard/dashboard.module';
 import { DxChartModule } from 'devextreme-angular';
 import { StackedBarChartComponent } from './panels/stacked-bar.component';
 import { SuppliersComponent } from './dashboard/suppliers.component';
+import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component';
 
 
 
@@ -69,6 +70,7 @@ import { SuppliersComponent } from './dashboard/suppliers.component';
     SIDEBAR_TOGGLE_DIRECTIVES,
     AsideToggleDirective,
     SuppliersComponent,
+    MoreStuffComponent,
     P404Component,
     P500Component,
   ],

src/app/dashboard/dashboard.routing.ts

@@ -17,7 +17,9 @@ import { PayrollLogComponent } from './payroll-log.component';
 import { LeaderboardComponent } from './leaderboard.component';
 import { MapComponent } from './map.component';
 import { TrailMapComponent } from './trail-map.component';
+import { MoreStuffComponent } from './more-graphs-and-tables.component';
 import { SuppliersComponent } from './suppliers.component';
+
 // Using child path to allow for FullLayout theming
 const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
@@ -89,6 +91,11 @@ const routes: Routes = [
         path: 'suppliers',
         component: SuppliersComponent,
         data: { title: 'Suppliers' }
+      },
+      {
+        path: 'more-graphs-and-tables',
+        component: MoreStuffComponent,
+        data: { title: 'More Stuff'}
       }
     ],
   }

src/app/dashboard/more-graphs-and-tables.component.html

@@ -0,0 +1,33 @@
+<script type="text/javascript" charset="utf8" src="/home/tomslater/Documents/FoodLoop-Web/src/sort-table.js"></script>
+<div class="animated fadeIn">
+  <div class="form-group row">
+    <table class="table table-striped table-hover">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Postcode</th>
+          <th>Spend</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- table body - name, postcode and spend data should be presented here in cost descending order -->
+        <tr recur-result *ngFor="let recur of recurList" tr.names="name" tr.recur="recur" (onClick)="recurClick($event, template)"></tr>
+        <tr>
+          <td>Tom's Tippity Top Toenails Ltd.</td>
+          <td>LA11LY</td>
+          <td>£250,000.00</td>
+        </tr>
+        <tr>
+          <td>Selena's Scratching Sticks Inc.</td>
+          <td>WS15PQ</td>
+          <td>£5.00</td>
+        </tr>
+        <tr>
+          <td>Big Barry and Son's Balloon Store and Clown Outfits Corp.</td>
+          <td>PF43RD</td>
+          <td>£22.00</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div><!--/.col-->

src/app/dashboard/more-graphs-and-tables.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core';
+import { ApiService } from '../providers/api-service';
+import { AgmCoreModule } from '@agm/core';
+import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
+import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
+
+interface RecurSupplierData {
+  name : string;
+}
+
+@Component({
+  templateUrl: 'more-graphs-and-tables.component.html',
+})
+export class MoreStuffComponent implements OnInit, AfterViewInit {
+  @Input() public recurList: Array<RecurSupplierData>;
+  @Output() public onClick = new EventEmitter();
+  @Input() public categories: any;
+
+
+  public recurClick(event: any): void {
+    this.onClick.emit( event );
+  }
+
+  constructor(
+    private api: ApiService,
+  ) { }
+
+  ngOnInit(): void {
+    
+  }
+
+  ngAfterViewInit() {
+  }
+
+}

src/app/dashboard/suppliers.component.ts

@@ -26,7 +26,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
   ) { }
 
   ngOnInit(): void {
-
+    
   }
 
   ngAfterViewInit() {

src/app/layouts/full-layout.component.html

@@ -102,6 +102,14 @@
               </div>
             </a>
           </li>
+          <li class="nav-item">
+              <a class="nav-link" routerLinkActive="active" [routerLink]="['/more-graphs-and-tables']">
+                <div class="row no-gutters align-items-center">
+                  <div class="col-2"><i class="icon-map"></i></div>
+                  <div class="col-10">More Stuff</div>
+                </div>
+              </a>
+            </li>
         <li  *ngIf="accountType == 'organisation'" class="nav-item">
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/payroll-log']">
             <div class="row no-gutters align-items-center">