Skip to content

Commit 7a302c1

Browse files
SwathiRavi14SwathiRavi14
committed
1006807: Fixed the UI and Functionality issues in Employee Management
1 parent 7a07741 commit 7a302c1

File tree

14 files changed

+147
-104
lines changed

14 files changed

+147
-104
lines changed

‎Employee_Managment_App/src/App.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,12 @@
5454
.app-main {
5555
position: relative;
5656
margin-left: var(--sidebar-current-width);
57-
padding: calc(var(--header-h) + 16px) 0 24px;
57+
padding: calc(var(--header-h) + 16px) 0 0;
5858
min-height: 100vh;
5959
box-sizing: border-box;
6060
background: #f3f3f4;
6161
transition: margin-left 220ms ease;
62+
padding-top: 58px;
6263
}
6364

6465
/* Optional: collapse style tweaks */

‎Employee_Managment_App/src/components/Achievements.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ body,
3535
}
3636

3737
.achievements-container {
38-
padding: 18px 22px 32px;
38+
padding: 5px 22px 32px;
3939
background: #f3f3f4;
4040
/* removed decorative radial gradients */
4141
min-height: 100%;
@@ -64,6 +64,7 @@ body,
6464
font-size: 13px;
6565
font-weight: 400;
6666
font-family: 'Roboto', sans-serif;
67+
color: #6B7280;
6768
}
6869

