From 7e4cc61c32e31daccc607becdea2d64578cfd1a8 Mon Sep 17 00:00:00 2001
From: Caitlin Barnard <caitlin@madetech.com>
Date: Tue, 19 Nov 2024 11:36:58 +0000
Subject: [PATCH] Refactor payroll table component to be generic with headers

---
 front_end/src/Apps/Payroll.jsx                | 13 +++++--
 .../src/Components/EditPayroll/constants.js   | 35 +++++++++++++++++++
 .../src/Components/EditPayroll/index.jsx      | 23 +-----------
 3 files changed, 47 insertions(+), 24 deletions(-)
 create mode 100644 front_end/src/Components/EditPayroll/constants.js

diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx
index 3c33784d..161777ca 100644
--- a/front_end/src/Apps/Payroll.jsx
+++ b/front_end/src/Apps/Payroll.jsx
@@ -2,6 +2,7 @@ import { useEffect, useReducer, useState, useMemo } from "react";
 
 import EditPayroll from "../Components/EditPayroll";
 import * as api from "../Components/EditPayroll/api";
+import { payrollHeaders, vacancyHeaders } from "../Components/EditPayroll/constants";
 
 const initialPayrollState = [];
 
@@ -64,14 +65,22 @@ export default function Payroll() {
           </div>
         </div>
       )}
-      <h2 class="govuk-heading-m">Payroll</h2>
+      <h2 className="govuk-heading-m">Payroll</h2>
       <EditPayroll
         payroll={payroll}
+        headers={payrollHeaders}
         onTogglePayPeriods={handleTogglePayPeriods}
       />
-      <h2 class="govuk-heading-m">Non-payroll</h2>
+      <h2 className="govuk-heading-m">Non-payroll</h2>
       <EditPayroll
         payroll={nonPayroll}
+        headers={payrollHeaders}
+        onTogglePayPeriods={handleTogglePayPeriods}
+      />
+      <h2 className="govuk-heading-m">Vacancies</h2>
+      <EditPayroll
+        payroll={nonPayroll}
+        headers={vacancyHeaders}
         onTogglePayPeriods={handleTogglePayPeriods}
       />
       <button className="govuk-button" onClick={handleSavePayroll}>
diff --git a/front_end/src/Components/EditPayroll/constants.js b/front_end/src/Components/EditPayroll/constants.js
new file mode 100644
index 00000000..a2a362f2
--- /dev/null
+++ b/front_end/src/Components/EditPayroll/constants.js
@@ -0,0 +1,35 @@
+const monthHeaders = [
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+  "Jan",
+  "Feb",
+  "Mar",
+];
+
+export const payrollHeaders = [
+  "Name",
+  "Grade",
+  "Employee No",
+  "FTE",
+  "Programme Code",
+  "Budget Type",
+  "Assignment Status",
+].concat(monthHeaders);
+
+export const vacancyHeaders = [
+  "Recruitment Type",
+  "Grade",
+  "Programme",
+  "Budget Type",
+  "Appointee Name",
+  "Hiring Manager",
+  "HR Ref",
+  "Recruitment Stage",
+].concat(monthHeaders);
diff --git a/front_end/src/Components/EditPayroll/index.jsx b/front_end/src/Components/EditPayroll/index.jsx
index 95677096..e87b0f8c 100644
--- a/front_end/src/Components/EditPayroll/index.jsx
+++ b/front_end/src/Components/EditPayroll/index.jsx
@@ -7,28 +7,7 @@ import PayrollTable from "./PayrollTable/index";
  * @param {types.PayrollData[]} props.payroll
  * @returns
  */
-export default function EditPayroll({ payroll, onTogglePayPeriods }) {
-  const headers = [
-    "Name",
-    "Grade",
-    "Employee No",
-    "FTE",
-    "Programme Code",
-    "Budget Type",
-    "Assignment Status",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-    "Jan",
-    "Feb",
-    "Mar",
-  ];
+export default function EditPayroll({ payroll, headers, onTogglePayPeriods }) {
   return (
     <PayrollTable
       headers={headers}