Skip to content

1000396: added UI changes for Payroll page in Employee Management #43

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

Merged
BalajiSGrid merged 2 commits into from
Dec 29, 2025
Merged

1000396: added UI changes for Payroll page in Employee Management #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
141e162
1000396: added UI corrections in Payroll page
TamilRamGanesan-SF5080 Dec 29, 2025
11d26e7
1000396: added UI changes in payroll page
TamilRamGanesan-SF5080 Dec 29, 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
133 changes: 69 additions & 64 deletions Employee_Managment_App/src/components/EmployeePayRoll.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,42 +73,42 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
}, []);

const itemTemplate = () => {
return (
<div>
<table className="CardTable">
<colgroup>
<col />
</colgroup>
<tbody>
<tr>
<td className="cardcell"> Regular Hours Worked </td>
</tr>
<tr>
<td className="cardcell">OverTime Hours Worked </td>
</tr>
<tr>
<td className="cardcell"> Bonus </td>
</tr>
<tr>
<td className="cardcell separateline"> Commission </td>
</tr>
<tr>
<td className="cardcell"> Federal Income Tax </td>
</tr>
<tr>
<td className="cardcell"> State Income Tax </td>
</tr>
<tr>
<td className="cardcell"> Social Security Tax </td>
</tr>
<tr>
<td className="cardcell"> MedicareTax </td>
</tr>
</tbody>
</table>
</div>
);
};
return (
<div>
<table className="CardTable">
<colgroup>
<col />
</colgroup>
<tbody>
<tr>
<td className="cardcell" style={{ fontWeight: 400 }}> Regular Hours Worked </td>
</tr>
<tr>
<td className="cardcell" style={{ fontWeight: 400 }}>OverTime Hours Worked </td>
</tr>
<tr>
<td className="cardcell" style={{ fontWeight: 400 }}> Bonus </td>
</tr>
<tr>
<td className="cardcell separateline" style={{ fontWeight: 400 }}> Commission </td>
</tr>
<tr>
<td className="cardcell" style={{ fontWeight: 400 }}> Federal Income Tax </td>
</tr>
<tr>
<td className="cardcell" style={{ fontWeight: 400 }}> State Income Tax </td>
</tr>
<tr>
<td className="cardcell" style={{ fontWeight: 400 }}> Social Security Tax </td>
</tr>
<tr>
<td className="cardcell" style={{ fontWeight: 400 }}> MedicareTax </td>
</tr>
</tbody>
</table>
</div>
);
};

const totalTemplate = () => {
return (
Expand Down Expand Up @@ -208,21 +208,26 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
];

const queryCellInfo = (args: QueryCellInfoEventArgs): void => {
if (args.column?.field === 'Total') {
for (let i: number = 0; i < elemClass.length; i++) {
const elem: HTMLElement = args.cell?.querySelector('.' + elemClass[i]) as HTMLElement;
let value: number = 0;
for (let j: number = 0; j < months.length; j++) {
if ((args.data as any)[months[j].field]) {
value += (args.data as any)[months[j].field][elemClass[i]] * (isPreviousYearRef.current ? 0.9 : 1);
}
}
if (elem) {
elem.innerText = '$ ' + value.toFixed(2);
if (args.column?.field === 'Total') {
// Compute totals into the Total column
for (let i = 0; i < elemClass.length; i++) {
const elem = args.cell?.querySelector('.' + elemClass[i]) as HTMLElement;
let value = 0;
for (let j = 0; j < months.length; j++) {
if ((args.data as any)[months[j].field]) {
value += (args.data as any)[months[j].field][elemClass[i]] * (isPreviousYearRef.current ? 0.9 : 1);
}
}
if (elem) {
elem.innerText = '$ ' + value.toFixed(2);
}
}
};

// Make all Total column values medium (500)
const totalCells = args.cell?.querySelectorAll('.cardcell') ?? [];
totalCells.forEach((c) => ((c as HTMLElement).style.fontWeight = '500'));
}
};

const calculteGrossAggregate = (data: any, aggColumn: AggregateColumnModel): string => {
const payStubData: MonthPayStub =
Expand Down Expand Up @@ -412,7 +417,7 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
type="Custom"
customAggregate={calculteGrossInYear}
footerTemplate={(props: any) => {
return <span>$ {props.Custom}</span>;
return <span style={{ fontWeight: 500 }}>$ {props.Custom}</span>;
}}
/>
{months.map((x, index) => {
Expand Down Expand Up @@ -445,7 +450,7 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
type="Custom"
customAggregate={calculteDeductionInYear}
footerTemplate={(props: any) => {
return <span>$ {props.Custom}</span>;
return <span style={{ fontWeight: 500 }}>$ {props.Custom}</span>;
}}
/>
{months.map((x, index) => {
Expand All @@ -470,30 +475,30 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
field="Item"
type="Custom"
footerTemplate={() => {
return <strong>Net Pay</strong>;
return <span style={{ fontWeight: 600 }}>Net Pay</span>;
}}
/>
<AggregateColumnDirective
field="Total"
type="Custom"
customAggregate={calculteNetPayInYear}
footerTemplate={(props: any) => {
return <strong>$ {props.Custom}</strong>;
return <span style={{ fontWeight: 600 }}>$ {props.Custom}</span>;
}}
/>
{months.map((x, index) => {
return (
<AggregateColumnDirective
key={index + 3}
field={x.field}
type="Custom"
customAggregate={calculteNetPayAggregate}
footerTemplate={(props: any) => {
return <span>$ {props.Custom}</span>;
}}
/>
);
})}
return (
<AggregateColumnDirective
key={index + 3}
field={x.field}
type="Custom"
customAggregate={calculteNetPayAggregate}
footerTemplate={(props: any) => {
return <span style={{ fontWeight: 600 }}>$ {props.Custom}</span>;
}}
/>
);
})}
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
Expand Down
1 change: 0 additions & 1 deletion Employee_Managment_App/src/components/TopNav.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,6 @@

/* Input group container */
.search-field.input-group {
pointer-events: none;
position: relative;
display: flex;
align-items: center;
Expand Down