1612 case aggregates frontend

tdrs-backend/tdpservice/parsers/test/test_parse.py

@@ -43,7 +43,6 @@ def test_parse_small_correct_file(test_datafile, dfs):
                                     ]}
 
     assert dfs.get_status() == DataFileSummary.Status.ACCEPTED
-
     assert TANF_T1.objects.count() == 1
 
     # spot check

tdrs-backend/tdpservice/parsers/util.py

@@ -276,7 +276,6 @@ def transform_to_months(quarter):
         case _:
             raise ValueError("Invalid quarter value.")
 
-
 def month_to_int(month):
     """Return the integer value of a month."""
     return datetime.strptime(month, '%b').strftime('%m')

tdrs-frontend/src/assets/Reports.scss

@@ -35,6 +35,7 @@
   border: none;
   text-decoration: underline;
   color: #264A64;
+  text-align: left;
 }
 
 .section-download:hover {

tdrs-frontend/src/components/SubmissionHistory/SubmissionHistory.jsx

@@ -51,6 +51,63 @@ const SubmissionSummaryStatusIcon = ({ status }) => {
   )
 }
 
+const CaseAggregatesHeader = ({ section }) =>
+  section === 1 || section === 2 ? (
+    <>
+      <th scope="col" rowSpan={2}>
+        Month
+      </th>
+      <th scope="col" rowSpan={2}>
+        Cases Without Errors
+      </th>
+      <th scope="col" rowSpan={2}>
+        Cases With Errors
+      </th>
+      <th scope="col" rowSpan={2}>
+        Records Unable To Process
+      </th>
+    </>
+  ) : (
+    <>
+      <th scope="col" rowSpan={2}>
+        Month
+      </th>
+      <th scope="col" rowSpan={2}>
+        Total
+      </th>
+      <th scope="col" rowSpan={2}>
+        Cases With Errors
+      </th>
+    </>
+  )
+
+const CaseAggregatesRow = ({ data, section }) =>
+  section === 1 || section === 2 ? (
+    data ? (
+      <>
+        <th scope="row">{data.month}</th>
+        <td>{data.accepted_without_errors}</td>
+        <td>{data.accepted_with_errors}</td>
+      </>
+    ) : (
+      <>
+        <th scope="row">-</th>
+        <td>N/A</td>
+        <td>N/A</td>
+      </>
+    )
+  ) : data ? (
+    <>
+      <th scope="row">{data.month}</th>
+      <td>{data.total}</td>
+    </>
+  ) : (
+    <>
+      <th scope="row">-</th>
+      <td>N/A</td>
+    </>
+  )
+
 const SubmissionHistoryRow = ({ file }) => {
   const dispatch = useDispatch()
 
@@ -72,35 +129,96 @@ const SubmissionHistoryRow = ({ file }) => {
     }
   }
 
+  const section_index = (element) => file.section.includes(element)
+
+  const section = fileUploadSections.findIndex(section_index) + 1
+
   return (
-    <tr>
-      <td>{formatDate(file.createdAt)}</td>
-      <td>{file.submittedBy}</td>
-      <td>
-        <button className="section-download" onClick={downloadFile}>
-          {file.fileName}
-        </button>
-      </td>
-      <td>
-        {file.summary ? (
-          <>
-            <SubmissionSummaryStatusIcon status={file.summary.status} />
-            {file.summary && file.summary.status
-              ? file.summary.status
-              : 'Pending'}
-          </>
-        ) : (
-          'N/A'
-        )}
-      </td>
-      <td>
-        {file.hasError > 0 ? (
-          <button className="section-download" onClick={returned_errors}>
-            {file.year}-{file.quarter}-{file.section}.xlsx
+    <>
+      <tr>
+        <th scope="rowgroup" rowSpan={3}>
+          {formatDate(file.createdAt)}
+        </th>
+        <th scope="rowgroup" rowSpan={3}>
+          {file.submittedBy}
+        </th>
+        <th scope="rowgroup" rowSpan={3}>
+          <button className="section-download" onClick={downloadFile}>
+            {file.fileName}
           </button>
-        ) : null}
-      </td>
-    </tr>
+        </th>
+        <CaseAggregatesRow
+          data={
+            file.summary &&
+            file.summary.case_aggregates &&
+            file.summary.case_aggregates.months
+              ? file.summary.case_aggregates.months[0]
+              : null
+          }
+          section={section}
+        />
+
+        <th scope="rowgroup" rowSpan={3}>
+          {file.summary &&
+          file.summary.case_aggregates &&
+          file.summary.case_aggregates.months
+            ? file.summary.case_aggregates.rejected
+            : 'N/A'}
+        </th>
+
+        <th scope="rowgroup" rowSpan={3}>
+          <span>
+            <SubmissionSummaryStatusIcon
+              status={file.summary ? file.summary.status : 'Pending'}
+            />
+          </span>
+          {file.summary && file.summary.status
+            ? file.summary.status
+            : 'Pending'}
+        </th>
+
+        <th scope="rowgroup" rowSpan={3}>
+          {file.summary &&
+          file.summary.status &&
+          file.summary.status !== 'Pending' ? (
+            file.hasError > 0 ? (
+              <button className="section-download" onClick={returned_errors}>
+                {file.year}-{file.quarter}-{file.section}.xlsx
+              </button>
+            ) : (
+              'No Errors'
+            )
+          ) : (
+            'Pending'
+          )}
+        </th>
+      </tr>
+
+      <tr>
+        <CaseAggregatesRow
+          data={
+            file.summary &&
+            file.summary.case_aggregates &&
+            file.summary.case_aggregates.months
+              ? file.summary.case_aggregates.months[1]
+              : null
+          }
+          section={section}
+        />
+      </tr>
+      <tr>
+        <CaseAggregatesRow
+          data={
+            file.summary &&
+            file.summary.case_aggregates &&
+            file.summary.case_aggregates.months
+              ? file.summary.case_aggregates.months[2]
+              : null
+          }
+          section={section}
+        />
+      </tr>
+    </>
   )
 }
 
