Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FFT-223 Attrition displayed as a percentage #641

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

FFT-223 Attrition displayed as a percentage #641

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b460fcf
Display attrition as a percentage but store as decimal
CaitBarnard Mar 10, 2025
f2f4f77
styling
CaitBarnard Mar 10, 2025
0ebe78e
Update Pay Uplift to display as percentage
CaitBarnard Mar 10, 2025
07a9174
Update utils and use correct converter
CaitBarnard Mar 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions front_end/src/Apps/Payroll.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,16 +252,18 @@ export default function Payroll() {
</a>
</Tab>
<Tab label="Pay modifiers" key="4">
<DisplayAttrition
attrition={allPayroll.pay_modifiers.attrition}
global_attrition={allPayroll.pay_modifiers.global_attrition}
onInputChange={handleUpdateAttrition}
onCreate={handleCreateAttrition}
/>
<DisplayPayModifier
modifier={allPayroll.pay_modifiers.pay_uplift}
title="Pay uplift"
/>
<div className="scrollable">
<DisplayAttrition
attrition={allPayroll.pay_modifiers.attrition}
global_attrition={allPayroll.pay_modifiers.global_attrition}
onInputChange={handleUpdateAttrition}
onCreate={handleCreateAttrition}
/>
<DisplayPayModifier
modifier={allPayroll.pay_modifiers.pay_uplift}
title="Pay uplift"
/>
</div>
</Tab>
</Tabs>
<button className="govuk-button" onClick={handleSavePayroll}>
Expand Down
27 changes: 19 additions & 8 deletions front_end/src/Components/EditPayroll/DisplayAttrition/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import PayModifierHeaders from "../PayModifierHeaders";
import DisplayPayModifier from "../DisplayPayModifier";
import { decimalToPercentage, percentageToDecimal } from "../../../Util";

const DisplayAttrition = ({
attrition = [],
Expand All @@ -18,14 +19,24 @@ const DisplayAttrition = ({
{attrition.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(index, e.target.value)}
></input>
<div class="govuk-input__wrapper">
<input
className="govuk-input govuk-input--width-3"
id={`modifier-${index}`}
name={`modifier-${index}`}
type="number"
defaultValue={decimalToPercentage(value)}
onChange={(e) =>
onInputChange(
index,
percentageToDecimal(e.target.value),
)
}
></input>
<div class="govuk-input__suffix" aria-hidden="true">
%
</div>
</div>
</td>
);
})}
Expand Down
3 changes: 2 additions & 1 deletion front_end/src/Components/EditPayroll/DisplayPayModifier/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { valueAboveOneToPercentage } from "../../../Util";
import PayModifierHeaders from "../PayModifierHeaders";

const DisplayPayModifier = ({ modifier = [], title }) => {
Expand All @@ -20,7 +21,7 @@ const DisplayPayModifier = ({ modifier = [], title }) => {
{modifier.map((value, index) => {
return (
<td className="govuk-table__cell" key={index}>
{value}
{valueAboveOneToPercentage(value)}%
</td>
);
})}
Expand Down
16 changes: 16 additions & 0 deletions front_end/src/Util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,22 @@ function getCookie(name) {
return cookieValue;
}

export const percentageToDecimal = (percentage) => {
return 1.0 - percentage / 100;
};

export const decimalToPercentage = (decimal) => {
// Converts a decimal between 0.0 and 1.0 to percentage: 0.2 = 20%
// Rounded to prevent decimal precision issues
return Math.round((1.0 - decimal) * 100 * 1e10) / 1e10;
};

export const valueAboveOneToPercentage = (value) => {
// Converts a value greater than 1.0 to percentage: 1.2 = 20%
// Rounded to prevent decimal precision issues
return Math.round((value - 1.0) * 100 * 1e10) / 1e10;
};
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's probably a better way to have these two methods. One is for attrition, the other is pay uplift


var currencyFormat = new Intl.NumberFormat("en-GB", {
style: "currency",
currency: "GBP",
Expand Down