From 90b6019d704f52d73e5fde5f13586d77846f6a18 Mon Sep 17 00:00:00 2001
From: Craig Yu <craig.yu93@gmail.com>
Date: Tue, 13 Jun 2023 14:36:20 -0700
Subject: [PATCH] Feat/Parent tree step foundation (#182)

* fix: add prevent duplicate logic to orcahrd step

* fix: remove prevent duplicate orchard id logic

* fix: modularize things

* fix: add root to dockerfile dev

* feat: add DescriptionBox component

* feat: adjust description box styling

* fix: update carbon version

* fix: test link in notification box

* fix: remove !import for grid and refactor related code

* feat: add padding to page bottom

* fix: change where padding bottom is added

* feat: add btn text and icon customization feat to submit modal

* fix: update snapshot

* fix: add end of file lines

* fix: fix collection start date col size

* feat: add proper style to tab list

* feat: complete notification box

* feat: add placeholder component for other 2 tabs

* feat: dynamically switching description & notification

* feat: add merge orchards logic

* feat: add error notification table

* feat: fetch data for parent tree genetic quality

* feat: adding constants

* feat: add dynamic table header

* feat: implement table row rendering

* fix: update data storing logic

* feat: link state to parent component

* fix: update css

* feat: clean table when orchard changes

* feat: add tooltip and input to tables

* feat: add table col toggling

* fix: lint update

* fix: update node package

* Revert "fix: update node package"

This reverts commit 0191a6114568bf8061cc9843034d00b7d2678d2d.

* fix: change h1 to h2 for description box

* fix: upgrade webpack and ts-checked-plugin

* fix: specify text type for description-box

* fix: fix typo renderTableCell

* fix: get rid of silly text

---------

Co-authored-by: Derek Roberts <derek.roberts@gmail.com>
Co-authored-by: Ricardo Campos <ricardo.campos@encora.com>
---
 frontend/src/api-service/ApiConfig.ts         |   6 +-
 frontend/src/api-service/orchardAPI.ts        |  12 +-
 .../src/components/DescriptionBox/index.tsx   |   7 +-
 .../src/components/DescriptionBox/styles.scss |   6 +-
 frontend/src/components/FormReview/index.tsx  |   6 +-
 .../OrchardStep/index.tsx                     |  16 +-
 .../Tabs/ConeAndPollen/constants.tsx          |  20 -
 .../Tabs/ConeAndPollen/index.tsx              |  47 --
 .../ParentTreeStep/Tabs/styles.scss           |  20 -
 .../UploadFileModal/constants.ts              |  21 +
 .../ParentTreeStep/UploadFileModal/index.tsx  |  28 +-
 .../ParentTreeStep/constants.tsx              | 545 +++++++++---------
 .../ParentTreeStep/definitions.ts             |  80 ++-
 .../ParentTreeStep/index.tsx                  | 438 ++++++++++++--
 .../ParentTreeStep/styles.scss                |  88 +++
 .../ParentTreeStep/utils.ts                   |  38 ++
 frontend/src/theme/components-overrides.scss  |  21 +-
 .../src/types/ParentTreeGeneticQualityType.ts |  34 ++
 .../SeedlotRegistrationForm/definitions.ts    |   8 +-
 .../Seedlot/SeedlotRegistrationForm/index.tsx |  13 +-
 .../Seedlot/SeedlotRegistrationForm/utils.ts  |  14 +-
 21 files changed, 1010 insertions(+), 458 deletions(-)
 delete mode 100644 frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/Tabs/ConeAndPollen/constants.tsx
 delete mode 100644 frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/Tabs/ConeAndPollen/index.tsx
 delete mode 100644 frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/Tabs/styles.scss
 create mode 100644 frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/UploadFileModal/constants.ts
 create mode 100644 frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/utils.ts
 create mode 100644 frontend/src/types/ParentTreeGeneticQualityType.ts

diff --git a/frontend/src/api-service/ApiConfig.ts b/frontend/src/api-service/ApiConfig.ts
index e25913c6d..13a369212 100644
--- a/frontend/src/api-service/ApiConfig.ts
+++ b/frontend/src/api-service/ApiConfig.ts
@@ -33,6 +33,8 @@ const ApiConfig = {
 
   paymentMethod: `${serverHost}/api/payment-methods`,
 
+  orchardSeedPlan: `${serverHost}/api/orchards`,
+
   /**
    * ORACLE API
    */
@@ -40,7 +42,9 @@ const ApiConfig = {
 
   fundingSource: `${oracleServerHost}/api/funding-sources`,
 
-  orchard: `${oracleServerHost}/api/orchards`
+  orchard: `${oracleServerHost}/api/orchards`,
+
+  parentTreeGeneticQuality: `${oracleServerHost}/api/orchards/parent-tree-genetic-quality`
 };
 
 export default ApiConfig;
diff --git a/frontend/src/api-service/orchardAPI.ts b/frontend/src/api-service/orchardAPI.ts
index 69df2b07b..a0020e533 100644
--- a/frontend/src/api-service/orchardAPI.ts
+++ b/frontend/src/api-service/orchardAPI.ts
@@ -1,9 +1,17 @@
 import ApiConfig from './ApiConfig';
 import api from './api';
 
-const getOrchardByID = (orchardID: string) => {
+export const getOrchardByID = (orchardID: string) => {
   const url = `${ApiConfig.orchard}/${orchardID}`;
   return api.get(url).then((res) => res.data);
 };
 
-export default getOrchardByID;
+export const getSeedPlanUnits = (orchardID: string) => {
+  const url = `${ApiConfig.orchardSeedPlan}/${orchardID}/seed-plan-units?active=true`;
+  return api.get(url).then((res) => res.data);
+};
+
+export const getParentTreeGeneQuali = (orchardID: string, spu: string) => {
+  const url = `${ApiConfig.parentTreeGeneticQuality}/${orchardID}/${spu}`;
+  return api.get(url).then((res) => res.data);
+};
diff --git a/frontend/src/components/DescriptionBox/index.tsx b/frontend/src/components/DescriptionBox/index.tsx
index 9da541ce5..bf2d3afd2 100644
--- a/frontend/src/components/DescriptionBox/index.tsx
+++ b/frontend/src/components/DescriptionBox/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Column } from '@carbon/react';
 import './styles.scss';
 
 type DescriptionBoxProps = {
@@ -13,10 +12,10 @@ const DescriptionBox = (
     description
   }: DescriptionBoxProps
 ) => (
-  <Column className="description-box-container" sm={4} md={8} lg={8} xlg={8}>
-    <h1 className="description-box-header">{header}</h1>
+  <div className="description-box-container">
+    <h3 className="description-box-header">{header}</h3>
     <div className="description-box-description">{description}</div>
-  </Column>
+  </div>
 );
 
 export default DescriptionBox;
diff --git a/frontend/src/components/DescriptionBox/styles.scss b/frontend/src/components/DescriptionBox/styles.scss
index 3cbe38971..814147bc0 100644
--- a/frontend/src/components/DescriptionBox/styles.scss
+++ b/frontend/src/components/DescriptionBox/styles.scss
@@ -1,15 +1,17 @@
+@use '@carbon/type';
 @use '../../theme/variables.scss' as vars;
 
 .description-box-container{
+  width: 100%;
 
   .description-box-header{
+    @include type.type-style('heading-03');
     color: var(--#{vars.$bcgov-prefix}-text-primary);
-    font-size: 1.25rem;
   }
 
   .description-box-description{
+    @include type.type-style('body-01');
     color: var(--#{vars.$bcgov-prefix}-text-secondary);
-    font-size: 0.875rem;
     margin-top: 0.5rem;
 
     a{
diff --git a/frontend/src/components/FormReview/index.tsx b/frontend/src/components/FormReview/index.tsx
index 46d49add1..902532d2c 100644
--- a/frontend/src/components/FormReview/index.tsx
+++ b/frontend/src/components/FormReview/index.tsx
@@ -148,7 +148,10 @@ const FormReview = () => {
     orchardStep: orchardMock,
     collectionStep: collectionMock,
     extractionStorageStep: extractionMock,
-    parentTreeStep: {}
+    parentTreeStep: {
+      tableRowData: {},
+      notifCtrl: {}
+    }
   });
 
   return (
@@ -267,6 +270,7 @@ const FormReview = () => {
                       state={allStepData.orchardStep}
                       setStepData={() => { }}
                       readOnly
+                      cleanParentTables={() => { }}
                     />
                     <Button
                       kind="tertiary"
diff --git a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx
index fdb4f35d5..edcf4ea79 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx
+++ b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx
@@ -22,7 +22,7 @@ import Subtitle from '../../Subtitle';
 import { OrchardForm, OrchardObj } from './definitions';
 import { MAX_ORCHARDS } from './constants';
 
-import getOrchardByID from '../../../api-service/orchardAPI';
+import { getOrchardByID } from '../../../api-service/orchardAPI';
 import { filterInput, FilterObj } from '../../../utils/filterUtils';
 
 import FemaleGameticOptions from './data';
@@ -40,12 +40,13 @@ type NumStepperVal = {
 interface OrchardStepProps {
   seedlotSpecies: DropDownObj
   state: OrchardForm
-  setStepData: Function
+  setStepData: Function,
+  cleanParentTables: Function,
   readOnly?: boolean
 }
 
 const OrchardStep = ({
-  seedlotSpecies, state, setStepData, readOnly
+  seedlotSpecies, state, setStepData, cleanParentTables, readOnly
 }: OrchardStepProps) => {
   const queryClient = useQueryClient();
   const [isPLISpecies] = useState<boolean>(seedlotSpecies.code === 'PLI');
@@ -86,10 +87,10 @@ const OrchardStep = ({
   // Set orchard name by input id, if data is not present then clear orcahrd name
   const setOrchardName = (inputId: number, data?: OrchardDataType) => {
     const newOrchards = [...state.orchards];
-    /*
-      * It is safe to replace item in array by index here
-      * since the array is not mutable at this stage
-    */
+    /**
+     * It is safe to replace item in array by index here
+     * since the array is not mutable at this stage
+     */
     const replaceIndex = newOrchards.findIndex((orchard) => orchard.inputId === inputId);
     if (data?.name && data.vegetationCode && data.stageCode) {
       newOrchards[replaceIndex].orchardLabel = `${data.name} - ${data.vegetationCode} - ${data.stageCode}`;
@@ -117,6 +118,7 @@ const OrchardStep = ({
   });
 
   const fetchOrchardInfo = (orchardId: string, inputId: number) => {
+    cleanParentTables();
     // Copy orchards from state
     const newOrchards = [...state.orchards];
     // Replace input value with id
diff --git a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/Tabs/ConeAndPollen/constants.tsx b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/Tabs/ConeAndPollen/constants.tsx
deleted file mode 100644
index 3a8ae17c2..000000000
--- a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/Tabs/ConeAndPollen/constants.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-const tabDescription = (
-  <>
-    {
-      'Enter the cone and pollen count manually or upload a spreadsheet file with the template for the cone and pollen count table. '
-      + 'Remember to keep your orchard updated, you can '
-    }
-    <Link to="#TODO">go to orchard&apos;s management page</Link>
-    &nbsp;to edit the listed parent trees in your orchard.
-  </>
-);
-
-const textConfig = {
-  tabTitle: 'Cone and pollen count',
-  tabDescription
-};
-
-export default textConfig;
diff --git a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/Tabs/ConeAndPollen/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/Tabs/ConeAndPollen/index.tsx
deleted file mode 100644
index cc6507e25..000000000
--- a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/Tabs/ConeAndPollen/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import React from 'react';
-import {
-  FlexGrid,
-  Row,
-  InlineNotification
-} from '@carbon/react';
-import { Link } from 'react-router-dom';
-import Subtitle from '../../../../Subtitle';
-import DropDownObj from '../../../../../types/DropDownObject';
-import { pageTexts } from '../../constants';
-import textConfig from './constants';
-import DescriptionBox from '../../../../DescriptionBox';
-
-import '../styles.scss';
-
-type ConeAndPollenProps = {
-  seedlotSpecies: DropDownObj
-}
-
-const ConeAndPollen = ({
-  seedlotSpecies
-}: ConeAndPollenProps) => {
-  const a = '';
-  return (
-    <FlexGrid className="parent-tree-tab-container">
-      <Row className="title-row">
-        <DescriptionBox header={textConfig.tabTitle} description={textConfig.tabDescription} />
-      </Row>
-      <Row className="notification-row">
-        <InlineNotification
-          lowContrast
-          kind="info"
-          aria-label={pageTexts.sharedTabTexts.notification.actionButtonLabel}
-          title={pageTexts.sharedTabTexts.notification.title}
-        >
-          <span>
-            Subtitle text goes here.
-            <span>hihiihi</span>
-          </span>
-        </InlineNotification>
-      </Row>
-    </FlexGrid>
-  );
-};
-
-export default ConeAndPollen;
diff --git a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/Tabs/styles.scss b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/Tabs/styles.scss
deleted file mode 100644
index 845ec070a..000000000
--- a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/Tabs/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@use '@carbon/type';
-@use '../../../../theme/variables.scss' as vars;
-
-.parent-tree-tab-container{
-
-  padding: 1rem;
-
-  .#{vars.$bcgov-prefix}--inline-notification {
-    max-width: 100%;
-  }
-
-  .#{vars.$bcgov-prefix}--inline-notification__text-wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .#{vars.$bcgov-prefix}--inline-notification__title {
-    font-weight: 700;
-  }
-}
diff --git a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/UploadFileModal/constants.ts b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/UploadFileModal/constants.ts
new file mode 100644
index 000000000..6ba214441
--- /dev/null
+++ b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/UploadFileModal/constants.ts
@@ -0,0 +1,21 @@
+const textConfig = {
+  title: 'Upload from file',
+  label: 'Seedlot registration',
+  description: 'Select the spreadsheet file for the cone and pollen count table with the data you want to import. The supported file format is .csv.',
+  uploadFile: 'Click to upload or drag and drop the file here',
+  uploadedFileErrorSize: 'File size exceeds limit',
+  uploadedFileErrorType: 'Incorrect file format',
+  uploadedFileErrorMessageSize: '500kb max file size. Select a new file and try again.',
+  uploadedFileErrorMessageType: 'Only CSV files are supported. Select a new file and try again.',
+  uploadedFileIconDesc: 'Delete file',
+  notification: {
+    title: 'Note:',
+    description: 'When uploading a file all previously filled data within the table will be replaced'
+  },
+  buttons: {
+    cancel: 'Cancel',
+    confirm: 'Import file and continue'
+  }
+};
+
+export default textConfig;
diff --git a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/UploadFileModal/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/UploadFileModal/index.tsx
index 08fff45de..80ccc7b24 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/UploadFileModal/index.tsx
+++ b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/UploadFileModal/index.tsx
@@ -6,7 +6,7 @@ import {
   FileUploaderItem
 } from '@carbon/react';
 
-import { pageTexts } from '../constants';
+import textConfig from './constants';
 
 import './styles.scss';
 
@@ -36,10 +36,10 @@ const UploadFileModal = ({ open, setOpen, onSubmit }: UploadFileModalProps) => {
   return (
     <Modal
       className="upload-file-modal"
-      modalLabel={pageTexts.sharedTabTexts.modal.label}
-      modalHeading={pageTexts.sharedTabTexts.modal.title}
-      primaryButtonText={pageTexts.sharedTabTexts.modal.buttons.confirm}
-      secondaryButtonText={pageTexts.sharedTabTexts.modal.buttons.cancel}
+      modalLabel={textConfig.label}
+      modalHeading={textConfig.title}
+      primaryButtonText={textConfig.buttons.confirm}
+      secondaryButtonText={textConfig.buttons.cancel}
       open={open}
       onRequestClose={() => {
         setOpen(false);
@@ -54,11 +54,11 @@ const UploadFileModal = ({ open, setOpen, onSubmit }: UploadFileModalProps) => {
       size="sm"
     >
       <p className="upload-modal-description">
-        {pageTexts.sharedTabTexts.modal.description}
+        {textConfig.description}
       </p>
       <FileUploaderDropContainer
         className="upload-file-component"
-        labelText={pageTexts.sharedTabTexts.modal.uploadFile}
+        labelText={textConfig.uploadFile}
         accept={['.csv']}
         onAddFiles={
           (e: React.ChangeEvent<HTMLInputElement>, { addedFiles }: any) => {
@@ -67,11 +67,11 @@ const UploadFileModal = ({ open, setOpen, onSubmit }: UploadFileModalProps) => {
             setFileAdded(true);
             setFileName(fileToUpload.name);
             if (fileToUpload.type !== 'text/csv') {
-              setErrorSub(pageTexts.sharedTabTexts.modal.uploadedFileErrorType);
-              setErrorMessage(pageTexts.sharedTabTexts.modal.uploadedFileErrorMessageType);
+              setErrorSub(textConfig.uploadedFileErrorType);
+              setErrorMessage(textConfig.uploadedFileErrorMessageType);
             } else if (fileToUpload.filesize > 512000) {
-              setErrorSub(pageTexts.sharedTabTexts.modal.uploadedFileErrorSize);
-              setErrorMessage(pageTexts.sharedTabTexts.modal.uploadedFileErrorMessageSize);
+              setErrorSub(textConfig.uploadedFileErrorSize);
+              setErrorMessage(textConfig.uploadedFileErrorMessageSize);
             } else {
               setInvalidFile(false);
               setFile(fileToUpload);
@@ -86,7 +86,7 @@ const UploadFileModal = ({ open, setOpen, onSubmit }: UploadFileModalProps) => {
           errorSubject={errorSub}
           errorBody={errorMessage}
           invalid={invalidFile}
-          iconDescription={pageTexts.sharedTabTexts.modal.uploadedFileIconDesc}
+          iconDescription={textConfig.uploadedFileIconDesc}
           status={uploaderStatus}
           onDelete={() => resetUploadStatus()}
         />
@@ -96,8 +96,8 @@ const UploadFileModal = ({ open, setOpen, onSubmit }: UploadFileModalProps) => {
         hideCloseButton
         lowContrast
         kind="info"
-        title={pageTexts.sharedTabTexts.modal.notification.title}
-        subtitle={pageTexts.sharedTabTexts.modal.notification.description}
+        title={textConfig.notification.title}
+        subtitle={textConfig.notification.description}
       />
     </Modal>
   );
diff --git a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/constants.tsx b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/constants.tsx
index 1fc77e785..10a9f1ac8 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/constants.tsx
+++ b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/constants.tsx
@@ -1,305 +1,332 @@
-import { SMPMixEntriesType } from '../../../types/SeedlotTypes/ParentTree';
-import { TableHeaders, ParentTreesType, SMPSuccessFixedFiltersType } from './definitions';
+/* eslint-disable max-len */
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {
+  HeaderObj, RowItem, NotifCtrlType, GeneticWorthDictType
+} from './definitions';
 
-export const DEFAULT_INITIAL_ROWS = 20;
-export const PAGINATION_OPTIONS = [20, 40, 60, 80, 100];
+// Placeholder function to generate download URL for future
+const getDownloadUrl = (tabType: string) => `#TODO-${tabType.split(' ')[0]}`;
 
-export const pageTexts = {
-  tabTitles: {
-    coneTab: 'Cone and pollen count',
-    smpTab: 'SMP success on parent',
-    mixTab: 'Calculation of SMP mix'
-  },
-  sharedTabTexts: {
-    notification: {
-      title: 'Upload spreadsheet to table',
-      actionButtonLabel: 'Close notification'
-    },
-    geneticWorth: {
-      title: 'Genetic worth and diversity',
-      subtitle: 'Check the genetic worth and diversity of your seedlot',
-      defaultFieldsLabels: {
-        populationSize: 'Effective population size (Ne)',
-        testedParentTree: 'Tested parent tree contribution (%)',
-        coancestry: 'Coancestry (Sum PiPj * Cij)',
-        smpParents: 'Number of SMP parents from outside'
-      }
-    },
-    modal: {
-      title: 'Upload from file',
-      label: 'Seedlot registration',
-      description: 'Select the spreadsheet file for the cone and pollen count table with the data you want to import. The supported file format is .csv.',
-      uploadFile: 'Click to upload or drag and drop the file here',
-      uploadedFileErrorSize: 'File size exceeds limit',
-      uploadedFileErrorType: 'Incorrect file format',
-      uploadedFileErrorMessageSize: '500kb max file size. Select a new file and try again.',
-      uploadedFileErrorMessageType: 'Only CSV files are supported. Select a new file and try again.',
-      uploadedFileIconDesc: 'Delete file',
-      notification: {
-        title: 'Note:',
-        description: 'When uploading a file all previously filled data within the table will be replaced'
-      },
-      buttons: {
-        cancel: 'Cancel',
-        confirm: 'Import file and continue'
-      }
-    },
-    overflowMenus: {
-      columnsOverflow: 'Show/Hide columns',
-      breedingValues: 'Show breeding values',
-      smpMixUsed: 'Show SMP mix used on parent',
-      clonalValue: 'Show clonal value',
-      weightedValue: 'Show weighted value',
-      optionsOverflow: 'More options',
-      downloadTable: 'Download table template',
-      exportPdf: 'Export table as PDF file',
-      cleanTable: 'Clean table data'
-    },
-    uploadButtonLabel: 'Upload from file',
-    uploadButtonIconDesc: 'Upload file',
-    tableInputPlaceholder: 'Add value',
-    pagination: {
-      previous: 'Previous page',
-      next: 'Next page',
-      pageNumber: 'Page Number'
+const getTabDescription = (tabType: string) => (
+  <>
+    {
+      `Enter the ${tabType} manually or upload a spreadsheet file with the template for the ${tabType} table. `
+      + 'Remember to keep your orchard updated, you can '
     }
-  },
-  coneAndPollen: {
-    subtitle: 'Enter the cone and pollen count manually or upload a spreadsheet file with the template for the cone and pollen count table. Remember to keep your orchard updated, you can go to orchard\'s management page to edit the listed parent trees in your orchard.',
-    tableSubtitle: 'Enter the estimative of cone and pollen count for the orchard\'s seedlot (*required)',
-    notification: {
-      subtitle: 'You can import one spreadsheet file for the cone and pollen count table with the data you want to use. For further guidance on how to organize the data, do use the SPAR\'s spreadsheet template.',
-      templateLink: 'Download cone and pollen count template'
-    },
-    summary: {
-      title: 'Summary',
-      subtitle: 'Check the parent tree contribution summary',
-      fieldLabels: {
-        totalParentTrees: 'Total number of parent trees',
-        totalConeCount: 'Total number of cone count',
-        totalPollenCount: 'Total number of pollen count',
-        averageSMP: 'Average number of SMP success %'
-      }
+    <Link to="#TODO-orchard-management-link">go to orchard&apos;s management page</Link>
+    &nbsp;to edit the listed parent trees in your orchard.
+  </>
+);
+
+const getNotificationSubtitle = (tabType: string) => (
+  <>
+    {
+      `You can import one spreadsheet file for the ${tabType} table with the data you want to use. `
     }
-  },
-  smpSuccess: {
-    subtitle: 'Enter the SMP success on parent manually or upload a spreadsheet file with the template for the cone and pollen count table. Remember to keep your orchard updated, you can go to orchard\'s management page to edit the listed parent trees in your orchard.',
-    tableSubtitle: 'Enter the estimative of SMP success for the orchard\'s seedlot',
-    notification: {
-      subtitle: 'You can import one spreadsheet file for the SMP success on parent table with the data you want to use. For further guidance on how to organize the data, do use the SPAR\'s spreadsheet template.',
-      templateLink: 'Download SMP success on parent template'
-    },
-    bulkCheckboxLabel: 'Enter the same SMP success on parent or Non-orchard pollen contaminant to all parent trees',
-    bulkSuccessInputLabel: 'SMP Success on parent (%)',
-    bulkNonOrchardInputLabel: 'Non-orchard pollen contaminant (%)',
-    summary: {
-      title: 'Summary',
-      subtitle: 'Check the SMP success on parent summary',
-      fieldLabels: {
-        totalParentTrees: 'Total number of parent trees',
-        averageSMPSuccess: 'Average number of SMP success %',
-        averageNonOrchard: 'Average number of non-orchard pollen contam. (%)'
-      }
+    <br />
+    {
+      'For further guidance on how to organize the data, '
+      + "do use the SPAR's spreadsheet template. "
     }
+    <Link className="notification-link" to={getDownloadUrl(tabType)}>{`Download ${tabType} template`}</Link>
+  </>
+);
+
+const errorDescription = (
+  <>
+    To see your orchard&apos;s composition, you must first fill the orchard id field in the previous step, “Orchard”.
+    <br />
+    Please, fill the orchard ID to complete the cone and pollen table.
+  </>
+);
+
+export const getPageText = () => ({
+  notificationTitle: 'Upload spreadsheet to table',
+  errorNotifTitle: 'No orchard ID linked yet!',
+  errorDescription,
+  coneTab: {
+    tabTitle: 'Cone and pollen count',
+    tabDescription: getTabDescription('cone and pollen count'),
+    notificationSubtitle: getNotificationSubtitle('cone and pollen count'),
+    tableDescription: "Enter the estimative of cone and pollen count for the orchard's seedlot (*required)"
   },
-  smpMix: {
-    subtitle: 'Enter the calculation of SMP mix manually or upload a spreadsheet file with the template for the cone and pollen count table. Remember to keep your orchard updated, you can go to orchard\'s management page to edit the listed parent trees in your orchard.',
-    tableSubtitle: 'Enter the estimative volume of SMP mix used for each clone',
-    tableActions: 'Actions',
-    addButtonDesc: 'Add row',
-    deleteRow: 'Delete row',
-    clonalHeader: '- Clonal value',
-    weightedHeader: '- Weighted value',
-    notification: {
-      subtitle: 'You can import one spreadsheet file for calculation of SMP mix table with the data you want to use. For further guidance on how to organize the data, do use the SPAR\'s spreadsheet template.',
-      templateLink: 'Download calculation of SMP mix template'
-    },
-    summary: {
-      title: 'Breeding value SMP mix used',
-      subtitle: 'Check the breeding value of SMP mix used on parent',
-      fieldLabels: {
-        smpParentTrees: 'Number of SMP parents from outside',
-        totalVolume: 'Total volume (ml)'
-      }
-    }
+  successTab: {
+    tabTitle: 'SMP success on parent',
+    tabDescription: getTabDescription('SMP success on parent'),
+    notificationSubtitle: getNotificationSubtitle('SMP success on parent'),
+    tableDescription: "Enter the estimative of SMP success for the orchard's seedlot"
+  },
+  mixTab: {
+    tabTitle: 'Calculation of SMP mix',
+    tabDescription: getTabDescription('calculation of SMP mix'),
+    notificationSubtitle: getNotificationSubtitle('calculation of SMP mix'),
+    tableDescription: 'Enter the estimative volume of SMP mix used for each clone'
   }
-};
+});
 
-export const geneticTraits = {
-  ad: {
-    code: 'ad',
-    description: 'Genetic worth AD',
-    filterLabel: 'Deer browse (AD)'
+export const notificationCtrlObj: NotifCtrlType = {
+  coneTab: {
+    showInfo: true,
+    showError: true
   },
-  dfs: {
-    code: 'dfs',
-    description: 'Genetic worth DFS',
-    filterLabel: 'Dothistroma needle blight (DFS)'
+  successTab: {
+    showInfo: true,
+    showError: true
   },
-  dfu: {
-    code: 'dfu',
-    description: 'Genetic worth DFU',
-    filterLabel: 'Cedar leaf blight (DFU)'
-  },
-  dfw: {
-    code: 'dfw',
-    description: 'Genetic worth DFW',
-    filterLabel: 'Swiss needle cast (DFW)'
+  mixTab: {
+    showInfo: true,
+    showError: true
+  }
+};
+
+export const geneticWorthDict: GeneticWorthDictType = {
+  CW: ['ad', 'dfu', 'gvo', 'wdu'],
+  PLI: ['dfs', 'dsc', 'dsg', 'gvo'],
+  FDC: ['dfw', 'gvo', 'wwd'],
+  PW: ['dsb'],
+  DR: ['gvo'],
+  EP: ['gvo'],
+  FDI: ['gvo'],
+  HW: ['gvo'],
+  LW: ['gvo'],
+  PY: ['gvo'],
+  SS: ['gvo', 'iws'],
+  SX: ['gvo', 'iws']
+};
+
+export const rowTemplate: RowItem = {
+  cloneNumber: '',
+  cloneCount: null,
+  pollenCount: null,
+  smpSuccessPerc: null,
+  ad: null,
+  dfs: null,
+  dfu: null,
+  dfw: null,
+  dsb: null,
+  dsc: null,
+  dsg: null,
+  gvo: null,
+  iws: null,
+  wdu: null,
+  wwd: null,
+  nonOrchardPollenContam: null,
+  meanDegLat: null,
+  meanMinLat: null,
+  meanDegLong: null,
+  meanMinLong: null,
+  meanElevation: null,
+  volume: null,
+  proportion: null
+};
+
+export const headerTemplate: Array<HeaderObj> = [
+  {
+    id: 'cloneNumber',
+    name: 'Clone number',
+    description: 'Clone number',
+    enabled: true,
+    editable: false,
+    isAnOption: false,
+    availableInTabs: ['coneTab', 'successTab', 'mixTab']
   },
-  dsb: {
-    code: 'dsb',
-    description: 'Genetic worth DSB',
-    filterLabel: 'White pine blister rust (DSB)'
+  {
+    id: 'cloneCount',
+    name: 'Cone count',
+    description: 'Cone count',
+    enabled: true,
+    editable: true,
+    isAnOption: false,
+    availableInTabs: ['coneTab']
   },
-  dsc: {
-    code: 'dsc',
-    description: 'Genetic worth DSC',
-    filterLabel: 'Comandra blister rust (DSC)'
+  {
+    id: 'pollenCount',
+    name: 'Pollen count',
+    description: 'Pollen count',
+    enabled: true,
+    editable: true,
+    isAnOption: false,
+    availableInTabs: ['coneTab']
   },
-  dsg: {
-    code: 'dsg',
-    description: 'Genetic worth DSG',
-    filterLabel: 'Western gall rust (DSG)'
+  {
+    id: 'smpSuccessPerc',
+    name: 'SMP success on parent (%)',
+    description: 'SMP success on parent (%)',
+    enabled: true,
+    editable: true,
+    isAnOption: false,
+    availableInTabs: ['coneTab', 'successTab']
   },
-  gvo: {
-    code: 'gvo',
-    description: 'Genetic worth GVO',
-    filterLabel: 'Volume growth (GVO)'
+  {
+    id: 'ad',
+    name: 'AD',
+    description: 'Animal browse resistance (deer)',
+    enabled: false,
+    editable: false,
+    isAnOption: false,
+    availableInTabs: ['coneTab', 'successTab', 'mixTab']
   },
-  iws: {
-    code: 'iws',
-    description: 'Genetic worth IWS',
-    filterLabel: 'White pine terminal weevil (IWS)'
+  {
+    id: 'dfs',
+    name: 'DFS',
+    description: 'Disease resistance for Dothistroma needle blight',
+    enabled: false,
+    editable: false,
+    isAnOption: false,
+    availableInTabs: ['coneTab', 'successTab', 'mixTab']
   },
-  wdu: {
-    code: 'wdu',
-    description: 'Genetic worth WDU',
-    filterLabel: 'Durability (WDU)'
+  {
+    id: 'dfu',
+    name: 'DFU',
+    description: 'Disease resistance for Redcedar leaf blight',
+    enabled: false,
+    editable: false,
+    isAnOption: false,
+    availableInTabs: ['coneTab', 'successTab', 'mixTab']
   },
-  wwd: {
-    code: 'wwd',
-    description: 'Genetic worth WWD',
-    filterLabel: 'Wood density (WWD)'
+  {
+    id: 'dfw',
+    name: 'DFW',
+    description: 'Disease resistance Swiss needle cast',
+    enabled: false,
+    editable: false,
+    isAnOption: false,
+    availableInTabs: ['coneTab', 'successTab', 'mixTab']
   },
-  wve: {
-    code: 'wve',
-    description: 'Genetic worth WVE',
-    filterLabel: 'Wood velocity measures (WVE)'
-  }
-};
-
-export const coneAndPollenFixedHeaders:Array<TableHeaders> = [
   {
-    key: '1',
-    header: 'Clone number'
+    id: 'dsb',
+    name: 'DSB',
+    description: 'Disease resistance for white pine blister rust',
+    enabled: false,
+    editable: false,
+    isAnOption: false,
+    availableInTabs: ['coneTab', 'successTab', 'mixTab']
   },
   {
-    key: '2',
-    header: 'Cone count'
+    id: 'dsc',
+    name: 'DSC',
+    description: 'Disease resistance for Commandra blister rust',
+    enabled: false,
+    editable: false,
+    isAnOption: false,
+    availableInTabs: ['coneTab', 'successTab', 'mixTab']
   },
   {
-    key: '3',
-    header: 'Pollen count'
+    id: 'dsg',
+    name: 'DSG',
+    description: 'Disease resistance Western gall rust',
+    enabled: false,
+    editable: false,
+    isAnOption: false,
+    availableInTabs: ['coneTab', 'successTab', 'mixTab']
   },
   {
-    key: '4',
-    header: 'SMP success (%)'
-  }
-];
-
-export const smpSuccessFixedHeaders:Array<TableHeaders> = [
+    id: 'gvo',
+    name: 'GVO',
+    description: 'Volume growth',
+    enabled: false,
+    editable: false,
+    isAnOption: false,
+    availableInTabs: ['coneTab', 'successTab', 'mixTab']
+  },
   {
-    key: '1',
-    header: 'Clone number'
+    id: 'iws',
+    name: 'IWS',
+    description: 'Spruce terminal weevil',
+    enabled: false,
+    editable: false,
+    isAnOption: false,
+    availableInTabs: ['coneTab', 'successTab', 'mixTab']
   },
   {
-    key: '2',
-    header: 'SMP success on parent (%)'
+    id: 'wdu',
+    name: 'WDU',
+    description: 'Wood durability',
+    enabled: false,
+    editable: false,
+    isAnOption: false,
+    availableInTabs: ['coneTab', 'successTab', 'mixTab']
   },
   {
-    key: '3',
-    header: 'Non-orchard pollen contam. (%)'
-  }
-];
-
-export const smpSuccessFixedFilters: Array<SMPSuccessFixedFiltersType> = [
+    id: 'wwd',
+    name: 'WWD',
+    description: 'Wood quality',
+    enabled: false,
+    editable: false,
+    isAnOption: false,
+    availableInTabs: ['coneTab', 'successTab', 'mixTab']
+  },
   {
-    code: 'meanDegreesLat',
-    description: 'Mean degrees latitude'
+    id: 'nonOrchardPollenContam',
+    name: 'Non-orchard pollen contam. (%)',
+    description: 'Non-orchard pollen contam. (%)',
+    enabled: true,
+    editable: true,
+    isAnOption: false,
+    availableInTabs: [undefined, 'successTab']
   },
   {
-    code: 'meanMinutesLat',
-    description: 'Mean minutes latitude'
+    id: 'meanDegLat',
+    name: 'Mean degrees latitude',
+    description: 'Mean degrees latitude',
+    enabled: false,
+    editable: false,
+    isAnOption: true,
+    availableInTabs: [undefined, 'successTab']
   },
   {
-    code: 'meanDegreesLong',
-    description: 'Mean degrees longitude'
+    id: 'meanMinLat',
+    name: 'Mean minutes latitude',
+    description: 'Mean minutes latitude',
+    enabled: false,
+    editable: false,
+    isAnOption: true,
+    availableInTabs: [undefined, 'successTab']
   },
   {
-    code: 'meanMinutesLong',
-    description: 'Mean minutes longitude'
+    id: 'meanDegLong',
+    name: 'Mean degrees longitude',
+    description: 'Mean degrees longitude',
+    enabled: false,
+    editable: false,
+    isAnOption: true,
+    availableInTabs: [undefined, 'successTab']
   },
   {
-    code: 'meanElevation',
-    description: 'Mean elevation'
-  }
-];
-
-export const smpMixFixedHeaders:Array<TableHeaders> = [
+    id: 'meanMinLong',
+    name: 'Mean minutes longitude',
+    description: 'Mean minutes longitude',
+    enabled: false,
+    editable: false,
+    isAnOption: true,
+    availableInTabs: [undefined, 'successTab']
+  },
   {
-    key: '1',
-    header: 'Clone number'
+    id: 'meanElevation',
+    name: 'Mean elevation',
+    description: 'Mean elevation',
+    enabled: false,
+    editable: false,
+    isAnOption: true,
+    availableInTabs: [undefined, 'successTab']
   },
   {
-    key: '2',
-    header: 'Volume (ml)'
+    id: 'volume',
+    name: 'Volume (ml)',
+    description: 'Volume (ml)',
+    enabled: true,
+    editable: true,
+    isAnOption: false,
+    availableInTabs: [undefined, undefined, 'mixTab']
   },
   {
-    key: '3',
-    header: 'Proportion'
+    id: 'proportion',
+    name: 'Proportion',
+    description: 'Proportion',
+    enabled: true,
+    editable: true,
+    isAnOption: false,
+    availableInTabs: [undefined, undefined, 'mixTab']
   }
 ];
-
-export const newSMPMixEntry:SMPMixEntriesType = {
-  cloneNumber: '',
-  volume: '',
-  proportion: '',
-  adClonal: '',
-  dfsClonal: '',
-  dfuClonal: '',
-  dfwClonal: '',
-  dsbClonal: '',
-  dscClonal: '',
-  dsgClonal: '',
-  gvoClonal: '',
-  iwsClonal: '',
-  wduClonal: '',
-  wwdClonal: '',
-  wveClonal: '',
-  adWeighted: '',
-  dfsWeighted: '',
-  dfuWeighted: '',
-  dfwWeighted: '',
-  dsbWeighted: '',
-  dscWeighted: '',
-  dsgWeighted: '',
-  gvoWeighted: '',
-  iwsWeighted: '',
-  wduWeighted: '',
-  wwdWeighted: '',
-  wveWeighted: ''
-};
-
-// This function will be removed once we start using the real API
-export const getTestParentTrees = (orchardID: string[]): Array<ParentTreesType> => {
-  const returnObj:Array<ParentTreesType> = [];
-  orchardID.forEach((id) => {
-    for (let index = 1; index < 26; index += 1) {
-      returnObj.push({
-        id: `${index.toString()}-${id}`,
-        value: index.toString()
-      });
-    }
-  });
-  return returnObj;
-};
diff --git a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/definitions.ts b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/definitions.ts
index 297007fce..017b32855 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/definitions.ts
+++ b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/definitions.ts
@@ -1,31 +1,65 @@
-export type ParentTreesType = {
-  id: string;
-  value: string;
+export type TabTypes = {
+  coneTab: 'coneTab',
+  successTab: 'successTab',
+  mixTab: 'mixTab'
 };
 
-export type TableHeaders = {
-  key: string;
-  header: string;
-}
-
-export type GeneticTraitsType = {
-  code: string;
-  description: string;
-  filterLabel: string;
+export type RowItem = {
+  [key: string]: any,
+  cloneNumber: string,
+  cloneCount: number | null,
+  pollenCount: number | null,
+  smpSuccessPerc: number | null,
+  ad: number | null,
+  dfs: number | null,
+  dfu: number | null,
+  dfw: number | null,
+  dsb: number | null,
+  dsc: number | null,
+  gvo: number | null,
+  wdu: number | null,
+  wwd: number | null,
+  dsg: number | null,
+  iws: number | null,
+  nonOrchardPollenContam: number | null,
+  meanDegLat: number | null,
+  meanMinLat: number | null,
+  meanDegLong: number | null,
+  meanMinLong: number | null,
+  meanElevation: number | null,
+  volume: number | null,
+  proportion: number | null
 };
 
-export type ControlFiltersType = {
-  [key: string]: boolean;
+/**
+ * id: referencing the property's name
+ * name: displayed header name
+ * description: used for tooltip
+ * isAnoption: true if the option belongs to this species
+ * enabled: whether to display in header row, can be toggled by user
+ * availableInTabs: this header item can be seen in one or more of these tabs
+ */
+export type HeaderObj = {
+  id: keyof RowItem,
+  name: string,
+  description: string,
+  enabled: boolean,
+  isAnOption: boolean,
+  editable: boolean,
+  availableInTabs: ['coneTab'?, 'successTab'?, 'mixTab'?]
 };
 
-export type SMPSuccessFixedFiltersType = {
-  code: string;
-  description: string;
-};
+export type RowDataDictType = {
+  [key: string]: RowItem
+}
+
+export type NotifCtrlType = {
+  [key: string]: {
+    showInfo: boolean,
+    showError: boolean
+  }
+}
 
-export interface TabProps {
-  parentTrees: Array<ParentTreesType>;
-  orchards: string[];
-  geneticTraits: Array<GeneticTraitsType>;
-  isLoading: boolean;
+export type GeneticWorthDictType = {
+  [key: string]: Array<string>
 }
diff --git a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/index.tsx
index adb474898..b7024a207 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/index.tsx
+++ b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/index.tsx
@@ -1,57 +1,427 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Tabs,
   TabList,
   Tab,
-  TabPanels,
-  TabPanel
+  FlexGrid,
+  Row,
+  Column,
+  ActionableNotification,
+  TableContainer,
+  TableToolbar,
+  TableToolbarContent,
+  OverflowMenuItem,
+  OverflowMenu,
+  Button,
+  Checkbox,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  DataTableSkeleton,
+  DefinitionTooltip,
+  TextInput
 } from '@carbon/react';
+import { View, Settings, Upload } from '@carbon/icons-react';
+import { useQueries, useQueryClient } from '@tanstack/react-query';
+import { getSeedPlanUnits, getParentTreeGeneQuali } from '../../../api-service/orchardAPI';
 
-import ConeAndPollen from './Tabs/ConeAndPollen';
-
-import { pageTexts } from './constants';
-
-import './styles.scss';
 import DropDownObj from '../../../types/DropDownObject';
+import DescriptionBox from '../../DescriptionBox';
+import { OrchardObj } from '../OrchardStep/definitions';
+import {
+  getPageText, headerTemplate, rowTemplate, geneticWorthDict
+} from './constants';
+import {
+  TabTypes, HeaderObj, RowItem, RowDataDictType
+} from './definitions';
+import { getTabString, processOrchards, sortRowItem } from './utils';
+import { ParentTreeGeneticQualityType } from '../../../types/ParentTreeGeneticQualityType';
+import { ParentTreeStepDataObj } from '../../../views/Seedlot/SeedlotRegistrationForm/definitions';
+import './styles.scss';
 
 interface ParentTreeStepProps {
   seedlotSpecies: DropDownObj
-  state: object;
+  state: ParentTreeStepDataObj;
   setStepData: Function;
+  orchards: Array<OrchardObj>;
 }
 
 const ParentTreeStep = (
   {
     seedlotSpecies,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     state,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    setStepData
+    setStepData,
+    orchards
   }: ParentTreeStepProps
 ) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const a = 'b';
+  const pageText = getPageText();
+  const queryClient = useQueryClient();
+  const [orchardsData, setOrchardsData] = useState<Array<OrchardObj>>([]);
+  const [currentTab, setCurrentTab] = useState<keyof TabTypes>('coneTab');
+  const [headerConfig, setHeaderConfig] = useState<Array<HeaderObj>>(
+    structuredClone(headerTemplate)
+  );
+
+  const toggleNotification = (notifType: string) => {
+    const modifiedState = { ...state };
+    if (notifType === 'info') {
+      modifiedState.notifCtrl[currentTab].showInfo = false;
+    }
+    if (notifType === 'error') {
+      modifiedState.notifCtrl[currentTab].showError = false;
+    }
+    setStepData(modifiedState);
+  };
+
+  useEffect(
+    () => {
+      const processedOrchard = processOrchards(orchards);
+      setOrchardsData(processedOrchard);
+    },
+    [orchards]
+  );
+
+  // Seed plan units queries
+  useQueries({
+    queries:
+      orchardsData.map((orchard) => ({
+        queryKey: ['orchard', orchard.orchardId, 'seed-plan-units'],
+        queryFn: () => getSeedPlanUnits(orchard.orchardId),
+        refetchOnMount: false,
+        refetchOnWindowFocus: false
+      }))
+  });
+
+  const getSPUfromQuery = (orchardId: string): string => {
+    const data: Array<any> = queryClient.getQueryData(['orchard', orchardId, 'seed-plan-units']) ?? [];
+    if (data[0]?.seedPlanningUnitId) {
+      return data[0].seedPlanningUnitId;
+    }
+    return '';
+  };
+
+  const enableParentTreeQuery = (orchardId: string): boolean => {
+    if (queryClient.getQueryState(['orchard', orchardId, 'seed-plan-units'])?.status === 'success') {
+      return getSPUfromQuery(orchardId) !== '';
+    }
+    return false;
+  };
+
+  const processParentTreeData = (data: ParentTreeGeneticQualityType) => {
+    const modifiedState = { ...state };
+    let clonedTableRowData: RowDataDictType = structuredClone(state.tableRowData);
+
+    data.parentTrees.forEach((parentTree) => {
+      if (!Object.prototype.hasOwnProperty.call(clonedTableRowData, parentTree.parentTreeNumber)) {
+        const newRowData: RowItem = structuredClone(rowTemplate);
+        newRowData.cloneNumber = parentTree.parentTreeNumber;
+        // Assign genetic worth values
+        parentTree.parentTreeGeneticQualities.forEach((singleGenWorthObj) => {
+          const genWorthName = singleGenWorthObj.geneticWorthCode.toLowerCase();
+          if (Object.prototype.hasOwnProperty.call(newRowData, genWorthName)) {
+            newRowData[genWorthName] = singleGenWorthObj.geneticQualityValue;
+          }
+        });
+        clonedTableRowData = Object.assign(clonedTableRowData, {
+          [parentTree.parentTreeNumber]: newRowData
+        });
+      }
+    });
+
+    modifiedState.tableRowData = clonedTableRowData;
+    setStepData(modifiedState);
+  };
+
+  // Parent tree genetic quality queries
+  useQueries({
+    queries:
+      orchardsData.map((orchard) => ({
+        queryKey: ['orchard', 'parent-tree-genetic-quality', orchard.orchardId, getSPUfromQuery(orchard.orchardId)],
+        queryFn: () => (
+          getParentTreeGeneQuali(orchard.orchardId, getSPUfromQuery(orchard.orchardId))
+        ),
+        enabled: enableParentTreeQuery(orchard.orchardId),
+        onSuccess: (data: ParentTreeGeneticQualityType) => processParentTreeData(data),
+        refetchOnMount: true,
+        refetchOnWindowFocus: false
+      }))
+  });
+
+  const setInputChange = (cloneNumber: string, colName: keyof RowItem, value: string) => {
+    const clonedState = { ...state };
+    clonedState.tableRowData[cloneNumber][colName] = value;
+    setStepData(clonedState);
+  };
+
+  const renderTableCell = (rowData: RowItem, header: HeaderObj) => {
+    if (header.availableInTabs.includes(currentTab) && header.enabled) {
+      return (
+        <TableCell key={header.id}>
+          {
+            header.editable
+              ? (
+                <TextInput
+                  labelText=""
+                  hideLabel
+                  type="number"
+                  placeholder="Add value"
+                  defaultValue={rowData[header.id]}
+                  id={`${rowData.cloneNumber}-${rowData[header.id]}`}
+                  onBlur={(event: React.ChangeEvent<HTMLInputElement>) => {
+                    setInputChange(rowData.cloneNumber, header.id, event.target.value);
+                  }}
+                  onWheel={(e: React.ChangeEvent<HTMLInputElement>) => e.target.blur()}
+                />
+              )
+              : (
+                rowData[header.id]
+              )
+          }
+        </TableCell>
+      );
+    }
+    return null;
+  };
+
+  const configHeaderOpt = () => {
+    const speciesHasGenWorth = Object.keys(geneticWorthDict);
+    if (speciesHasGenWorth.includes(seedlotSpecies.code)) {
+      const availOptions = geneticWorthDict[seedlotSpecies.code];
+      const clonedHeaders = structuredClone(headerConfig);
+      availOptions.forEach((opt: string) => {
+        const optionIndex = headerConfig.findIndex((header) => header.id === opt);
+        clonedHeaders[optionIndex].isAnOption = true;
+      });
+      setHeaderConfig(clonedHeaders);
+    }
+  };
+
+  useEffect(() => configHeaderOpt(), [seedlotSpecies]);
+
+  const toggleColumn = (colName: keyof RowItem, nodeName: string) => {
+    // Without this check the checkbox will be clicked twice
+    if (nodeName !== 'INPUT') {
+      const clonedHeaders = structuredClone(headerConfig);
+      const optionIndex = headerConfig.findIndex((header) => header.id === colName);
+      clonedHeaders[optionIndex].enabled = !headerConfig[optionIndex].enabled;
+      setHeaderConfig(clonedHeaders);
+    }
+  };
+
+  const renderColOptions = () => {
+    const toggleableCols = headerConfig
+      .filter((header) => header.isAnOption && header.availableInTabs.includes(currentTab));
+
+    return (
+      toggleableCols.map((header) => (
+        <OverflowMenuItem
+          key={header.id}
+          closeMenu={() => false}
+          onClick={(e: React.ChangeEvent<any>) => toggleColumn(header.id, e.target.nodeName)}
+          itemText={
+            (
+              <Checkbox
+                checked={header.enabled}
+                id={header.id}
+                labelText={header.name}
+              />
+            )
+          }
+        />
+      ))
+    );
+  };
+
   return (
-    <div className="parent-tree-step-container">
-      <Tabs>
-        <TabList aria-label="List of tabs">
-          <Tab>{pageTexts.tabTitles.coneTab}</Tab>
-          <Tab>{pageTexts.tabTitles.smpTab}</Tab>
-          <Tab>{pageTexts.tabTitles.mixTab}</Tab>
-        </TabList>
-        <TabPanels>
-          <TabPanel>
-            <ConeAndPollen seedlotSpecies={seedlotSpecies} />
-          </TabPanel>
-          <TabPanel>
-            SMP
-          </TabPanel>
-          <TabPanel>
-            MIX
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
-    </div>
+    <FlexGrid className="parent-tree-step-container">
+      <Row>
+        <Column sm={4} md={8} lg={16} xlg={16}>
+          <Tabs onChange={
+            (value: { selectedIndex: number }) => setCurrentTab(getTabString(value.selectedIndex))
+          }
+          >
+            <TabList className="parent-tree-step-tab-list" aria-label="List of tabs">
+              <Tab>
+                {pageText.coneTab.tabTitle}
+                &nbsp;(required)
+              </Tab>
+              <Tab>{pageText.successTab.tabTitle}</Tab>
+              <Tab>{pageText.mixTab.tabTitle}</Tab>
+            </TabList>
+            <FlexGrid className="parent-tree-tab-container">
+              <Row className="title-row">
+                <Column sm={4} md={8} lg={16} xlg={12} max={10}>
+                  <DescriptionBox
+                    header={pageText[currentTab].tabTitle}
+                    description={pageText[currentTab].tabDescription}
+                  />
+                </Column>
+              </Row>
+              <Row className="notification-row">
+                <Column>
+                  {
+                    (state.notifCtrl[currentTab].showInfo && orchardsData.length > 0)
+                      ? (
+                        <ActionableNotification
+                          kind="info"
+                          lowContrast
+                          title={pageText.notificationTitle}
+                          inline
+                          actionButtonLabel=""
+                          onClose={() => {
+                            toggleNotification('info');
+                            return false;
+                          }}
+                        >
+                          <span className="notification-subtitle">
+                            {pageText[currentTab].notificationSubtitle}
+                          </span>
+                        </ActionableNotification>
+                      )
+                      : null
+                  }
+                  {
+                    (state.notifCtrl[currentTab].showError && orchardsData.length === 0)
+                      ? (
+                        <ActionableNotification
+                          kind="error"
+                          lowContrast
+                          title={pageText.errorNotifTitle}
+                          actionButtonLabel=""
+                          onClose={() => {
+                            toggleNotification('error');
+                            return false;
+                          }}
+                        >
+                          <span className="notification-subtitle">
+                            {pageText.errorDescription}
+                          </span>
+                        </ActionableNotification>
+                      )
+                      : null
+                  }
+                </Column>
+              </Row>
+              <Row className="parent-tree-step-table-container">
+                <Column>
+                  <TableContainer
+                    title={pageText[currentTab].tabTitle}
+                    description={pageText[currentTab].tableDescription}
+                  >
+                    <TableToolbar aria-label="data table toolbar">
+                      <TableToolbarContent>
+                        {/* <Popover
+                          align="bottom-right"
+                          open={isColMenuOpen}
+                          isTabTip
+                        >
+                          <Button
+                            kind="ghost"
+                            hasIconOnly
+                            renderIcon={View}
+                            type="button"
+                            onClick={() => setIsColMenuOpen(!isColMenuOpen)}
+                          />
+                          <PopoverContent>
+                            <fieldset>
+                              <legend>Show breeding value</legend>
+                              <Checkbox id="a" labelText="ikkk" />
+                              <Checkbox id="b" labelText="saasd" />
+                              <Checkbox id="c" labelText="hkok" />
+                            </fieldset>
+                          </PopoverContent>
+                        </Popover> */}
+                        <OverflowMenu
+                          renderIcon={View}
+                          iconDescription="Show/hide columns"
+                          flipped
+                        >
+                          {
+                            renderColOptions()
+                          }
+                        </OverflowMenu>
+                        <OverflowMenu
+                          renderIcon={Settings}
+                          iconDescription="more options"
+                        >
+                          <OverflowMenuItem
+                            itemText="Download table template"
+                          />
+                        </OverflowMenu>
+                        <Button
+                          size="sm"
+                          kind="primary"
+                          renderIcon={Upload}
+                        >
+                          Upload from file
+                        </Button>
+                      </TableToolbarContent>
+                    </TableToolbar>
+                    {
+                      /**
+                       * Check if it's fetching parent tree data
+                       */
+                      orchardsData.length > 0 && Object.values(state.tableRowData).length === 0
+                        ? (
+                          <DataTableSkeleton
+                            showToolbar={false}
+                            showHeader={false}
+                            zebra
+                          />
+                        )
+                        : (
+                          <Table useZebraStyles>
+                            <TableHead>
+                              <TableRow>
+                                {
+                                  headerConfig.map((header) => (
+                                    (header.availableInTabs.includes(currentTab) && header.enabled)
+                                      ? (
+                                        <TableHeader id={header.id} key={header.id}>
+                                          <DefinitionTooltip
+                                            align="top"
+                                            openOnHover
+                                            definition={header.description}
+                                          >
+                                            {header.name}
+                                          </DefinitionTooltip>
+                                        </TableHeader>
+                                      )
+                                      : null
+                                  ))
+                                }
+                              </TableRow>
+                            </TableHead>
+                            <TableBody>
+                              {
+                                // Since we cannot sort an Object
+                                // we will have to sort the array here
+                                sortRowItem(Object.values(state.tableRowData)).map((rowData) => (
+                                  <TableRow key={rowData.cloneNumber}>
+                                    {
+                                      headerConfig.map((header) => (
+                                        renderTableCell(rowData, header)
+                                      ))
+                                    }
+                                  </TableRow>
+                                ))
+                              }
+                            </TableBody>
+                          </Table>
+                        )
+                    }
+
+                  </TableContainer>
+                </Column>
+              </Row>
+            </FlexGrid>
+          </Tabs>
+        </Column>
+      </Row>
+    </FlexGrid>
   );
 };
 
diff --git a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/styles.scss b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/styles.scss
index 9d7ad957b..e191e527f 100644
--- a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/styles.scss
+++ b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/styles.scss
@@ -1,5 +1,93 @@
+@use '@carbon/type';
 @use '../../../theme/variables.scss' as vars;
 
+.parent-tree-step-container {
+  padding-left: 0rem;
+  padding-right: 0rem;
+
+  .parent-tree-step-tab-list {
+    margin-left: -1rem;
+    border-bottom: 2px solid var(--#{vars.$bcgov-prefix}-border-subtle-01);
+    width: calc(100% + 1rem);
+
+    .bcgov--tab--list {
+      // Without this the tab list will be pushed up by 2px due to the border bottom above
+      margin-bottom: -2px;
+    }
+  }
+}
+
 .parent-tree-tab-container {
+  padding: 2.5rem 0;
+
+  .description-box-container {
+    padding-left: 0;
+  }
+
+  .notification-row {
+    margin-top: 2.5rem;
+
+    .#{vars.$bcgov-prefix}--actionable-notification__content {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .#{vars.$bcgov-prefix}--actionable-notification__title {
+      @include type.type-style('heading-compact-01');
+    }
+
+    .#{vars.$bcgov-prefix}--actionable-notification {
+      width: 100%;
+      max-width: none;
+    }
+
+    .#{vars.$bcgov-prefix}--actionable-notification__action-button {
+      display: none;
+    }
+
+    .notification-subtitle {
+      @include type.type-style('body-compact-01');
+    }
+
+    .notification-link {
+      color: var(--#{vars.$bcgov-prefix}-link-primary);
+      text-decoration: underline;
+    }
+  }
+}
+
+.parent-tree-step-table-container {
+  margin-top: 2rem;
+
+  .#{vars.$bcgov-prefix}--data-table {
+    .#{vars.$bcgov-prefix}--text-input {
+      background: transparent;
+      border-bottom: none;
+      border-radius: 0;
+      padding: 0;
+    }
+
+    .#{vars.$bcgov-prefix}--text-input:focus {
+      background: white;
+    }
+
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    input[type=number] {
+      -moz-appearance: textfield;
+    }
+  }
+
+  .#{vars.$bcgov-prefix}--data-table-content{
+    overflow: visible;
+  }
 
+  .#{vars.$bcgov-prefix}--definition-term{
+    border-bottom: none;
+    @include type.type-style('heading-compact-01');
+  }
 }
diff --git a/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/utils.ts b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/utils.ts
new file mode 100644
index 000000000..e888a80dd
--- /dev/null
+++ b/frontend/src/components/SeedlotRegistrationSteps/ParentTreeStep/utils.ts
@@ -0,0 +1,38 @@
+import { OrchardObj } from '../OrchardStep/definitions';
+import { RowItem } from './definitions';
+
+export const getTabString = (selectedIndex: number) => {
+  switch (selectedIndex) {
+    case 0:
+      return 'coneTab';
+    case 1:
+      return 'successTab';
+    case 2:
+      return 'mixTab';
+    default:
+      return 'coneTab';
+  }
+};
+
+// Returns a merged array of orchards, duplicated orchards are merged as one
+export const processOrchards = (orchards: Array<OrchardObj>): Array<OrchardObj> => {
+  const obj = {};
+
+  orchards.forEach((orchard) => {
+    if (
+      !Object.prototype.hasOwnProperty.call(obj, orchard.orchardId)
+      && orchard.orchardId !== ''
+      && orchard.orchardLabel !== ''
+    ) {
+      Object.assign(obj, {
+        [orchard.orchardId]: orchard
+      });
+    }
+  });
+
+  return Object.values(obj);
+};
+
+export const sortRowItem = (rows: Array<RowItem>) => (
+  rows.sort((a: RowItem, b: RowItem) => Number(a.clone_number) - Number(b.clone_number))
+);
diff --git a/frontend/src/theme/components-overrides.scss b/frontend/src/theme/components-overrides.scss
index 672941265..fe3e01b56 100644
--- a/frontend/src/theme/components-overrides.scss
+++ b/frontend/src/theme/components-overrides.scss
@@ -147,20 +147,7 @@ nav.#{variables.$bcgov-prefix}--side-nav {
   font-weight: bold;
 }
 
-.#{variables.$bcgov-prefix}--data-table {
-  padding: 0 !important;
-}
-
-.#{variables.$bcgov-prefix}--data-table tr th{
-  background-color: var(--#{variables.$bcgov-prefix}-layer-01);
-}
-
-.#{variables.$bcgov-prefix}--data-table tr td{
-  background-color: var(--#{variables.$bcgov-prefix}-layer-02);
-}
-
-.#{variables.$bcgov-prefix}--table-header-label,
-.#{variables.$bcgov-prefix}--data-table.#{variables.$bcgov-prefix}--skeleton th {
+.#{variables.$bcgov-prefix}--table-header-label {
   font-weight: bold;
 }
 
@@ -241,9 +228,3 @@ li.#{variables.$bcgov-prefix}--overflow-menu-options__option:first-child{
 li.#{variables.$bcgov-prefix}--overflow-menu-options__option:last-child{
   border-radius: 0 0 4px 4px;
 }
-
-table.#{variables.$bcgov-prefix}--data-table th,
-table.#{variables.$bcgov-prefix}--data-table td,
-table.#{variables.$bcgov-prefix}--data-table th button {
-  padding-left: 2rem;
-}
\ No newline at end of file
diff --git a/frontend/src/types/ParentTreeGeneticQualityType.ts b/frontend/src/types/ParentTreeGeneticQualityType.ts
new file mode 100644
index 000000000..6bcd2c433
--- /dev/null
+++ b/frontend/src/types/ParentTreeGeneticQualityType.ts
@@ -0,0 +1,34 @@
+export enum GenWorthCodeEnum{
+  AD = 'ad',
+  DFS = 'dfs',
+  DFU = 'dfu',
+  DFW = 'dfw',
+  DSB = 'dsb',
+  DSC = 'dsc',
+  DSG = 'dsg',
+  GVO = 'gvo',
+  IWS = 'iws',
+  WDU = 'wdu',
+  WWD = 'wwd'
+}
+
+type SingleParentTreeGeneticObj = {
+  geneticTypeCode: string,
+  geneticWorthCode: keyof typeof GenWorthCodeEnum,
+  geneticQualityValue: number,
+};
+
+type ParentTreeType = {
+  [key: string]: any,
+  parentTreeId: number,
+  parentTreeNumber: string,
+  parentTreeGeneticQualities: Array<SingleParentTreeGeneticObj>
+}
+
+export type ParentTreeGeneticQualityType = {
+  [key: string]: any,
+  orchardId:string,
+  vegetationCode: string,
+  seedPlanningUnitId: number,
+  parentTrees: Array<ParentTreeType>
+}
diff --git a/frontend/src/views/Seedlot/SeedlotRegistrationForm/definitions.ts b/frontend/src/views/Seedlot/SeedlotRegistrationForm/definitions.ts
index 31f12ba0b..87830998c 100644
--- a/frontend/src/views/Seedlot/SeedlotRegistrationForm/definitions.ts
+++ b/frontend/src/views/Seedlot/SeedlotRegistrationForm/definitions.ts
@@ -3,13 +3,19 @@ import InterimForm from '../../../components/SeedlotRegistrationSteps/InterimSte
 import { SingleOwnerForm } from '../../../components/SeedlotRegistrationSteps/OwnershipStep/definitions';
 import ExtractionStorage from '../../../types/SeedlotTypes/ExtractionStorage';
 import { OrchardForm } from '../../../components/SeedlotRegistrationSteps/OrchardStep/definitions';
+import { RowDataDictType, NotifCtrlType } from '../../../components/SeedlotRegistrationSteps/ParentTreeStep/definitions';
+
+export type ParentTreeStepDataObj = {
+  tableRowData: RowDataDictType,
+  notifCtrl: NotifCtrlType
+}
 
 export type AllStepData = {
   collectionStep: CollectionForm,
   interimStep: InterimForm,
   ownershipStep: Array<SingleOwnerForm>,
   orchardStep: OrchardForm,
-  parentTreeStep: any,
+  parentTreeStep: ParentTreeStepDataObj,
   extractionStorageStep: ExtractionStorage
 }
 
diff --git a/frontend/src/views/Seedlot/SeedlotRegistrationForm/index.tsx b/frontend/src/views/Seedlot/SeedlotRegistrationForm/index.tsx
index c0ee308d7..92d27b829 100644
--- a/frontend/src/views/Seedlot/SeedlotRegistrationForm/index.tsx
+++ b/frontend/src/views/Seedlot/SeedlotRegistrationForm/index.tsx
@@ -34,7 +34,8 @@ import {
   initOwnershipState,
   initExtractionStorageState,
   initInvalidationObj,
-  initOwnerShipInvalidState
+  initOwnerShipInvalidState,
+  initParentTreeState
 } from './utils';
 import { getDropDownList } from '../../../utils/DropDownUtils';
 import { CollectionForm } from '../../../components/SeedlotRegistrationSteps/CollectionStep/utils';
@@ -82,7 +83,7 @@ const SeedlotRegistrationForm = () => {
     interimStep: initInterimState(defaultAgency, defaultCode),
     ownershipStep: [initOwnershipState(defaultAgency, defaultCode)],
     orchardStep: initOrchardState(),
-    parentTreeStep: {},
+    parentTreeStep: initParentTreeState(),
     extractionStorageStep: initExtractionStorageState(defaultExtStorAgency, defaultExtStorCode)
   });
 
@@ -119,6 +120,12 @@ const SeedlotRegistrationForm = () => {
     setFormStep(newStep);
   };
 
+  const cleanParentTables = () => {
+    const clonedState = { ...allStepData };
+    clonedState.parentTreeStep.tableRowData = {};
+    setAllStepData(clonedState);
+  };
+
   const renderStep = () => {
     const seedlotSpecies = seedlotInfoQuery.data.seedlot?.lot_species ?? {
       code: '',
@@ -170,6 +177,7 @@ const SeedlotRegistrationForm = () => {
           <OrchardStep
             seedlotSpecies={seedlotSpecies}
             state={allStepData.orchardStep}
+            cleanParentTables={() => cleanParentTables()}
             setStepData={(data: OrchardForm) => setStepData('orchardStep', data)}
           />
         );
@@ -179,6 +187,7 @@ const SeedlotRegistrationForm = () => {
           <ParentTreeStep
             seedlotSpecies={seedlotSpecies}
             state={allStepData.parentTreeStep}
+            orchards={allStepData.orchardStep.orchards}
             setStepData={(data: any) => setStepData('parentTreeStep', data)}
           />
         );
diff --git a/frontend/src/views/Seedlot/SeedlotRegistrationForm/utils.ts b/frontend/src/views/Seedlot/SeedlotRegistrationForm/utils.ts
index ebb3078f3..73995ee34 100644
--- a/frontend/src/views/Seedlot/SeedlotRegistrationForm/utils.ts
+++ b/frontend/src/views/Seedlot/SeedlotRegistrationForm/utils.ts
@@ -3,7 +3,8 @@ import {
   ownerTemplate,
   validTemplate as ownerInvalidTemplate
 } from '../../../components/SeedlotRegistrationSteps/OwnershipStep/constants';
-import { FormInvalidationObj, OwnershipInvalidObj } from './definitions';
+import { notificationCtrlObj } from '../../../components/SeedlotRegistrationSteps/ParentTreeStep/constants';
+import { FormInvalidationObj, OwnershipInvalidObj, ParentTreeStepDataObj } from './definitions';
 
 export const initCollectionState = (
   defaultAgency: string,
@@ -71,6 +72,17 @@ export const initOrchardState = (): OrchardForm => (
   }
 );
 
+// {
+//   tableRowData: RowDataDictType,
+//   notifCtrl
+// }
+export const initParentTreeState = (): ParentTreeStepDataObj => (
+  {
+    tableRowData: {},
+    notifCtrl: structuredClone(notificationCtrlObj)
+  }
+);
+
 export const initExtractionStorageState = (
   defaultAgency: string,
   defaultCode: string