Refactor/optimize page loading

src/back-end/lib/db/opportunity/code-with-us.ts

@@ -309,27 +309,26 @@ export function generateCWUOpportunityQuery(
     "cwuOpportunities as opp"
   )
     // Join on latest CWU status
-    .join<RawCWUOpportunity>("cwuOpportunityStatuses as stat", function () {
-      this.on("opp.id", "=", "stat.opportunity").andOn(
-        "stat.createdAt",
-        "=",
-        connection.raw(
-          '(select max("createdAt") from "cwuOpportunityStatuses" as stat2 where \
-            stat2.opportunity = opp.id and stat2.status is not null)'
-        )
-      );
-    })
+    .join(
+      connection.raw(
+        `(SELECT DISTINCT ON (opportunity) * FROM "cwuOpportunityStatuses"
+         WHERE status IS NOT NULL
+         ORDER BY opportunity, "createdAt" DESC) as stat`,
+        []
+      ),
+      "opp.id",
+      "stat.opportunity"
+    )
     // Join on latest CWU version
-    .join<RawCWUOpportunity>("cwuOpportunityVersions as version", function () {
-      this.on("opp.id", "=", "version.opportunity").andOn(
-        "version.createdAt",
-        "=",
-        connection.raw(
-          '(select max("createdAt") from "cwuOpportunityVersions" as version2 where \
-            version2.opportunity = opp.id)'
-        )
-      );
-    })
+    .join(
+      connection.raw(
+        `(SELECT DISTINCT ON (opportunity) * FROM "cwuOpportunityVersions"
+         ORDER BY opportunity, "createdAt" DESC) as version`,
+        []
+      ),
+      "opp.id",
+      "version.opportunity"
+    )
     .select<RawCWUOpportunity[]>(
       "opp.id",
       "opp.createdAt",

src/back-end/lib/db/opportunity/sprint-with-us.ts

@@ -462,27 +462,26 @@ export function generateSWUOpportunityQuery(
     "swuOpportunities as opportunities"
   )
     // Join on latest SWU status
-    .join("swuOpportunityStatuses as statuses", function () {
-      this.on("opportunities.id", "=", "statuses.opportunity").andOn(
-        "statuses.createdAt",
-        "=",
-        connection.raw(
-          '(select max("createdAt") from "swuOpportunityStatuses" as statuses2 where \
-            statuses2.opportunity = opportunities.id and statuses2.status is not null)'
-        )
-      );
-    })
+    .join(
+      connection.raw(
+        `(SELECT DISTINCT ON (opportunity) * FROM "swuOpportunityStatuses"
+         WHERE status IS NOT NULL
+         ORDER BY opportunity, "createdAt" DESC) as statuses`,
+        []
+      ),
+      "opportunities.id",
+      "statuses.opportunity"
+    )
     // Join on latest SWU version
-    .join("swuOpportunityVersions as versions", function () {
-      this.on("opportunities.id", "=", "versions.opportunity").andOn(
-        "versions.createdAt",
-        "=",
-        connection.raw(
-          '(select max("createdAt") from "swuOpportunityVersions" as versions2 where \
-            versions2.opportunity = opportunities.id)'
-        )
-      );
-    })
+    .join(
+      connection.raw(
+        `(SELECT DISTINCT ON (opportunity) * FROM "swuOpportunityVersions"
+         ORDER BY opportunity, "createdAt" DESC) as versions`,
+        []
+      ),
+      "opportunities.id",
+      "versions.opportunity"
+    )
     .select<RawSWUOpportunitySlim[]>(
       "opportunities.id",
       "opportunities.createdAt",

src/back-end/lib/db/opportunity/team-with-us.ts

@@ -514,27 +514,26 @@ export function generateTWUOpportunityQuery(
     "twuOpportunities as opportunities"
   )
     // Join on latest TWU status
-    .join("twuOpportunityStatuses as statuses", function () {
-      this.on("opportunities.id", "=", "statuses.opportunity").andOn(
-        "statuses.createdAt",
-        "=",
-        connection.raw(
-          '(select max("createdAt") from "twuOpportunityStatuses" as statuses2 where \
-            statuses2.opportunity = opportunities.id and statuses2.status is not null)'
-        )
-      );
-    })
+    .join(
+      connection.raw(
+        `(SELECT DISTINCT ON (opportunity) * FROM "twuOpportunityStatuses"
+         WHERE status IS NOT NULL
+         ORDER BY opportunity, "createdAt" DESC) as statuses`,
+        []
+      ),
+      "opportunities.id",
+      "statuses.opportunity"
+    )
     // Join on latest TWU version
-    .join("twuOpportunityVersions as versions", function () {
-      this.on("opportunities.id", "=", "versions.opportunity").andOn(
-        "versions.createdAt",
-        "=",
-        connection.raw(
-          '(select max("createdAt") from "twuOpportunityVersions" as versions2 where \
-            versions2.opportunity = opportunities.id)'
-        )
-      );
-    })
+    .join(
+      connection.raw(
+        `(SELECT DISTINCT ON (opportunity) * FROM "twuOpportunityVersions"
+         ORDER BY opportunity, "createdAt" DESC) as versions`,
+        []
+      ),
+      "opportunities.id",
+      "versions.opportunity"
+    )
     .select<RawTWUOpportunitySlim[]>(
       "opportunities.id",
       "opportunities.createdAt",

src/front-end/sass/components/_virtualized-table.scss

@@ -0,0 +1,89 @@
+/* Scrollable container for the table body */
+.virtualized-body-container {
+  position: relative; /* Needed for absolute positioning inside and sticky context */
+  border: 1px solid #dee2e6;
+  border-radius: 4px; /* Full radius since no separate header */
+}
+
+/* Body table specific styles */
+.virtualized-body-table {
+  margin-bottom: 0;
+  width: 100%;
+  table-layout: fixed;
+  background-color: white;
+
+  /* Sticky header */
+  thead {
+    position: sticky;
+    top: 0; /* Sticks to top of scrollable container */
+    z-index: 10; /* Layers above body rows */
+    background-color: #f8f9fa; /* Header background */
+
+    th {
+      background: inherit; /* Inherit from thead or set explicitly */
+      border-bottom: 2px solid #dee2e6;
+      vertical-align: middle;
+      padding: 0.75rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: left;
+    }
+  }
+
+  /* Virtualized tbody styles */
+  .virtualized-tbody {
+    display: block;
+    height: 550px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+
+    /* Virtual spacer row */
+    .virtual-spacer {
+      display: block;
+      height: 0;
+    }
+
+    /* Container td for virtualized content */
+    .virtualized-container-td {
+      padding: 0;
+    }
+
+    /* Container for all virtualized rows */
+    .virtualized-rows-container {
+      display: table;
+      width: 100%;
+      table-layout: fixed;
+      position: absolute;
+      left: 0;
+    }
+
+    /* Individual virtualized row */
+    .virtualized-row {
+      display: table-row;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.075);
+      }
+    }
+
+    /* Individual virtualized cell */
+    .virtualized-cell {
+      display: table-cell;
+      vertical-align: middle;
+      padding: 0.75rem;
+      border-top: 1px solid #dee2e6;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      box-sizing: border-box;
+    }
+  }
+}
+
+.virtualized-table-layout {
+  table {
+    display: block;
+  }
+}

src/front-end/sass/index.scss

@@ -1,6 +1,7 @@
 // Imports
 
 @import "./font";
+@import "./components/virtualized-table";
 
 // Custom Bootstrap variable overrides.