Merge branch 'main' of https://github.com/GSA/notifications-admin into 1484-dashboard-visualizations

# Conflicts:
#	app/assets/sass/uswds/_uswds-theme-custom-styles.scss
#	app/templates/views/dashboard/dashboard.html
#	gulpfile.js
#	tests/app/main/views/test_dashboard.py

app/assets/javascripts/activityChart.js

@@ -190,12 +190,11 @@
         var socketConnect = type === 'service' ? 'daily_stats_update' : 'daily_stats_by_user_update';
 
         socket.on('connect', function () {
-            const userId = ctx.getAttribute('data-service-id'); // Assuming user ID is the same as service ID
+            //const userId = ctx.getAttribute('data-service-id'); // Assuming user ID is the same as service ID
             socket.emit(eventType);
         });
 
         socket.on(socketConnect, function(data) {
-            console.log('Received data:', data);  // Log the received data
 
             var labels = [];
             var deliveredData = [];

app/assets/javascripts/dataVisualization.js

@@ -1,71 +0,0 @@
-// (function (window) {
-
-//     // Dummy data (replace with API data)
-//     const data = {
-//         messageStats: {
-//             totalMessages: 1000,
-//             delivered: 520,
-//             pending: 280,
-//             failed: 100
-//         },
-//         dailyUsage: {
-//             dailyUsage: 20,
-//             dailyUsageLimit: 100
-//         },
-//         yearlyUsage: {
-//             yearlyUsage: 2000,
-//             yearlyUsageLimit: 250000
-//         }
-//     };
-
-//      // Update total messages progress bar percentages
-//     const messageStats = data.messageStats;
-
-//     const messageBars = ["delivered", "pending", "failed"];
-//         for (const bar of messageBars) {
-//         const percentage = messageStats[bar] / messageStats.totalMessages * 100;
-//         const elementId = `${bar}-bar`;
-//         const element = document.getElementById(elementId);
-//         element.style.width = `${parseFloat(percentage)}%`;
-//     }
-
-//     // Update total messages progress bar percentages
-//     const dailyUsage = data.dailyUsage;
-//     // const dailyUsageLimit = dailyUsage.dailyUsageLimit;
-//     const yearlyUsage = data.yearlyUsage;
-//     // const yearlyUsageLimit = yearlyUsage.yearlyUsageLimit;
-
-//     function updateUsageBar(elementId, dailyUsage, dailyUsageLimit, yearlyUsage, yearlyUsageLimit) {
-//         // Ensure element exists
-//         if (!elementId || !document.getElementById(elementId)) {
-//             console.error(`Element with ID "${elementId}" not found`);
-//             return;
-//         }
-
-//         // Calculate percentage
-//         const percentage = dailyUsage / dailyUsageLimit * 100;
-
-//         // Update bar width
-//         const element = document.getElementById(elementId);
-//         element.style.width = `${parseFloat(percentage)}%`;
-//     }
-
-//     // Update usage bars
-//     // updateUsageBar("dailyUsage-bar", dailyUsage.dailyUsage, dailyUsageLimit);
-//     // updateUsageBar("dailyUsageRemaining-bar", dailyUsageLimit - dailyUsage.dailyUsage, dailyUsageLimit);
-//     // updateUsageBar("yearlyUsage-bar", yearlyUsage.yearlyUsage, yearlyUsageLimit);
-//     // updateUsageBar("yearlyUsageRemaining-bar", yearlyUsageLimit - yearlyUsage.yearlyUsage, yearlyUsageLimit);
-
-//     // Update total messages legend values
-//     document.getElementById("total-value").innerText = `Total: ${messageStats.totalMessages} messages`;
-//     document.getElementById("delivered-value").innerText = `Delivered: ${messageStats.delivered}`;
-//     document.getElementById("pending-value").innerText = `Pending: ${messageStats.pending}`;
-//     document.getElementById("failed-value").innerText = `Failed: ${messageStats.failed}`;
-
-//     // Update usage legend values
-//     // document.getElementById("daily-usage-value").innerText = `Daily usage: ${dailyUsage.dailyUsage}`;
-//     // document.getElementById("daily-remaining-value").innerText = `Remaining messages: ${dailyUsage.dailyUsageLimit - dailyUsage.dailyUsage}`;
-//     // document.getElementById("yearly-usage-value").innerText = `Yearly usage: ${yearlyUsage.yearlyUsage}`;
-//     // document.getElementById("yearly-remaining-value").innerText = `Remaining messages: ${yearlyUsage.yearlyUsageLimit - yearlyUsage.yearlyUsage}`;
-
-// })(window);

app/assets/sass/uswds/_legacy-styles.scss

@@ -344,11 +344,3 @@ h2.recipient-list {
     }
   }
 }
-
-// .js-focus-style {
-//   outline: 3px solid color("blue-40v");
-//   box-shadow: 0 0 0 7px color("blue-40v");
-//   *:focus {
-//     outline: none;
-//   }
-// }

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -332,6 +332,16 @@ td.table-empty-message {
    bottom: 0;
 }
 
+@media (max-width: units('desktop-lg')) {
+   .table-overflow-x-auto {
+      overflow-x: auto;
+      table {
+         min-width: 768px;
+      }
+   }
+}
+
+
 // Dashboard
 
 .dashboard {
@@ -381,9 +391,6 @@ td.table-empty-message {
          background-image: url(../img/material-icons/description.svg);
       }
    }
-   .table-wrapper {
-      overflow-x: auto;
-   }
 }
 
 .dashboard-table {