From bf74fcc44f1c0b90d69ce046413546845d9c2735 Mon Sep 17 00:00:00 2001
From: Tom Bloor <t.bloor@shadowcat.co.uk>
Date: Fri, 29 Sep 2017 15:52:34 +0100
Subject: [PATCH] Redo all admin pages for bootstrap 4 beta

---
 templates/admin/feedback/index.html.ep        |   2 +-
 templates/admin/feedback/read.html.ep         |   8 +-
 templates/admin/home.html.ep                  |  24 +--
 .../admin/organisations/valid_read.html.ep    |  42 ++---
 .../admin/reports/transaction_data.html.ep    |  72 +++++---
 templates/admin/tokens/index.html.ep          |  10 +-
 templates/admin/transactions/index.html.ep    |  12 +-
 templates/admin/transactions/read.html.ep     |  12 +-
 templates/admin/users/read.html.ep            | 158 +++++++++---------
 templates/layouts/admin.html.ep               |  47 ++++--
 10 files changed, 210 insertions(+), 177 deletions(-)

diff --git a/templates/admin/feedback/index.html.ep b/templates/admin/feedback/index.html.ep
index 9c1e6c7..049449c 100644
--- a/templates/admin/feedback/index.html.ep
+++ b/templates/admin/feedback/index.html.ep
@@ -18,7 +18,7 @@
       <div class="card-header">
         %= $feedback->user->email;
       </div>
-      <div class="card-block">
+      <div class="card-body">
         <h6 class="card-title">
           %= format_human_datetime $feedback->submitted_at;
         </h6>
diff --git a/templates/admin/feedback/read.html.ep b/templates/admin/feedback/read.html.ep
index 36ec73b..840a35b 100644
--- a/templates/admin/feedback/read.html.ep
+++ b/templates/admin/feedback/read.html.ep
@@ -24,7 +24,7 @@
         </li>
         <li class="list-group-item justify-content-between">
           <span>Submitted At:</span>
-          <span><%= format_human_datetime$feedback->submitted_at %></span>
+          <span><%= format_human_datetime $feedback->submitted_at %></span>
         </li>
       </ul>
     </div>
@@ -34,8 +34,10 @@
       <h4 class="card-header">
         Feedback Message
       </h4>
-      <div class="card-block">
-        <pre class="card-text"><%= $feedback->feedbacktext %></pre>
+      <div class="card-body">
+        <div class="card-text">
+        <pre><%= $feedback->feedbacktext %></pre>
+        </div>
       </div>
     </div>
   </div>
diff --git a/templates/admin/home.html.ep b/templates/admin/home.html.ep
index ebc749b..3f1aa45 100644
--- a/templates/admin/home.html.ep
+++ b/templates/admin/home.html.ep
@@ -3,41 +3,41 @@
 % content_for javascript => begin
 % end
 <div class="card-deck">
-  <div class="card text-center">
-    <div class="card-header card-inverse card-primary">
+  <div class="card text-center text-white bg-primary">
+    <div class="card-header card-inverse">
       User Count
     </div>
-    <div class="card-block">
+    <div class="card-body">
       <h2 class="card-title">
         %= $user_count
       </h2>
     </div>
   </div>
-  <div class="card text-center">
-    <div class="card-header card-inverse card-success">
+  <div class="card text-center text-white bg-success">
+    <div class="card-header card-inverse">
       Unused Tokens
     </div>
-    <div class="card-block">
+    <div class="card-body">
       <h2 class="card-title">
         <%= $tokens->{unused} %> / <%= $tokens->{total} %>
       </h2>
     </div>
   </div>
-  <div class="card text-center">
-    <div class="card-header card-inverse card-danger">
+  <div class="card text-center text-white bg-danger">
+    <div class="card-header card-inverse">
       Pending Organisations
     </div>
-    <div class="card-block">
+    <div class="card-body">
       <h2 class="card-title">
         %= $pending_orgs
       </h2>
     </div>
   </div>
-  <div class="card text-center">
-    <div class="card-header card-inverse card-danger">
+  <div class="card text-center text-white bg-danger">
+    <div class="card-header card-inverse">
       Pending Transactions
     </div>
-    <div class="card-block">
+    <div class="card-body">
       <h2 class="card-title">
         %= $pending_trans
       </h2>
