{
>
Job Status
+
+ navigate(pages.monthlySpendReport, null, null, false)
+ }
+ >
+ Monthly Spend
+
navigate(pages.export, null, null, false)}>Export
diff --git a/src/music-catalogue-ui/components/monthlySpendReport.js b/src/music-catalogue-ui/components/monthlySpendReport.js
new file mode 100644
index 0000000..2796e46
--- /dev/null
+++ b/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 (
+ <>
+
+
Monthly Spending Report
+
+
+
+
+ Year |
+ Month |
+ Total Spend |
+
+
+ {records != null && (
+
+ {records.map((r) => (
+
+ ))}
+
+ )}
+
+ >
+ );
+};
+
+export default MonthlySpendReport;
diff --git a/src/music-catalogue-ui/components/monthlySpendReportRow.js b/src/music-catalogue-ui/components/monthlySpendReportRow.js
new file mode 100644
index 0000000..3b606f8
--- /dev/null
+++ b/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 (
+
+ {record.year} |
+ {record.month} |
+
+
+ |
+
+ );
+};
+
+export default MonthlySpendReportRow;
diff --git a/src/music-catalogue-ui/helpers/apiReports.js b/src/music-catalogue-ui/helpers/apiReports.js
index 1701b38..3e9c14e 100644
--- a/src/music-catalogue-ui/helpers/apiReports.js
+++ b/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,
};
diff --git a/src/music-catalogue-ui/helpers/navigation.js b/src/music-catalogue-ui/helpers/navigation.js
index e2dae51..9dfc460 100644
--- a/src/music-catalogue-ui/helpers/navigation.js
+++ b/src/music-catalogue-ui/helpers/navigation.js
@@ -9,6 +9,7 @@ const pages = {
artistStatisticsReport: "ArtistStatisticsReport",
genreStatisticsReport: "GenreStatisticsReport",
jobStatusReport: "JobStatusReport",
+ monthlySpendReport: "MonthlySpendReport",
albumPurchaseDetails: "AlbumPurchaseDetails",
};
diff --git a/src/music-catalogue-ui/hooks/useMonthlySpend.js b/src/music-catalogue-ui/hooks/useMonthlySpend.js
new file mode 100644
index 0000000..72f6b25
--- /dev/null
+++ b/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;