From f74a914bf6683e71917cbc8f482a654dcbb9b0d1 Mon Sep 17 00:00:00 2001
From: zkhin <arandomname@gmail.com>
Date: Tue, 22 Feb 2022 05:13:58 -0500
Subject: [PATCH 1/3] Create financial reports guide

---
 .../PeriodicReports/FinancialReportGuide.tsx  | 56 +++++++++++++++++++
 .../PeriodicReports/PeriodicReportCard.tsx    | 13 ++++-
 .../Projects/Overview/ProjectOverview.tsx     | 15 +++++
 .../Projects/Reports/ProjectReports.graphql   |  1 +
 4 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 src/components/PeriodicReports/FinancialReportGuide.tsx

diff --git a/src/components/PeriodicReports/FinancialReportGuide.tsx b/src/components/PeriodicReports/FinancialReportGuide.tsx
new file mode 100644
index 0000000000..fd6a4be39f
--- /dev/null
+++ b/src/components/PeriodicReports/FinancialReportGuide.tsx
@@ -0,0 +1,56 @@
+import { Button } from '@material-ui/core';
+import React from 'react';
+import { ProjectOverviewFragment } from '../../scenes/Projects/Overview/ProjectOverview.generated';
+import {
+  EditableProjectField,
+  UpdateProjectDialog,
+} from '../../scenes/Projects/Update';
+import { Many } from '../../util';
+import { useDialog } from '../Dialog';
+import { ButtonLink } from '../Routing';
+
+const ReportGuideAction = {
+  SET_RANGE: 'SET_RANGE',
+  ADD_MANAGING_PARTNER: 'ADD_MANAGING_PARTNER',
+  SET_REPORT_FREQUENCY: 'SET_REPORT_FREQUENCY',
+};
+
+export const FinancialReportGuide = ({
+  project,
+}: {
+  project: ProjectOverviewFragment;
+}) => {
+  const [editState, editField, fieldsBeingEdited] =
+    useDialog<Many<EditableProjectField>>();
+  let action;
+
+  if (!project.mouRange.value.start || !project.mouRange.value.end) {
+    action = ReportGuideAction.SET_RANGE;
+  } else if (project.partnerships.items.length === 0) {
+    action = ReportGuideAction.ADD_MANAGING_PARTNER;
+  } else {
+    action = ReportGuideAction.SET_REPORT_FREQUENCY;
+  }
+  return (
+    <>
+      {action === ReportGuideAction.SET_RANGE ? (
+        <Button color="primary" onClick={() => editField('mouRange')}>
+          Set date range
+        </Button>
+      ) : action === ReportGuideAction.ADD_MANAGING_PARTNER ? (
+        <ButtonLink color="primary" to={'partnerships'}>
+          Add managing partner
+        </ButtonLink>
+      ) : (
+        <ButtonLink color="primary" to={'partnerships'}>
+          Set reporting frequency
+        </ButtonLink>
+      )}
+      <UpdateProjectDialog
+        {...editState}
+        project={project}
+        editFields={fieldsBeingEdited}
+      />
+    </>
+  );
+};
diff --git a/src/components/PeriodicReports/PeriodicReportCard.tsx b/src/components/PeriodicReports/PeriodicReportCard.tsx
index 03692e51bf..85188ef9e2 100644
--- a/src/components/PeriodicReports/PeriodicReportCard.tsx
+++ b/src/components/PeriodicReports/PeriodicReportCard.tsx
@@ -8,7 +8,7 @@ import {
   Typography,
 } from '@material-ui/core';
 import { AssignmentOutlined, BarChart, ShowChart } from '@material-ui/icons';
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { ReportType } from '../../api';
 import {
@@ -69,10 +69,18 @@ export interface PeriodicReportCardProps {
   dueNext?: SecuredPeriodicReportFragment;
   disableIcon?: boolean;
   hasDetailPage?: boolean;
+  cardAction?: ReactNode;
 }
 
 const PeriodicReportCardInContext = (props: PeriodicReportCardProps) => {
-  const { type, dueCurrently, dueNext, disableIcon, hasDetailPage } = props;
+  const {
+    type,
+    dueCurrently,
+    dueNext,
+    disableIcon,
+    hasDetailPage,
+    cardAction,
+  } = props;
   const classes = useStyles();
 
   const currentFile = dueCurrently?.value?.reportFile;
@@ -138,6 +146,7 @@ const PeriodicReportCardInContext = (props: PeriodicReportCardProps) => {
           <ButtonLink color="primary" to={link}>
             View Reports
           </ButtonLink>
+          {cardAction}
           {needsUpload ? (
             <Tooltip
               title={
diff --git a/src/scenes/Projects/Overview/ProjectOverview.tsx b/src/scenes/Projects/Overview/ProjectOverview.tsx
index 25fb57b6d1..de03cad7b4 100644
--- a/src/scenes/Projects/Overview/ProjectOverview.tsx
+++ b/src/scenes/Projects/Overview/ProjectOverview.tsx
@@ -30,6 +30,7 @@ import { LanguageEngagementListItemFragment } from '../../../components/Language
 import { List, useListQuery } from '../../../components/List';
 import { PartnershipSummary } from '../../../components/PartnershipSummary';
 import { PeriodicReportCard } from '../../../components/PeriodicReports';
+import { FinancialReportGuide } from '../../../components/PeriodicReports/FinancialReportGuide';
 import { ProjectChangeRequestSummary } from '../../../components/ProjectChangeRequestSummary';
 import { ProjectMembersSummary } from '../../../components/ProjectMembersSummary';
 import { Redacted } from '../../../components/Redacted';
@@ -41,6 +42,7 @@ import { CreateInternshipEngagement } from '../../Engagement/InternshipEngagemen
 import { CreateLanguageEngagement } from '../../Engagement/LanguageEngagement/Create/CreateLanguageEngagement';
 import { useProjectCurrentDirectory, useUploadProjectFiles } from '../Files';
 import { ProjectListQueryVariables } from '../List/projects.generated';
+import { FinancialReportsDocument } from '../Reports/ProjectReports.generated';
 import { EditableProjectField, UpdateProjectDialog } from '../Update';
 import { ProjectWorkflowDialog } from '../Update/ProjectWorkflowDialog';
 import { useProjectId } from '../useProjectId';
@@ -159,6 +161,10 @@ export const ProjectOverview: FC = () => {
     },
   });
 
+  const { data: financialReportsData } = useQuery(FinancialReportsDocument, {
+    variables: { projectId, changeset: changesetId },
+  });
+
   const projectName = projectOverviewData?.project.name;
   const isTranslation = projectOverviewData
     ? projectOverviewData.project.__typename === 'TranslationProject'
@@ -496,6 +502,15 @@ export const ProjectOverview: FC = () => {
                   projectOverviewData?.project.currentFinancialReportDue
                 }
                 dueNext={projectOverviewData?.project.nextFinancialReportDue}
+                cardAction={
+                  projectOverviewData?.project &&
+                  financialReportsData?.project.reports.canRead === true &&
+                  financialReportsData.project.reports.items.length === 0 && (
+                    <FinancialReportGuide
+                      project={projectOverviewData.project}
+                    />
+                  )
+                }
               />
             </Grid>
             <Grid item xs={12} md={6}>
diff --git a/src/scenes/Projects/Reports/ProjectReports.graphql b/src/scenes/Projects/Reports/ProjectReports.graphql
index 8f2c766071..2398203007 100644
--- a/src/scenes/Projects/Reports/ProjectReports.graphql
+++ b/src/scenes/Projects/Reports/ProjectReports.graphql
@@ -16,6 +16,7 @@ query FinancialReports($projectId: ID!, $changeset: ID) {
       items {
         ...PeriodicReport
       }
+      canRead
     }
   }
 }

From 405c53ac5b3c6abe45ddb873b417b40a62942b5b Mon Sep 17 00:00:00 2001
From: zkhin <arandomname@gmail.com>
Date: Fri, 25 Feb 2022 14:52:57 -0500
Subject: [PATCH 2/3] Update UI

---
 .../FinancialReportCheckList.tsx              |  57 +++++++++
 .../PeriodicReports/FinancialReportGuide.tsx  |  56 ---------
 .../PeriodicReports/PeriodicReportCard.tsx    | 110 ++++++++++--------
 .../PeriodicReports/PeriodicReportsList.tsx   |   8 +-
 .../Projects/Overview/ProjectOverview.tsx     |   9 +-
 .../Projects/Reports/ProjectReports.graphql   |  22 ++++
 .../Projects/Reports/ProjectReports.tsx       |   8 ++
 7 files changed, 155 insertions(+), 115 deletions(-)
 create mode 100644 src/components/PeriodicReports/FinancialReportCheckList.tsx
 delete mode 100644 src/components/PeriodicReports/FinancialReportGuide.tsx

diff --git a/src/components/PeriodicReports/FinancialReportCheckList.tsx b/src/components/PeriodicReports/FinancialReportCheckList.tsx
new file mode 100644
index 0000000000..ab8d4273f6
--- /dev/null
+++ b/src/components/PeriodicReports/FinancialReportCheckList.tsx
@@ -0,0 +1,57 @@
+import { Checkbox, FormControl, FormControlLabel } from '@material-ui/core';
+import React from 'react';
+import {
+  FinancialReportsQuery,
+  NarrativeReportsQuery,
+} from '../../scenes/Projects/Reports/ProjectReports.generated';
+
+const ReportGuideAction = {
+  SET_RANGE: 'SET_RANGE',
+  ADD_MANAGING_PARTNER: 'ADD_MANAGING_PARTNER',
+  SET_REPORT_FREQUENCY: 'SET_REPORT_FREQUENCY',
+};
+
+export const FinancialReportCheckList = ({
+  data: { project },
+}: {
+  data: FinancialReportsQuery | NarrativeReportsQuery;
+}) => {
+  const checkList = Object.keys(ReportGuideAction).map((action) => {
+    switch (action) {
+      case ReportGuideAction.SET_RANGE:
+        return {
+          label: `Define the project's date range`,
+          checked:
+            !!project.mouRange.value.start && !!project.mouRange.value.end,
+        };
+      case ReportGuideAction.ADD_MANAGING_PARTNER:
+        return {
+          label: 'Add a managing partner',
+          checked: project.partnerships.items.length > 0,
+        };
+      default:
+        return {
+          label: `Set the managing partner's reporting frequency`,
+          checked: !!project.financialReportPeriod.value,
+        };
+    }
+  });
+  return (
+    <>
+      {checkList.map((item, index) => (
+        <FormControl key={`check-list-${index}`} fullWidth>
+          <FormControlLabel
+            label={item.label}
+            control={
+              <Checkbox
+                name={`check-list-${index}`}
+                checked={item.checked}
+                disabled
+              />
+            }
+          />
+        </FormControl>
+      ))}
+    </>
+  );
+};
diff --git a/src/components/PeriodicReports/FinancialReportGuide.tsx b/src/components/PeriodicReports/FinancialReportGuide.tsx
deleted file mode 100644
index fd6a4be39f..0000000000
--- a/src/components/PeriodicReports/FinancialReportGuide.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Button } from '@material-ui/core';
-import React from 'react';
-import { ProjectOverviewFragment } from '../../scenes/Projects/Overview/ProjectOverview.generated';
-import {
-  EditableProjectField,
-  UpdateProjectDialog,
-} from '../../scenes/Projects/Update';
-import { Many } from '../../util';
-import { useDialog } from '../Dialog';
-import { ButtonLink } from '../Routing';
-
-const ReportGuideAction = {
-  SET_RANGE: 'SET_RANGE',
-  ADD_MANAGING_PARTNER: 'ADD_MANAGING_PARTNER',
-  SET_REPORT_FREQUENCY: 'SET_REPORT_FREQUENCY',
-};
-
-export const FinancialReportGuide = ({
-  project,
-}: {
-  project: ProjectOverviewFragment;
-}) => {
-  const [editState, editField, fieldsBeingEdited] =
-    useDialog<Many<EditableProjectField>>();
-  let action;
-
-  if (!project.mouRange.value.start || !project.mouRange.value.end) {
-    action = ReportGuideAction.SET_RANGE;
-  } else if (project.partnerships.items.length === 0) {
-    action = ReportGuideAction.ADD_MANAGING_PARTNER;
-  } else {
-    action = ReportGuideAction.SET_REPORT_FREQUENCY;
-  }
-  return (
-    <>
-      {action === ReportGuideAction.SET_RANGE ? (
-        <Button color="primary" onClick={() => editField('mouRange')}>
-          Set date range
-        </Button>
-      ) : action === ReportGuideAction.ADD_MANAGING_PARTNER ? (
-        <ButtonLink color="primary" to={'partnerships'}>
-          Add managing partner
-        </ButtonLink>
-      ) : (
-        <ButtonLink color="primary" to={'partnerships'}>
-          Set reporting frequency
-        </ButtonLink>
-      )}
-      <UpdateProjectDialog
-        {...editState}
-        project={project}
-        editFields={fieldsBeingEdited}
-      />
-    </>
-  );
-};
diff --git a/src/components/PeriodicReports/PeriodicReportCard.tsx b/src/components/PeriodicReports/PeriodicReportCard.tsx
index 85188ef9e2..f888f672b6 100644
--- a/src/components/PeriodicReports/PeriodicReportCard.tsx
+++ b/src/components/PeriodicReports/PeriodicReportCard.tsx
@@ -8,7 +8,7 @@ import {
   Typography,
 } from '@material-ui/core';
 import { AssignmentOutlined, BarChart, ShowChart } from '@material-ui/icons';
-import React, { ReactNode, useState } from 'react';
+import React, { useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { ReportType } from '../../api';
 import {
@@ -69,7 +69,7 @@ export interface PeriodicReportCardProps {
   dueNext?: SecuredPeriodicReportFragment;
   disableIcon?: boolean;
   hasDetailPage?: boolean;
-  cardAction?: ReactNode;
+  metRequirement?: boolean;
 }
 
 const PeriodicReportCardInContext = (props: PeriodicReportCardProps) => {
@@ -79,7 +79,7 @@ const PeriodicReportCardInContext = (props: PeriodicReportCardProps) => {
     dueNext,
     disableIcon,
     hasDetailPage,
-    cardAction,
+    metRequirement = true,
   } = props;
   const classes = useStyles();
 
@@ -127,64 +127,72 @@ const PeriodicReportCardInContext = (props: PeriodicReportCardProps) => {
             <Typography color="initial" variant="h4" paragraph>
               {`${type} Reports`}
             </Typography>
-            <div className={classes.relevantReports}>
-              <ReportInfo
-                title="Current"
-                report={dueCurrently}
-                className={classes.relevantReport}
-              />
-              <Divider orientation="vertical" flexItem variant="middle" />
-              <ReportInfo
-                title="Next"
-                report={dueNext}
-                className={classes.relevantReport}
-              />
-            </div>
+            {metRequirement ? (
+              <div className={classes.relevantReports}>
+                <ReportInfo
+                  title="Current"
+                  report={dueCurrently}
+                  className={classes.relevantReport}
+                />
+                <Divider orientation="vertical" flexItem variant="middle" />
+                <ReportInfo
+                  title="Next"
+                  report={dueNext}
+                  className={classes.relevantReport}
+                />
+              </div>
+            ) : (
+              <div>
+                <span>Not all requirements have been met</span> <br />
+                <span>Click here to view remaining list</span>
+              </div>
+            )}
           </div>
         </CardActionAreaLink>
-        <CardActions>
-          <ButtonLink color="primary" to={link}>
-            View Reports
-          </ButtonLink>
-          {cardAction}
-          {needsUpload ? (
-            <Tooltip
-              title={
-                <>
-                  Upload report for <ReportLabel report={dueCurrently} />
-                </>
-              }
-            >
-              <Button color="primary" onClick={openFileBrowser}>
-                Upload Report
-              </Button>
-            </Tooltip>
-          ) : currentFile?.value ? (
-            hasDetailPage ? (
-              <ButtonLink
-                color="primary"
-                to={`${link}/${dueCurrently!.value!.id}`}
-              >
-                View Report
-              </ButtonLink>
-            ) : (
+        {metRequirement && (
+          <CardActions>
+            <ButtonLink color="primary" to={link}>
+              View Reports
+            </ButtonLink>
+            {needsUpload ? (
               <Tooltip
                 title={
                   <>
-                    Preview report for <ReportLabel report={dueCurrently} />
+                    Upload report for <ReportLabel report={dueCurrently} />
                   </>
                 }
               >
-                <Button
-                  color="primary"
-                  onClick={() => openFilePreview(currentFile.value!)}
-                >
-                  Preview Report
+                <Button color="primary" onClick={openFileBrowser}>
+                  Upload Report
                 </Button>
               </Tooltip>
-            )
-          ) : null}
-        </CardActions>
+            ) : currentFile?.value ? (
+              hasDetailPage ? (
+                <ButtonLink
+                  color="primary"
+                  to={`${link}/${dueCurrently!.value!.id}`}
+                >
+                  View Report
+                </ButtonLink>
+              ) : (
+                <Tooltip
+                  title={
+                    <>
+                      Preview report for <ReportLabel report={dueCurrently} />
+                    </>
+                  }
+                >
+                  <Button
+                    color="primary"
+                    onClick={() => openFilePreview(currentFile.value!)}
+                  >
+                    Preview Report
+                  </Button>
+                </Tooltip>
+              )
+            ) : null}
+          </CardActions>
+        )}
         <DropOverlay report={dueCurrently} show={isDragActive} />
         <input {...getInputProps()} name="report_file_uploader" />
       </Card>
diff --git a/src/components/PeriodicReports/PeriodicReportsList.tsx b/src/components/PeriodicReports/PeriodicReportsList.tsx
index 4946774c5d..2fe22da93c 100644
--- a/src/components/PeriodicReports/PeriodicReportsList.tsx
+++ b/src/components/PeriodicReports/PeriodicReportsList.tsx
@@ -26,12 +26,14 @@ export const PeriodicReportsList = ({
   breadcrumbs = [],
   pageTitleSuffix,
   reports,
+  requirementCheckList,
   onRowClick,
 }: {
   type: ReportType;
   breadcrumbs?: ReactNode[];
   pageTitleSuffix?: string;
   reports?: readonly PeriodicReportFragment[];
+  requirementCheckList?: ReactNode;
   onRowClick?: (rowData: ReportRow) => void;
 }) => {
   const classes = useStyles();
@@ -52,7 +54,11 @@ export const PeriodicReportsList = ({
           {reportTypeName}
         </Typography>
 
-        <PeriodicReportsTable data={reports} onRowClick={onRowClick} />
+        {requirementCheckList ? (
+          requirementCheckList
+        ) : (
+          <PeriodicReportsTable data={reports} onRowClick={onRowClick} />
+        )}
       </main>
     </div>
   );
diff --git a/src/scenes/Projects/Overview/ProjectOverview.tsx b/src/scenes/Projects/Overview/ProjectOverview.tsx
index de03cad7b4..fdf9880b5e 100644
--- a/src/scenes/Projects/Overview/ProjectOverview.tsx
+++ b/src/scenes/Projects/Overview/ProjectOverview.tsx
@@ -30,7 +30,6 @@ import { LanguageEngagementListItemFragment } from '../../../components/Language
 import { List, useListQuery } from '../../../components/List';
 import { PartnershipSummary } from '../../../components/PartnershipSummary';
 import { PeriodicReportCard } from '../../../components/PeriodicReports';
-import { FinancialReportGuide } from '../../../components/PeriodicReports/FinancialReportGuide';
 import { ProjectChangeRequestSummary } from '../../../components/ProjectChangeRequestSummary';
 import { ProjectMembersSummary } from '../../../components/ProjectMembersSummary';
 import { Redacted } from '../../../components/Redacted';
@@ -502,14 +501,10 @@ export const ProjectOverview: FC = () => {
                   projectOverviewData?.project.currentFinancialReportDue
                 }
                 dueNext={projectOverviewData?.project.nextFinancialReportDue}
-                cardAction={
+                metRequirement={
                   projectOverviewData?.project &&
                   financialReportsData?.project.reports.canRead === true &&
-                  financialReportsData.project.reports.items.length === 0 && (
-                    <FinancialReportGuide
-                      project={projectOverviewData.project}
-                    />
-                  )
+                  financialReportsData.project.reports.items.length > 0
                 }
               />
             </Grid>
diff --git a/src/scenes/Projects/Reports/ProjectReports.graphql b/src/scenes/Projects/Reports/ProjectReports.graphql
index 2398203007..6a6808253b 100644
--- a/src/scenes/Projects/Reports/ProjectReports.graphql
+++ b/src/scenes/Projects/Reports/ProjectReports.graphql
@@ -6,6 +6,17 @@ query NarrativeReports($projectId: ID!, $changeset: ID) {
         ...PeriodicReport
       }
     }
+    mouRange {
+      ...securedDateRange
+    }
+    financialReportPeriod {
+      canRead
+      canEdit
+      value
+    }
+    partnerships {
+      ...PartnershipSummary
+    }
   }
 }
 
@@ -18,5 +29,16 @@ query FinancialReports($projectId: ID!, $changeset: ID) {
       }
       canRead
     }
+    mouRange {
+      ...securedDateRange
+    }
+    financialReportPeriod {
+      canRead
+      canEdit
+      value
+    }
+    partnerships {
+      ...PartnershipSummary
+    }
   }
 }
diff --git a/src/scenes/Projects/Reports/ProjectReports.tsx b/src/scenes/Projects/Reports/ProjectReports.tsx
index 59760bda15..03bad4cde9 100644
--- a/src/scenes/Projects/Reports/ProjectReports.tsx
+++ b/src/scenes/Projects/Reports/ProjectReports.tsx
@@ -2,6 +2,7 @@ import { useQuery } from '@apollo/client';
 import React from 'react';
 import { ReportType } from '../../../api';
 import { Error } from '../../../components/Error';
+import { FinancialReportCheckList } from '../../../components/PeriodicReports/FinancialReportCheckList';
 import { PeriodicReportsList } from '../../../components/PeriodicReports/PeriodicReportsList';
 import { ProjectBreadcrumb } from '../../../components/ProjectBreadcrumb';
 import { useProjectId } from '../useProjectId';
@@ -36,6 +37,13 @@ export const ProjectReports = ({ type }: { type: ReportType }) => {
       reports={data?.project.reports.items}
       breadcrumbs={[<ProjectBreadcrumb data={data?.project} />]}
       pageTitleSuffix={data?.project.name.value ?? 'A Project'}
+      requirementCheckList={
+        data &&
+        data.project.reports.items.length === 0 &&
+        type === 'Financial' ? (
+          <FinancialReportCheckList data={data} />
+        ) : null
+      }
     />
   );
 };

From a3734c1b5cf676aff35ab821b42f31f853146cfe Mon Sep 17 00:00:00 2001
From: zkhin <arandomname@gmail.com>
Date: Mon, 28 Feb 2022 08:52:55 -0500
Subject: [PATCH 3/3] Resolve comments

---
 .../FinancialReportCheckList.tsx              | 119 +++++++++++-------
 .../PeriodicReports/PeriodicReportCard.tsx    |   8 +-
 .../PeriodicReports/PeriodicReportsList.tsx   |   8 +-
 .../Projects/Overview/ProjectOverview.graphql |   7 ++
 .../Projects/Overview/ProjectOverview.tsx     |  10 +-
 .../Projects/Reports/ProjectReports.graphql   |  16 ---
 .../Projects/Reports/ProjectReports.tsx       |  16 ++-
 7 files changed, 102 insertions(+), 82 deletions(-)

diff --git a/src/components/PeriodicReports/FinancialReportCheckList.tsx b/src/components/PeriodicReports/FinancialReportCheckList.tsx
index ab8d4273f6..db5fc31808 100644
--- a/src/components/PeriodicReports/FinancialReportCheckList.tsx
+++ b/src/components/PeriodicReports/FinancialReportCheckList.tsx
@@ -1,57 +1,82 @@
-import { Checkbox, FormControl, FormControlLabel } from '@material-ui/core';
-import React from 'react';
 import {
-  FinancialReportsQuery,
-  NarrativeReportsQuery,
-} from '../../scenes/Projects/Reports/ProjectReports.generated';
-
-const ReportGuideAction = {
-  SET_RANGE: 'SET_RANGE',
-  ADD_MANAGING_PARTNER: 'ADD_MANAGING_PARTNER',
-  SET_REPORT_FREQUENCY: 'SET_REPORT_FREQUENCY',
-};
+  Checkbox,
+  IconButton,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  ListItemText,
+} from '@material-ui/core';
+import { EditOutlined } from '@material-ui/icons';
+import React, { useMemo } from 'react';
+import { useNavigate } from 'react-router';
+import { ProjectOverviewFragment } from '../../scenes/Projects/Overview/ProjectOverview.generated';
+import {
+  EditableProjectField,
+  UpdateProjectDialog,
+} from '../../scenes/Projects/Update';
+import { Many } from '../../util';
+import { useDialog } from '../Dialog';
 
 export const FinancialReportCheckList = ({
-  data: { project },
+  project,
 }: {
-  data: FinancialReportsQuery | NarrativeReportsQuery;
+  project: ProjectOverviewFragment;
 }) => {
-  const checkList = Object.keys(ReportGuideAction).map((action) => {
-    switch (action) {
-      case ReportGuideAction.SET_RANGE:
-        return {
-          label: `Define the project's date range`,
-          checked:
-            !!project.mouRange.value.start && !!project.mouRange.value.end,
-        };
-      case ReportGuideAction.ADD_MANAGING_PARTNER:
-        return {
-          label: 'Add a managing partner',
-          checked: project.partnerships.items.length > 0,
-        };
-      default:
-        return {
-          label: `Set the managing partner's reporting frequency`,
-          checked: !!project.financialReportPeriod.value,
-        };
-    }
-  });
+  const [editState, editField, fieldsBeingEdited] =
+    useDialog<Many<EditableProjectField>>();
+  const navigate = useNavigate();
+
+  const checkList = useMemo(() => {
+    const result = [];
+    result.push({
+      label: `Define the project's date range`,
+      checked: !!project.mouRange.value.start && !!project.mouRange.value.end,
+      action: () => editField('mouRange'),
+    });
+    result.push({
+      label: 'Add a managing partner',
+      checked: project.partnerships.total > 0,
+      action: () => navigate('../../partnerships'),
+    });
+    result.push({
+      label: `Set the managing partner's reporting frequency`,
+      checked: !!project.financialReportPeriod.value,
+      action: () => navigate('../../partnerships'),
+    });
+    return result;
+  }, [editField, navigate, project]);
+
   return (
     <>
-      {checkList.map((item, index) => (
-        <FormControl key={`check-list-${index}`} fullWidth>
-          <FormControlLabel
-            label={item.label}
-            control={
-              <Checkbox
-                name={`check-list-${index}`}
-                checked={item.checked}
-                disabled
-              />
-            }
-          />
-        </FormControl>
-      ))}
+      <List>
+        {checkList.map((item, index) => (
+          <ListItem
+            key={`check-list-${index}`}
+            disabled={item.checked}
+            dense
+            button
+            onClick={item.action}
+          >
+            <ListItemIcon>
+              <Checkbox edge="start" checked={item.checked} />
+            </ListItemIcon>
+            <ListItemText primary={item.label} />
+            {!item.checked && (
+              <ListItemSecondaryAction>
+                <IconButton edge="end" aria-label="edit">
+                  <EditOutlined />
+                </IconButton>
+              </ListItemSecondaryAction>
+            )}
+          </ListItem>
+        ))}
+      </List>
+      <UpdateProjectDialog
+        {...editState}
+        project={project}
+        editFields={fieldsBeingEdited}
+      />
     </>
   );
 };
