From 8aa6f1142310c4eb075a07601ed9dc6b55cec5fe Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Thu, 12 Dec 2024 21:49:13 +0000
Subject: [PATCH] Display pay modifier object on tab content

---
 front_end/src/Apps/Payroll.jsx                | 18 +++++++-
 .../EditPayroll/EditPayModifier/index.jsx     | 42 ++++++++++++-------
 front_end/src/Components/EditPayroll/api.js   | 10 +++++
 front_end/src/Components/EditPayroll/types.js |  6 +++
 payroll/services/payroll.py                   | 33 +++++++++++++++
 payroll/urls.py                               |  5 +++
 payroll/views.py                              |  8 ++++
 7 files changed, 106 insertions(+), 16 deletions(-)

diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx
index 01f67dcf..16e97909 100644
--- a/front_end/src/Apps/Payroll.jsx
+++ b/front_end/src/Apps/Payroll.jsx
@@ -13,6 +13,7 @@ import EditPayModifier from "../Components/EditPayroll/EditPayModifier";
 
 const initialPayrollState = [];
 const initialVacanciesState = [];
+const initialPayModifiersState = [];
 
 export default function Payroll() {
   const [allPayroll, dispatch] = useReducer(
@@ -23,6 +24,10 @@ export default function Payroll() {
     vacanciesReducer,
     initialVacanciesState,
   );
+  const [payModifiers, dispatchPayModifiers] = useReducer(
+    payModifiersReducer,
+    initialPayModifiersState,
+  );
   const [saveSuccess, setSaveSuccess] = useState(false);
 
   useEffect(() => {
@@ -36,6 +41,9 @@ export default function Payroll() {
     api
       .getVacancyData()
       .then((data) => dispatchVacancies({ type: "fetched", data }));
+    api
+      .getPayModifierData()
+      .then((data) => dispatchPayModifiers({ type: "fetched", data }));
   }, []);
 
   // Computed properties
@@ -116,7 +124,7 @@ export default function Payroll() {
           </a>
         </Tab>
         <Tab label="Pay Modifiers" key="2">
-          <EditPayModifier />
+          <EditPayModifier data={payModifiers} />
         </Tab>
       </Tabs>
       <button className="govuk-button" onClick={handleSavePayroll}>
@@ -151,5 +159,13 @@ const positionReducer = (data, action) => {
   }
 };
 
+const payModifiersReducer = (data, action) => {
+  switch (action.type) {
+    case "fetched": {
+      return action.data;
+    }
+  }
+};
+
 const payrollReducer = (data, action) => positionReducer(data, action);
 const vacanciesReducer = (data, action) => positionReducer(data, action);
diff --git a/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx b/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
index adfdf8b6..1caa7fdf 100644
--- a/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
+++ b/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
@@ -1,21 +1,33 @@
 import { monthsToTitleCase } from "../../../Util";
 
-const EditPayModifier = ({ pay_modifier }) => {
+const EditPayModifier = ({ data }) => {
   return (
-    <table className="govuk-table">
-      <thead className="govuk-table__head">
-        <tr className="govuk-table__row">
-          {monthsToTitleCase.map((header) => {
-            return (
-              <th scope="col" className="govuk-table__header" key={header}>
-                {header}
-              </th>
-            );
-          })}
-        </tr>
-      </thead>
-      <tbody className="govuk-table__body"></tbody>
-    </table>
+    data.length > 0 && (
+      <table className="govuk-table">
+        <thead className="govuk-table__head">
+          <tr className="govuk-table__row">
+            {monthsToTitleCase.map((header) => {
+              return (
+                <th scope="col" className="govuk-table__header" key={header}>
+                  {header}
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody className="govuk-table__body">
+          <tr className="govuk-table__row">
+            {data[0].pay_modifiers.map((value, index) => {
+              return (
+                <td className="govuk-table__cell" key={index}>
+                  {value}
+                </td>
+              );
+            })}
+          </tr>
+        </tbody>
+      </table>
+    )
   );
 };
 
diff --git a/front_end/src/Components/EditPayroll/api.js b/front_end/src/Components/EditPayroll/api.js
index 9ace8df2..f2bb289f 100644
--- a/front_end/src/Components/EditPayroll/api.js
+++ b/front_end/src/Components/EditPayroll/api.js
@@ -41,6 +41,16 @@ export function postVacancyData(vacancyData) {
   );
 }
 
+/**
+ * Fetch pay modifier data and return it as a promise.
+ * @returns {Promise<types.PayModifierData[]>} A promise resolving to an array of objects containing pay modifier information.
+ */
+export function getPayModifierData() {
+  return getData(getPayrollApiUrl() + "pay_modifiers/").then(
+    (data) => data.data,
+  );
+}
+
 /**
  * Return the payroll API URL.
  *
diff --git a/front_end/src/Components/EditPayroll/types.js b/front_end/src/Components/EditPayroll/types.js
index 5db24bae..39216fb5 100644
--- a/front_end/src/Components/EditPayroll/types.js
+++ b/front_end/src/Components/EditPayroll/types.js
@@ -25,4 +25,10 @@
  * @property {boolean[]} pay_periods - Whether the vacancy is being paid in periods.
  */
 
+/**
+ * @typedef {Object} PayModifierData
+ * @property {string} id - The pay modifier's pk.
+ * @property {float[]} pay_modifiers - The pay modifier's monthly percentages
+ */
+
 export const Types = {};
diff --git a/payroll/services/payroll.py b/payroll/services/payroll.py
index 13e412e3..dde4b1a0 100644
--- a/payroll/services/payroll.py
+++ b/payroll/services/payroll.py
@@ -329,3 +329,36 @@ def update_vacancies_data(
         )
         pay_periods.periods = vacancy["pay_periods"]
         pay_periods.save()
+
+
+class PayModifiers(TypedDict):
+    id: int
+    pay_modifiers: list[float]
+
+
+def get_pay_modifiers_data(
+    cost_centre: CostCentre,
+    financial_year: FinancialYear,
+) -> Iterator[PayModifiers]:
+    qs = Attrition.objects.filter(
+        cost_centre=cost_centre,
+        financial_year=financial_year,
+    )
+    for obj in qs:
+        yield PayModifiers(
+            id=obj.pk,
+            pay_modifiers=[
+                obj.apr,
+                obj.may,
+                obj.jun,
+                obj.jul,
+                obj.aug,
+                obj.sep,
+                obj.oct,
+                obj.nov,
+                obj.dec,
+                obj.jan,
+                obj.feb,
+                obj.mar,
+            ],
+        )
diff --git a/payroll/urls.py b/payroll/urls.py
index 685a9180..38a0994e 100644
--- a/payroll/urls.py
+++ b/payroll/urls.py
@@ -43,4 +43,9 @@
         views.delete_vacancy_page,
         name="delete_vacancy",
     ),
+    path(
+        "api/<str:cost_centre_code>/<int:financial_year>/pay_modifiers/",
+        views.PayModifierView.as_view(),
+        name="api_pay_modifiers",
+    ),
 ]
diff --git a/payroll/views.py b/payroll/views.py
index c30f31c5..da948007 100644
--- a/payroll/views.py
+++ b/payroll/views.py
@@ -79,6 +79,14 @@ def post_data(self, data):
         )
 
 
+class PayModifierView(PositionView):
+    def get_data(self):
+        return payroll_service.get_pay_modifiers_data(
+            self.cost_centre,
+            self.financial_year,
+        )
+
+
 def redirect_edit_payroll(cost_centre_code, financial_year):
     return redirect(
         "payroll:edit",