feat: program dashboard progress page initial layout

src/containers/ProgramDashboard/ProgramProgress/ProgramProgressCourses.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ProgramProgressCoursesProps } from '../data/types';
+
+const ProgramProgressCourses: React.FC<ProgramProgressCoursesProps> = ({
+  courseData,
+}) => (
+  <div>
+    {courseData.uuid}
+    <div>
+      || Courses In Progress ||
+    </div>
+    <div>
+      || Courses Remaining ||
+    </div>
+    <div>
+      || Courses Completed ||
+    </div>
+  </div>
+);
+
+export default ProgramProgressCourses;

src/containers/ProgramDashboard/ProgramProgress/ProgramProgressHeader.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ProgramProgressHeaderProps } from '../data/types';
+import { getProgramIcon } from '../data/util';
+
+const ProgramProgressHeader: React.FC<ProgramProgressHeaderProps> = ({
+  programTitle, programType, authoringOrganizations,
+}) => {
+  const programIcon = getProgramIcon(programType);
+
+  return (
+    <div>
+      <p>
+        {programTitle}
+      </p>
+      <p>
+        {programType}
+      </p>
+      <p>
+        {authoringOrganizations && authoringOrganizations.length}
+      </p>
+      <img src={programIcon} alt={`${programType} icon`} />
+    </div>
+  );
+};
+
+export default ProgramProgressHeader;

src/containers/ProgramDashboard/ProgramProgress/ProgramProgressInfo.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ProgramProgressInfoProps } from '../data/types';
+
+const ProgramProgressInfo: React.FC<ProgramProgressInfoProps> = ({
+  allCoursesCompleted, totalCoursesInProgram,
+}) => (
+  allCoursesCompleted
+    ? (
+      <div>
+        Render all courses completed text
+      </div>
+    )
+    : (
+      <div>
+        Render upgrade button and info about the {totalCoursesInProgram} courses in this program
+      </div>
+    )
+);
+
+export default ProgramProgressInfo;

src/containers/ProgramDashboard/ProgramProgress/ProgramProgressSidebar.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const ProgramProgressSidebar: React.FC = () => (
+  <>
+    <div>
+      || Program Certificate Progress ||
+    </div>
+    <div>
+      || Earned Certificates ||
+    </div>
+    <div>
+      || Program Record ||
+    </div>
+  </>
+);
+
+export default ProgramProgressSidebar;

src/containers/ProgramDashboard/ProgramProgress/index.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
+import { useParams } from 'react-router-dom';
+import { Col, Container, Row } from '@openedx/paragon';
+import { logError } from '@edx/frontend-platform/logging';
+import { camelCaseObject } from '@edx/frontend-platform/utils';
+import { getProgramProgressData } from '../data/api';
+import { ProgramProgressData } from '../data/types';
+import ProgramProgressCourses from './ProgramProgressCourses';
+import ProgramProgressHeader from './ProgramProgressHeader';
+import ProgramProgressSidebar from './ProgramProgressSidebar';
+import ProgramProgressInfo from './ProgramProgressInfo';
+
+const ProgramProgress: React.FC = () => {
+  const [programProgressData, setProgramProgressData] = useState<ProgramProgressData>();
+  const [programProgressEndpointError, setProgramProgressEndpointError] = useState(false);
+  const hasProgramProgressData : Boolean = programProgressData?.courseData
+  && programProgressData.programData
+  && programProgressData.urls;
+
+  // TODO: for review: https://stackoverflow.com/questions/75706357/react-useparams-returns-string-undefined
+  const { uuid } = useParams() as { uuid: string };
+  useEffect(() => {
+    getProgramProgressData(uuid)
+      .then(responseData => {
+        setProgramProgressData(camelCaseObject(responseData.data));
+      })
+      .catch(err => {
+        logError(err);
+        setProgramProgressEndpointError(true);
+      });
+  }, [uuid]);
+
+  if (programProgressEndpointError) {
+    return (
+      <div>Not found page</div>
+    );
+  }
+
+  if (!hasProgramProgressData) {
+    return (
+      <div>Loading...</div>
+    );
+  }
+
+  const programData = programProgressData?.programData;
+  const courseData = programProgressData?.courseData;
+
+  const totalCoursesInProgram = (courseData.notStarted?.length || 0)
+    + (courseData.completed?.length || 0)
+    + (courseData.inProgress?.length || 0);
+
+  const allCoursesCompleted = !courseData.notStarted?.length
+    && !courseData.inProgress?.length
+    && courseData.completed?.length;
+
+  return (
+    <>
+      <Helmet title={`${programData.title}`} />
+      <Container>
+        <ProgramProgressHeader
+          programTitle={programData?.title}
+          programType={programData?.type}
+          authoringOrganizations={programData?.authoringOrganizations}
+        />
+        <Row>
+          <Col>
+            <ProgramProgressInfo
+              allCoursesCompleted={allCoursesCompleted}
+              totalCoursesInProgram={totalCoursesInProgram}
+            />
+            <ProgramProgressCourses courseData={courseData} />
+          </Col>
+          <Col>
+            <ProgramProgressSidebar />
+          </Col>
+        </Row>
+      </Container>
+    </>
+  );
+};
+
+export default ProgramProgress;

src/containers/ProgramDashboard/ProgramsList/index.tsx

@@ -26,6 +26,7 @@ const ProgramsList: React.FC = () => {
         setProgramsData(camelCaseObject(responseData.data));
       })
       .catch(err => logError(err));
+    // TODO: add error handling alert component
   }, []);
 
   return (