First pass on read only global attrition

uktrade · Feb 13, 2025 · f26a519 · f26a519
1 parent 5c38cf9
commit f26a519
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 11 deletions.
diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx
@@ -194,12 +194,25 @@ export default function Payroll() {
           </a>
         </Tab>
         <Tab label="Pay modifiers" key="4">
-          <EditPayModifier
-            data={allPayroll.pay_modifiers.attrition}
-            onInputChange={handleUpdateAttrition}
-            onCreate={handleCreateAttrition}
+          {allPayroll.pay_modifiers.attrition &&
+          allPayroll.pay_modifiers.attrition.length ? (
+            <EditPayModifier
+              data={allPayroll.pay_modifiers.attrition}
+              onInputChange={handleUpdateAttrition}
+              onCreate={handleCreateAttrition}
+            />
+          ) : (
+            <DisplayPayModifier
+              data={allPayroll.pay_modifiers.global_attrition}
+              title="Global attrition"
+              isAttrition={true}
+              onCreate={handleCreateAttrition}
+            />
+          )}
+          <DisplayPayModifier
+            data={allPayroll.pay_modifiers.pay_uplift}
+            title="Pay uplift"
           />
-          <DisplayPayModifier data={allPayroll.pay_modifiers.pay_uplift} />
         </Tab>
       </Tabs>
       <button className="govuk-button" onClick={handleSavePayroll}>

diff --git a/front_end/src/Components/EditPayroll/DisplayPayModifier/index.jsx b/front_end/src/Components/EditPayroll/DisplayPayModifier/index.jsx
@@ -1,18 +1,31 @@
 import PayModifierHeaders from "../PayModifierHeaders";
 
-const DisplayPayModifier = ({ data }) => {
+const DisplayPayModifier = ({
+  data,
+  title,
+  isAttrition = false,
+  onCreate = [],
+}) => {
   if (!data || data <= 0) {
     return (
       <>
-        <h3 className="govuk-heading-s">Pay uplift</h3>
-        <p className="govuk-body">No pay uplift set</p>
+        <h3 className="govuk-heading-s">{title}</h3>
+        <p className="govuk-body">No {title.toLowerCase()} set</p>
+        {isAttrition && (
+          <button
+            className="govuk-button govuk-button--secondary"
+            onClick={onCreate}
+          >
+            Add Attrition
+          </button>
+        )}
       </>
     );
   }
 
   return (
-    <div className="govuk-form-group">
-      <h3 className="govuk-heading-s">Pay Uplift</h3>
+    <>
+      <h3 className="govuk-heading-s">{title}</h3>
       <table className="govuk-table">
         <PayModifierHeaders />
         <tbody className="govuk-table__body">
@@ -27,7 +40,21 @@ const DisplayPayModifier = ({ data }) => {
           </tr>
         </tbody>
       </table>
-    </div>
+      {isAttrition && (
+        <>
+          <p className="govuk-body">
+            This attrition is for the current financial year. You can add one
+            for this specific cost centre instead.
+          </p>
+          <button
+            className="govuk-button govuk-button--secondary"
+            onClick={onCreate}
+          >
+            Add Attrition
+          </button>
+        </>
+      )}
+    </>
   );
 };