Skip to content

Commit

Permalink
1057 - Staff: Dashboard summary stats visual design improvement (#1060)
Browse files Browse the repository at this point in the history 
* UI improvement for staff dashboard

* Margin to left of icons to look better

* Updated staff dashboard code to use DataCardComponent

* Customized title size and icon color

* Lint fix

* New line fix
  • Loading branch information
@sarvaiyanidhi
sarvaiyanidhi authored Oct 18, 2024
1 parent c4a3c32 commit ee1ef53
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 61 deletions.
8 changes: 4 additions & 4 deletions app/components/data_card_component.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-3 lh-1">
<div>
<span class="fs-6 text-uppercase fw-semibold ls-md">
<span class="<%= title_size_class %> text-uppercase fw-semibold ls-md">
<%= title %>
</span>
</div>
<div>
<% if icon_name? %>
<span class="<%= feather_classes %> fs-3 text-primary"></span>
<span class="<%= feather_classes %> fs-3 <%= icon_color %>"></span>
<% end %>
</div>
</div>
<h2 class="fw-bold mb-1">
<div>
<%= value %>
</h2>
</div>
</div>
</div>
19 changes: 18 additions & 1 deletion app/components/data_card_component.rb
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
# frozen_string_literal: true

class DataCardComponent < ViewComponent::Base
def initialize
attr_reader :title_size, :icon_color

def initialize(title_size: :medium, icon_color: nil)
@title_size = title_size
@icon_color = icon_color
end

renders_one :title
Expand All @@ -14,4 +18,17 @@ def initialize
def feather_classes
"fe fe-#{icon_name}"
end

def title_size_class
case title_size
when :small
"fs-6" # Equivalent to h4
when :medium
"fs-4" # Equivalent to h3
when :large
"fs-3" # Equivalent to h1
else
"fs-4" # Default to medium
end
end
end
146 changes: 90 additions & 56 deletions app/views/organizations/staff/dashboard/index.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,109 @@
<%= render DashboardPageComponent.new do |c| %>
<% c.with_header_title { t("dashboard.index.header_title") } %>
<% c.with_body do %>
<div class="row">
<div class="row g-4">
<div class="col-xl-3 col-lg-6 col-md-12 col-12">
<%= render DataCardComponent.new do |card| %>
<% card.with_title { "Tasks" } %>
<% card.with_icon_name { "list" } %>
<% card.with_value do %>
<div>
<div>
<%= link_to "#{@not_completed_not_overdue_tasks_count} Incomplete",
pets_with_incomplete_tasks_staff_dashboard_index_path,
data: { turbo_frame: "tasks-frame" }
%>
<div class="task-card">
<%= render DataCardComponent.new(title_size: :medium, icon_color: "text-primary") do |card| %>
<% card.with_title { "Tasks" } %>
<% card.with_icon_name { "list" } %>
<% card.with_value do %>
<div class="fs-4 ms-1">
<div>
<%= link_to pets_with_incomplete_tasks_staff_dashboard_index_path,
data: { turbo_frame: "tasks-frame" },
class: "text-decoration-none text-gray-500 fw-normal" do %>
<i class="fe fe-alert-circle text-primary me-1"></i>
<%= "#{@not_completed_not_overdue_tasks_count} Incomplete" %>
<% end %>
</div>
<div>
<%= link_to pets_with_overdue_tasks_staff_dashboard_index_path,
data: { turbo_frame: "tasks-frame" },
class: "text-decoration-none text-gray-500 fw-normal" do %>
<i class="fe fe-clock text-primary me-1"></i>
<%= "#{@not_completed_overdue_tasks_count} Overdue" %>
<% end %>
</div>
</div>
<div>
<%= link_to "#{@not_completed_overdue_tasks_count} Overdue",
pets_with_overdue_tasks_staff_dashboard_index_path,
data: { turbo_frame: "tasks-frame" }
%>
</div>
</div>
<% end %>
<% end %>
<% end %>
</div>
</div>

<div class="col-xl-3 col-lg-6 col-md-12 col-12">
<%= render DataCardComponent.new do |card| %>
<% card.with_title { "Applications" } %>
<% card.with_icon_name { "file-text" } %>
<% card.with_value do %>
<div>
<div>
<%= link_to "#{@awaiting_review_count} Awaiting Review",
staff_adoption_application_reviews_path(q: { adopter_applications_status_eq: "awaiting_review" })
%>
</div>
<div>
<%= link_to "#{@under_review_count} Under Review",
staff_adoption_application_reviews_path(q: { adopter_applications_status_eq: "under_review" })
%>
<div class="application-card">
<%= render DataCardComponent.new(title_size: :medium, icon_color: "text-success") do |card| %>
<% card.with_title { "Applications" } %>
<% card.with_icon_name { "file-text" } %>
<% card.with_value do %>
<div class="fs-4 ms-1">
<div>
<%= link_to staff_adoption_application_reviews_path(q: { adopter_applications_status_eq: "awaiting_review" }),
class: "text-decoration-none text-gray-500 fw-normal" do %>
<i class="fe fe-eye text-success me-1"></i>
<%= "#{@awaiting_review_count} Awaiting Review" %>
<% end %>
</div>
<div>
<%= link_to staff_adoption_application_reviews_path(q: { adopter_applications_status_eq: "under_review" }),
class: "text-decoration-none text-gray-500 fw-normal" do %>
<i class="fe fe-check-circle text-success me-1"></i>
<%= "#{@under_review_count} Under Review" %>
<% end %>
</div>
</div>
</div>
<% end %>
<% end %>
<% end %>
</div>
</div>

<div class="col-xl-3 col-lg-6 col-md-12 col-12">
<%= render DataCardComponent.new do |card| %>
<% card.with_title { t(:fosters) } %>
<% card.with_icon_name { "heart" } %>
<% card.with_value do %>
<div>
<%= link_to "#{@current_foster_count} Current",
staff_manage_fosters_path(q: { status_eq: "current" })
%>
</div>
<div>
<%= link_to "#{@upcoming_foster_count} Upcoming",
staff_manage_fosters_path(q: { status_eq: "upcoming" })
%>
</div>
<div class="foster-card">
<%= render DataCardComponent.new(title_size: :medium, icon_color: "text-warning") do |card| %>
<% card.with_title { t(:fosters) } %>
<% card.with_icon_name { "heart" } %>
<% card.with_value do %>
<div class="fs-4 ms-1">
<div>
<%= link_to staff_manage_fosters_path(q: { status_eq: "current" }),
class: "text-decoration-none text-gray-500 fw-normal" do %>
<i class="fe fe-calendar text-warning me-1"></i>
<%= "#{@current_foster_count} Current" %>
<% end %>
</div>
<div>
<%= link_to staff_manage_fosters_path(q: { status_eq: "upcoming" }),
class: "text-decoration-none text-gray-500 fw-normal" do %>
<i class="fe fe-clock text-warning me-1"></i>
<%= "#{@upcoming_foster_count} Upcoming" %>
<% end %>
</div>
</div>
<% end %>
<% end %>
<% end %>
</div>
</div>

<div class="col-xl-3 col-lg-6 col-md-12 col-12">
<%= render DataCardComponent.new do |card| %>
<% card.with_title { t(:rescues) } %>
<% card.with_icon_name { "star" } %>
<% card.with_value { "TBD" } %>
<% end %>
<div class="rescue-card">
<%= render DataCardComponent.new(title_size: :medium, icon_color: "text-gray-500") do |card| %>
<% card.with_title { t(:rescues) } %>
<% card.with_icon_name { "star" } %>
<% card.with_value do %>
<div class="text-muted text-decoration-none text-gray-500 fw-normal">
<div class="fs-4 ms-1">
TBD
</div>
</div>
<% end %>
<% end %>
</div>
</div>
</div>
<%= render 'pets_with_incomplete_or_overdue_tasks' %>

<div class="mt-5">
<%= render 'pets_with_incomplete_or_overdue_tasks' %>
</div>
<% end %>
<% end %>

0 comments on commit ee1ef53

Please sign in to comment.