Completing the Admin Dashboard Homepage

In this video, we are going to complete our admin homepage. The first part of our homepage has a list of posts that are pending approval, and in the second section, we are going to display the audit logs that show who has confirmed their time and who hasn't.

To do that, go to _admin.html.erb, and just copy-paste the "Items Pending Your Approval" section. Next, change the heading to "Confirmation Log", and rename the partial to confirmation_log. Also, change @pending_approvals to @recent_audit_items.

<!-- app/views/static/_admin.html.erb -->

<div class='container-fluid'>
  <div class='pending-homepage row'>
    <h2>Items Pending Your Approval</h2>
    <hr>

    <%= render partial: 'pending_approval', locals: { pending_approvals: @pending_approvals } %>
  </div>

  <div class='pending-homepage row'>
    <h2>Confirmation Log</h2>
    <hr>

    <%= render partial: 'confirmation_log', locals: { recent_audit_items: @recent_audit_items } %>
  </div>
</div>

Now, define the variable recent_audit_items in our static_controller.rb. This variable should hold the last 10 audit logs.

# app/controllers/static_controller.rb

class StaticController < ApplicationController
  def homepage
    @pending_approvals = Post.where(status: 'submitted')
    @recent_audit_items = AuditLog.last(10)
  end
end

Next, create a partial called confirmation_log.html.erb, and here, let's just inspect the items, and see what gets printed in the browser.

It works, so we'll just have to format it.

Copy the code again from our _pending_approval.html.erb partial, and swap out pending_approval with recent_audit_items. Also, change date and rationale to start date, end date and status. We obviously don't want any buttons, so let's remove them. The final code should be:

<!-- app/views/static/_confirmation_log.html.erb -->

<% recent_audit_items.each do |recent_audit_item| %>
  <div class='homepage-block col-md-3'>
    <h4>
      <%= recent_audit_item.user.full_name %>
    </h4>

    <p>
      <span class='pending-details'>Week starting:</span> <%= recent_audit_item.start_date %>
    </p>

    <p>
      <span class='pending-details'>Confirmed at:</span> <%= recent_audit_item.end_date || status_label('pending') %>
    </p>

    <p>
      <span class='pending-details'>Status:</span> <%= status_label recent_audit_item.status %>
    </p>
  </div>
<% end %>

If you start the rails server and open your browser, you can see this:

large

I think the client would like to have a button that'll take them to a page where they can see all the audit logs. So, let's add this in our _admin.html.erb file.

<!-- app/views/static/_admin.html.erb -->

<div class='pending-homepage row'>
  <h2>Confirmation Log</h2>
  <hr>

  <%= render partial: 'confirmation_log', locals: { recent_audit_items: @recent_audit_items } %>

  <div class='clearfix'></div>

  <hr>

  <%= link_to 'View All Items', audit_logs_path, class: 'btn btn-primary' %>
</div>

Now, it looks like this:

large

If you click this button, it takes us to our list of audit logs.

Before we end this section, I want to change the hover effect of our homepage-block.

/* app/assets/stylesheets/admin_homepage.css */

.homepage-block:hover {
  background-color: #172b63;
}

So, now the active block looks slightly darker, and also, easier to identify.

Resources

Code at this stage