Added Respondent Dashboard

web-client/pa11y-ci.config.json

@@ -23,6 +23,15 @@
     "http://localhost:1234/log-in?token=intakeclerk&path=/",
     "http://localhost:1234/log-in?token=intakeclerk&path=/case-detail/101-18",
     "http://localhost:1234/log-in?token=respondent&path=/",
-    "http://localhost:1234/log-in?token=respondent&path=/case-detail/101-18"
+    "http://localhost:1234/log-in?token=respondent&path=/case-detail/101-18",
+    {
+      "url": "http://localhost:1234/log-in?token=respondent&path=/case-detail/101-18",
+      "actions": [
+        "wait for #button-file-document to be visible",
+        "click element #button-file-document",
+        "wait for #file-a-document to be visible"
+      ],
+      "timeout": 5000
+    }
   ]
 }

web-client/src/presenter/computeds/formattedCaseDetail.js

@@ -12,13 +12,15 @@ const formatCase = (caseDetail, form) => {
 
   if (result.documents) result.documents.map(formatDocument);
 
+  result.createdAtFormatted = moment(result.createdAt).format('L');
   result.irsDateFormatted = moment(result.irsDate).format('L LT');
   result.payGovDateFormatted = moment(result.payGovDate).format('L');
 
   result.showDocumentStatus = !result.irsSendDate;
   result.showIrsServedDate = !!result.irsSendDate;
   result.showPayGovIdInput = form.paymentType == 'payGov';
   result.showPaymentOptions = !(caseDetail.payGovId && !form.paymentType);
+  result.showActionRequired = !caseDetail.payGovId;
   result.showPaymentRecord = result.payGovId && !form.paymentType;
   result.datePetitionSentToIrsMessage = `Respondent served ${
     result.irsDateFormatted

web-client/src/presenter/sequences/gotoDashboardSequence.js

@@ -31,7 +31,15 @@ const goToDashboard = [
       setCurrentPage('DashboardPetitionsClerk'),
     ],
     intakeclerk: [clearAlerts, setCurrentPage('DashboardIntakeClerk')],
-    respondent: [clearAlerts, setCurrentPage('DashboardRespondent')],
+    respondent: [
+      clearAlerts,
+      getCasesByUser,
+      {
+        error: [setAlertError],
+        success: [setCases],
+      },
+      setCurrentPage('DashboardRespondent'),
+    ],
   },
 ];
 

web-client/src/styles/custom.scss

@@ -25,6 +25,10 @@
   color: $color-blue;
 }
 
+.action-flag {
+  color: $color-red;
+}
+
 .label {
   margin-bottom: 0;
 }

web-client/src/styles/overrides.scss

@@ -2,6 +2,10 @@ input[type='file'] {
   height: auto;
 }
 
+.usa-header .usa-nav-secondary .usa-search {
+  margin-top: -0.6rem;
+}
+
 input[type='text'] {
   margin: 0 0 2rem;
 }

web-client/src/views/CaseDetailPetitioner.jsx

@@ -90,7 +90,7 @@ export default connect(
                       <span>
                         <FontAwesomeIcon
                           icon="flag"
-                          color="#CD2026"
+                          className="action-flag"
                           size="sm"
                         />{' '}
                         Pay $60.00 filing fee.

web-client/src/views/CaseDetailRespondent.jsx

@@ -76,6 +76,7 @@ export default connect(
           {currentTab == 'Docket Record' && (
             <div className="tab-content" role="tabpanel">
               <button
+                id="button-file-document"
                 onClick={() =>
                   updateCurrentTabSequence({ value: 'File Document' })
                 }

web-client/src/views/DashboardRespondent.jsx

@@ -1,17 +1,68 @@
 import { connect } from '@cerebral/react';
 import React from 'react';
+import { state } from 'cerebral';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import SuccessNotification from './SuccessNotification';
 import ErrorNotification from './ErrorNotification';
 
 export default connect(
-  {},
-  function Dashboard() {
+  { caseList: state.formattedCases },
+  function Dashboard({ caseList }) {
     return (
       <section className="usa-section usa-grid">
         <h1 tabIndex="-1">Respondent Dashboard</h1>
         <SuccessNotification />
         <ErrorNotification />
+        <h2>Cases</h2>
+        <table className="responsive-table" id="workQueue">
+          <thead>
+            <tr>
+              <th>Docket number</th>
+              <th>Petitioner name</th>
+              <th>Date filed</th>
+              <th>Notifications</th>
+            </tr>
+          </thead>
+          <tbody>
+            {!caseList.length && (
+              <tr>
+                <td colSpan="4">(none)</td>
+              </tr>
+            )}
+            {caseList.map(item => (
+              <tr key={item.docketNumber}>
+                <td className="responsive-title">
+                  <span className="responsive-label">Docket number</span>
+                  <a href={'/case-detail/' + item.docketNumber}>
+                    {item.docketNumber}
+                  </a>
+                </td>
+                <td>
+                  <span className="responsive-label">Petitioner name</span>
+                  {item.userId}
+                </td>
+                <td>
+                  <span className="responsive-label">Date filed</span>
+                  {item.createdAtFormatted}
+                </td>
+                <td>
+                  <span className="responsive-label">Notification</span>
+                  {item.showActionRequired && (
+                    <span>
+                      <FontAwesomeIcon
+                        icon="flag"
+                        className="action-flag"
+                        size="sm"
+                      />{' '}
+                      Action Required
+                    </span>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
       </section>
     );
   },

web-client/src/views/FileDocument.jsx

@@ -29,7 +29,7 @@ export default connect(
             submitDocumentSequence();
           }}
         >
-          <label htmlFor="options">Document type</label>
+          <label htmlFor="document-type">Document type</label>
           <select
             name="documentType"
             id="document-type"