diff --git a/templates/admin/organisations/valid_read.html.ep b/templates/admin/organisations/valid_read.html.ep
index 8a0f0e2..ce24858 100644
--- a/templates/admin/organisations/valid_read.html.ep
+++ b/templates/admin/organisations/valid_read.html.ep
@@ -36,7 +36,7 @@ function initMap() {
       <h3 class="card-header">
         %= $valid_org->name
       </h3>
-      <div class="card-block">
+      <div class="card-body">
         <form action="<%= url_for %>" method="post">
           <div class="form-group row">
             <label for="name" class="col-md-4 col-form-label">Organisation Name</label>
@@ -93,11 +93,7 @@ function initMap() {
         </h3>
       </div>
       <div id="mapBody" role="tabpanel">
-        <div class="card-block">
-          <!-- Yes this is nasty. no i dont care. --!>
-          <style> #map {  width: 100%; height: 400px; background-color: grey; } </style>
-          <div id="map"></div>
-        </div>
+        <div id="map"></div>
       </div>
     </div>
   </div>
@@ -106,28 +102,22 @@ function initMap() {
       <h3 class="card-header">
         Transactions
       </h3>
-      <ul class="list-group list-group-flush">
+      <div class="list-group list-group-flush">
         % for my $transaction ( $transactions->all ) {
-        <li class="list-group-item">
-          <div class="container">
-            <a href="<%= url_for '/admin/transactions/' . $transaction->id %>" class="list-group-item list-group-item-action">
-              <div class="row text-center">
-                <div class="col">From: <%= $transaction->buyer->name %></div>
-                <div class="col">To: <%= $transaction->seller->name %></div>
-                <div class="col">Value: <%= $transaction->value %></div>
-                <div class="col">Submitted At: <%= $transaction->submitted_at %></div>
-                <div class="col">Purchase Time: <%= $transaction->purchase_time %></div>
-              </div>
-            </a>
-          </div>
-        </li>
+          <a href="<%= url_for '/admin/transactions/' . $transaction->id %>" class="list-group-item list-group-item-action">
+            <div class="row text-center">
+              <div class="col">From: <%= $transaction->buyer->name %></div>
+              <div class="col">To: <%= $transaction->seller->name %></div>
+              <div class="col">Value: <%= $transaction->value %></div>
+              <div class="col">Submitted At: <%= $transaction->submitted_at %></div>
+              <div class="col">Purchase Time: <%= $transaction->purchase_time %></div>
+            </div>
+          </a>
         % }
-        <li class="list-group-item">
-          <div class="container">
-            %= bootstrap_pagination( $c->param('page') || 1, $transactions->pager->last_page, { class => 'justify-content-center' } );
-          </div>
-        </li>
-      </ul>
+        <div class="list-group-item">
+          %= bootstrap_pagination( $c->param('page') || 1, $transactions->pager->last_page, { class => 'justify-content-center' } );
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/templates/admin/reports/transaction_data.html.ep b/templates/admin/reports/transaction_data.html.ep
index a3457b9..04fee8d 100644
--- a/templates/admin/reports/transaction_data.html.ep
+++ b/templates/admin/reports/transaction_data.html.ep
@@ -1,27 +1,27 @@
 % layout 'admin';
-% title 'Tokens';
+% title 'Transaction Report';
 % content_for javascript => begin
 <script src="//www.gstatic.com/charts/loader.js"></script>
 <script>
 var raw_data = <%== $transaction_rs %>;
 var mapped_data = $.map(raw_data, function( val, i ) {
-  return [[
-    new Date(val.quantised_hours),
-    val.count,
-    val.average_value / 100000,
-    val.sum_value / 100000,
-    val.average_distance / 1000,
-    val.sum_distance / 1000,
-  ]];
+  return [
+    [
+      new Date(val.quantised_hours),
+      val.count,
+      val.average_value / 100000,
+      val.sum_value / 100000,
+      val.average_distance / 1000,
+      val.sum_distance / 1000,
+    ]
+  ];
 });
 
-var data;
-
 google.charts.load('current', {packages: ['corechart']});
 google.charts.setOnLoadCallback(loadData);
 
 function loadData() {
-  data = new google.visualization.DataTable();
+  var data = new google.visualization.DataTable();
   data.addColumn('datetime', 'Hours');
   data.addColumn('number', 'Count');
   data.addColumn('number', 'Average Value');
@@ -31,12 +31,12 @@ function loadData() {
 
   data.addRows(mapped_data);
 
-  drawCountChart();
-  drawDistanceChart();
-  drawValueChart();
+  drawCountChart(data);
+  drawDistanceChart(data);
+  drawValueChart(data);
 }
 
-function drawCountChart() {
+function drawCountChart(data) {
   var options = {
     title: 'Transaction Count',
     height: 500,
@@ -56,7 +56,7 @@ function drawCountChart() {
   chart.draw(chart_data, options);
 }
 
-function drawDistanceChart() {
+function drawDistanceChart(data) {
   var options = {
     title: 'Transaction Distance',
     height: 500,
@@ -77,7 +77,7 @@ function drawDistanceChart() {
   chart.draw(chart_data, options);
 }
 
-function drawValueChart() {
+function drawValueChart(data) {
   var options = {
     title: 'Transaction Value',
     height: 500,
@@ -108,9 +108,33 @@ function drawValueChart() {
     <strong>Success!</strong> <%= $success %>
   </div>
 % }
-<div id="count_chart_div"></div>
-<div id="distance_chart_div"></div>
-<div id="value_chart_div"></div>
-<pre>
-%= $transaction_rs;
-</pre>
+<div class="card mb-3 text-center">
+  <div class="card-header">
+    Transaction Count
+  </div>
+  <div id="count_chart_div" class="card-body">
+    <div class="card-text">
+      <em>Loading...</em>
+    </div>
+  </div>
+</div>
+<div class="card mb-3 text-center">
+  <div class="card-header">
+    Transaction Distance
+  </div>
+  <div id="distance_chart_div" class="card-body">
+    <div class="card-text">
+      <em>Loading...</em>
+    </div>
+  </div>
+</div>
+<div class="card mb-3 text-center">
+  <div class="card-header">
+    Transaction Value
+  </div>
+  <div id="value_chart_div" class="card-body">
+    <div class="card-text">
+      <em>Loading...</em>
+    </div>
+  </div>
+</div>
diff --git a/templates/admin/tokens/index.html.ep b/templates/admin/tokens/index.html.ep
index 772463a..80a35da 100644
--- a/templates/admin/tokens/index.html.ep
+++ b/templates/admin/tokens/index.html.ep
@@ -23,13 +23,9 @@
 </form>
 <div class="list-group">
   % for my $token (@$tokens) {
-  <a href="<%= url_for . '/' . $token->{id} %>" class="list-group-item list-group-item-action">
-    <div>
-      %= $token->{name}
-    </div>
-    <div class="ml-auto">
-      <%= $token->{used} == 1 ? 'Used' : 'Available' %>
-    </div>
+  <a href="<%= url_for . '/' . $token->{id} %>" class="list-group-item list-group-item-action d-flex justify-content-between <%= $token->{used} ? 'disabled' : 'list-group-item-success' %>">
+    <span><%= $token->{name} %></span>
+    <span><%= $token->{used} == 1 ? 'Used' : 'Available' %></span>
   </a>
   % }
 </div>
diff --git a/templates/admin/transactions/index.html.ep b/templates/admin/transactions/index.html.ep
index 191f845..5d8e411 100644
--- a/templates/admin/transactions/index.html.ep
+++ b/templates/admin/transactions/index.html.ep
@@ -11,10 +11,8 @@
     <strong>Success!</strong> <%= $success %>
   </div>
 % }
-<div class="list-group list-group-flush">
+<div class="list-group">
   % for my $transaction ( $transactions->all ) {
-  <li class="list-group-item">
-    <div class="container">
       <a href="<%= url_for . '/' . $transaction->id %>" class="list-group-item list-group-item-action">
         <div class="row text-center">
           <div class="col">From: <%= $transaction->buyer->name %></div>
@@ -24,12 +22,8 @@
           <div class="col">Purchase Time: <%= $transaction->purchase_time %></div>
         </div>
       </a>
-    </div>
-  </li>
   % }
-  <li class="list-group-item">
-    <div class="container">
+  <div class="list-group-item">
       %= bootstrap_pagination( $c->param('page') || 1, $transactions->pager->last_page, { class => 'justify-content-center' } );
-    </div>
-  </li>
+  </div>
 </div>
diff --git a/templates/admin/transactions/read.html.ep b/templates/admin/transactions/read.html.ep
index 9eb9596..b00f6b3 100644
--- a/templates/admin/transactions/read.html.ep
+++ b/templates/admin/transactions/read.html.ep
@@ -12,15 +12,15 @@
   </div>
 % }
 <div class="card mb-3">
-  <h3 class="card-header">
+  <h3 class="card-header d-flex justify-content-between">
     Transaction Details
-    <form action="<%= url_for . '/delete' %>" method="post">
+    <form class="form-inline" action="<%= url_for . '/delete' %>" method="post">
       <div class="form-group">
-        <button class="btn btn-danger" type="submit" style="float: left">Delete Transaction</button>
+        <button class="btn btn-danger" type="submit">Delete Transaction</button>
       </div>
     </form>
   </h3>
-  <div class="card-block">
+  <div class="card-body">
     <form>
       <div class="form-group">
         <label for="email">Buyer</label>
@@ -42,8 +42,8 @@
         <label for="email">Purchase Time</label>
         <input id="purchase_time" type="text" class="form-control" placeholder="Purchase Time" name="purchase_time" value="<%= $transaction->purchase_time %>" disabled>
       </div>
-      <div class="form-group">
-        <img src="<%= url_for . '/image' %>"/>
+      <div class="form-group d-flex justify-content-center">
+        <img class="mw-100" src="<%= url_for . '/image' %>"/>
       </div>
     </form>
   </div>
diff --git a/templates/admin/users/read.html.ep b/templates/admin/users/read.html.ep
index 2970b15..7c93f1f 100644
--- a/templates/admin/users/read.html.ep
+++ b/templates/admin/users/read.html.ep
@@ -12,88 +12,98 @@
   </div>
 % }
 <form action="<%= url_for %>" method="post" autocomplete="off">
-  <h3 class="card-header">
-    User Details
-  </h3>
-    <div class="form-group">
-      <label for="email">Email Address</label>
-      <input id="email" type="text" autocomplete="off" class="form-control" placeholder="Email" name="email" value="<%= $user->email %>">
-    </div>
-    <div class="form-group">
-      <label for="joindate">Join Date</label>
-      <input id="joindate" type="datetime" class="form-control" placeholder="Date" name="joindate" value="<%= $user->join_date %>" disabled>
-    </div>
-    <div class="form-group">
-      <label for="type">Account Type</label>
-      <input id="type" type="text" class="form-control" value="<%= $user->type eq 'customer' ? 'Customer' : 'Organisation' %>" disabled>
-    </div>
-    <div class="form-group">
-      <label for="new_password">New Password</label>
-      <input id="new_password" type="password" autocomplete="off" class="form-control" placeholder="New Password" name="new_password">
-      <p class="help-block">Leave blank unless you want to change their password</p>
+  <div class="card mb-3">
+    <h3 class="card-header">
+      User Details
+    </h3>
+    <div class="card-body">
+      <div class="form-group">
+        <label for="email">Email Address</label>
+        <input id="email" type="text" autocomplete="off" class="form-control" placeholder="Email" name="email" value="<%= $user->email %>">
+      </div>
+      <div class="form-group">
+        <label for="joindate">Join Date</label>
+        <input id="joindate" type="datetime" class="form-control" placeholder="Date" name="joindate" value="<%= $user->join_date %>" disabled>
+      </div>
+      <div class="form-group">
+        <label for="type">Account Type</label>
+        <input id="type" type="text" class="form-control" value="<%= $user->type eq 'customer' ? 'Customer' : 'Organisation' %>" disabled>
+      </div>
+      <div class="form-group">
+        <label for="new_password">New Password</label>
+        <input id="new_password" type="password" autocomplete="off" class="form-control" placeholder="New Password" name="new_password">
+        <p class="help-block">Leave blank unless you want to change their password</p>
+      </div>
     </div>
+  </div>
+  <div class="card mb-3">
     % if ( my $customer_rs = $user->entity->customer ) {
-  <h3 class="card-header">
-    Customer Details
-  </h3>
-    <div class="form-group">
-      <label for="postcode">Customer Postcode</label>
-      <input id="postcode" type="text" class="form-control" placeholder="Postcode" name="postcode" value="<%= $customer_rs->postcode %>">
-    </div>
-    <div class="form-group">
-      <label for="full_name">Full Name</label>
-      <input id="full_name" type="text" class="form-control" placeholder="Full Name" name="full_name" value="<%= $customer_rs->full_name %>">
-    </div>
-    <div class="form-group">
-      <label for="display_name">Display Name</label>
-      <input id="display_name" type="text" class="form-control" placeholder="Display Name" name="display_name" value="<%= $customer_rs->display_name %>">
-    </div>
-    <div class="form-group">
-      <label for="year_of_birth">Year of Birth</label>
-      <input id="year_of_birth" type="number" class="form-control" placeholder="Year of Birth" name="year_of_birth" value="<%= $customer_rs->year_of_birth %>" disabled>
+    <h3 class="card-header">
+      Customer Details
+    </h3>
+    <div class="card-body">
+      <div class="form-group">
+        <label for="postcode">Customer Postcode</label>
+        <input id="postcode" type="text" class="form-control" placeholder="Postcode" name="postcode" value="<%= $customer_rs->postcode %>">
+      </div>
+      <div class="form-group">
+        <label for="full_name">Full Name</label>
+        <input id="full_name" type="text" class="form-control" placeholder="Full Name" name="full_name" value="<%= $customer_rs->full_name %>">
+      </div>
+      <div class="form-group">
+        <label for="display_name">Display Name</label>
+        <input id="display_name" type="text" class="form-control" placeholder="Display Name" name="display_name" value="<%= $customer_rs->display_name %>">
+      </div>
+      <div class="form-group">
+        <label for="year_of_birth">Year of Birth</label>
+        <input id="year_of_birth" type="number" class="form-control" placeholder="Year of Birth" name="year_of_birth" value="<%= $customer_rs->year_of_birth %>" disabled>
+      </div>
     </div>
     % } elsif (  my $org_rs = $user->entity->organisation ) {
-  <h3 class="card-header">
-    Organisation Details
-  </h3>
-    <div class="form-group">
-      <label for="postcode">Organisation Postcode</label>
-      <input id="postcode" type="text" class="form-control" placeholder="Postcode" name="postcode" value="<%= $org_rs->postcode %>">
-    </div>
-    <div class="form-group">
-      <label for="name">Organisation Name</label>
-      <input id="name" type="text" class="form-control" placeholder="Organisation Name" name="name" value="<%= $org_rs->name %>">
-    </div>
-    <div class="form-group">
-      <label for="street_name">Street Name</label>
-      <input id="street_name" type="text" class="form-control" placeholder="Street Name" name="street_name" value="<%= $org_rs->street_name %>">
-    </div>
-    <div class="form-group">
-      <label for="town">Town</label>
-      <input id="town" type="text" class="form-control" placeholder="Town" name="town" value="<%= $org_rs->town %>">
-    </div>
-    <div class="form-group">
-      <label for="town">Town</label>
-      <input id="town" type="sector" class="form-control" placeholder="Sector Area Code" name="sector" value="<%= $org_rs->sector %>">
+    <h3 class="card-header">
+      Organisation Details
+    </h3>
+    <div class="card-body">
+      <div class="form-group">
+        <label for="postcode">Organisation Postcode</label>
+        <input id="postcode" type="text" class="form-control" placeholder="Postcode" name="postcode" value="<%= $org_rs->postcode %>">
+      </div>
+      <div class="form-group">
+        <label for="name">Organisation Name</label>
+        <input id="name" type="text" class="form-control" placeholder="Organisation Name" name="name" value="<%= $org_rs->name %>">
+      </div>
+      <div class="form-group">
+        <label for="street_name">Street Name</label>
+        <input id="street_name" type="text" class="form-control" placeholder="Street Name" name="street_name" value="<%= $org_rs->street_name %>">
+      </div>
+      <div class="form-group">
+        <label for="town">Town</label>
+        <input id="town" type="text" class="form-control" placeholder="Town" name="town" value="<%= $org_rs->town %>">
+      </div>
+      <div class="form-group">
+        <label for="town">Town</label>
+        <input id="town" type="sector" class="form-control" placeholder="Sector Area Code" name="sector" value="<%= $org_rs->sector %>">
+      </div>
     </div>
     % } else {
-    <h3 class="card-header">
-      User is not a customer or an organisation
+    <h3 class="card-header text-white bg-danger">
+      Warning!
     </h3>
-    % }
-
-    <div class="form-group">
-      <button class="btn btn-primary form-control" type="submit">Edit Account</button>
+    <div class="card-body">
+      User is not a customer or an organisation
     </div>
+    % }
+  </div>
+  <div class="form-group">
+    <button class="btn btn-primary form-control" type="submit">Edit Account</button>
+  </div>
 </form>
 <div class="card mb-3">
   <h3 class="card-header">
     Transactions
   </h3>
-  <ul class="list-group list-group-flush">
+  <div class="list-group list-group-flush">
     % for my $transaction ( $transactions->all ) {
-    <li class="list-group-item">
-      <div class="container">
         <a href="<%= url_for '/admin/transactions/' . $transaction->id %>" class="list-group-item list-group-item-action">
           <div class="row text-center">
             <div class="col">From: <%= $transaction->buyer->name %></div>
@@ -103,13 +113,9 @@
             <div class="col">Purchase Time: <%= $transaction->purchase_time %></div>
           </div>
         </a>
-      </div>
-    </li>
     % }
-    <li class="list-group-item">
-      <div class="container">
-        %= bootstrap_pagination( $c->param('page') || 1, $transactions->pager->last_page, { class => 'justify-content-center' } );
-      </div>
-    </li>
-  </ul>
+    <div class="list-group-item">
+      %= bootstrap_pagination( $c->param('page') || 1, $transactions->pager->last_page, { class => 'justify-content-center' } );
+    </div>
+  </div>
 </div>
diff --git a/templates/layouts/admin.html.ep b/templates/layouts/admin.html.ep
index f937faf..eab4f4a 100644
--- a/templates/layouts/admin.html.ep
+++ b/templates/layouts/admin.html.ep
@@ -6,16 +6,14 @@
     <title>LocalLoop Admin - <%= title %></title>
 
     <!-- Bootstrap and jQuery js -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
 
-    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
 
     %= stylesheet '/static/admin/css/main.css';
   </head>
   <body>
-    <nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-danger">
+    <nav class="navbar navbar-expand-md fixed-top navbar-dark bg-danger">
+      <a class="navbar-brand" href="<%= url_for '/admin/home' %>">LocalLoop Admin</a>
       <button class="navbar-toggler navbar-toggler-right"
               type="button"
               data-toggle="collapse"
@@ -26,21 +24,44 @@
         <span class="navbar-toggler-icon"></span>
       </button>
 
-      <a class="navbar-brand" href="<%= url_for '/admin/home' %>">LocalLoop Admin</a>
       <div class="collapse navbar-collapse" id="navbarNav">
-        <div class="navbar-nav ml-auto">
-          <a class="nav-item nav-link<%= title eq 'Feedback' ? ' active' : '' %>" href="<%= url_for '/admin/feedback' %>">Feedback</a>
-          <a class="nav-item nav-link<%= title eq 'Tokens' ? ' active' : '' %>" href="<%= url_for '/admin/tokens' %>">Tokens</a>
-          <a class="nav-item nav-link<%= title eq 'Transactions' ? ' active' : '' %>" href="<%= url_for '/admin/transactions' %>">Transactions</a>
-          <a class="nav-item nav-link<%= title eq 'Users' ? ' active' : '' %>" href="<%= url_for '/admin/users' %>">Users</a>
-          <a class="nav-item nav-link<%= title eq 'Organisations' ? ' active' : '' %>" href="<%= url_for '/admin/organisations' %>">Organisations</a>
-          <a class="nav-item nav-link" href="<%= url_for '/admin/logout' %>">Logout</a>
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
+              Reports
+            </a>
+            <div class="dropdown-menu">
+              <a class="dropdown-item" href="<%= url_for '/admin/reports/transactions' %>">Transactions</a>
+            </div>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link<%= title eq 'Feedback' ? ' active' : '' %>" href="<%= url_for '/admin/feedback' %>">Feedback</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link<%= title eq 'Tokens' ? ' active' : '' %>" href="<%= url_for '/admin/tokens' %>">Tokens</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link<%= title eq 'Transactions' ? ' active' : '' %>" href="<%= url_for '/admin/transactions' %>">Transactions</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link<%= title eq 'Users' ? ' active' : '' %>" href="<%= url_for '/admin/users' %>">Users</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link<%= title eq 'Organisations' ? ' active' : '' %>" href="<%= url_for '/admin/organisations' %>">Organisations</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="<%= url_for '/admin/logout' %>">Logout</a>
+          </li>
         </div>
       </div>
     </nav>
     <div class="container">
       <%= content %>
     </div>
+    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js" integrity="sha256-jpW4gXAhFvqGDD5B7366rIPD7PDbAmqq4CO0ZnHbdM4=" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+
     %= content_for 'javascript';
   </body>
 </html>