6970
.toolbar-right {

‎Employee_Managment_App/src/components/Achievements.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -98,13 +98,15 @@ function monthIndex(m: string) {
9898
return ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(m);
9999
}
100100

101+
101102
function buildScores(emp: EmployeeDetails, month: string, year: number): ScoreTriple {
102-
const seedKey = `${emp.EmployeeCode || emp.Name}-${year}-${month}`;
103-
const rand = seededPRNG(seedKey);
103+
const baseSeed = `${emp.EmployeeCode || emp.Name}-${year}-${month}`;
104+
const randTask = seededPRNG(baseSeed + '-task-score');
105+
const randAttend = seededPRNG(baseSeed + '-attendance-unique');
106+
const randOverall = seededPRNG(baseSeed + '-overall-calc');
104107

105108
const role = mapDesignationToRole(emp.Designation);
106109
const roleTaskWeight = role === 'Manager' ? 0.9 : role === 'QA' ? 1.1 : role === 'Designer' ? 1.0 : 1.05;
107-
const roleAttendWeight = role === 'Manager' ? 0.95 : 1.0;
108110

109111
let tenureYears = 1;
110112
try {
@@ -119,13 +121,19 @@ function buildScores(emp: EmployeeDetails, month: string, year: number): ScoreTr
119121
}
120122
const tenureBonus = 1 + tenureYears * 0.02;
121123

122-
const task = Math.round((12 + rand() * 18) * roleTaskWeight * tenureBonus);
123-
const attendance = Math.round((8 + rand() * 14) * roleAttendWeight);
124-
const overall = Math.round(task * 12 + attendance * 8 + rand() * 20);
124+
// Task scores: 200-600 range
125+
const task = Math.round((150 + randTask() * 400) * roleTaskWeight * tenureBonus);
126+
127+
// Attendance: Use PRNG for proper unique distribution (25-95 range)
128+
const attendance = Math.round(25 + randAttend() * 70);
129+
130+
// Overall: combination of task, attendance (weighted heavily), and bonus
131+
const overall = Math.round(task + (attendance * 4) + randOverall() * 200);
125132

126133
return { task, attendance, overall };
127134
}
128135

136+
129137
function initials(name?: string) {
130138
if (!name) return 'NA';
131139
const parts = name.trim().split(/\s+/);

‎Employee_Managment_App/src/components/EmployeeLeave.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@
164164
}
165165

166166
.lt-emergency {
167-
background-color: #f37070;
167+
background-color: #999;
168168
color: #fff;
169169
padding: 4px 10px;
170170
}
@@ -251,15 +251,15 @@
251251

252252
/* now per-status background colors */
253253
.status-approved {
254-
background-color: #FFE28A;
254+
background-color: #16A34A;
255255
color: #fff;
256256
}
257257
.status-closed {
258-
background-color: #7BD4B4;
258+
background-color: #6B7280;
259259
color: #fff;
260260
}
261261
.status-need-to-approve {
262-
background-color: #F5A8A8;
262+
background-color: #f3ce85;
263263
color: #fff;
264264
}
265265
.status-requested {

‎Employee_Managment_App/src/components/EmployeeLeave.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ const EmployeeLeave = (props: { employeeData: EmployeeDetails; userInfo: Employe
111111

112112
const [query, setQuery] = useState(() => new Query().where(predicate));
113113
const leaveGridIns = useRef<GridComponent>(null);
114-
const toolbar: string[] = ['ColumnChooser', 'Search', 'ExcelExport'];
114+
const toolbar: string[] = ['Search', 'ColumnChooser', 'ExcelExport'];
115115

116116
const emptyRecordTemplate = useCallback(() => {
117117
return <div> No Results Found </div>;

‎Employee_Managment_App/src/components/EmployeePayRoll.tsx‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,9 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
3939
const query: Query = new Query().where('EmployeeCode', 'equal', props.employeeData.EmployeeCode);
4040
const currentDate: Date = new Date();
4141
const currentYear: number = currentDate.getFullYear() - 1;
42-
42+
const headerTextRef = useRef<HTMLDivElement>(null);
43+
const initialYear: number = currentDate.getFullYear() - 1;
44+
4345
const months: { field: string; headerText: string }[] = [
4446
{ field: 'JanPayStub', headerText: 'Jan' },
4547
{ field: 'FebPayStub', headerText: 'Feb' },
@@ -81,28 +83,28 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
8183
</colgroup>
8284
<tbody>
8385
<tr>
84-
<td className="cardcell" style={{ fontWeight: 400 }}> Regular Hours Worked </td>
86+
<td className="cardcell"> Regular Hours Worked </td>
8587
</tr>
8688
<tr>
87-
<td className="cardcell" style={{ fontWeight: 400 }}>OverTime Hours Worked </td>
89+
<td className="cardcell">OverTime Hours Worked </td>
8890
</tr>
8991
<tr>
90-
<td className="cardcell" style={{ fontWeight: 400 }}> Bonus </td>
92+
<td className="cardcell"> Bonus </td>
9193
</tr>
9294
<tr>
93-
<td className="cardcell separateline" style={{ fontWeight: 400 }}> Commission </td>
95+
<td className="cardcell separateline"> Commission </td>
9496
</tr>
9597
<tr>
96-
<td className="cardcell" style={{ fontWeight: 400 }}> Federal Income Tax </td>
98+
<td className="cardcell"> Federal Income Tax </td>
9799
</tr>
98100
<tr>
99-
<td className="cardcell" style={{ fontWeight: 400 }}> State Income Tax </td>
101+
<td className="cardcell"> State Income Tax </td>
100102
</tr>
101103
<tr>
102-
<td className="cardcell" style={{ fontWeight: 400 }}> Social Security Tax </td>
104+
<td className="cardcell"> Social Security Tax </td>
103105
</tr>
104106
<tr>
105-
<td className="cardcell" style={{ fontWeight: 400 }}> MedicareTax </td>
107+
<td className="cardcell"> MedicareTax </td>
106108
</tr>
107109
</tbody>
108110
</table>
@@ -119,28 +121,28 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
119121
</colgroup>
120122
<tbody>
121123
<tr>
122-
<td className="cardcell RegularHoursWorked"></td>
124+
<td className="cardcell RegularHoursWorked" style={{fontWeight: 400}}></td>
123125
</tr>
124126
<tr>
125-
<td className="cardcell OverTimeHoursWorked"></td>
127+
<td className="cardcell OverTimeHoursWorked" style={{fontWeight: 400}}></td>
126128
</tr>
127129
<tr>
128-
<td className="cardcell Bonus"></td>
130+
<td className="cardcell Bonus" style={{fontWeight: 400}}></td>
129131
</tr>
130132
<tr>
131-
<td className="cardcell Commission separateline"></td>
133+
<td className="cardcell Commission separateline" style={{fontWeight: 400}}></td>
132134
</tr>
133135
<tr>
134-
<td className="cardcell FederalIncomeTax"></td>
136+
<td className="cardcell FederalIncomeTax" style={{fontWeight: 400}}></td>
135137
</tr>
136138
<tr>
137-
<td className="cardcell StateIncomeTax"></td>
139+
<td className="cardcell StateIncomeTax" style={{fontWeight: 400}}></td>
138140
</tr>
139141
<tr>
140-
<td className="cardcell SocialSecurityTax"></td>
142+
<td className="cardcell SocialSecurityTax" style={{fontWeight: 400}}></td>
141143
</tr>
142144
<tr>
143-
<td className="cardcell MedicareTax"></td>
145+
<td className="cardcell MedicareTax" style={{fontWeight: 400}}></td>
144146
</tr>
145147
</tbody>
146148
</table>
@@ -338,13 +340,16 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
338340

339341
const payrollChange = (args: { value: number }) => {
340342
isPreviousYearRef.current = args.value !== currentYear;
343+
if (headerTextRef.current) {
344+
headerTextRef.current.textContent = `Payroll Summary for ${args.value}`;
345+
}
341346
payRollGridIns.current?.refresh();
342347
};
343348

344349
return (
345350
<div className="payrollpage">
346351
<div className="payroll-header">
347-
<div className="payrollinfo">Payroll for the selected year </div>
352+
<div className="payrollinfo" ref={headerTextRef}>Payroll Summary for {initialYear} </div>
348353
<div className="payrolldd-container">
349354
<DropDownListComponent
350355
id="payrolldd"

‎Employee_Managment_App/src/components/EmployeePayStub.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { useRef } from 'react';
2+
import { useRef, useState } from 'react';
33
import { GridComponent, ColumnsDirective, ColumnDirective, Filter, Page, Inject, Freeze, Aggregate } from '@syncfusion/ej2-react-grids';
44
import { AggregateColumnDirective, AggregateColumnsDirective, AggregateDirective, AggregatesDirective, AggregateColumnModel } from '@syncfusion/ej2-react-grids';
55
import { DataManager, Query, UrlAdaptor } from '@syncfusion/ej2-data';
@@ -31,6 +31,7 @@ const EmployeePayStub = (props: { employeeData: EmployeeDetails }) => {
3131
{ field: 'NovPayStub', headerText: 'Nov' },
3232
{ field: 'DecPayStub', headerText: 'Dec' },
3333
];
34+
const [selectedValue, setSelectedValue] = useState<string>(`${months[currentMonth].headerText} ${currentYear}`);
3435

3536
const itemTemplate = () => {
3637
return (
@@ -156,7 +157,9 @@ const EmployeePayStub = (props: { employeeData: EmployeeDetails }) => {
156157
};
157158

158159
const paystubChange = (args: ChangeEventArgs): void => {
160+
debugger;
159161
let showCols: string[] = [(args.itemData as { field: string; headerText: string }).headerText];
162+
setSelectedValue(`${showCols} ${currentYear}`);
160163
let hideCols: string[] = [];
161164
months.forEach((x) => {
162165
if (x.headerText !== (args.itemData as { field: string; headerText: string }).headerText) {
@@ -171,10 +174,10 @@ const EmployeePayStub = (props: { employeeData: EmployeeDetails }) => {
171174
<div className="paystubpage">
172175
<div className="paystub-header">
173176
<div className="paystubinfo">
174-
Paystub for the selected month in {currentYear}
177+
Paystub - {selectedValue}
175178
</div>
176179
<div className="paystubdd-container">
177-
Choose Month: &nbsp;&nbsp;
180+
<span style={{fontSize:14}}>Choose Month:</span>&nbsp;&nbsp;
178181
<DropDownListComponent
179182
id="paystubdd"
180183
dataSource={months}

‎Employee_Managment_App/src/components/Employees.tsx‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
Page, Inject, ContextMenu, CommandColumn, Freeze, LazyLoadGroup, RecordClickEventArgs, RowInfo,
66
ExcelExport, Column, Search // <-- add Search
77
} from '@syncfusion/ej2-react-grids';
8-
import { DataManager, UrlAdaptor, DataUtil } from '@syncfusion/ej2-data';
8+
import { DataManager, UrlAdaptor, DataUtil, Query } from '@syncfusion/ej2-data';
99
import { useNavigate } from 'react-router-dom';
1010
import { useRef, useEffect } from 'react';
1111
import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-react-popups';
@@ -16,9 +16,24 @@ import './Employees.css';
1616

1717
DataUtil.serverTimezoneOffset = 0;
1818

19-
const data: DataManager = new DataManager({
19+
20+
const MAX_COUNT = 3000;
21+
22+
class CappedUrlAdaptor extends UrlAdaptor {
23+
public processResponse(data: any, ds: any, query: Query, xhr: any, request: any, changes?: any) {
24+
const res: any = super.processResponse(data, ds, query, xhr, request, changes);
25+
// res can be array or { result, count } depending on server
26+
if (res && typeof res === 'object' && 'result' in res && 'count' in res) {
27+
// Clamp the reported total
28+
res.count = Math.min(res.count ?? 0, MAX_COUNT);
29+
}
30+
return res;
31+
}
32+
}
33+
34+
const data = new DataManager({
2035
url: 'https://ej2services.syncfusion.com/aspnet/development/api/EmployeesData',
21-
adaptor: new UrlAdaptor(),
36+
adaptor: new CappedUrlAdaptor(),
2237
});
2338

2439
type EmployeesProps = {
@@ -169,7 +184,7 @@ const Employees = (props?: EmployeesProps) => {
169184
};
170185

171186
return (
172-
<div className="employees-content">
187+
<div className="employees-content" >
173188
<TooltipComponent
174189
id="content"
175190
cssClass="e-tooltip-template-css"
@@ -183,10 +198,10 @@ const Employees = (props?: EmployeesProps) => {
183198
ref={gridRef}
184199
dataSource={data}
185200
allowPaging={true}
186-
pageSettings={{ pageCount: 4, pageSize: 15 }}
201+
pageSettings={{ pageCount: 8, pageSize: 12 }}
187202
allowExcelExport={true}
188203
//width={'100%'}
189-
//height={'100%'}
204+
height={'100%'}
190205

191206
allowGrouping={true}
192207
groupSettings={{ enableLazyLoading: true }}
@@ -218,24 +233,23 @@ const Employees = (props?: EmployeesProps) => {
218233
headerText="Employee ID"
219234
template={codeTemplate}
220235
customAttributes={{ class: 'infotooltip' }}
221-
width="140"
236+
width="120"
222237
/>
223238
<ColumnDirective field="Name" template={nameTemplate} customAttributes={{ class: 'infotooltip' }} width="150" />
224-
<ColumnDirective field="Mail" headerText="Email ID" clipMode="EllipsisWithTooltip" width="260" />
225-
<ColumnDirective field="Designation" clipMode="EllipsisWithTooltip" width="260" />
239+
<ColumnDirective field="Mail" headerText="Email ID" clipMode="EllipsisWithTooltip" width="230" />
240+
<ColumnDirective field="Designation" clipMode="EllipsisWithTooltip" width="220" />
226241
<ColumnDirective
227242
field="DateOfJoining"
228243
headerText="Date Joined"
229-
textAlign="Right"
230244
type="date"
231245
format={{ type: 'date', format: "MMM d yyyy"}}
232246
clipMode="EllipsisWithTooltip"
233-
width="150"
247+
width="100"
234248
/>
235-
<ColumnDirective field="Branch" clipMode="EllipsisWithTooltip" width="120" />
236-
<ColumnDirective field="Team" headerText="Team(s)" clipMode="EllipsisWithTooltip" width="220" />
237-
<ColumnDirective field="TeamLead" headerText="Reporter" clipMode="EllipsisWithTooltip" width="150" />
238-
<ColumnDirective field="ManagerName" headerText="Manager" clipMode="EllipsisWithTooltip" width="150" />
249+
<ColumnDirective field="Branch" clipMode="EllipsisWithTooltip" width="100" />
250+
<ColumnDirective field="Team" headerText="Team(s)" clipMode="EllipsisWithTooltip" width="170" />
251+
<ColumnDirective field="TeamLead" headerText="Reporter" clipMode="EllipsisWithTooltip" width="130" />
252+
<ColumnDirective field="ManagerName" headerText="Manager" clipMode="EllipsisWithTooltip" width="140" />
239253
</ColumnsDirective>
240254
<Inject
241255
// IMPORTANT: include Search here so the toolbar Search works with remote data

‎Employee_Managment_App/src/components/Organization.css‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,9 @@
2929
--org-soft-shadow: 0 6px 24px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
3030
}
3131

32-
/* Page wrapper subtle background */
33-
.org-theme.org-page {
34-
/* background: linear-gradient(180deg, var(--org-bg), #ffffff); */
35-
padding: 4px 0 0;
36-
}
32+
3733
.org-theme .org-page .employees-content{
38-
padding: 0px 24px;
34+
padding: 19px 24px 6px 24px;
3935
}
4036

4137
/* =========================
@@ -88,7 +84,7 @@
8884
align-items: center;
8985
gap: 12px;
9086
padding: 10px 25px;
91-
margin: 12px 0 14px;
87+
/* margin: 12px 0 14px; */
9288
/* border: 1px solid var(--org-border); */
9389
/* background: linear-gradient(180deg, var(--org-surface), var(--org-surface-2)); */
9490
border-radius: 12px;
@@ -147,7 +143,7 @@
147143

148144
.org-pill:hover {
149145
background: var(--org-green-50);
150-
border-color: gray !important;
146+
border-color: #ccc !important;
151147
box-shadow: 0 2px 10px rgba(34, 197, 94, 0.12);
152148
}
153149

@@ -159,6 +155,7 @@
159155
border-color: var(--secondary-color) !important;
160156
/* box-shadow: 0 1px 5px rgba(26, 179, 148, 1), var(--org-ring); */
161157
padding: 4px 8px;
158+
border-radius: 999px;
162159
}
163160

164161
.org-pill--active:hover {

‎Employee_Managment_App/src/components/Organization.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const Organization = () => {
8484

8585
return (
8686
<div className="employeespage org-theme">
87-
<div className="employees-content">{content0()} </div>
87+
<div className="employees-content" style={{paddingTop: "11px"}}>{content0()} </div>
8888
</div>
8989
);
9090
};

0 commit comments

Comments
 (0)