Add the monthly spending report to the UI

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

@@ -8,6 +8,7 @@ import GenreStatusReport from "./genreStatisticsReport";
 import JobStatusReport from "./jobStatusReport";
 import AlbumPurchaseDetails from "./albumPurchaseDetails";
 import ArtistStatisticsReport from "./artistStatisticsReport";
+import MonthlySpendReport from "./monthlySpendReport";
 
 /**
  * Component using the current page name to render the components required
@@ -57,6 +58,8 @@ const ComponentPicker = ({ context, navigate, logout }) => {
       return <GenreStatusReport logout={logout} />;
     case pages.jobStatusReport:
       return <JobStatusReport logout={logout} />;
+    case pages.monthlySpendReport:
+      return <MonthlySpendReport logout={logout} />;
     case pages.albumPurchaseDetails:
       return (
         <AlbumPurchaseDetails

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

@@ -50,6 +50,13 @@ const MenuBar = ({ navigate, logout }) => {
             >
               Job Status
             </a>
+            <a
+              onClick={() =>
+                navigate(pages.monthlySpendReport, null, null, false)
+              }
+            >
+              Monthly Spend
+            </a>
           </div>
         </div>
         <a onClick={() => navigate(pages.export, null, null, false)}>Export</a>

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

@@ -0,0 +1,37 @@
+import useMonthlySpend from "@/hooks/useMonthlySpend";
+import MonthlySpendReportRow from "./monthlySpendReportRow";
+
+/**
+ * Component to display the monthly spending report page and its results
+ * @param {*} logout
+ * @returns
+ */
+const MonthlySpendReport = ({ logout }) => {
+  const { records, setRecords } = useMonthlySpend(logout);
+
+  return (
+    <>
+      <div className="row mb-2 pageTitle">
+        <h5 className="themeFontColor text-center">Monthly Spending Report</h5>
+      </div>
+      <table className="table table-hover">
+        <thead>
+          <tr>
+            <th>Year</th>
+            <th>Month</th>
+            <th>Total Spend</th>
+          </tr>
+        </thead>
+        {records != null && (
+          <tbody>
+            {records.map((r) => (
+              <MonthlySpendReportRow key={`${r.year}.${r.month}`} record={r} />
+            ))}
+          </tbody>
+        )}
+      </table>
+    </>
+  );
+};
+
+export default MonthlySpendReport;

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

@@ -0,0 +1,20 @@
+import CurrencyFormatter from "./currencyFormatter";
+
+/**
+ * Component to render a row containing the details for a single monthly spending record
+ * @param {*} record
+ * @returns
+ */
+const MonthlySpendReportRow = ({ record }) => {
+  return (
+    <tr>
+      <td>{record.year}</td>
+      <td>{record.month}</td>
+      <td>
+        <CurrencyFormatter value={record.spend} renderZeroAsBlank={true} />
+      </td>
+    </tr>
+  );
+};
+
+export default MonthlySpendReportRow;

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

@@ -86,8 +86,28 @@ const apiArtistStatisticsReport = async (wishlist, logout) => {
   return records;
 };
 
+/**
+ * Call the API to retrieve the monthly spending report
+ * @param {*} logout
+ * @returns
+ */
+const apiMonthlySpendReport = async (logout) => {
+  // Construct the route
+  const url = `${config.api.baseUrl}/reports/spend/false`;
+
+  // Call the API to get content for the report
+  const response = await fetch(url, {
+    method: "GET",
+    headers: apiGetHeaders(),
+  });
+
+  const records = await apiReadResponseData(response, logout);
+  return records;
+};
+
 export {
   apiJobStatusReport,
   apiGenreStatisticsReport,
   apiArtistStatisticsReport,
+  apiMonthlySpendReport,
 };

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

@@ -9,6 +9,7 @@ const pages = {
   artistStatisticsReport: "ArtistStatisticsReport",
   genreStatisticsReport: "GenreStatisticsReport",
   jobStatusReport: "JobStatusReport",
+  monthlySpendReport: "MonthlySpendReport",
   albumPurchaseDetails: "AlbumPurchaseDetails",
 };
 

src/music-catalogue-ui/hooks/useMonthlySpend.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from "react";
+import { apiMonthlySpendReport } from "@/helpers/apiReports";
+
+/**
+ * Hook that uses the API helpers to retrieve a list of artists from the
+ * Music Catalogue REST API
+ * @param {*} logout
+ * @returns
+ */
+const useMonthlySpend = (logout) => {
+  // Current list of artists and the method to change it
+  const [records, setRecords] = useState([]);
+
+  useEffect(() => {
+    const fetchReport = async () => {
+      try {
+        // Get a list of records via the service, store it in state
+        var fetchedRecords = await apiMonthlySpendReport(logout);
+        setRecords(fetchedRecords);
+      } catch {}
+    };
+
+    fetchReport();
+  }, [logout]);
+
+  return { records, setRecords };
+};
+
+export default useMonthlySpend;