Refactor payroll table component to be generic with headers

uktrade · Nov 19, 2024 · 7e4cc61 · 7e4cc61
1 parent 5b76e5e
commit 7e4cc61
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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}