Added navigation for the job status report

docker/ui/Dockerfile

@@ -1,6 +1,6 @@
 FROM node:20-alpine
-COPY musiccatalogue.ui-1.6.0.0 /opt/musiccatalogue.ui-1.6.0.0
-WORKDIR /opt/musiccatalogue.ui-1.6.0.0
+COPY musiccatalogue.ui-1.7.0.0 /opt/musiccatalogue.ui-1.7.0.0
+WORKDIR /opt/musiccatalogue.ui-1.7.0.0
 RUN npm install
 RUN npm run build
 ENTRYPOINT [ "npm", "start" ]

src/music-catalogue-ui/components/componentPicker.js

@@ -4,6 +4,7 @@ import AlbumList from "./albumList";
 import TrackList from "./trackList";
 import LookupAlbum from "./lookupAlbum";
 import ExportCatalogue from "./exportCatalogue";
+import JobStatusReport from "./jobStatusReport";
 
 /**
  * Component using the current page name to render the components required
@@ -36,6 +37,8 @@ const ComponentPicker = ({ context, navigate, logout }) => {
       return <LookupAlbum navigate={navigate} logout={logout} />;
     case pages.export:
       return <ExportCatalogue navigate={navigate} logout={logout} />;
+    case pages.jobStatusReport:
+      return <JobStatusReport navigate={navigate} logout={logout} />;
     default:
       return <span />;
   }

src/music-catalogue-ui/components/jobStatusReport.js

@@ -0,0 +1,15 @@
+import { useCallback, useState } from "react";
+
+const JobStatusReport = ({ navigate, logout }) => {
+  const [startDate, setStartDate] = useState(new Date());
+
+  return (
+    <>
+      <div className="row mb-2 pageTitle">
+        <h5 className="themeFontColor text-center">Job Status Report</h5>
+      </div>
+    </>
+  );
+};
+
+export default JobStatusReport;

src/music-catalogue-ui/components/menuBar.js

@@ -25,7 +25,9 @@ const MenuBar = ({ navigate, logout }) => {
             </div>
           </button>
           <div className={styles.dropdownContent}>
-            <a href="#">Job Status</a>
+            <a onClick={() => navigate(pages.jobStatusReport, null, null)}>
+              Job Status
+            </a>
           </div>
         </div>
         <a onClick={() => navigate(pages.export, null, null)}>Export</a>

src/music-catalogue-ui/helpers/navigation.js

@@ -4,6 +4,7 @@ const pages = {
   tracks: "Tracks",
   lookup: "Lookup",
   export: "Export",
+  jobStatusReport: "JobStatusReport",
 };
 
 export default pages;

src/music-catalogue-ui/package.json

@@ -16,6 +16,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "next": "13.5.4",
     "react": "^18",
+    "react-datepicker": "^4.21.0",
     "react-dom": "^18"
   },
   "devDependencies": {