feat: display details of single cbc project

app/backend/lib/excel_import/cbc_project.ts

@@ -19,6 +19,50 @@ const createCbcProjectMutation = `
   }
 `;
 
+const findCbcQuery = `
+  query findCbc($projectNumber: Int!) {
+    cbcByProjectNumber (projectNumber: $projectNumber) {
+      rowId
+      cbcDataByProjectNumber {
+        nodes {
+          jsonData
+          id
+          projectNumber
+          rowId
+          sharepointTimestamp
+        }
+      }
+    }
+  }
+`;
+
+const createCbcMutation = `
+  mutation createCbcMutation($input: CreateCbcInput!) {
+    createCbc(input: $input) {
+      clientMutationId
+      cbc {
+        rowId
+      }
+    }
+  }
+`;
+
+const createCbcDataMutation = `
+  mutation createCbcDataMutation($input: CreateCbcDataInput!) {
+    createCbcData(input: $input) {
+      clientMutationId
+    }
+  }
+`;
+
+const updateCbcDataMutation = `
+mutation updateCbcDataMutation($input: UpdateCbcDataByRowIdInput!) {
+  updateCbcDataByRowId(input: $input) {
+    clientMutationId
+  }
+}
+`;
+
 const cbcErrorList = [];
 
 const readSummary = async (wb, sheet) => {
@@ -55,7 +99,7 @@ const readSummary = async (wb, sheet) => {
 
     const cbcProject = {
       projectNumber: project['A'],
-      orignalProjectNumber: project['B'],
+      originalProjectNumber: project['B'],
       phase: project['C'],
       intake: project['D'],
       projectStatus: project['E'],
@@ -254,6 +298,67 @@ const LoadCbcProjectData = async (wb, sheet, sharepointTimestamp, req) => {
     return { error: [e] };
   });
 
+  // persist into DB individually
+  data._jsonData.forEach(async (project) => {
+    // console.log(project);
+    const findCbcProject = await performQuery(
+      findCbcQuery,
+      {
+        projectNumber: project.projectNumber,
+      },
+      req
+    );
+    if (
+      findCbcProject.data?.cbcByProjectNumber?.cbcDataByProjectNumber?.nodes
+        .length > 0
+    ) {
+      // update cbc data
+      await performQuery(
+        updateCbcDataMutation,
+        {
+          input: {
+            cbcDataPatch: {
+              jsonData: project,
+            },
+            rowId:
+              findCbcProject.data.cbcByProjectNumber.cbcDataByProjectNumber
+                .nodes[0].rowId,
+          },
+        },
+        req
+      );
+    } else {
+      // create cbc
+      const createCbcResult = await performQuery(
+        createCbcMutation,
+        {
+          input: {
+            cbc: {
+              projectNumber: project.projectNumber,
+              sharepointTimestamp,
+            },
+          },
+        },
+        req
+      );
+      // create cbc data
+      await performQuery(
+        createCbcDataMutation,
+        {
+          input: {
+            cbcData: {
+              jsonData: project,
+              projectNumber: project.projectNumber,
+              cbcId: createCbcResult.data.createCbc.cbc.rowId,
+              sharepointTimestamp,
+            },
+          },
+        },
+        req
+      );
+    }
+  });
+
   return {
     ...result,
     errorLog: cbcErrorList,

app/components/Analyst/CBC/AssignField.tsx

@@ -0,0 +1,94 @@
+import { useFeature } from '@growthbook/growthbook-react';
+import { useState } from 'react';
+import { graphql, useFragment } from 'react-relay';
+import { useUpdateCbcDataByRowIdMutation } from 'schema/mutations/cbc/updateCbcData';
+import styled from 'styled-components';
+
+const StyledDropdown = styled.select`
+  text-overflow: ellipsis;
+  color: ${(props) => props.theme.color.links};
+  background-color: ${(props) => props.theme.color.white};
+  border: 1px solid ${(props) => props.theme.color.borderGrey};
+  padding: 0 8px;
+  max-width: 100%;
+  border-radius: 4px;
+`;
+
+const AssignField = ({ fieldName, fieldOptions, fieldType, cbc }) => {
+  const queryFragment = useFragment(
+    graphql`
+      fragment AssignField_query on Cbc {
+        cbcDataByCbcId {
+          edges {
+            node {
+              jsonData
+              sharepointTimestamp
+              rowId
+              projectNumber
+              updatedAt
+              updatedBy
+            }
+          }
+        }
+      }
+    `,
+    cbc
+  );
+  const { jsonData } = queryFragment.cbcDataByCbcId.edges[0].node;
+
+  const [updateField] = useUpdateCbcDataByRowIdMutation();
+  const [fieldValue, setFieldValue] = useState(
+    fieldType === 'string'
+      ? jsonData[fieldName].toString() || null
+      : jsonData[fieldName] || null
+  );
+
+  const allowEdit = useFeature('show_cbc_edit').value ?? false;
+
+  const handleChange = (e) => {
+    const { rowId } = queryFragment.cbcDataByCbcId.edges[0].node;
+    updateField({
+      variables: {
+        input: {
+          rowId,
+          cbcDataPatch: {
+            jsonData: {
+              ...jsonData,
+              [fieldName]:
+                fieldType === 'number'
+                  ? parseInt(e.target.value, 10)
+                  : e.target.value,
+            },
+          },
+        },
+      },
+      onCompleted: () => {
+        setFieldValue(e.target.value);
+      },
+      debounceKey: 'cbc_assign_field',
+    });
+  };
+
+  return (
+    <StyledDropdown
+      id={`assign-${fieldName}`}
+      onChange={(e) => handleChange(e)}
+      data-testid={`assign-${fieldName}`}
+    >
+      {fieldOptions.map((option) => {
+        return (
+          <option
+            key={option}
+            value={option}
+            selected={fieldValue === option}
+            disabled={!allowEdit}
+          >
+            {option}
+          </option>
+        );
+      })}
+    </StyledDropdown>
+  );
+};
+
+export default AssignField;

app/components/Analyst/CBC/CbcAnalystLayout.tsx

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import { graphql, useFragment } from 'react-relay';
+import FormDiv from 'components/FormDiv';
+import NavigationSidebar from './NavigationSidebar';
+import CbcHeader from './CbcHeader';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  width: 100%;
+`;
+
+const StyledFlex = styled.div`
+  display: flex;
+`;
+
+const StyledFormDiv = styled(FormDiv)`
+  max-width: 100%;
+`;
+
+interface Props {
+  children: JSX.Element[] | JSX.Element;
+  query: any;
+}
+
+const CbcAnalystLayout: React.FC<Props> = ({ children, query }) => {
+  const queryFragment = useFragment(
+    graphql`
+      fragment CbcAnalystLayout_query on Query {
+        ...CbcHeader_query
+      }
+    `,
+    query
+  );
+  return (
+    <StyledContainer>
+      <CbcHeader query={queryFragment} />
+      <StyledFlex>
+        <NavigationSidebar />
+        <StyledFormDiv>{children}</StyledFormDiv>
+      </StyledFlex>
+    </StyledContainer>
+  );
+};
+
+export default CbcAnalystLayout;