@@ -118,18 +236,33 @@ const SectionSubmissionHistory = ({ section, label, files }) => {
   const pageEnd = Math.min(files.length, pageStart + pageSize)
 
   return (
-    <div className="submission-history-section">
+    <div
+      className="submission-history-section usa-table-container--scrollable"
+      style={{ maxWidth: '100%' }}
+      tabIndex={0}
+    >
       <table className="usa-table usa-table--striped">
         <caption>{`Section ${section} - ${label}`}</caption>
         {files && files.length > 0 ? (
           <>
             <thead>
               <tr>
-                <th>Submitted On</th>
-                <th>Submitted By</th>
-                <th>File Name</th>
-                <th>Acceptance Status</th>
-                <th>Error Reports (In development)</th>
+                <th scope="col" rowSpan={2}>
+                  Submitted On
+                </th>
+                <th scope="col" rowSpan={2}>
+                  Submitted By
+                </th>
+                <th scope="col" rowSpan={2}>
+                  File Name
+                </th>
+                <CaseAggregatesHeader section={section} />
+                <th scope="col" rowSpan={2}>
+                  Status
+                </th>
+                <th scope="col" rowSpan={2}>
+                  Error Reports (In development)
+                </th>
               </tr>
             </thead>
             <tbody>

tdrs-frontend/src/components/SubmissionHistory/SubmissionHistory.test.js

@@ -339,13 +339,25 @@ describe('SubmissionHistory', () => {
   })
 
   it.each([
-    'Pending',
-    'Accepted',
-    'Accepted with Errors',
-    'Partially Accepted with Errors',
-    'Rejected',
-    null,
-  ])('Shows the submission acceptance status', (status) => {
+    ['Pending', 'Active Case Data'],
+    ['Pending', 'Closed Case Data'],
+    ['Pending', 'Aggregate Data'],
+    ['Accepted', 'Active Case Data'],
+    ['Accepted', 'Closed Case Data'],
+    ['Accepted', 'Aggregate Data'],
+    ['Accepted with Errors', 'Active Case Data'],
+    ['Accepted with Errors', 'Closed Case Data'],
+    ['Accepted with Errors', 'Aggregate Data'],
+    ['Partially Accepted with Errors', 'Active Case Data'],
+    ['Partially Accepted with Errors', 'Closed Case Data'],
+    ['Partially Accepted with Errors', 'Aggregate Data'],
+    ['Rejected', 'Active Case Data'],
+    ['Rejected', 'Closed Case Data'],
+    ['Rejected', 'Aggregate Data'],
+    [null, 'Active Case Data'],
+    [null, 'Closed Case Data'],
+    [null, 'Aggregate Data'],
+  ])('Shows the submission acceptance status section 3', (status, section) => {
     const state = {
       reports: {
         files: [
@@ -354,7 +366,7 @@ describe('SubmissionHistory', () => {
             fileName: 'test1.txt',
             fileType: 'TANF',
             quarter: 'Q1',
-            section: 'Active Case Data',
+            section: section,
             uuid: '123-4-4-321',
             year: '2023',
             s3_version_id: '321-0-0-123',
@@ -392,8 +404,13 @@ describe('SubmissionHistory', () => {
 
     setup(store)
 
-    expect(screen.queryByText('Acceptance Status')).toBeInTheDocument()
+    expect(screen.queryByText('Status')).toBeInTheDocument()
     expect(screen.queryByText('test1.txt')).toBeInTheDocument()
-    expect(screen.queryByText(status || 'Pending')).toBeInTheDocument()
+
+    if (status && status !== 'Pending') {
+      expect(screen.queryByText(status)).toBeInTheDocument()
+    } else {
+      expect(screen.queryAllByText('Pending')).toHaveLength(2)
+    }
   })
 })