[GLT-4261] TAT trend report table metrics

changes/add_GLT-4261

@@ -0,0 +1 @@
+TAT trend report table metrics

src/main/resources/templates/tat-trend.html

@@ -36,6 +36,8 @@ <h1 class="text-green-200 font-sarabun font-light text-32">TAT Trend Report</h1>
             <option value="DataRelease">Data Release (DR)</option>
             <option value="All">All</option>
           </select>
+          <button id="metricsButton"
+            class="noprint bg-green-200 rounded-md hover:ring-2 ring-offset-1 ring-green-200 text-white font-inter font-medium text-12 px-2 py-1">Metrics</button>
         </div>
       </div>
       <div id="gatesCheckboxes" class="flex gap-2 mt-2 font-inter font-medium text-12 items-center">
@@ -55,6 +57,12 @@ <h1 class="text-green-200 font-sarabun font-light text-32">TAT Trend Report</h1>
       </div>
 
       <div id="plotContainer"></div>
+      <div class="flex justify-end mt-4">
+        <button id="metricsDownload"
+          class="noprint bg-green-200 rounded-md hover:ring-2 ring-offset-1 ring-green-200 text-white font-inter font-medium text-12 px-2 py-1">Download
+          Metrics</button>
+      </div>
+      <div id="metricContainer"></div>
     </div>
     <script src="/js/tatTrend.js"></script>
   </div>

ts/component/table-builder.ts

@@ -82,6 +82,7 @@ export interface TableDefinition<ParentType, ChildType> {
   // when a parent object has no children, noChildrenWarning is displayed with warning highlight.
   // if noChildrenWarning is not provided, 'N/A' is displayed instead
   noChildrenWarning?: string;
+  parentHeaders?: Array<{ title: string; colspan: number }>;
 }
 
 class AcceptedFilter {
@@ -690,20 +691,43 @@ export class TableBuilder<ParentType, ChildType> {
   private addTableHead(table: HTMLTableElement) {
     this.thead = table.createTHead();
     this.thead.className = "relative";
-    const row = this.thead.insertRow();
-    if (this.definition.bulkActions) {
-      this.addSelectAllHeader(row);
+    if (this.definition.parentHeaders) {
+      // create the first row with parent headers
+      const parentRow = this.thead.insertRow();
+      this.definition.parentHeaders.forEach((parentHeader) => {
+        const th = document.createElement("th");
+        th.textContent = parentHeader.title;
+        th.colSpan = parentHeader.colspan; // set the colspan to cover subcolumns
+        th.className =
+          "p-4 font-semibold bg-grey-300 text-center text-white border-l-1 border-grey-200";
+        parentRow.appendChild(th);
+      });
+      // create the second row for child headers
+      const childRow = this.thead.insertRow();
+      this.columns.forEach((column, i) => {
+        const th = document.createElement("th");
+        th.textContent = column.title; // populate it dynamically based on the provided columns
+        th.className =
+          "p-4 font-semibold bg-grey-200 text-left border-l-1 border-grey-200";
+        childRow.appendChild(th);
+      });
     } else {
-      this.selectAllCheckbox = undefined;
+      // only one row of headers (normal case)
+      const row = this.thead.insertRow();
+      if (this.definition.bulkActions) {
+        this.addSelectAllHeader(row);
+      } else {
+        this.selectAllCheckbox = undefined;
+      }
+      this.columns.forEach((column, i) => {
+        addColumnHeader(
+          row,
+          column.title,
+          i == 0 && !this.definition.bulkActions,
+          column.headingClass
+        );
+      });
     }
-    this.columns.forEach((column, i) => {
-      addColumnHeader(
-        row,
-        column.title,
-        i == 0 && !this.definition.bulkActions,
-        column.headingClass
-      );
-    });
   }
 
   private addSelectAllHeader(thead: HTMLTableRowElement) {