From c34557b56acddc7b8690d705976c35300d2a765d Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Thu, 12 Dec 2024 15:33:27 +0000
Subject: [PATCH 01/20] Basic tab structure for payroll page

---
 front_end/src/Apps/Payroll.jsx                | 60 ++++++++++---------
 .../src/Components/EditPayroll/Tabs/index.jsx | 43 +++++++++++++
 2 files changed, 76 insertions(+), 27 deletions(-)
 create mode 100644 front_end/src/Components/EditPayroll/Tabs/index.jsx

diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx
index 75a7c8496..b6ccbf020 100644
--- a/front_end/src/Apps/Payroll.jsx
+++ b/front_end/src/Apps/Payroll.jsx
@@ -8,6 +8,7 @@ import {
 import EmployeeRow from "../Components/EditPayroll/EmployeeRow";
 import VacancyRow from "../Components/EditPayroll/VacancyRow";
 import PayrollTable from "../Components/EditPayroll/PayrollTable";
+import Tabs, { Tab } from "../Components/EditPayroll/Tabs";
 
 const initialPayrollState = [];
 const initialVacanciesState = [];
@@ -83,33 +84,38 @@ export default function Payroll() {
           </div>
         </div>
       )}
-      <h2 className="govuk-heading-m">Payroll</h2>
-      <PayrollTable
-        payroll={payroll}
-        headers={payrollHeaders}
-        onTogglePayPeriods={handleTogglePayPeriods}
-        RowComponent={EmployeeRow}
-      />
-      <h2 className="govuk-heading-m">Non-payroll</h2>
-      <PayrollTable
-        payroll={nonPayroll}
-        headers={payrollHeaders}
-        onTogglePayPeriods={handleTogglePayPeriods}
-        RowComponent={EmployeeRow}
-      />
-      <h2 className="govuk-heading-m">Vacancies</h2>
-      <PayrollTable
-        payroll={vacancies}
-        headers={vacancyHeaders}
-        onTogglePayPeriods={handleToggleVacancyPayPeriods}
-        RowComponent={VacancyRow}
-      />
-      <a
-        className="govuk-button govuk-!-margin-right-2 govuk-button--secondary"
-        href={window.addVacancyUrl}
-      >
-        Add Vacancy
-      </a>
+      <Tabs>
+        <Tab label="Dashboard" key="1">
+          <h2 className="govuk-heading-m">Payroll</h2>
+          <PayrollTable
+            payroll={payroll}
+            headers={payrollHeaders}
+            onTogglePayPeriods={handleTogglePayPeriods}
+            RowComponent={EmployeeRow}
+          />
+          <h2 className="govuk-heading-m">Non-payroll</h2>
+          <PayrollTable
+            payroll={nonPayroll}
+            headers={payrollHeaders}
+            onTogglePayPeriods={handleTogglePayPeriods}
+            RowComponent={EmployeeRow}
+          />
+          <h2 className="govuk-heading-m">Vacancies</h2>
+          <PayrollTable
+            payroll={vacancies}
+            headers={vacancyHeaders}
+            onTogglePayPeriods={handleToggleVacancyPayPeriods}
+            RowComponent={VacancyRow}
+          />
+          <a
+            className="govuk-button govuk-!-margin-right-2 govuk-button--secondary"
+            href={window.addVacancyUrl}
+          >
+            Add Vacancy
+          </a>
+        </Tab>
+        <Tab label="Pay Modifiers" key="2"></Tab>
+      </Tabs>
       <button className="govuk-button" onClick={handleSavePayroll}>
         Save payroll
       </button>
