add ability to cancel loan

app/controllers/loans_controller.rb

@@ -1,7 +1,7 @@
 class LoansController < ApplicationController
   include Authenticatable
 
-  before_action :ensure_authenticated, only: [:create, :list, :pending, :out, :checkout, :checkin]
+  before_action :ensure_authenticated, only: [:create, :list, :pending, :out, :checkout, :checkin, :cancel]
 
   def new
     StatsD.increment("loan_new_viewed")
@@ -165,6 +165,16 @@ def repair
     end
   end
 
+  def cancel
+    @loan = Loan.find(params[:id])
+
+    if @loan
+      @loan.cancel!
+      flash[:notice] = 'Loan successfully cancelled.'
+      redirect_to overview_path
+    end
+  end
+
   private
 
   def loan_params

app/models/loan.rb

@@ -35,7 +35,14 @@ class Loan < ApplicationRecord
   def extend
     StatsD.measure("loan.extend_time") do
       StatsD.increment("loan.extended")
-      self.due_date += 1.day
+
+      # get the current date
+      current_date = Date.today
+
+      # set new_due date to the current date + 1 day
+      new_due_date = current_date + 1.day
+
+      self.due_date = new_due_date
       self.save
     end
   end
@@ -44,6 +51,7 @@ def extend
     state :pending, initial: true, display: "Pending"
     state :out, display: "Out"
     state :returned, display: "Returned"
+    state :canceled, display: "Canceled"
 
     after_all_transitions :log_status_change
 
@@ -98,6 +106,15 @@ def extend
         self.update(returned_at: Time.now)
       end
     end
+
+    event :cancel do
+      transitions from: :pending, to: :canceled
+      after do
+        StatsD.increment("loan.canceled")
+      end
+    end
+
+
   end
 
   def log_status_change

app/views/loans/list.html.erb

@@ -1,31 +1,27 @@
-<% content_for :title, "Loans (Historical)" %>
+<% content_for :title, "Historical Loans Data" %>
 
 <div class="container-responsive px-3 pt-3">
   <div class="box">
 
-    <div class="row mb-2">
-
+    <div class="row mb-2 align-items-center">
       <div class="col">
-        <u>
-          <h3 class="mb-0">All Loans (Historical)</h3>
-        </u>
+        <u><h4 class="mb-0 text-decoration-underline">Historical Loans Data:</h4></u>
       </div>
 
       <div class="col-auto">
-        <div class="buttons">
-          <%= link_to "Out Loans", loans_list_out_path, class: "btn btn-info" %>
-          <%= link_to "Pending Loans", loans_list_pending_path, class: "btn btn-info" %>
+        <div class="btn-group" role="group">
+          <button id="show-all" class="btn-sm btn-info" onclick="filterLoans('all')">All</button>
+          <button id="show-pending" class="btn-sm btn-info" onclick="filterLoans('pending')">Pending</button>
+          <button id="show-out" class="btn-sm btn-info" onclick="filterLoans('out')">Out</button>
+            <button id="show-returned" class="btn-sm btn-info" onclick="filterLoans('returned')">Returned</button>
+            <button id="show-canceled" class="btn-sm btn-info" onclick="filterLoans('canceled')">Canceled</button>
+            <%= link_to 'Back to Overview', overview_path, class: 'btn-sm btn-primary ml-5' %>
         </div>
       </div>
-      <br/>
-      <div class="col-auto">
-        <%= link_to 'Back to Overview', overview_path, class: 'btn btn-primary' %>
-      </div>
-
     </div>
 
     <div class="table-container">
-      <table class="table is-striped is-bordered is-hoverable">
+      <table class="table table-striped table-bordered table-hover">
         <thead>
           <tr>
             <th>Reason</th>
@@ -37,9 +33,9 @@
             <th>Status</th>
           </tr>
         </thead>
-        <tbody>
+        <tbody id="loans-table-body">
           <% @loans.each do |loan| %>
-            <tr>
+            <tr class="loan-row" data-status="<%= loan.status %>">
               <td><%= loan.reason.humanize %></td>
               <td><%= loan.borrower.first_name %></td>
               <td><%= loan.borrower.last_name %></td>
@@ -57,14 +53,42 @@
 
 <style>
   .table-container {
-     height: 80vh;
-     overflow-y: auto;
-   }
+    height: 80vh;
+    overflow-y: auto;
+  }
 
   .table thead th {
     position: sticky;
     top: 0;
     z-index: 1;
     background: white;
   }
+
+  .btn-group .btn-sm {
+    margin-right: 5px;
+  }
+
+  .btn-group .btn-sm:last-child {
+    margin-right: 0;
+  }
 </style>
+
+<script>
+  function filterLoans(status) {
+    var rows = document.querySelectorAll('.loan-row');
+    rows.forEach(row => {
+      if (status === 'all') {
+        row.style.display = '';
+      } else {
+        if (row.getAttribute('data-status') === status) {
+          row.style.display = '';
+        } else {
+          row.style.display = 'none';
+        }
+      }
+    });
+  }
+
+  // Default to showing all loans
+  filterLoans('all');
+</script>

app/views/main/overview.html.erb

@@ -55,9 +55,15 @@
                     class: "input reason-input",
       pattern: "^[0-9]{6}$",
                     title: "Please enter exactly 6 digits" %>
-                  <%= form.submit "Check Out", class: "button is-small is-success" %>
+                  <%= form.submit "Check Out", class: "button is-small is-success checkout-btn" %>
                 <% end %>
               </td>
+              <td>
+                <%= form_with url: cancel_loan_path(id: loan.id), method: :post, local: true do |form| %>
+                  <%= form.hidden_field :loan_id, value: loan.id %>
+                  <%= form.submit "X", class: "button is-small is-danger" %>
+                  <% end %>
+              </td>
             </tr>
           <% end %>
         </tbody>
@@ -124,6 +130,11 @@
   </div>
 
   <style>
+
+  .checkout-btn {
+    margin-right: -5vw;
+  }
+
     #pendingtb {
       height: 25vh;
       overflow-y: auto;

config/routes.rb

@@ -26,10 +26,9 @@
   get 'loans', to: redirect('/')
   post 'loans', to: 'loans#create'
   get 'loans/list'
-  get 'loans/list/pending', to: 'loans#pending'
-  get 'loans/list/out', to: 'loans#out'
   post 'loans/:id/extend', to: 'loans#extend', as: 'extend_loan'
   post 'loans/:id/repair', to: 'loans#repair', as: 'repair_loan'
+  post 'loans/:id/cancel' => 'loans#cancel', as: 'cancel_loan'
 
 
   get 'loaners' => 'loaners#list'