diff --git a/src/components/PeriodicReports/PeriodicReportCard.tsx b/src/components/PeriodicReports/PeriodicReportCard.tsx
index f888f672b6..3766679433 100644
--- a/src/components/PeriodicReports/PeriodicReportCard.tsx
+++ b/src/components/PeriodicReports/PeriodicReportCard.tsx
@@ -143,8 +143,12 @@ const PeriodicReportCardInContext = (props: PeriodicReportCardProps) => {
               </div>
             ) : (
               <div>
-                <span>Not all requirements have been met</span> <br />
-                <span>Click here to view remaining list</span>
+                <Typography variant="body2">
+                  Not all requirements have been met
+                </Typography>
+                <Typography variant="body2">
+                  Click here to view remaining list
+                </Typography>
               </div>
             )}
           </div>
diff --git a/src/components/PeriodicReports/PeriodicReportsList.tsx b/src/components/PeriodicReports/PeriodicReportsList.tsx
index 2fe22da93c..3502194ca3 100644
--- a/src/components/PeriodicReports/PeriodicReportsList.tsx
+++ b/src/components/PeriodicReports/PeriodicReportsList.tsx
@@ -26,14 +26,14 @@ export const PeriodicReportsList = ({
   breadcrumbs = [],
   pageTitleSuffix,
   reports,
-  requirementCheckList,
+  children,
   onRowClick,
 }: {
   type: ReportType;
   breadcrumbs?: ReactNode[];
   pageTitleSuffix?: string;
   reports?: readonly PeriodicReportFragment[];
-  requirementCheckList?: ReactNode;
+  children?: ReactNode;
   onRowClick?: (rowData: ReportRow) => void;
 }) => {
   const classes = useStyles();
@@ -54,8 +54,8 @@ export const PeriodicReportsList = ({
           {reportTypeName}
         </Typography>
 
-        {requirementCheckList ? (
-          requirementCheckList
+        {children ? (
+          children
         ) : (
           <PeriodicReportsTable data={reports} onRowClick={onRowClick} />
         )}
diff --git a/src/scenes/Projects/Overview/ProjectOverview.graphql b/src/scenes/Projects/Overview/ProjectOverview.graphql
index 30d330b3a8..92ebbf7b7b 100644
--- a/src/scenes/Projects/Overview/ProjectOverview.graphql
+++ b/src/scenes/Projects/Overview/ProjectOverview.graphql
@@ -89,6 +89,13 @@ fragment ProjectOverview on Project {
   changeRequests {
     ...ProjectChangeRequestSummary
   }
+  financialReports {
+    total
+    canRead
+  }
+  financialReportPeriod {
+    value
+  }
 }
 
 query ProjectEngagementListOverview(
diff --git a/src/scenes/Projects/Overview/ProjectOverview.tsx b/src/scenes/Projects/Overview/ProjectOverview.tsx
index fdf9880b5e..94275014c6 100644
--- a/src/scenes/Projects/Overview/ProjectOverview.tsx
+++ b/src/scenes/Projects/Overview/ProjectOverview.tsx
@@ -41,7 +41,6 @@ import { CreateInternshipEngagement } from '../../Engagement/InternshipEngagemen
 import { CreateLanguageEngagement } from '../../Engagement/LanguageEngagement/Create/CreateLanguageEngagement';
 import { useProjectCurrentDirectory, useUploadProjectFiles } from '../Files';
 import { ProjectListQueryVariables } from '../List/projects.generated';
-import { FinancialReportsDocument } from '../Reports/ProjectReports.generated';
 import { EditableProjectField, UpdateProjectDialog } from '../Update';
 import { ProjectWorkflowDialog } from '../Update/ProjectWorkflowDialog';
 import { useProjectId } from '../useProjectId';
@@ -160,10 +159,6 @@ export const ProjectOverview: FC = () => {
     },
   });
 
-  const { data: financialReportsData } = useQuery(FinancialReportsDocument, {
-    variables: { projectId, changeset: changesetId },
-  });
-
   const projectName = projectOverviewData?.project.name;
   const isTranslation = projectOverviewData
     ? projectOverviewData.project.__typename === 'TranslationProject'
@@ -502,9 +497,8 @@ export const ProjectOverview: FC = () => {
                 }
                 dueNext={projectOverviewData?.project.nextFinancialReportDue}
                 metRequirement={
-                  projectOverviewData?.project &&
-                  financialReportsData?.project.reports.canRead === true &&
-                  financialReportsData.project.reports.items.length > 0
+                  projectOverviewData?.project.financialReports.canRead &&
+                  projectOverviewData.project.financialReports.total > 0
                 }
               />
             </Grid>
diff --git a/src/scenes/Projects/Reports/ProjectReports.graphql b/src/scenes/Projects/Reports/ProjectReports.graphql
index 6a6808253b..c8dc8cee5b 100644
--- a/src/scenes/Projects/Reports/ProjectReports.graphql
+++ b/src/scenes/Projects/Reports/ProjectReports.graphql
@@ -9,14 +9,6 @@ query NarrativeReports($projectId: ID!, $changeset: ID) {
     mouRange {
       ...securedDateRange
     }
-    financialReportPeriod {
-      canRead
-      canEdit
-      value
-    }
-    partnerships {
-      ...PartnershipSummary
-    }
   }
 }
 
@@ -32,13 +24,5 @@ query FinancialReports($projectId: ID!, $changeset: ID) {
     mouRange {
       ...securedDateRange
     }
-    financialReportPeriod {
-      canRead
-      canEdit
-      value
-    }
-    partnerships {
-      ...PartnershipSummary
-    }
   }
 }
diff --git a/src/scenes/Projects/Reports/ProjectReports.tsx b/src/scenes/Projects/Reports/ProjectReports.tsx
index 03bad4cde9..dc4e5c9f5d 100644
--- a/src/scenes/Projects/Reports/ProjectReports.tsx
+++ b/src/scenes/Projects/Reports/ProjectReports.tsx
@@ -5,6 +5,7 @@ import { Error } from '../../../components/Error';
 import { FinancialReportCheckList } from '../../../components/PeriodicReports/FinancialReportCheckList';
 import { PeriodicReportsList } from '../../../components/PeriodicReports/PeriodicReportsList';
 import { ProjectBreadcrumb } from '../../../components/ProjectBreadcrumb';
+import { ProjectOverviewDocument } from '../Overview/ProjectOverview.generated';
 import { useProjectId } from '../useProjectId';
 import {
   FinancialReportsDocument,
@@ -19,6 +20,12 @@ export const ProjectReports = ({ type }: { type: ReportType }) => {
       variables: { projectId, changeset: changesetId },
     }
   );
+  const { data: projectOverviewData } = useQuery(ProjectOverviewDocument, {
+    variables: {
+      input: projectId,
+      changeset: changesetId,
+    },
+  });
 
   if (error) {
     return (
@@ -37,11 +44,10 @@ export const ProjectReports = ({ type }: { type: ReportType }) => {
       reports={data?.project.reports.items}
       breadcrumbs={[<ProjectBreadcrumb data={data?.project} />]}
       pageTitleSuffix={data?.project.name.value ?? 'A Project'}
-      requirementCheckList={
-        data &&
-        data.project.reports.items.length === 0 &&
-        type === 'Financial' ? (
-          <FinancialReportCheckList data={data} />
+      children={
+        type === 'Financial' &&
+        projectOverviewData?.project.financialReports.total === 0 ? (
+          <FinancialReportCheckList project={projectOverviewData.project} />
         ) : null
       }
     />