From cb94762bbfb30e6b4a1fdff94a03f7ac46a73b55 Mon Sep 17 00:00:00 2001
From: svileshina <svileshina@gmail.com>
Date: Sun, 14 Sep 2025 09:45:47 -0400
Subject: [PATCH 1/2] messy table for visual POC

---
 app/decorators/casa_case_decorator.rb |  8 ++++++++
 app/javascript/src/dashboard.js       | 21 ++++++++++++++++++++-
 app/views/volunteers/index.html.erb   | 26 ++++++++++++++++++++++++++
 3 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/app/decorators/casa_case_decorator.rb b/app/decorators/casa_case_decorator.rb
index d31487163c..5948078b86 100644
--- a/app/decorators/casa_case_decorator.rb
+++ b/app/decorators/casa_case_decorator.rb
@@ -15,6 +15,14 @@ def case_contacts_latest_before(date)
     object.case_contacts.where("occurred_at < ?", date).max_by(&:occurred_at)
   end
 
+  def case_contacts_made
+    object.case_contacts.where('occurred_at > ?', DateTime.now - 60.days).count
+  end
+
+  def last_attempted_contact_formatted(volunteer_id)
+    object.case_contacts.where(creator_id: volunteer_id).order(occurred_at: :desc).first&.occurred_at&.strftime("%B %d, %Y")
+  end
+
   def case_contacts_filtered_by_active_assignment_ordered_by_occurred_at
     object.case_contacts
       .joins("INNER JOIN case_assignments on case_assignments.casa_case_id = case_contacts.casa_case_id and case_assignments.volunteer_id = case_contacts.creator_id")
diff --git a/app/javascript/src/dashboard.js b/app/javascript/src/dashboard.js
index 9bf091bb34..e5056ee4fe 100644
--- a/app/javascript/src/dashboard.js
+++ b/app/javascript/src/dashboard.js
@@ -134,8 +134,14 @@ $(() => { // JQuery's callback for the DOM loading
         }
       })
     },
-    order: [[7, 'desc']],
+    order: [[8, 'desc']],
     columns: [
+      {
+        className: 'dt-control',
+        orderable: false,
+        data: null,
+        defaultContent: ''
+      },
       {
         data: 'id',
         targets: 0,
@@ -304,6 +310,19 @@ $(() => { // JQuery's callback for the DOM loading
     }
   })
 
+  volunteersTable.on('click', 'tbody td.dt-control', function (e) {
+    let tr = e.target.closest('tr');
+    let row = volunteersTable.row(tr);
+
+    if (row.child.isShown()) {
+        row.child.hide();
+    }
+    else {
+        const vdomId = `#volunteer-details-${row.data().id}`
+        row.child($(vdomId).html()).show();
+    }
+  });
+
   // Because the table saves state, we have to check/uncheck modal inputs based on what
   // columns are visible
   volunteersTable.columns().every(function (index) {
diff --git a/app/views/volunteers/index.html.erb b/app/views/volunteers/index.html.erb
index b90f53baa8..0ae8b04c8f 100644
--- a/app/views/volunteers/index.html.erb
+++ b/app/views/volunteers/index.html.erb
@@ -178,6 +178,7 @@
                 <th>
                   <input id="checkbox-toggle-all" type="checkbox" class="form-check-input" data-select-all-target="checkboxAll" data-action="select-all#toggleAll">
                 </th>
+                <th></th>
                 <th>Name</th>
                 <th>Email</th>
                 <th>Supervisor</th>
@@ -247,3 +248,28 @@
 
 </div>
 </div>
+
+<div style='display:none'>
+  <% current_organization.volunteers.each do |volunteer| %>
+    <div id="volunteer-details-<%= volunteer.id %>">
+      <% if volunteer.casa_cases.any? %>
+        <table>
+          <tr>
+            <th> Case Number </th>
+            <th> Transition Aged Youth </th>
+            <th> Last Attempted Contact </th>
+            <th> Contacts Made in Past 60 Days </th>
+          </tr>
+          <% volunteer.casa_cases.each do |casa_case| %>
+            <tr>
+              <td> <%= casa_case.case_number %> </td>
+              <td> <%= casa_case.decorate.transition_aged_youth %> </td>
+              <td> <%= casa_case.decorate.last_attempted_contact_formatted(volunteer.id) %></td>
+              <td> <%= casa_case.decorate.case_contacts_made %>
+            </tr>
+          <% end %>
+        </table>
+      <% end %>
+    </div>
+  <% end %> 
+</div>

From c7a645afde20d4cd54c862ccb8d2f59bce73d797 Mon Sep 17 00:00:00 2001
From: svileshina <svileshina@gmail.com>
Date: Sun, 14 Sep 2025 10:09:32 -0400
Subject: [PATCH 2/2] merge button pr in here

---
 app/assets/stylesheets/pages/volunteers.scss | 8 ++++++++
 app/javascript/src/dashboard.js              | 9 +++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/pages/volunteers.scss b/app/assets/stylesheets/pages/volunteers.scss
index 4f5c8dd8c4..bc07b92f86 100644
--- a/app/assets/stylesheets/pages/volunteers.scss
+++ b/app/assets/stylesheets/pages/volunteers.scss
@@ -33,3 +33,11 @@ table#volunteers.dataTable.hover > tbody > tr.selected:hover > * {
   border: 1px solid #757575;
 }
 
+table#volunteers.dataTable {
+  .emancipation-btn {
+    padding: 5px 10px;
+    font-size: 10px;
+    line-height: 16px;
+    vertical-align: middle;
+  }
+}
diff --git a/app/javascript/src/dashboard.js b/app/javascript/src/dashboard.js
index 1feb9af6fa..b815e3b99e 100644
--- a/app/javascript/src/dashboard.js
+++ b/app/javascript/src/dashboard.js
@@ -212,9 +212,14 @@ $(() => { // JQuery's callback for the DOM loading
             `
           })
           const caseNumbers = `
-            <span class="mobile-label">Case Number(s)</span>
-            ${links.join(', ')}
+            <span class="mobile-label">Case Total</span>
+            ${links.length}
           `
+
+          // const caseNumbers = `
+          //   <span class="mobile-label">Case Number(s)</span>
+          //   ${links.join(', ')}
+          // `
           return caseNumbers
         },
         orderable: false