From 95421c6d1e45bfa1b8534c6b7ed29f6587b29bdc Mon Sep 17 00:00:00 2001
From: Beverly Nguyen <Beverly.Nguyen@gsa.gov>
Date: Tue, 5 Aug 2025 22:46:49 -0700
Subject: [PATCH] cleaning up css and add better visual for pagination

---
 .../uswds/_uswds-theme-custom-styles.scss     | 40 ++-----------------
 app/main/views/activity.py                    |  1 +
 .../views/activity/all-activity.html          | 21 ++++++----
 .../views/dashboard/activity-table.html       |  4 +-
 4 files changed, 19 insertions(+), 47 deletions(-)

diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
index 029aaa22f..094f9d138 100644
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -490,46 +490,12 @@ td.table-empty-message {
 }
 
 .job-table {
-  width: 100%;
-  border-collapse: collapse;
-  td.file-name {
-    width: 25%;
-    overflow-wrap: anywhere;
-  }
-  td.jobid {
-    width: 5%;
-  }
-  td.template {
-    width: 25%;
-  }
-  td.time-sent {
-    width: 15%;
-  }
-  td.sender {
-    width: 20%;
-    overflow-wrap: break-word;
-  }
-  td.count-of-recipients {
-    width: 5%;
-  }
-  td.report {
-    width: 2%;
-    text-align: center;
-  }
-  td.delivered {
-    width: 2%;
-    text-align: center;
-  }
-  td.failed {
-    width: 2%;
-    text-align: center;
-  }
-  td.report img {
-    padding-top: 5px;
-  }
   th {
     padding: 0.5rem 1rem;
   }
+  td {
+    padding: 0.5rem 1rem;
+  }
 }
 
 @media (max-width: 768px) {
diff --git a/app/main/views/activity.py b/app/main/views/activity.py
index 1d6d12d98..6481a4832 100644
--- a/app/main/views/activity.py
+++ b/app/main/views/activity.py
@@ -56,6 +56,7 @@ def all_jobs_activity(service_id):
         next_page=next_page,
         prev_page=prev_page,
         pagination=pagination,
+        total_jobs=jobs.get("total", 0),
         **download_availability,
         download_link_one_day=url_for(
             ".download_notifications_csv",
diff --git a/app/templates/views/activity/all-activity.html b/app/templates/views/activity/all-activity.html
index 94209a38c..fde69dba3 100644
--- a/app/templates/views/activity/all-activity.html
+++ b/app/templates/views/activity/all-activity.html
@@ -51,6 +51,11 @@
       {% endif %}
     </ul>
   </nav>
+  {% if pagination and total_jobs %}
+  <p class="text-center font-body-sm ">
+    Page {{ pagination.current }} of {{ pagination.last }} ({{ total_jobs }} total jobs)
+  </p>
+  {% endif %}
   {% endif %}
 {% endset %}
 {% block maincolumn_content %}
@@ -90,28 +95,28 @@
           {% if all_jobs_dict %}
             {% for job in all_jobs_dict %}
               <tr class="table-row">
-                <td class="table-field jobid" role="rowheader">
+                <td class="table-field jobid width-10" role="rowheader">
                   <a class="usa-link" href="{{ job.view_job_link }}">
                     {{ job.job_id[:8] if job.job_id else 'Manually entered number' }}
                   </a>
                 </td>
-                <td class="table-field template">{{ job.template_name }}</td>
-                <td data-sort-value="{{ job.activity_time | convert_time_unixtimestamp }}" class="table-field time-sent">
+                <td class="table-field template width-35 text-wrap">{{ job.template_name }}</td>
+                <td data-sort-value="{{ job.activity_time | convert_time_unixtimestamp }}" class="table-field time-sent width-15">
                   {{ job.activity_time|format_datetime_table }}
                 </td>
-                <td class="table-field sender">{{ job.created_by.name }}</td>
-                <td class="table-field report">
+                <td class="table-field sender width-20 text-wrap">{{ job.created_by.name }}</td>
+                <td class="text-center table-field report width-5">
                   {% if job.can_download %}
                     <a href="{{ job.download_link }}">
-                      <img src="{{ url_for('static', filename='img/material-icons/file_download.svg') }}" alt="">
+                      <img src="{{ url_for('static', filename='img/material-icons/file_download.svg') }}" alt="" class="padding-top-05">
                       <span class="usa-sr-only">Download report link</span>
                     </a>
                   {% else %}
                     <span>N/A</span>
                   {% endif %}
                 </td>
-                <td class="table-field delivered">{{ job.delivered_count if job.delivered_count is not none else '0' }}</td>
-                <td class="table-field failed">{{ job.failed_count if job.failed_count is not none else '0' }}</td>
+                <td class="text-center table-field delivered width-7">{{ job.delivered_count if job.delivered_count is not none else '0' }}</td>
+                <td class="text-center table-field failed width-8">{{ job.failed_count if job.failed_count is not none else '0' }}</td>
               </tr>
             {% endfor %}
           {% else %}
diff --git a/app/templates/views/dashboard/activity-table.html b/app/templates/views/dashboard/activity-table.html
index 1dbb2bc7d..249c4f376 100644
--- a/app/templates/views/dashboard/activity-table.html
+++ b/app/templates/views/dashboard/activity-table.html
@@ -22,14 +22,14 @@
     <div id="tableActivity" class="table-overflow-x-auto">
         <h2 id="table-heading" class="margin-top-4 margin-bottom-1">Service activity</h2>
 
-        <table class="usa-table job-table" id="activity-table">
+        <table class="usa-table usa-table--compact job-table" id="activity-table">
             <caption class="usa-sr-only">Table showing the sent jobs for {{current_service.name}}</caption>
 
             <thead class="table-field-headings">
                 <tr>
                     <th scope="col" class="table-field-heading-first" id="jobId">Job ID#</th>
                     <th data-sortable scope="col" class="table-field-heading" scope="col">Template</th>
-                    <th data-sortable scope="col" class="table-field-heading">Job status</th>
+                    <th data-sortable scope="col" class="table-field-heading width-30">Job status</th>
                     <th data-sortable scope="col" role="columnheader" class="table-field-heading sender-column">Sender
                     </th>
                     <th data-sortable scope="col" class="table-field-heading"># of Recipients</th>