Admins can view submission history

frontend-react/src/App.tsx

@@ -26,6 +26,7 @@ import GlobalContextProvider from "./components/GlobalContextProvider";
 import { logout } from "./utils/UserUtils";
 import TermsOfServiceForm from "./pages/tos-sign/TermsOfServiceForm";
 import Spinner from "./components/Spinner";
+import Submissions from "./pages/Submissions";
 
 const OKTA_AUTH = new OktaAuth(oktaAuthConfig);
 
@@ -128,6 +129,11 @@ const App = () => {
                                         authorize={PERMISSIONS.SENDER}
                                         component={Upload}
                                     />
+                                    <AuthorizedRoute
+                                        path="/submissions"
+                                        authorize={PERMISSIONS.PRIME_ADMIN}
+                                        component={Submissions}
+                                    />
                                     <SecureRoute
                                         path="/report-details"
                                         component={Details}

frontend-react/src/components/header/ReportStreamHeader.tsx

@@ -59,6 +59,22 @@ export const ReportStreamHeader = () => {
                 </NavLink>
             );
         }
+
+        if (permissionCheck(PERMISSIONS.PRIME_ADMIN, authState)) {
+            itemsMenu.splice(
+                1,
+                0,
+                <NavLink
+                    to="/submissions"
+                    key="submissions"
+                    data-attribute="hidden"
+                    hidden={true}
+                    className="usa-nav__link"
+                >
+                    <span>Submissions</span>
+                </NavLink>
+            );
+        }
     }
 
     return (

frontend-react/src/pages/Submissions.tsx

@@ -0,0 +1,103 @@
+import { useState, Suspense } from "react";
+import { Helmet } from "react-helmet";
+import { NetworkErrorBoundary } from "rest-hooks";
+import { useOktaAuth } from "@okta/okta-react";
+import moment from "moment";
+
+import { useOrgName } from "../utils/OrganizationUtils";
+import { GLOBAL_STORAGE_KEYS } from "../components/GlobalContextProvider";
+
+import { ErrorPage } from "./error/ErrorPage";
+
+const OrgName = () => {
+    const orgName: string = useOrgName();
+    return (
+        <span id="orgName" className="text-normal text-base">
+            {orgName}
+        </span>
+    );
+};
+
+function Submissions() {
+    const { authState } = useOktaAuth();
+    const organization = localStorage.getItem(GLOBAL_STORAGE_KEYS.GLOBAL_ORG);
+    const [submissions, setSubmissions] = useState([]);
+
+    fetch(
+        `${process.env.REACT_APP_BACKEND_URL}/api/history/${organization}/submissions`,
+        {
+            headers: {
+                Authorization: `Bearer ${authState?.accessToken?.accessToken}`,
+            },
+        }
+    )
+        .then((res) => res.json())
+        .then((submissionJson) => {
+            setSubmissions(JSON.parse(submissionJson));
+        });
+
+    return (
+        <NetworkErrorBoundary
+            fallbackComponent={() => <ErrorPage type="page" />}
+        >
+            <Helmet>
+                <title>Submissions | {process.env.REACT_APP_TITLE}</title>
+            </Helmet>
+            <section className="grid-container margin-top-5">
+                <h3 className="margin-bottom-0">
+                    <Suspense
+                        fallback={
+                            <span className="text-normal text-base">
+                                Loading Info...
+                            </span>
+                        }
+                    >
+                        <OrgName />
+                    </Suspense>
+                </h3>
+                <h1 className="margin-top-0 margin-bottom-0">COVID-19</h1>
+            </section>
+            <div className="grid-container usa-section margin-bottom-10">
+                <div className="grid-col-12">
+                    <h2>Submissions</h2>
+                    <table
+                        className="usa-table usa-table--borderless prime-table"
+                        aria-label="Submission history from the last 30 days"
+                    >
+                        <thead>
+                            <tr>
+                                <th scope="col">Date/time submitted</th>
+                                <th scope="col">File</th>
+                                <th scope="col">Records</th>
+                                <th scope="col">Report ID</th>
+                                <th scope="col">Warnings</th>
+                            </tr>
+                        </thead>
+                        <tbody id="tBody" className="font-mono-2xs">
+                            {submissions.map((s, i) => {
+                                return (
+                                    <tr key={"submission_" + i}>
+                                        <th scope="row">
+                                            {moment
+                                                .utc(s["createdAt"])
+                                                .local()
+                                                .format("YYYY-MM-DD HH:mm")}
+                                        </th>
+                                        <th scope="row"></th> {/* File name */}
+                                        <th scope="row">
+                                            {s["reportItemCount"]}
+                                        </th>
+                                        <th scope="row">{s["id"]}</th>
+                                        <th scope="row">{s["warningCount"]}</th>
+                                    </tr>
+                                );
+                            })}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </NetworkErrorBoundary>
+    );
+}
+
+export default Submissions;