diff --git a/src/components/PeriodicReports/FinancialReportCheckList.tsx b/src/components/PeriodicReports/FinancialReportCheckList.tsx new file mode 100644 index 0000000000..db5fc31808 --- /dev/null +++ b/src/components/PeriodicReports/FinancialReportCheckList.tsx @@ -0,0 +1,82 @@ +import { + 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 = ({ + project, +}: { + project: ProjectOverviewFragment; +}) => { + const [editState, editField, fieldsBeingEdited] = + useDialog>(); + 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) => ( + + + + + + {!item.checked && ( + + + + + + )} + + ))} + + + + ); +}; diff --git a/src/components/PeriodicReports/PeriodicReportCard.tsx b/src/components/PeriodicReports/PeriodicReportCard.tsx index 03692e51bf..3766679433 100644 --- a/src/components/PeriodicReports/PeriodicReportCard.tsx +++ b/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,76 @@ const PeriodicReportCardInContext = (props: PeriodicReportCardProps) => { {`${type} Reports`} -
- - - -
+ {metRequirement ? ( +
+ + + +
+ ) : ( +
+ + Not all requirements have been met + + + Click here to view remaining list + +
+ )} - - - View Reports - - {needsUpload ? ( - - Upload report for - - } - > - - - ) : currentFile?.value ? ( - hasDetailPage ? ( - - View Report - - ) : ( + {metRequirement && ( + + + View Reports + + {needsUpload ? ( - Preview report for + Upload report for } > - - ) - ) : null} - + ) : currentFile?.value ? ( + hasDetailPage ? ( + + View Report + + ) : ( + + Preview report for + + } + > + + + ) + ) : null} + + )} diff --git a/src/components/PeriodicReports/PeriodicReportsList.tsx b/src/components/PeriodicReports/PeriodicReportsList.tsx index 4946774c5d..3502194ca3 100644 --- a/src/components/PeriodicReports/PeriodicReportsList.tsx +++ b/src/components/PeriodicReports/PeriodicReportsList.tsx @@ -26,12 +26,14 @@ export const PeriodicReportsList = ({ breadcrumbs = [], pageTitleSuffix, reports, + children, onRowClick, }: { type: ReportType; breadcrumbs?: ReactNode[]; pageTitleSuffix?: string; reports?: readonly PeriodicReportFragment[]; + children?: ReactNode; onRowClick?: (rowData: ReportRow) => void; }) => { const classes = useStyles(); @@ -52,7 +54,11 @@ export const PeriodicReportsList = ({ {reportTypeName} - + {children ? ( + children + ) : ( + + )} ); 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 25fb57b6d1..94275014c6 100644 --- a/src/scenes/Projects/Overview/ProjectOverview.tsx +++ b/src/scenes/Projects/Overview/ProjectOverview.tsx @@ -496,6 +496,10 @@ export const ProjectOverview: FC = () => { projectOverviewData?.project.currentFinancialReportDue } dueNext={projectOverviewData?.project.nextFinancialReportDue} + metRequirement={ + projectOverviewData?.project.financialReports.canRead && + projectOverviewData.project.financialReports.total > 0 + } /> diff --git a/src/scenes/Projects/Reports/ProjectReports.graphql b/src/scenes/Projects/Reports/ProjectReports.graphql index 8f2c766071..c8dc8cee5b 100644 --- a/src/scenes/Projects/Reports/ProjectReports.graphql +++ b/src/scenes/Projects/Reports/ProjectReports.graphql @@ -6,6 +6,9 @@ query NarrativeReports($projectId: ID!, $changeset: ID) { ...PeriodicReport } } + mouRange { + ...securedDateRange + } } } @@ -16,6 +19,10 @@ query FinancialReports($projectId: ID!, $changeset: ID) { items { ...PeriodicReport } + canRead + } + mouRange { + ...securedDateRange } } } diff --git a/src/scenes/Projects/Reports/ProjectReports.tsx b/src/scenes/Projects/Reports/ProjectReports.tsx index 59760bda15..dc4e5c9f5d 100644 --- a/src/scenes/Projects/Reports/ProjectReports.tsx +++ b/src/scenes/Projects/Reports/ProjectReports.tsx @@ -2,8 +2,10 @@ 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 { ProjectOverviewDocument } from '../Overview/ProjectOverview.generated'; import { useProjectId } from '../useProjectId'; import { FinancialReportsDocument, @@ -18,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 ( @@ -36,6 +44,12 @@ export const ProjectReports = ({ type }: { type: ReportType }) => { reports={data?.project.reports.items} breadcrumbs={[]} pageTitleSuffix={data?.project.name.value ?? 'A Project'} + children={ + type === 'Financial' && + projectOverviewData?.project.financialReports.total === 0 ? ( + + ) : null + } /> ); };