Merge pull request #3441 from bcgov/NDT-380-Display-CCBC-Summary-Data…

…-in-Portal

feat: ccbc summary page

CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.184.0](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.183.0...v1.184.0) (2024-08-26)
+
+### Features
+
+- ccbc summary page ([15b83b8](https://github.com/bcgov/CONN-CCBC-portal/commit/15b83b80048b07052e7697011e66fc22491ba7a6))
+- summary highlight communities counts not matching in sow ([450d8b1](https://github.com/bcgov/CONN-CCBC-portal/commit/450d8b1a36d5a6c26be89f2a5f1361d1f1eda951))
+
 # [1.183.0](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.182.2...v1.183.0) (2024-08-22)
 
 ### Features

app/components/Analyst/NavigationSidebar.tsx

@@ -8,6 +8,7 @@ import {
   faClipboardList,
   faClockRotateLeft,
   faEnvelope,
+  faNoteSticky,
 } from '@fortawesome/free-solid-svg-icons';
 import NavItem from './NavItem';
 
@@ -47,6 +48,12 @@ const NavigationSidebar = () => {
           />
         </StyledUpperSection>
         <section>
+          <NavItem
+            currentPath={asPath}
+            href={`/analyst/application/${applicationId}/summary`}
+            icon={faNoteSticky}
+            label="Summary"
+          />
           <NavItem
             currentPath={asPath}
             href={`/analyst/application/${applicationId}`}

app/components/AnalystDashboard/AllDashboard.tsx

@@ -121,7 +121,7 @@ const CcbcIdCell = ({ cell }) => {
     <>
       {linkCbc ? (
         <StyledLink
-          href={`/analyst/${isCbcProject ? 'cbc' : 'application'}/${applicationId}`}
+          href={`/analyst/${isCbcProject ? 'cbc' : 'application'}/${applicationId}${isCbcProject ? '' : '/summary'}`}
         >
           {cell.getValue()}
         </StyledLink>

app/components/Review/ReviewTheme.tsx

@@ -11,6 +11,7 @@ import MoneyWidget from './widgets/MoneyWidget';
 import BooleanWidget from './widgets/BooleanWidget';
 import FileWidget from './widgets/FileWidget';
 import DateWidget from './widgets/DateWidget';
+import LinkArrayWidget from './widgets/LinkArrayWidget';
 
 const { templates } = getDefaultRegistry();
 
@@ -38,6 +39,7 @@ const ReviewTheme: ThemeProps = {
     ReadOnlyProjectAreaWidget: DefaultWidget,
     ReadOnlyProjectAreaWidgetIntakeFour: DefaultWidget,
     DateWidget,
+    LinkArrayWidget,
   },
   templates: {
     ...templates,

app/components/Review/widgets/DateWidget.tsx

@@ -1,8 +1,20 @@
 import { WidgetProps } from '@rjsf/utils';
+import { StyledSourceSpan } from './DefaultWidget';
 
-const DateWidget: React.FC<WidgetProps> = ({ value }) => {
+const DateWidget: React.FC<WidgetProps> = ({ value, formContext, name }) => {
   const date = value?.toString().split('T')[0];
-  return <>{date}</>;
+  return (
+    <>
+      {date}
+      {formContext?.formDataSource?.[name] &&
+        value !== null &&
+        typeof value !== 'undefined' && (
+          <StyledSourceSpan>
+            {` (${formContext.formDataSource?.[name]})`}
+          </StyledSourceSpan>
+        )}
+    </>
+  );
 };
 
 export default DateWidget;

app/components/Review/widgets/DefaultWidget.tsx

@@ -1,7 +1,23 @@
 import { WidgetProps } from '@rjsf/utils';
+import styled from 'styled-components';
 
-const DefaultWidget: React.FC<WidgetProps> = ({ value }) => (
-  <>{value?.toString()}</>
-);
+export const StyledSourceSpan = styled('span')`
+  color: #2e8540;
+`;
+
+const DefaultWidget: React.FC<WidgetProps> = ({ value, formContext, name }) => {
+  return (
+    <>
+      {value?.toString()}
+      {formContext?.formDataSource?.[name] &&
+        value !== null &&
+        typeof value !== 'undefined' && (
+          <StyledSourceSpan>
+            {` (${formContext.formDataSource?.[name]})`}
+          </StyledSourceSpan>
+        )}
+    </>
+  );
+};
 
 export default DefaultWidget;

app/components/Review/widgets/LinkArrayWidget.tsx

@@ -0,0 +1,47 @@
+import { WidgetProps } from '@rjsf/utils';
+import styled from 'styled-components';
+import { StyledSourceSpan } from './DefaultWidget';
+
+const LinkArrayWidget: React.FC<WidgetProps> = ({
+  value,
+  formContext,
+  name,
+}) => {
+  const StyledLink = styled.a`
+    color: ${(props) => props.theme.color.links};
+    text-decoration-line: underline;
+    word-break: break-word;
+    width: fit-content;
+    :hover {
+      cursor: pointer;
+    }
+  `;
+  return (
+    <>
+      {value &&
+        Array.isArray(value) &&
+        value.length > 0 &&
+        value.map((item, index) => (
+          <>
+            <StyledLink
+              href={item.link}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {item.name}
+            </StyledLink>
+            {index < value.length - 1 ? ', ' : ''}
+          </>
+        ))}
+      {formContext?.formDataSource?.[name] &&
+        value !== null &&
+        typeof value !== 'undefined' && (
+          <StyledSourceSpan>
+            {` (${formContext.formDataSource?.[name]})`}
+          </StyledSourceSpan>
+        )}
+    </>
+  );
+};
+
+export default LinkArrayWidget;

app/components/Review/widgets/MoneyWidget.tsx

@@ -1,8 +1,19 @@
 import { WidgetProps } from '@rjsf/utils';
 import formatMoney from 'utils/formatMoney';
+import { StyledSourceSpan } from './DefaultWidget';
 
-const MoneyWidget: React.FC<WidgetProps> = ({ value }) => (
-  <>{formatMoney(value)}</>
+const MoneyWidget: React.FC<WidgetProps> = ({ value, formContext, name }) => (
+  <>
+    {formatMoney(value)}
+    {formContext?.formDataSource?.[name] &&
+      value !== null &&
+      typeof value !== 'undefined' &&
+      !!value && (
+        <StyledSourceSpan>
+          {` (${formContext.formDataSource?.[name]})`}
+        </StyledSourceSpan>
+      )}
+  </>
 );
 
 export default MoneyWidget;

app/formSchema/analyst/summary/counts.ts

@@ -0,0 +1,43 @@
+import { RJSFSchema } from '@rjsf/utils';
+
+const counts: RJSFSchema = {
+  title: 'Counts',
+  description: '',
+  type: 'object',
+  required: [
+    'communities',
+    'benefitingCommunities',
+    'indigenousCommunities',
+    'benefitingIndigenousCommunities',
+    'totalHouseholdsImpacted',
+    'numberOfIndigenousHouseholds',
+  ],
+  properties: {
+    communities: {
+      type: 'number',
+      title: 'Communities',
+    },
+    benefitingCommunities: {
+      type: 'number',
+      title: 'Benefiting Communities',
+    },
+    indigenousCommunities: {
+      type: 'number',
+      title: 'Indigenous Communities',
+    },
+    benefitingIndigenousCommunities: {
+      type: 'number',
+      title: 'Benefiting Indigenous Communities',
+    },
+    totalHouseholdsImpacted: {
+      type: 'number',
+      title: 'Total Households Impacted',
+    },
+    numberOfIndigenousHouseholds: {
+      type: 'number',
+      title: 'Number of Indigenous Households',
+    },
+  },
+};
+
+export default counts;

app/formSchema/analyst/summary/dependency.ts

@@ -0,0 +1,20 @@
+import { RJSFSchema } from '@rjsf/utils';
+
+const dependency: RJSFSchema = {
+  title: 'Dependency',
+  description: '',
+  type: 'object',
+  required: ['connectedCoastNetworkDependent', 'crtcProjectDependent'],
+  properties: {
+    connectedCoastNetworkDependent: {
+      type: 'string',
+      title: 'Connected Coast Network Dependent',
+    },
+    crtcProjectDependent: {
+      type: 'string',
+      title: 'CRTC Project Dependent',
+    },
+  },
+};
+
+export default dependency;

app/formSchema/analyst/summary/eventsAndDates.ts

@@ -0,0 +1,48 @@
+import { RJSFSchema } from '@rjsf/utils';
+
+const eventsAndDates: RJSFSchema = {
+  title: 'Events and Dates',
+  description: '',
+  type: 'object',
+  required: [
+    'announcedByProvince',
+    'dateApplicationReceived',
+    'dateConditionallyApproved',
+    'dateAgreementSigned',
+    'effectiveStartDate',
+    'proposedStartDate',
+    'proposedCompletionDate',
+  ],
+  properties: {
+    announcedByProvince: {
+      type: 'string',
+      title: 'Announced by Province',
+    },
+    dateApplicationReceived: {
+      type: 'string',
+      title: 'Date Application Received',
+    },
+    dateConditionallyApproved: {
+      type: 'string',
+      title: 'Date Conditionally Approved',
+    },
+    dateAgreementSigned: {
+      type: 'string',
+      title: 'Date Agreement Signed',
+    },
+    effectiveStartDate: {
+      type: 'string',
+      title: 'Effective Start Date',
+    },
+    proposedStartDate: {
+      type: 'string',
+      title: 'Proposed Start Date',
+    },
+    proposedCompletionDate: {
+      type: 'string',
+      title: 'Proposed Completion Date',
+    },
+  },
+};
+
+export default eventsAndDates;

app/formSchema/analyst/summary/funding.ts

@@ -0,0 +1,48 @@
+import { RJSFSchema } from '@rjsf/utils';
+
+const funding: RJSFSchema = {
+  title: 'Funding',
+  description: '',
+  type: 'object',
+  required: [
+    'bcFundingRequested',
+    'federalFunding',
+    'applicantAmount',
+    'cibFunding',
+    'fhnaFunding',
+    'otherFunding',
+    'totalProjectBudget',
+  ],
+  properties: {
+    bcFundingRequested: {
+      type: 'number',
+      title: 'BC Funding Requested',
+    },
+    federalFunding: {
+      type: 'number',
+      title: 'Federal Funding',
+    },
+    applicantAmount: {
+      type: 'number',
+      title: 'Applicant Amount',
+    },
+    cibFunding: {
+      type: 'number',
+      title: 'CIB Funding',
+    },
+    fhnaFunding: {
+      type: 'number',
+      title: 'FHNA Funding',
+    },
+    otherFunding: {
+      type: 'number',
+      title: 'Other Funding',
+    },
+    totalProjectBudget: {
+      type: 'number',
+      title: 'Total Project Budget',
+    },
+  },
+};
+
+export default funding;

app/formSchema/analyst/summary/milestone.ts

@@ -0,0 +1,16 @@
+import { RJSFSchema } from '@rjsf/utils';
+
+const milestone: RJSFSchema = {
+  title: 'Milestone',
+  description: '',
+  type: 'object',
+  required: ['percentProjectMilestoneComplete'],
+  properties: {
+    percentProjectMilestoneComplete: {
+      type: 'string',
+      title: 'Project Milestone Complete',
+    },
+  },
+};
+
+export default milestone;