Adopter foster dashboard (#620)

* Add routes, controller, policy for adopter foster profile and refactor avatar helper method to create an xl avatar using a new partial for the profile.

* Update navlinks to relevant links all pointing to dashbaord index for now as placeholders

* lint fix

---------

Co-authored-by: Ben Robinson <ben.robinson@b2bwave.com>

app/controllers/organizations/adopter_foster_dashboard_controller.rb

@@ -0,0 +1,11 @@
+class Organizations::AdopterFosterDashboardController < Organizations::BaseController
+  layout "adopter_foster_dashboard"
+
+  def index
+    @user = current_user
+    @organization = Current.organization
+    @hide_footer = true
+
+    authorize! :adopter_foster_dashboard, context: {organization: @organization}
+  end
+end

app/helpers/avatar_helper.rb

@@ -1,12 +1,14 @@
 module AvatarHelper
-  def render_avatar_partial
-    render "components/avatar" do |partial|
+  def render_avatar_partial(xl = false)
+    partial_name = xl ? "components/xl_avatar" : "components/avatar"
+
+    render partial_name do |partial|
       partial.alt "#{current_user.first_name.first.upcase} Avatar"
       partial.initials "#{current_user.first_name.first}#{current_user.last_name.first}".upcase
 
       if current_user.avatar.attached?
         partial.avatar do
-          image_tag url_for(current_user.avatar), alt: partial.alt, class: "rounded-circle"
+          image_tag url_for(current_user.avatar), alt: partial.alt, class: (xl ? "avatar-xl rounded-circle border border-4 border-white" : "rounded-circle")
         end
       end
     end

app/models/concerns/authorizable.rb

@@ -1,4 +1,5 @@
 ADOPTER_PERMISSIONS = %i[
+  view_adopter_foster_dashboard
   create_adopter_applications
   view_adopter_applications
   withdraw_adopter_applications
@@ -9,6 +10,7 @@
 STAFF_PERMISSIONS = (
   ADOPTER_PERMISSIONS.excluding(
     %i[
+      view_adopter_foster_dashboard
       create_adopter_applications
       create_adopter_foster_profiles
       manage_adopter_foster_profiles

app/policies/organizations/adopter_foster_dashboard_policy.rb

@@ -0,0 +1,7 @@
+class Organizations::AdopterFosterDashboardPolicy < ApplicationPolicy
+  pre_check :verify_organization!
+
+  def index?
+    permission?(:view_adopter_foster_dashboard)
+  end
+end

app/views/components/_avatar.html.erb

@@ -1,9 +1,9 @@
 <% if partial.avatar? %>
-  <div class="avatar avatar-md avatar-indicators avatar-online">
+  <div class="avatar avatar-md">
     <%= partial.avatar %>
   </div>
 <% else %>
-  <div class="avatar avatar-md avatar-indicators avatar-online avatar-primary">
+  <div class="avatar avatar-md avatar-primary">
     <div class="avatar-initials rounded-circle">
       <%= partial.initials %>
     </div>

app/views/components/_xl_avatar.html.erb

@@ -0,0 +1,9 @@
+<% if partial.avatar? %>
+  <%= partial.avatar %>
+<% else %>
+  <div class="avatar-xl rounded-circle border border-4 border-white" style="background-color: #754ffe">
+    <div class="avatar-initials" style="font-size: xx-large; color: white">
+      <%= partial.initials %>
+    </div>
+  </div>
+<% end %>

app/views/components/adopter_foster_dashboard/_nav_tab.html.erb

@@ -0,0 +1,5 @@
+<li class="nav-item ms-0">
+  <%= active_link_to url, class: "nav-link", **(options || {})do %>
+    <%= text %>
+  <% end %>
+</li>

app/views/components/adopter_foster_dashboard/_page.html.erb

@@ -0,0 +1,41 @@
+<% unless partial.header_title? %>
+  <% raise "header_title must be provided" %>
+<% end %>
+
+<section class="container-fluid p-4">
+  <div class="row">
+    <div class="col-lg-12 col-md-12 col-12">
+      <div class="pb-3 d-lg-flex justify-content-between align-items-center">
+        <div style="--bs-breadcrumb-divider: '>'" class="flex-column">
+          <h2 class="section-heading text-capitalize">
+            <%= partial.header_title %>
+          </h2>
+          <% if partial.header_subtitle? %>
+            <p class="section-subheading text-muted mt-n2">
+              <%= partial.header_subtitle %>
+            </p>
+          <% end %>
+          <%= breadcrumbs class: "breadcrumb", style: :ol, fragment_class: "breadcrumb-item" %>
+        </div>
+        <div class="d-flex">
+          <%= partial.actions %>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-12 border-bottom">
+      <!-- Nav tabs -->
+      <% if partial.nav_tabs? %>
+        <ul class="nav nav-lb-tab mt-n3 gap-1">
+          <%= partial.nav_tabs %>
+        </ul>
+      <% end %>
+    </div>
+  </div>
+
+  <div class='mt-4'>
+    <%= partial.content %>
+  </div>
+</section>

app/views/layouts/adopter_foster_dashboard.html.erb

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html>
+<%= render "layouts/shared/head" %>
+
+  <body>
+    <%= render "layouts/shared/flash_messages" %>
+    <%= render 'layouts/shared/navbar' %>
+
+      <!-- Page Content -->
+      <main>
+        <section class="pt-5 pb-5">
+          <div class="container">
+            <div class="row align-items-center">
+              <!-- User info -->
+              <div class="col-xl-12 col-lg-12 col-md-12 col-12">
+                <!-- Bg -->
+                <div class="rounded-top" style="background: url('/assets/background/profile-bg.jpg') no-repeat; background-size: cover; height: 100px;"></div>
+                <div class="card px-4 pt-2 pb-4 shadow-sm rounded-top-0 rounded-bottom-0 rounded-bottom-md-2">
+                  <div class="d-flex align-items-end justify-content-between">
+                    <div class="d-flex align-items-center">
+                      <div class="me-2 position-relative d-flex justify-content-end align-items-end mt-n5">
+                        <%= render_avatar_partial(xl: true) %>
+                      </div>
+                      <div class="lh-1">
+                        <h2 class="mb-0"><%= "#{current_user.first_name} #{current_user.last_name}" %></h2>
+                      </div>
+                    </div>
+                    <div>
+                      <a href="add-course.html" class="btn btn-primary d-none d-md-block">Sample Button</a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Content -->
+
+            <div class="row mt-0 mt-md-4">
+              <div class="col-lg-3 col-md-4 col-12">
+                <!-- Side navbar -->
+                <nav class="navbar navbar-expand-md shadow-sm mb-4 mb-lg-0 sidenav">
+                  <!-- Menu -->
+                  <a class="d-xl-none d-lg-none d-md-none text-inherit fw-bold" href="#">Menu</a>
+                  <!-- Button -->
+                  <button class="navbar-toggler d-md-none icon-shape icon-sm rounded bg-primary text-light" type="button" data-bs-toggle="collapse" data-bs-target="#sidenav" aria-controls="sidenav" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="fe fe-menu"></span>
+                  </button>
+                  <!-- Collapse navbar -->
+                  <div class="collapse navbar-collapse" id="sidenav">
+                    <div class="navbar-nav flex-column">
+                      <span class="navbar-header">Dashboard</span>
+                      <ul class="list-unstyled ms-n2 mb-4">
+                        <!-- Nav item -->
+                        <li class="nav-item">
+                          <%= active_link_to adopter_foster_dashboard_index_path, class: "nav-link" do %>
+                            <i class="fe fe-home nav-icon"></i> My Dashboard
+                          <% end %>
+                        </li>
+                        <!-- Nav item -->
+                        <li class="nav-item">
+                          <%= active_link_to adopter_foster_dashboard_index_path, class: "nav-link" do %>
+                            <i class="fe fe-book nav-icon"></i> My Applications
+                          <% end %>
+                        </li>
+                        <!-- Nav item -->
+                        <li class="nav-item">
+                          <%= active_link_to adopter_foster_dashboard_index_path, class: "nav-link" do %>
+                            <i class="fe fe-star nav-icon"></i> My Pets
+                          <% end %>
+                        </li>
+                        <!-- Nav item -->
+                        <li class="nav-item">
+                          <%= active_link_to adopter_foster_dashboard_index_path, class: "nav-link" do %>
+                            <i class="fe fe-dollar-sign nav-icon"></i> Donate
+                          <% end %>
+                        </li>
+                        <!-- Nav item -->
+                        <li class="nav-item">
+                          <%= active_link_to adopter_foster_dashboard_index_path, class: "nav-link" do %>
+                            <i class="fe fe-help-circle nav-icon"></i> FAQ
+                          <% end %>
+                        </li>
+                      </ul>
+                      <!-- Navbar header -->
+                      <span class="navbar-header">Account Settings</span>
+                      <ul class="list-unstyled ms-n2 mb-0">
+                        <!-- Nav item -->
+                        <li class="nav-item">
+                          <%= active_link_to edit_user_registration_path, class: "nav-link" do %>
+                            <i class="fe fe-settings nav-icon"></i> Edit Settings
+                          <% end %>
+                        </li>
+                        <!-- Nav item -->
+                        <li class="nav-item">
+                          <%= button_to destroy_user_session_path, method: :delete, data: { turbo: false }, class: 'nav-link' do %>
+                            <i class="fe fe-power nav-icon"></i> Log Out
+                          <% end %>
+                        </li>
+                        <li class="nav-item">
+                          <%= active_link_to adopter_foster_dashboard_index_path, class: "nav-link" do %>
+                            <i class="fe fe-trash nav-icon"></i> Delete Account
+                          <% end %>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </nav>
+              </div>
+              <div class="col-lg-9 col-md-8 col-12">
+                <!-- Card -->
+                <%= yield %>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+  </body>
+</html>

app/views/layouts/shared/_navbar.html.erb

@@ -31,21 +31,10 @@
         <div class="aria-dropdown-menu position-absolute end-0" data-dropdown-target="menu" hidden aria-hidden="true" aria-labelledby="nav-dropdown-button" style='z-index: 1000'>
           <% if user_signed_in? %>
             <ul class="list-unstyled">
-              <% if current_user.adopter_foster_account && current_user.adopter_foster_account.adopter_foster_profile.nil? %>
+              <% if current_user.adopter_foster_account %>
                 <li>
-                  <%= link_to new_profile_path, class: 'dropdown-item' do %>
-                    <i class="fe fe-user me-2"></i> My Profile
-                  <% end %>
-                </li>
-              <% elsif current_user.adopter_foster_account %>
-                <li>
-                  <%= link_to profile_path, class: 'dropdown-item' do %>
-                    <i class="fe fe-user me-2"></i> My Profile
-                  <% end %>
-                </li>
-                <li>
-                  <%= link_to adopter_applications_path, class: 'dropdown-item' do %>
-                    <i class="fe fe-star me-2"></i> My Applications
+                  <%= link_to adopter_foster_dashboard_index_path, class: 'dropdown-item' do %>
+                    <i class="fe fe-user me-2"></i> Dashboard
                   <% end %>
                 </li>
               <% end %>

app/views/organizations/adopter_foster_dashboard/index.html.erb

@@ -0,0 +1,38 @@
+<!--page heading-->
+<%= render "components/adopter_foster_dashboard/page" do |p| %>
+  <% p.header_title t("dashboard.index.header_title") %>
+  <% p.content do %>
+    <div class="row">
+      <div class="col-xl-3 col-lg-6 col-md-12 col-12">
+        <%= render "components/data_card" do |c| %>
+          <% c.title "Example" %>
+          <% c.icon "users" %>
+          <% c.value '5' %>
+        <% end %>
+      </div>
+      <div class="col-xl-3 col-lg-6 col-md-12 col-12">
+        <%= render "components/data_card" do |c| %>
+          <% c.title "Pets" %>
+          <% c.icon "heart" %>
+          <% c.value @organization.pets.count %>
+        <% end %>
+      </div>
+
+      <div class="col-xl-3 col-lg-6 col-md-12 col-12">
+        <%= render "components/data_card" do |c| %>
+          <% c.title "Applications" %>
+          <% c.icon "file-text" %>
+          <% c.value "TBD" %>
+        <% end %>
+      </div>
+
+      <div class="col-xl-3 col-lg-6 col-md-12 col-12">
+        <%= render "components/data_card" do |c| %>
+          <% c.title "Rescues" %>
+          <% c.icon "star" %>
+          <% c.value "TBD" %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

app/views/static_pages/home.html.erb

@@ -6,7 +6,7 @@
     </h1>
     <%= link_to "Browse #{Pet.unadopted.count} Pets",
                 adoptable_pets_path,
-                class:'custom-btn-pink' %>
+                class: 'custom-btn-pink' %>
   </div>
 </header>
 

config/routes.rb

@@ -23,6 +23,7 @@
     end
     resources :default_pet_tasks
     resources :dashboard, only: [:index]
+    resources :adopter_foster_dashboard, only: [:index]
     resources :adopter_applications, path: "applications",
       only: %i[index create update]
     resources :adoption_application_reviews, only: [:index, :edit, :update]