Create financial reports guide

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>
+      ))}
+    </>
+  );
+};

src/components/PeriodicReports/PeriodicReportCard.tsx

@@ -69,10 +69,18 @@ export interface PeriodicReportCardProps {
   dueNext?: SecuredPeriodicReportFragment;
   disableIcon?: boolean;
   hasDetailPage?: boolean;
+  metRequirement?: boolean;
 }
 
 const PeriodicReportCardInContext = (props: PeriodicReportCardProps) => {
-  const { type, dueCurrently, dueNext, disableIcon, hasDetailPage } = props;
+  const {
+    type,
+    dueCurrently,
+    dueNext,
+    disableIcon,
+    hasDetailPage,
+    metRequirement = true,
+  } = props;
   const classes = useStyles();
 
   const currentFile = dueCurrently?.value?.reportFile;
@@ -119,63 +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>
-          {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>

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>
   );

src/scenes/Projects/Overview/ProjectOverview.tsx

@@ -41,6 +41,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 +160,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 +501,11 @@ export const ProjectOverview: FC = () => {
                   projectOverviewData?.project.currentFinancialReportDue
                 }
                 dueNext={projectOverviewData?.project.nextFinancialReportDue}
+                metRequirement={
+                  projectOverviewData?.project &&
+                  financialReportsData?.project.reports.canRead === true &&
+                  financialReportsData.project.reports.items.length > 0
+                }
               />
             </Grid>
             <Grid item xs={12} md={6}>

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
+    }
   }
 }
 
@@ -16,6 +27,18 @@ query FinancialReports($projectId: ID!, $changeset: ID) {
       items {
         ...PeriodicReport
       }
+      canRead
+    }
+    mouRange {
+      ...securedDateRange
+    }
+    financialReportPeriod {
+      canRead
+      canEdit
+      value
+    }
+    partnerships {
+      ...PartnershipSummary
     }
   }
 }

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
+      }
     />
   );
 };