Suppress CommonJS warnings

angular.json

@@ -29,6 +29,10 @@
             ],
             "scripts": [
               "node_modules/moment/min/moment.min.js"
+            ],
+            "allowedCommonJsDependencies": [
+              "chart.js",
+              "ng2-validation-manager"
             ]
           },
           "configurations": {

ngcc.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  packages: {
+    '@agm/markerclusterer': {
+      ignorableDeepImportMatchers: [
+        /@google\//,
+      ]
+    }
+  }
+}

package.json

@@ -24,14 +24,14 @@
   "dependencies": {
     "@agm/core": "^3.0.0-beta.0",
     "@agm/markerclusterer": "^3.0.0-beta.0",
-    "@angular/common": "10.0.6",
+    "@angular/common": "10.2.1",
-    "@angular/compiler": "10.0.6",
+    "@angular/compiler": "10.2.1",
-    "@angular/core": "10.0.6",
+    "@angular/core": "10.2.1",
-    "@angular/forms": "10.0.6",
+    "@angular/forms": "10.2.1",
-    "@angular/platform-browser": "10.0.6",
+    "@angular/platform-browser": "10.2.1",
-    "@angular/platform-browser-dynamic": "10.0.6",
+    "@angular/platform-browser-dynamic": "10.2.1",
-    "@angular/router": "10.0.6",
+    "@angular/router": "10.2.1",
-    "@angular/upgrade": "10.0.6",
+    "@angular/upgrade": "10.2.1",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
     "@coreui/icons": "0.3.0",
     "@google/markerclustererplus": "^5.0.4",
@@ -54,7 +54,7 @@
     "ngx-filter-pipe": "^2.1.2",
     "ngx-pagination": "^4.0.0",
     "popper.js": "^1.15.0",
-    "rxjs": "6.6.0",
+    "rxjs": "6.6.3",
     "stream": "0.0.2",
     "ts-helpers": "1.1.2",
     "tslib": "^1.10.0",
@@ -63,9 +63,9 @@
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1000.4",
+    "@angular-devkit/build-angular": "^0.1002.0",
-    "@angular/cli": "^10.0.4",
+    "@angular/cli": "^10.2.0",
-    "@angular/compiler-cli": "10.0.6",
+    "@angular/compiler-cli": "10.2.1",
     "@types/googlemaps": "^3.39.8",
     "@types/jasmine": "3.3.13",
     "@types/jasminewd2": "2.0.6",

src/app/dashboard/add-data.component.html

@@ -1,16 +1,22 @@
 <div class="animated fadeIn">
   <div class="row">
-    <div class="col-lg-12">
+    <div class="col-lg-6 col-md-8">
       <div class="card">
         <div class="card-header">
-          <strong>Submit Transaction</strong>
+          <strong>Record Transaction</strong>
           <small>Required Data marked in <strong>bold</strong>.</small>
         </div>
         <div class="card-block">
           <div class="form-group row">
             <label class="col-md-3 form-control-label" for="text-input"><strong>Time of Transaction</strong></label>
             <div class="col-md-9">
-              <input type="datetime-local" class="form-control" [min]="minDate" [(ngModel)]="myDate" (ngModelChange)="transactionFormValidate()">
+              <input 
+                type="datetime-local" 
+                class="form-control" 
+                [min]="minDate" 
+                [(ngModel)]="myDate" 
+                (ngModelChange)="transactionFormValidate()"
+              >
               <span class="help-block">Enter the date and time the transaction occurred.</span>
             </div>
           </div>
@@ -21,7 +27,7 @@
                 <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
                 <input type="number" min="0.00" step="0.01" class="form-control" placeholder="0.00" [(ngModel)]="amount" (ngModelChange)="transactionFormValidate()">
               </div>
-              <span class="help-block">Enter the amount spent, such as 5.35 for £5.35.</span>
+              <span class="help-block">Enter the amount spent, such as &lsquo;5.35&rsquo; for &pound;5.35.</span>
             </div>
           </div>
 
@@ -29,7 +35,7 @@
             <label class="col-md-3 form-control-label" for="text-input">Essential Purchase</label>
             <div class="col-md-9">
               <div class="input-group">
-                <input type="checkbox" class="mr-auto" [(ngModel)]="essentialPurchase" (ngModelChange)="transactionFormValidate()">
+                <input type="checkbox" class="mr-1" [(ngModel)]="essentialPurchase" (ngModelChange)="transactionFormValidate()">
                 <span class="help-block">Tick if the purchase is deemed an essential purchase for budgeting purposes.</span>
               </div>
             </div>
@@ -38,7 +44,7 @@
             <label class="col-md-3 form-control-label" for="text-input">Recurring Purchase</label>
             <div class="col-md-9">
               <div class="input-group">
-                <input type="checkbox" class="mr-auto" [(ngModel)]="recurringPurchase" (ngModelChange)="transactionFormValidate()">
+                <input type="checkbox" class="mr-1" [(ngModel)]="recurringPurchase" (ngModelChange)="transactionFormValidate()">
                 <span class="help-block">Tick if the purchase frequently recurs, such as monthly.</span>
               </div>
             </div>

src/app/dashboard/dashboard.routing.ts

@@ -48,7 +48,7 @@ const routes: Routes = [
       {
         path: 'add-data',
         component: AddDataComponent,
-        data: { title: 'Add Transaction' },
+        data: { title: 'Record Transaction' },
       },
       {
         path: 'leaderboard',
@@ -85,7 +85,7 @@ const routes: Routes = [
       {
         path: 'feedback',
         component: FeedbackComponent,
-        data: { title: 'Give Feedback' },
+        data: { title: 'Submit Feedback' },
       },
       {
         path: 'suppliers',

src/app/dashboard/feedback.component.html

@@ -1,9 +1,9 @@
 <div class="animated fadeIn">
   <div class="row">
-    <div class="col-lg-12">
+    <div class="col-lg-6 col-md-8">
       <div class="card">
         <div class="card-header">
-          <strong>Submit Transaction</strong>
+          <strong>Submit Feedback</strong>
           <small>Required Data marked in <strong>bold</strong>.</small>
         </div>
         <form class="form-horizontal" [formGroup]="feedbackForm" (ngSubmit)="onSubmit()">

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

@@ -27,7 +27,7 @@
           <table class="table table-striped table-hover">
             <thead>
               <tr>
-                <th>Ward</th>
+                <th>Type</th>
                 <th>Amount of Transactions</th>
                 <th>Sum of Transactions</th>
               </tr>

src/app/dashboard/suppliers.component.html

@@ -1,6 +1,6 @@
 <div class="animated fadeIn">
   <div class="row">
-    <div class="col-lg-12">
+    <div class="col-lg-6 col-md-8">
       <div class="card">
         <div class="card-header">
           <h4>Search Suppliers</h4>
@@ -20,7 +20,7 @@
 </div>
 <div class="animated fadeIn">
   <div class="row">
-    <div class="col-lg-12">
+    <div class="col-lg-6 col-md-8">
       <div class="card">
         <div class="card-header">
           <h4>List of Suppliers</h4>

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

@@ -38,19 +38,17 @@
             </div>
           </a>
         </li>
-        <li *ngIf="accountType == 'organisation'" class="nav-item">
+      </ul>
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/more-graphs-and-tables']">
+
-            <div class="row no-gutters align-items-center">
+      <hr>
-              <div class="col-2"><i class="icon-map"></i></div>
+
-              <div class="col-10">Infographics</div>
+      <ul class="nav">
-            </div>
+        <strong class="nav-title">Actions</strong>
-          </a>
-        </li>
         <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/add-data']">
             <div class="row no-gutters align-items-center">
               <div class="col-2"><i class="icon-basket"></i></div>
-              <div class="col-10">Add Transaction</div>
+              <div class="col-10">Record Transaction</div>
             </div>
           </a>
         </li>
@@ -58,7 +56,21 @@
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/feedback']">
             <div class="row no-gutters align-items-center">
               <div class="col-2"><i class="icon-envelope-letter"></i></div>
-              <div class="col-10">Enter Feedback</div>
+              <div class="col-10">Submit Feedback</div>
+            </div>
+          </a>
+        </li>
+      </ul>
+
+      <hr>
+
+      <ul class="nav">
+        <strong class="nav-title">Info</strong>
+        <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">Infographics</div>
             </div>
           </a>
         </li>
@@ -139,6 +151,6 @@
 </div>
 
 <footer class="app-footer">
-  <a href="http://www.peartrade.org" target="_blank">&copy; 2017 Pear Trading Ltd.</a>
+  <a href="http://www.peartrade.org" target="_blank">&copy; 2020 Pear Trading Ltd.</a>
   <span class="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span>
 </footer>

src/scss/bootstrap/_button-group.scss

@@ -11,6 +11,7 @@
     position: relative;
     flex: 0 1 auto;
     margin-bottom: 0;
+    cursor: pointer;
 
     // Bring the hover, focused, and "active" buttons to the fron to overlay
     // the borders properly

src/scss/bootstrap/_buttons.scss

@@ -32,10 +32,12 @@
     @include box-shadow(none);
   }
 
-  &:active,
+  :enabled {
-  &.active {
+    &:active,
-    background-image: none;
+    &.active {
-    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+      background-image: none;
+      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+    }
   }
 }
 

src/scss/bootstrap/_card.scss

@@ -70,6 +70,10 @@
   &:first-child {
     @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
   }
+
+  small {
+    padding-left: 1em;
+  }
 }
 
 .card-footer {

src/scss/bootstrap/_input-group.scss

@@ -23,6 +23,16 @@
       z-index: 3;
     }
   }
+
+  input[type="radio"],
+  input[type="checkbox"] {
+    cursor: pointer;
+  }
+}
+
+.help-block {
+  font-size: 0.8em;
+  font-style: italic;
 }
 
 .input-group-addon,

src/scss/bootstrap/_tables.scss

@@ -80,6 +80,8 @@
 
 .table-hover {
   tbody tr {
+    cursor: pointer;
+  
     @include hover {
       background-color: $table-bg-hover;
     }

src/tsconfig.app.json

@@ -8,5 +8,9 @@
   "exclude": [
     "test.ts",
     "**/*.spec.ts"
+  ],
+  "files": [
+    "main.ts",
+    "polyfills.ts"
   ]
 }