diff --git a/front_end/src/Components/EditPayroll/Tabs/index.jsx b/front_end/src/Components/EditPayroll/Tabs/index.jsx
new file mode 100644
index 000000000..9f2b3e5b9
--- /dev/null
+++ b/front_end/src/Components/EditPayroll/Tabs/index.jsx
@@ -0,0 +1,43 @@
+import { useState } from "react";
+
+export default function Tabs({ children }) {
+  const [activeTab, setActiveTab] = useState(0);
+  const tabs = Array.isArray(children) ? children : [children];
+  return (
+    <>
+      <div className="govuk-tabs" data-module="govuk-tabs">
+        <h2 className="govuk-tabs__title">Contents</h2>
+        <ul className="govuk-tabs__list">
+          {tabs.map((tab, index) => (
+            <li
+              className={`govuk-tabs__list-item ${activeTab === index ? "govuk-tabs__list-item--selected" : ""}`}
+              key={index}
+            >
+              <a
+                className="govuk-tabs__tab"
+                href="#"
+                onClick={() => setActiveTab(index)}
+              >
+                {tab.props.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+        {tabs.map((tab, index) => (
+          <div
+            className={`govuk-tabs__panel ${activeTab === index ? "" : "govuk-tabs__panel--hidden"}`}
+            key={index}
+            id="dashboard"
+          >
+            <h2 className="govuk-heading-m">{tab.props.label}</h2>
+            {tab.props.children}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
+
+export const Tab = ({ children }) => {
+  return <div>{{ children }}</div>;
+};

From 26a1e5661eaf24157a6c31ce3618014202b76f4b Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Thu, 12 Dec 2024 20:41:13 +0000
Subject: [PATCH 02/20] Basic component for pay modifier edit

---
 front_end/src/Apps/Payroll.jsx                |  5 ++++-
 .../EditPayroll/EditPayModifier/index.jsx     | 21 +++++++++++++++++++
 .../src/Components/EditPayroll/Tabs/index.jsx |  1 -
 front_end/src/Util.js                         |  4 ++++
 4 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 front_end/src/Components/EditPayroll/EditPayModifier/index.jsx

diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx
index b6ccbf020..01f67dcfc 100644
--- a/front_end/src/Apps/Payroll.jsx
+++ b/front_end/src/Apps/Payroll.jsx
@@ -9,6 +9,7 @@ import EmployeeRow from "../Components/EditPayroll/EmployeeRow";
 import VacancyRow from "../Components/EditPayroll/VacancyRow";
 import PayrollTable from "../Components/EditPayroll/PayrollTable";
 import Tabs, { Tab } from "../Components/EditPayroll/Tabs";
+import EditPayModifier from "../Components/EditPayroll/EditPayModifier";
 
 const initialPayrollState = [];
 const initialVacanciesState = [];
@@ -114,7 +115,9 @@ export default function Payroll() {
             Add Vacancy
           </a>
         </Tab>
-        <Tab label="Pay Modifiers" key="2"></Tab>
+        <Tab label="Pay Modifiers" key="2">
+          <EditPayModifier />
+        </Tab>
       </Tabs>
       <button className="govuk-button" onClick={handleSavePayroll}>
         Save payroll
diff --git a/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx b/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
new file mode 100644
index 000000000..7c7e9b70e
--- /dev/null
+++ b/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
@@ -0,0 +1,21 @@
+const EditPayModifier = ({ obj }) => {
+  const headers = monthsTitle;
+  return (
+    <table className="govuk-table">
+      <thead className="govuk-table__head">
+        <tr className="govuk-table__row">
+          {headers.map((header) => {
+            return (
+              <th scope="col" className="govuk-table__header" key={header}>
+                {header}
+              </th>
+            );
+          })}
+        </tr>
+      </thead>
+      <tbody className="govuk-table__body"></tbody>
+    </table>
+  );
+};
+
+export default EditPayModifier;
diff --git a/front_end/src/Components/EditPayroll/Tabs/index.jsx b/front_end/src/Components/EditPayroll/Tabs/index.jsx
index 9f2b3e5b9..599d1ae0c 100644
--- a/front_end/src/Components/EditPayroll/Tabs/index.jsx
+++ b/front_end/src/Components/EditPayroll/Tabs/index.jsx
@@ -29,7 +29,6 @@ export default function Tabs({ children }) {
             key={index}
             id="dashboard"
           >
-            <h2 className="govuk-heading-m">{tab.props.label}</h2>
             {tab.props.children}
           </div>
         ))}
diff --git a/front_end/src/Util.js b/front_end/src/Util.js
index e0dbdd170..b5d36c006 100644
--- a/front_end/src/Util.js
+++ b/front_end/src/Util.js
@@ -17,6 +17,10 @@ export const months = [
   "mar",
 ];
 
+export const monthsToTitleCase = months.map(
+  (x) => x[0].toUpperCase() + x.slice(1),
+);
+
 function getCookie(name) {
   var cookieValue = null;
   if (document.cookie && document.cookie !== "") {

From bda4dc423accd09a134469e8c5855ccbb3bec4d4 Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Thu, 12 Dec 2024 20:48:24 +0000
Subject: [PATCH 03/20] Fix headers for pay modifier component

---
 .../src/Components/EditPayroll/EditPayModifier/index.jsx   | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx b/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
index 7c7e9b70e..adfdf8b69 100644
--- a/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
+++ b/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
@@ -1,10 +1,11 @@
-const EditPayModifier = ({ obj }) => {
-  const headers = monthsTitle;
+import { monthsToTitleCase } from "../../../Util";
+
+const EditPayModifier = ({ pay_modifier }) => {
   return (
     <table className="govuk-table">
       <thead className="govuk-table__head">
         <tr className="govuk-table__row">
-          {headers.map((header) => {
+          {monthsToTitleCase.map((header) => {
             return (
               <th scope="col" className="govuk-table__header" key={header}>
                 {header}

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 04/20] 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 01f67dcfc..16e97909b 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 adfdf8b69..1caa7fdf2 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 9ace8df23..f2bb289f9 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 5db24baef..39216fb55 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 13e412e3e..dde4b1a0f 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 685a91800..38a0994e9 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 c30f31c51..da948007c 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",

From 580379db3e95bf91e79401ab77fe47e1309a68f6 Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Mon, 16 Dec 2024 12:18:31 +0000
Subject: [PATCH 05/20] Basic setup for updating pay modifier values

---
 front_end/src/Apps/Payroll.jsx                | 28 ++++++++-
 .../EditPayroll/EditPayModifier/index.jsx     | 59 +++++++++++--------
 2 files changed, 61 insertions(+), 26 deletions(-)

diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx
index 16e97909b..faa4dc16c 100644
--- a/front_end/src/Apps/Payroll.jsx
+++ b/front_end/src/Apps/Payroll.jsx
@@ -79,6 +79,10 @@ export default function Payroll() {
     dispatchVacancies({ type: "updatePayPeriods", id, index, enabled });
   }
 
+  function handleUpdatePayModifiers(id, index, value) {
+    dispatchPayModifiers({ type: "updatePayModifiers", id, index, value });
+  }
+
   return (
     <>
       {saveSuccess && (
@@ -124,7 +128,10 @@ export default function Payroll() {
           </a>
         </Tab>
         <Tab label="Pay Modifiers" key="2">
-          <EditPayModifier data={payModifiers} />
+          <EditPayModifier
+            data={payModifiers}
+            onInputChange={handleUpdatePayModifiers}
+          />
         </Tab>
       </Tabs>
       <button className="govuk-button" onClick={handleSavePayroll}>
@@ -164,6 +171,25 @@ const payModifiersReducer = (data, action) => {
     case "fetched": {
       return action.data;
     }
+    case "updatePayModifiers": {
+      return data.map((row) => {
+        if (row.id === action.id) {
+          const updatedPayModifier = row.pay_modifiers.map(
+            (modifier, index) => {
+              if (index === action.index) {
+                return parseFloat(action.value);
+              }
+              return modifier;
+            },
+          );
+          return {
+            ...row,
+            pay_modifiers: updatedPayModifier,
+          };
+        }
+        return row;
+      });
+    }
   }
 };
 
diff --git a/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx b/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
index 1caa7fdf2..1996c75a7 100644
--- a/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
+++ b/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
@@ -1,32 +1,41 @@
 import { monthsToTitleCase } from "../../../Util";
 
-const EditPayModifier = ({ data }) => {
+const EditPayModifier = ({ data, onInputChange }) => {
   return (
     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>
+      <div className="govuk-form-group">
+        <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}>
+                    <input
+                      className="govuk-input"
+                      id={`modifier-${index}`}
+                      name={`modifier-${index}`}
+                      type="text"
+                      defaultValue={value}
+                      onChange={(e) => onInputChange(data[0].id, index, e.target.value)}
+                    ></input>
+                  </td>
+                );
+              })}
+            </tr>
+          </tbody>
+        </table>
+      </div>
     )
   );
 };

From 8fc12df44305156dca829c803fbdbafd910f9dc8 Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Mon, 16 Dec 2024 15:38:50 +0000
Subject: [PATCH 06/20] Update pay modifiers and save

---
 front_end/src/Apps/Payroll.jsx                |  1 +
 .../EditPayroll/EditPayModifier/index.jsx     |  6 ++-
 front_end/src/Components/EditPayroll/api.js   | 22 +++++++++--
 package-lock.json                             |  2 +-
 payroll/services/payroll.py                   | 38 +++++++++++++++++++
 payroll/views.py                              |  7 ++++
 6 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx
index faa4dc16c..aa8feef4a 100644
--- a/front_end/src/Apps/Payroll.jsx
+++ b/front_end/src/Apps/Payroll.jsx
@@ -61,6 +61,7 @@ export default function Payroll() {
     try {
       await api.postPayrollData(allPayroll);
       await api.postVacancyData(vacancies);
+      await api.postPayModifierData(payModifiers);
 
       setSaveSuccess(true);
       localStorage.setItem("saveSuccess", "true");
diff --git a/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx b/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
index 1996c75a7..4200fd3a2 100644
--- a/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
+++ b/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
@@ -25,9 +25,11 @@ const EditPayModifier = ({ data, onInputChange }) => {
                       className="govuk-input"
                       id={`modifier-${index}`}
                       name={`modifier-${index}`}
-                      type="text"
+                      type="number"
                       defaultValue={value}
-                      onChange={(e) => onInputChange(data[0].id, index, e.target.value)}
+                      onChange={(e) =>
+                        onInputChange(data[0].id, index, e.target.value)
+                      }
                     ></input>
                   </td>
                 );
diff --git a/front_end/src/Components/EditPayroll/api.js b/front_end/src/Components/EditPayroll/api.js
index f2bb289f9..751d265a3 100644
--- a/front_end/src/Components/EditPayroll/api.js
+++ b/front_end/src/Components/EditPayroll/api.js
@@ -2,6 +2,9 @@ import { getData, postData } from "../../Util";
 
 import * as types from "./types";
 
+const vacanciesSlug = "vacancies/";
+const payModifiersSlug = "pay_modifiers/";
+
 /**
  * Fetch payroll data and return it as a promise.
  * @returns {Promise<types.PayrollData[]>} A promise resolving to an array of objects containing employee information.
@@ -25,7 +28,7 @@ export function postPayrollData(payrollData) {
  * @returns {Promise<types.VacancyData[]>} A promise resolving to an array of objects containing vacancy information.
  */
 export function getVacancyData() {
-  return getData(getPayrollApiUrl() + "vacancies/").then((data) => data.data);
+  return getData(getPayrollApiUrl() + vacanciesSlug).then((data) => data.data);
 }
 
 /**
@@ -36,7 +39,7 @@ export function getVacancyData() {
  */
 export function postVacancyData(vacancyData) {
   return postData(
-    getPayrollApiUrl() + "vacancies/",
+    getPayrollApiUrl() + vacanciesSlug,
     JSON.stringify(vacancyData),
   );
 }
@@ -46,11 +49,24 @@ export function postVacancyData(vacancyData) {
  * @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(
+  return getData(getPayrollApiUrl() + payModifiersSlug).then(
     (data) => data.data,
   );
 }
 
+/**
+ * Post modified pay modifiers data.
+ *
+ * @param {types.PayModifierData[]} payModifierData - Vacancy data to be sent.
+ * @returns {import("../../Util").PostDataResponse} Updated vacancy data received.
+ */
+export function postPayModifierData(payModifierData) {
+  return postData(
+    getPayrollApiUrl() + payModifiersSlug,
+    JSON.stringify(payModifierData),
+  );
+}
+
 /**
  * Return the payroll API URL.
  *
diff --git a/package-lock.json b/package-lock.json
index b4d85a248..3337cabb8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,7 @@
         "prettier": "^3.4.2"
       },
       "engines": {
-        "node": "^20.0.0"
+        "node": "^22.12.0"
       }
     },
     "node_modules/@ampproject/remapping": {
diff --git a/payroll/services/payroll.py b/payroll/services/payroll.py
index dde4b1a0f..5273ac042 100644
--- a/payroll/services/payroll.py
+++ b/payroll/services/payroll.py
@@ -362,3 +362,41 @@ def get_pay_modifiers_data(
                 obj.mar,
             ],
         )
+
+
+@transaction.atomic
+def update_pay_modifiers_data(
+    cost_centre: CostCentre,
+    financial_year: FinancialYear,
+    data: list[PayModifiers],
+) -> None:
+    """Update pay modifiers for a given year and cost centre using the provided list.
+
+    This function is wrapped with a transaction, so if any of the pay modifier updates fail,
+    the whole batch will be rolled back.
+
+    Raises:
+        ValueError: If a pay modifier id is empty.
+        ValueError: If there are not 12 items in the pay_modifiers list.
+        ValueError: If any of the pay_periods are not of type float.
+    """
+
+    for pay_modifier in data:
+        if not pay_modifier["id"]:
+            raise ValueError("id is empty")
+
+        if len(pay_modifier["pay_modifiers"]) != 12:
+            raise ValueError("pay_modifiers list should be of length 12")
+
+        if not all(isinstance(x, float) for x in pay_modifier["pay_modifiers"]):
+            raise ValueError("pay_modifiers items should be of type float")
+
+        attrition = Attrition.objects.get(
+            cost_centre=cost_centre,
+            financial_year=financial_year,
+        )
+
+        for index, month in enumerate(MONTHS):
+            setattr(attrition, month, pay_modifier["pay_modifiers"][index])
+
+        attrition.save()
diff --git a/payroll/views.py b/payroll/views.py
index da948007c..44c61d7ff 100644
--- a/payroll/views.py
+++ b/payroll/views.py
@@ -86,6 +86,13 @@ def get_data(self):
             self.financial_year,
         )
 
+    def post_data(self, data):
+        return payroll_service.update_pay_modifiers_data(
+            self.cost_centre,
+            self.financial_year,
+            data,
+        )
+
 
 def redirect_edit_payroll(cost_centre_code, financial_year):
     return redirect(

From ba6c928a5370bd80fb9e0819963d188287ad1d96 Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Mon, 16 Dec 2024 15:46:25 +0000
Subject: [PATCH 07/20] Convert values to floats

---
 payroll/services/payroll.py | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/payroll/services/payroll.py b/payroll/services/payroll.py
index 5273ac042..2bbd5a0c8 100644
--- a/payroll/services/payroll.py
+++ b/payroll/services/payroll.py
@@ -388,7 +388,9 @@ def update_pay_modifiers_data(
         if len(pay_modifier["pay_modifiers"]) != 12:
             raise ValueError("pay_modifiers list should be of length 12")
 
-        if not all(isinstance(x, float) for x in pay_modifier["pay_modifiers"]):
+        convert_to_float = [float(num) for num in pay_modifier["pay_modifiers"]]
+
+        if not all(isinstance(x, float) for x in convert_to_float):
             raise ValueError("pay_modifiers items should be of type float")
 
         attrition = Attrition.objects.get(
@@ -397,6 +399,6 @@ def update_pay_modifiers_data(
         )
 
         for index, month in enumerate(MONTHS):
-            setattr(attrition, month, pay_modifier["pay_modifiers"][index])
+            setattr(attrition, month, convert_to_float[index])
 
         attrition.save()

From 8d30fad46bcbe2ba6ef92ede3704a0ede74eaef3 Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Tue, 17 Dec 2024 11:25:53 +0000
Subject: [PATCH 08/20] Add header for attrition

---
 front_end/src/Apps/Payroll.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx
index aa8feef4a..e2500ee88 100644
--- a/front_end/src/Apps/Payroll.jsx
+++ b/front_end/src/Apps/Payroll.jsx
@@ -129,6 +129,7 @@ export default function Payroll() {
           </a>
         </Tab>
         <Tab label="Pay Modifiers" key="2">
+          <h2 className="govuk-heading-m">Attrition</h2>
           <EditPayModifier
             data={payModifiers}
             onInputChange={handleUpdatePayModifiers}

From b4cb1a06f2613355fcfe15079d7be53840b9a05b Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Tue, 17 Dec 2024 11:43:45 +0000
Subject: [PATCH 09/20] Minor fixes PR comments

---
 .../Components/EditPayroll/EditPayModifier/index.jsx | 12 +++++++-----
 front_end/src/Components/EditPayroll/api.js          |  4 ++--
 front_end/src/Components/EditPayroll/types.js        |  2 +-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx b/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
index 4200fd3a2..eb5c1ddba 100644
--- a/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
+++ b/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
@@ -2,8 +2,10 @@ import { monthsToTitleCase } from "../../../Util";
 
 const EditPayModifier = ({ data, onInputChange }) => {
   return (
-    data.length > 0 && (
-      <div className="govuk-form-group">
+    data.length > 0 &&
+    data.map((row, index) => (
+      <div className="govuk-form-group" key={index}>
+        {console.log(row)}
         <table className="govuk-table">
           <thead className="govuk-table__head">
             <tr className="govuk-table__row">
@@ -18,7 +20,7 @@ const EditPayModifier = ({ data, onInputChange }) => {
           </thead>
           <tbody className="govuk-table__body">
             <tr className="govuk-table__row">
-              {data[0].pay_modifiers.map((value, index) => {
+              {row.pay_modifiers.map((value, index) => {
                 return (
                   <td className="govuk-table__cell" key={index}>
                     <input
@@ -28,7 +30,7 @@ const EditPayModifier = ({ data, onInputChange }) => {
                       type="number"
                       defaultValue={value}
                       onChange={(e) =>
-                        onInputChange(data[0].id, index, e.target.value)
+                        onInputChange(row.id, index, e.target.value)
                       }
                     ></input>
                   </td>
@@ -38,7 +40,7 @@ const EditPayModifier = ({ data, onInputChange }) => {
           </tbody>
         </table>
       </div>
-    )
+    ))
   );
 };
 
diff --git a/front_end/src/Components/EditPayroll/api.js b/front_end/src/Components/EditPayroll/api.js
index 751d265a3..7fed9dc6c 100644
--- a/front_end/src/Components/EditPayroll/api.js
+++ b/front_end/src/Components/EditPayroll/api.js
@@ -57,8 +57,8 @@ export function getPayModifierData() {
 /**
  * Post modified pay modifiers data.
  *
- * @param {types.PayModifierData[]} payModifierData - Vacancy data to be sent.
- * @returns {import("../../Util").PostDataResponse} Updated vacancy data received.
+ * @param {types.PayModifierData[]} payModifierData - Pay modifier data to be sent.
+ * @returns {import("../../Util").PostDataResponse} Updated pay modifier data received.
  */
 export function postPayModifierData(payModifierData) {
   return postData(
diff --git a/front_end/src/Components/EditPayroll/types.js b/front_end/src/Components/EditPayroll/types.js
index 39216fb55..6f789cc46 100644
--- a/front_end/src/Components/EditPayroll/types.js
+++ b/front_end/src/Components/EditPayroll/types.js
@@ -27,7 +27,7 @@
 
 /**
  * @typedef {Object} PayModifierData
- * @property {string} id - The pay modifier's pk.
+ * @property {number} id - The pay modifier's pk.
  * @property {float[]} pay_modifiers - The pay modifier's monthly percentages
  */
 

From a9771fce24b1ffe59ea371a4f2e865e338baf87d Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Tue, 17 Dec 2024 11:47:59 +0000
Subject: [PATCH 10/20] Use periods property on PayModifier

---
 payroll/services/payroll.py | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/payroll/services/payroll.py b/payroll/services/payroll.py
index 2bbd5a0c8..85b7e48d2 100644
--- a/payroll/services/payroll.py
+++ b/payroll/services/payroll.py
@@ -345,23 +345,7 @@ def get_pay_modifiers_data(
         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,
-            ],
-        )
+        yield PayModifiers(id=obj.pk, pay_modifiers=obj.periods)
 
 
 @transaction.atomic

From 13e5f9c11f4a1028376f22a1ee33f9b67a3e34f2 Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Tue, 17 Dec 2024 11:50:48 +0000
Subject: [PATCH 11/20] Fix tab id

---
 front_end/src/Components/EditPayroll/Tabs/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front_end/src/Components/EditPayroll/Tabs/index.jsx b/front_end/src/Components/EditPayroll/Tabs/index.jsx
index 599d1ae0c..0d1809a79 100644
--- a/front_end/src/Components/EditPayroll/Tabs/index.jsx
+++ b/front_end/src/Components/EditPayroll/Tabs/index.jsx
@@ -27,7 +27,7 @@ export default function Tabs({ children }) {
           <div
             className={`govuk-tabs__panel ${activeTab === index ? "" : "govuk-tabs__panel--hidden"}`}
             key={index}
-            id="dashboard"
+            id={tab.props.label}
           >
             {tab.props.children}
           </div>

From 4f5955604afa5c79f7decc0f988341ec0735f38d Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Tue, 17 Dec 2024 13:54:07 +0000
Subject: [PATCH 12/20] Add periods display property and rename PositionView

---
 core/models.py   | 4 ++++
 payroll/views.py | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/core/models.py b/core/models.py
index bc684a35d..a46896bab 100644
--- a/core/models.py
+++ b/core/models.py
@@ -98,6 +98,10 @@ class Meta:
     def periods(self) -> list[float]:
         return [getattr(self, month) for month in MONTHS]
 
+    @property
+    def periods_as_percentage(self) -> list[float]:
+        return [month * 100 for month in self.periods]
+
     financial_year = models.ForeignKey(FinancialYear, on_delete=models.PROTECT)
     apr = models.FloatField(default=1.0)
     may = models.FloatField(default=1.0)
diff --git a/payroll/views.py b/payroll/views.py
index 44c61d7ff..42e3baf01 100644
--- a/payroll/views.py
+++ b/payroll/views.py
@@ -15,7 +15,7 @@
 from .services import payroll as payroll_service
 
 
-class PositionView(UserPassesTestMixin, View):
+class EditPayrollView(UserPassesTestMixin, View):
     def test_func(self) -> bool | None:
         return self.request.user.is_superuser
 
@@ -49,7 +49,7 @@ def post(self, request, *args, **kwargs):
 
 
 # TODO: check user has access to cost centre
-class PayrollView(PositionView):
+class PayrollView(EditPayrollView):
     def get_data(self):
         return payroll_service.get_payroll_data(
             self.cost_centre,
@@ -64,7 +64,7 @@ def post_data(self, data):
         )
 
 
-class VacancyView(PositionView):
+class VacancyView(EditPayrollView):
     def get_data(self):
         return payroll_service.get_vacancies_data(
             self.cost_centre,
@@ -79,7 +79,7 @@ def post_data(self, data):
         )
 
 
-class PayModifierView(PositionView):
+class PayModifierView(EditPayrollView):
     def get_data(self):
         return payroll_service.get_pay_modifiers_data(
             self.cost_centre,

From f22bb578594c30e6b774236791bd2c579cd2f3dc Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Tue, 17 Dec 2024 14:09:38 +0000
Subject: [PATCH 13/20] Save tab state to local storage

---
 front_end/src/Apps/Payroll.jsx                      | 10 +++++++++-
 front_end/src/Components/EditPayroll/Tabs/index.jsx |  3 +--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx
index e2500ee88..a16bc0b3b 100644
--- a/front_end/src/Apps/Payroll.jsx
+++ b/front_end/src/Apps/Payroll.jsx
@@ -29,6 +29,14 @@ export default function Payroll() {
     initialPayModifiersState,
   );
   const [saveSuccess, setSaveSuccess] = useState(false);
+  const [activeTab, setActiveTab] = useState(() => {
+    const savedTab = localStorage.getItem("activeTab");
+    return savedTab ? parseInt(savedTab) : 0;
+  });
+
+  useEffect(() => {
+    localStorage.setItem("activeTab", activeTab);
+  }, [activeTab]);
 
   useEffect(() => {
     const savedSuccessFlag = localStorage.getItem("saveSuccess");
@@ -98,7 +106,7 @@ export default function Payroll() {
           </div>
         </div>
       )}
-      <Tabs>
+      <Tabs activeTab={activeTab} setActiveTab={setActiveTab}>
         <Tab label="Dashboard" key="1">
           <h2 className="govuk-heading-m">Payroll</h2>
           <PayrollTable
diff --git a/front_end/src/Components/EditPayroll/Tabs/index.jsx b/front_end/src/Components/EditPayroll/Tabs/index.jsx
index 0d1809a79..9254e4885 100644
--- a/front_end/src/Components/EditPayroll/Tabs/index.jsx
+++ b/front_end/src/Components/EditPayroll/Tabs/index.jsx
@@ -1,7 +1,6 @@
 import { useState } from "react";
 
-export default function Tabs({ children }) {
-  const [activeTab, setActiveTab] = useState(0);
+export default function Tabs({ activeTab, setActiveTab, children }) {
   const tabs = Array.isArray(children) ? children : [children];
   return (
     <>

From 8affac0725798c97297ad63e8390e0c593d2696a Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <54268863+CaitBarnard@users.noreply.github.com>
Date: Tue, 17 Dec 2024 17:12:41 +0000
Subject: [PATCH 14/20] Update front_end/src/Components/EditPayroll/types.js

Co-authored-by: Sam Dudley <samuel.dudley@digital.trade.gov.uk>
---
 front_end/src/Components/EditPayroll/types.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front_end/src/Components/EditPayroll/types.js b/front_end/src/Components/EditPayroll/types.js
index 6f789cc46..6539eccc9 100644
--- a/front_end/src/Components/EditPayroll/types.js
+++ b/front_end/src/Components/EditPayroll/types.js
@@ -28,7 +28,7 @@
 /**
  * @typedef {Object} PayModifierData
  * @property {number} id - The pay modifier's pk.
- * @property {float[]} pay_modifiers - The pay modifier's monthly percentages
+ * @property {number[]} pay_modifiers - The pay modifier's monthly percentages
  */
 
 export const Types = {};

From ae2215d74382a57c6748e8b4b2ee7acf3965bee6 Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Tue, 17 Dec 2024 17:14:14 +0000
Subject: [PATCH 15/20] Update to allow ints and floats

---
 payroll/services/payroll.py | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/payroll/services/payroll.py b/payroll/services/payroll.py
index 85b7e48d2..24ab9b7a7 100644
--- a/payroll/services/payroll.py
+++ b/payroll/services/payroll.py
@@ -362,7 +362,7 @@ def update_pay_modifiers_data(
     Raises:
         ValueError: If a pay modifier id is empty.
         ValueError: If there are not 12 items in the pay_modifiers list.
-        ValueError: If any of the pay_periods are not of type float.
+        ValueError: If any of the pay_modifiers are not of type int or float.
     """
 
     for pay_modifier in data:
@@ -372,17 +372,14 @@ def update_pay_modifiers_data(
         if len(pay_modifier["pay_modifiers"]) != 12:
             raise ValueError("pay_modifiers list should be of length 12")
 
-        convert_to_float = [float(num) for num in pay_modifier["pay_modifiers"]]
-
-        if not all(isinstance(x, float) for x in convert_to_float):
-            raise ValueError("pay_modifiers items should be of type float")
+        if not all(isinstance(x, (int, float)) for x in pay_modifier["pay_modifiers"]):
+            raise ValueError("pay_modifiers items should be of type int or float")
 
         attrition = Attrition.objects.get(
             cost_centre=cost_centre,
             financial_year=financial_year,
         )
-
         for index, month in enumerate(MONTHS):
-            setattr(attrition, month, convert_to_float[index])
+            setattr(attrition, month, pay_modifier["pay_modifiers"][index])
 
         attrition.save()

From 86cb257fb81fa06e072364c981e725295d60252e Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Wed, 18 Dec 2024 14:43:02 +0000
Subject: [PATCH 16/20] Create Attrition on save if no object exists

---
 .../EditPayroll/EditPayModifier/index.jsx           |  1 -
 payroll/services/payroll.py                         | 13 ++++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx b/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
index eb5c1ddba..d51f7043c 100644
--- a/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
+++ b/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
@@ -5,7 +5,6 @@ const EditPayModifier = ({ data, onInputChange }) => {
     data.length > 0 &&
     data.map((row, index) => (
       <div className="govuk-form-group" key={index}>
-        {console.log(row)}
         <table className="govuk-table">
           <thead className="govuk-table__head">
             <tr className="govuk-table__row">
diff --git a/payroll/services/payroll.py b/payroll/services/payroll.py
index 24ab9b7a7..7ccd0fb97 100644
--- a/payroll/services/payroll.py
+++ b/payroll/services/payroll.py
@@ -313,7 +313,7 @@ def update_vacancies_data(
     """
 
     for vacancy in data:
-        if not vacancy["id"]:
+        if not vacancy.get("id"):
             raise ValueError("id is empty")
 
         if len(vacancy["pay_periods"]) != 12:
@@ -344,6 +344,10 @@ def get_pay_modifiers_data(
         cost_centre=cost_centre,
         financial_year=financial_year,
     )
+
+    if not qs:
+        yield PayModifiers(pay_modifiers=[1.0] * 12)
+
     for obj in qs:
         yield PayModifiers(id=obj.pk, pay_modifiers=obj.periods)
 
@@ -366,20 +370,19 @@ def update_pay_modifiers_data(
     """
 
     for pay_modifier in data:
-        if not pay_modifier["id"]:
-            raise ValueError("id is empty")
-
         if len(pay_modifier["pay_modifiers"]) != 12:
             raise ValueError("pay_modifiers list should be of length 12")
 
         if not all(isinstance(x, (int, float)) for x in pay_modifier["pay_modifiers"]):
             raise ValueError("pay_modifiers items should be of type int or float")
 
-        attrition = Attrition.objects.get(
+        attrition, _ = Attrition.objects.get_or_create(
             cost_centre=cost_centre,
             financial_year=financial_year,
         )
+
         for index, month in enumerate(MONTHS):
             setattr(attrition, month, pay_modifier["pay_modifiers"][index])
 
+        attrition.clean()
         attrition.save()

From 262ee6576d6e66beef68e416105546e13580f9f9 Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Wed, 18 Dec 2024 15:15:24 +0000
Subject: [PATCH 17/20] Remove create logic

---
 payroll/services/payroll.py | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/payroll/services/payroll.py b/payroll/services/payroll.py
index 7ccd0fb97..f9d20207a 100644
--- a/payroll/services/payroll.py
+++ b/payroll/services/payroll.py
@@ -344,10 +344,6 @@ def get_pay_modifiers_data(
         cost_centre=cost_centre,
         financial_year=financial_year,
     )
-
-    if not qs:
-        yield PayModifiers(pay_modifiers=[1.0] * 12)
-
     for obj in qs:
         yield PayModifiers(id=obj.pk, pay_modifiers=obj.periods)
 
@@ -370,13 +366,16 @@ def update_pay_modifiers_data(
     """
 
     for pay_modifier in data:
+        if not pay_modifier.get("id"):
+            raise ValueError("id is empty")
+
         if len(pay_modifier["pay_modifiers"]) != 12:
             raise ValueError("pay_modifiers list should be of length 12")
 
         if not all(isinstance(x, (int, float)) for x in pay_modifier["pay_modifiers"]):
             raise ValueError("pay_modifiers items should be of type int or float")
 
-        attrition, _ = Attrition.objects.get_or_create(
+        attrition = Attrition.objects.get(
             cost_centre=cost_centre,
             financial_year=financial_year,
         )

From bb4cba2033347bff34dca23922a0609ac2240eb9 Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Wed, 18 Dec 2024 15:56:37 +0000
Subject: [PATCH 18/20] Raise any errors from clean

---
 payroll/services/payroll.py | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/payroll/services/payroll.py b/payroll/services/payroll.py
index f9d20207a..d7d5618e0 100644
--- a/payroll/services/payroll.py
+++ b/payroll/services/payroll.py
@@ -383,5 +383,9 @@ def update_pay_modifiers_data(
         for index, month in enumerate(MONTHS):
             setattr(attrition, month, pay_modifier["pay_modifiers"][index])
 
-        attrition.clean()
+        try:
+            attrition.clean()
+        except Exception as ex:
+            raise ValueError(ex)
+
         attrition.save()

From 691f8c94d4975e2344874816c3fc45cb9f84a0e7 Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Thu, 19 Dec 2024 10:22:06 +0000
Subject: [PATCH 19/20] Move payroll tables to individual tabs

---
 front_end/src/Apps/Payroll.jsx                      | 12 ++++++------
 front_end/src/Components/EditPayroll/Tabs/index.jsx |  3 +--
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx
index a16bc0b3b..0bac25e5d 100644
--- a/front_end/src/Apps/Payroll.jsx
+++ b/front_end/src/Apps/Payroll.jsx
@@ -107,22 +107,23 @@ export default function Payroll() {
         </div>
       )}
       <Tabs activeTab={activeTab} setActiveTab={setActiveTab}>
-        <Tab label="Dashboard" key="1">
-          <h2 className="govuk-heading-m">Payroll</h2>
+        <Tab label="Payroll" key="1">
           <PayrollTable
             payroll={payroll}
             headers={payrollHeaders}
             onTogglePayPeriods={handleTogglePayPeriods}
             RowComponent={EmployeeRow}
           />
-          <h2 className="govuk-heading-m">Non-payroll</h2>
+        </Tab>
+        <Tab label="Non-payroll" key="2">
           <PayrollTable
             payroll={nonPayroll}
             headers={payrollHeaders}
             onTogglePayPeriods={handleTogglePayPeriods}
             RowComponent={EmployeeRow}
           />
-          <h2 className="govuk-heading-m">Vacancies</h2>
+        </Tab>
+        <Tab label="Vacancies" key="3">
           <PayrollTable
             payroll={vacancies}
             headers={vacancyHeaders}
@@ -136,8 +137,7 @@ export default function Payroll() {
             Add Vacancy
           </a>
         </Tab>
-        <Tab label="Pay Modifiers" key="2">
-          <h2 className="govuk-heading-m">Attrition</h2>
+        <Tab label="Pay modifiers" key="4">
           <EditPayModifier
             data={payModifiers}
             onInputChange={handleUpdatePayModifiers}
diff --git a/front_end/src/Components/EditPayroll/Tabs/index.jsx b/front_end/src/Components/EditPayroll/Tabs/index.jsx
index 9254e4885..49336889c 100644
--- a/front_end/src/Components/EditPayroll/Tabs/index.jsx
+++ b/front_end/src/Components/EditPayroll/Tabs/index.jsx
@@ -1,5 +1,3 @@
-import { useState } from "react";
-
 export default function Tabs({ activeTab, setActiveTab, children }) {
   const tabs = Array.isArray(children) ? children : [children];
   return (
@@ -28,6 +26,7 @@ export default function Tabs({ activeTab, setActiveTab, children }) {
             key={index}
             id={tab.props.label}
           >
+            <h2 className="govuk-heading-m">{tab.props.label}</h2>
             {tab.props.children}
           </div>
         ))}

From 5deaba1139292a21bd25602c1b501a34b3d2e979 Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Thu, 19 Dec 2024 10:32:26 +0000
Subject: [PATCH 20/20] Make localStorage key specific and handle empty pay
 modifiers

---
 front_end/src/Apps/Payroll.jsx                |  4 +-
 .../EditPayroll/EditPayModifier/index.jsx     | 80 +++++++++----------
 2 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx
index 0bac25e5d..dee826ec7 100644
--- a/front_end/src/Apps/Payroll.jsx
+++ b/front_end/src/Apps/Payroll.jsx
@@ -30,12 +30,12 @@ export default function Payroll() {
   );
   const [saveSuccess, setSaveSuccess] = useState(false);
   const [activeTab, setActiveTab] = useState(() => {
-    const savedTab = localStorage.getItem("activeTab");
+    const savedTab = localStorage.getItem("editPayroll.activeTab");
     return savedTab ? parseInt(savedTab) : 0;
   });
 
   useEffect(() => {
-    localStorage.setItem("activeTab", activeTab);
+    localStorage.setItem("editPayroll.activeTab", activeTab);
   }, [activeTab]);
 
   useEffect(() => {
diff --git a/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx b/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
index d51f7043c..50528bff2 100644
--- a/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
+++ b/front_end/src/Components/EditPayroll/EditPayModifier/index.jsx
@@ -1,46 +1,46 @@
 import { monthsToTitleCase } from "../../../Util";
 
 const EditPayModifier = ({ data, onInputChange }) => {
-  return (
-    data.length > 0 &&
-    data.map((row, index) => (
-      <div className="govuk-form-group" key={index}>
-        <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">
-              {row.pay_modifiers.map((value, index) => {
-                return (
-                  <td className="govuk-table__cell" key={index}>
-                    <input
-                      className="govuk-input"
-                      id={`modifier-${index}`}
-                      name={`modifier-${index}`}
-                      type="number"
-                      defaultValue={value}
-                      onChange={(e) =>
-                        onInputChange(row.id, index, e.target.value)
-                      }
-                    ></input>
-                  </td>
-                );
-              })}
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    ))
-  );
+  if (data.length === 0) {
+    return <p class="govuk-body">No modifiers set</p>;
+  }
+  return data.map((row, index) => (
+    <div className="govuk-form-group" key={index}>
+      <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">
+            {row.pay_modifiers.map((value, index) => {
+              return (
+                <td className="govuk-table__cell" key={index}>
+                  <input
+                    className="govuk-input"
+                    id={`modifier-${index}`}
+                    name={`modifier-${index}`}
+                    type="number"
+                    defaultValue={value}
+                    onChange={(e) =>
+                      onInputChange(row.id, index, e.target.value)
+                    }
+                  ></input>
+                </td>
+              );
+            })}
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  ));
 };
 
 export default EditPayModifier;