Skip to content

Commit 7a07741

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

File tree

12 files changed

+157
-117
lines changed

12 files changed

+157
-117
lines changed

‎Employee_Managment_App/public/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
77
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-icons/styles/tailwind3.css" rel="stylesheet" />
8-
<link href="https://cdn.syncfusion.com/ej2/31.1.17/tailwind3.css" rel="stylesheet" />
8+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">
9+
<!-- <link href="https://cdn.syncfusion.com/ej2/31.1.17/tailwind3.css" rel="stylesheet" /> -->
910
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
1011
</head>
1112
<body>

‎Employee_Managment_App/src/components/Achievements.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ body,
5353
}
5454

5555
.toolbar-left .toolbar-title {
56-
font-weight: 100;
56+
font-weight: 300;
5757
letter-spacing: .2px;
5858
font-size: 24px;
5959
font-family: 'Roboto', sans-serif;
@@ -82,8 +82,9 @@ body,
8282
}
8383

8484
.field-label {
85-
opacity: .9;
86-
font-size: 14px;
85+
font-size: 13px;
86+
color: #757575;
87+
font-weight: 500;
8788
}
8889

8990
/* Syncfusion dropdowns */
@@ -98,7 +99,7 @@ body,
9899

99100
.e-input-group.e-control-wrapper {
100101
border: 1px solid var(--border);
101-
border-radius: 8px;
102+
border-radius: 4px;
102103
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
103104
}
104105

@@ -245,9 +246,8 @@ body,
245246
.lb-sub {
246247
font-size: 14px;
247248
color: #fff;
248-
letter-spacing: 1px;
249249
padding-top: 5px;
250-
font-weight: 100;
250+
font-weight: 300;
251251
font-family: 'Roboto', sans-serif;
252252
}
253253

@@ -335,7 +335,7 @@ body,
335335
/* Score - flat chip */
336336
.score {
337337
color: #111827;
338-
font-weight: 100;
338+
font-weight: 300;
339339
font-size: 13px;
340340
letter-spacing: .2px;
341341
font-feature-settings: "tnum" on, "lnum" on;

‎Employee_Managment_App/src/components/Achievements.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ const years = [
5454
{ text: '2022', value: 2022 },
5555
{ text: '2023', value: 2023 },
5656
{ text: '2024', value: 2024 },
57-
{ text: '2025', value: 2025 }
57+
{ text: '2025', value: 2025 },
58+
{ text: '2026', value: 2026 }
5859
];
5960

6061
function mapDesignationToRole(designation?: string): 'Developer' | 'QA' | 'Designer' | 'Manager' {
@@ -135,7 +136,7 @@ function initials(name?: string) {
135136
const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser = true }) => {
136137
const [role, setRole] = useState<string>('All');
137138
const [month, setMonth] = useState<string>('All');
138-
const [year, setYear] = useState<number>(new Date().getFullYear());
139+
const [year, setYear] = useState<number>(2026);
139140

140141
const [employees, setEmployees] = useState<EmployeeDetails[]>([]);
141142
const [loading, setLoading] = useState<boolean>(true);
@@ -203,7 +204,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =
203204
<div className="toolbar-sub">
204205
{onlyTeamIfUser && userInfo?.Team
205206
? `You can view only your team employees in leaderboard. (Team: ${userInfo.Team})`
206-
: 'Leaderboard generated from employee records.'}
207+
: 'You can view only your team employees in leaderboard.'}
207208
</div>
208209
</div>
209210

@@ -222,6 +223,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =
222223
aria-label="Filter by role"
223224
floatLabelType="Never"
224225
popupHeight="220px"
226+
allowFiltering={true}
225227
/>
226228
</label>
227229

@@ -239,6 +241,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =
239241
aria-label="Filter by month"
240242
floatLabelType="Never"
241243
popupHeight="260px"
244+
allowFiltering={true}
242245
/>
243246
</label>
244247

‎Employee_Managment_App/src/components/EmployeeLeave.css‎

Lines changed: 27 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,6 @@
136136
/* --- Base badge look --- */
137137
.employee-leave-detail .e-badge {
138138
display: inline-block;
139-
padding: 4px 10px;
140139
border-radius: 999px;
141140
font-size: 12px;
142141
font-weight: 600;
@@ -153,52 +152,49 @@
153152

154153
/* --- Leave Type (grid cells) --- */
155154
.lt-casual {
156-
background-color: #D0E6FF; /* light blue */
157-
color: #0B63B6; /* dark blue text for contrast */
158-
border: 1px solid #9BC0F5;
155+
background-color: #1ab394;
156+
color: #fff;
157+
padding: 4px 10px;
159158
}
160159

161160
.lt-sick {
162-
background-color: #A8E6CF; /* light green */
163-
color: #11624C; /* dark green */
164-
border: 1px solid #7BD4B4;
161+
background-color: rgb(35, 198, 200);
162+
color: #fff;
163+
padding: 4px 10px;
165164
}
166165

167166
.lt-emergency {
168-
background-color: #FFD6D6; /* light red */
169-
color: #9B1C1C; /* dark red */
170-
border: 1px solid #F5A8A8;
167+
background-color: #f37070;
168+
color: #fff;
169+
padding: 4px 10px;
171170
}
172171

173172
.lt-others {
174-
background-color: #F2E6FF; /* light purple */
175-
color: #5B2E91; /* dark purple */
176-
border: 1px solid #D6C2F5;
173+
background-color: #999;
174+
color: #fff; /* dark purple */
175+
padding: 4px 10px;
177176
}
178177

179178
/* --- Header badges (summary) use same palette --- */
180179
.badge-casual {
181-
background-color: #D0E6FF;
182-
color: #0B63B6;
183-
border: 1px solid #9BC0F5;
180+
background-color: #1ab394;
181+
color: #fff;
184182
}
185183

186184
.badge-sick {
187-
background-color: #A8E6CF;
188-
color: #11624C;
189-
border: 1px solid #7BD4B4;
185+
background-color: #23c6c8;
186+
color: #fff;
187+
height: 18px;
190188
}
191189

192190
.badge-others {
193-
background-color: #F2E6FF;
194-
color: #5B2E91;
195-
border: 1px solid #D6C2F5;
191+
background-color: #999;
192+
color: #fff;
196193
}
197194

198195
.badge-request {
199-
background-color: #FFF3C4; /* light yellow for pending/request */
200-
color: #8A6A00; /* dark gold/brown */
201-
border: 1px solid #FFE28A;
196+
background-color: #f3ce85;
197+
color: #fff;
202198
}
203199

204200
/* Optional: subtle hover for interactive feel in grid cells */
@@ -255,19 +251,16 @@
255251

256252
/* now per-status background colors */
257253
.status-approved {
258-
background-color: #FFF3C4; /* light yellow for pending/request */
259-
color: #8A6A00; /* dark gold/brown */
260-
border: 1px solid #FFE28A; /* green */
254+
background-color: #FFE28A;
255+
color: #fff;
261256
}
262257
.status-closed {
263-
background-color: #A8E6CF; /* light green */
264-
color: #11624C; /* dark green */
265-
border: 1px solid #7BD4B4; /* gray */
258+
background-color: #7BD4B4;
259+
color: #fff;
266260
}
267261
.status-need-to-approve {
268-
background-color: #FFD6D6; /* light red */
269-
color: #9B1C1C; /* dark red */
270-
border: 1px solid #F5A8A8; /* orange */
262+
background-color: #F5A8A8;
263+
color: #fff;
271264
}
272265
.status-requested {
273266
background-color: #17a2b8; /* teal */

‎Employee_Managment_App/src/components/EmployeeLeave.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
} from '@syncfusion/ej2-react-grids';
1818
import './EmployeeLeave.css';
1919
import { ChangeEventArgs, SwitchComponent } from '@syncfusion/ej2-react-buttons';
20-
import { DataManager, Query, UrlAdaptor, Predicate } from '@syncfusion/ej2-data';
20+
import { DataManager, Query, UrlAdaptor, Predicate, WebApiAdaptor } from '@syncfusion/ej2-data';
2121
import {
2222
DateRangePickerComponent,
2323
PresetsDirective,
@@ -29,7 +29,7 @@ import { ClickEventArgs } from '@syncfusion/ej2-navigations';
2929

3030
const gridData: DataManager = new DataManager({
3131
url: 'https://ej2services.syncfusion.com/aspnet/development/api/EmployeesLeaveData',
32-
adaptor: new UrlAdaptor()
32+
adaptor: new UrlAdaptor(),
3333
});
3434

3535
const yearStart: Date = new Date(new Date(new Date().getFullYear(), 0, 1).toDateString());
@@ -313,6 +313,13 @@ const statusTemplate = (args: any) => {
313313
)}
314314
<ColumnDirective field="CreatedBy" headerText="Created By" width="150" />
315315
</ColumnsDirective>
316+
{/* <ColumnsDirective>
317+
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'></ColumnDirective>
318+
<ColumnDirective field='CustomerID' headerText='Customer ID' width='160'></ColumnDirective>
319+
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign='Right' />
320+
<ColumnDirective field='Freight' headerText='Freight' width='150' format='C2' textAlign='Right' />
321+
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'></ColumnDirective>
322+
</ColumnsDirective> */}
316323
<Inject services={[Page, Filter, Sort, Toolbar, ExcelExport, ColumnChooser, Edit]} />
317324
</GridComponent>
318325
</div>

‎Employee_Managment_App/src/components/EmployeePayRoll.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -475,15 +475,15 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
475475
field="Item"
476476
type="Custom"
477477
footerTemplate={() => {
478-
return <span style={{ fontWeight: 600 }}>Net Pay</span>;
478+
return <span>Net Pay</span>;
479479
}}
480480
/>
481481
<AggregateColumnDirective
482482
field="Total"
483483
type="Custom"
484484
customAggregate={calculteNetPayInYear}
485485
footerTemplate={(props: any) => {
486-
return <span style={{ fontWeight: 600 }}>$ {props.Custom}</span>;
486+
return <span>$ {props.Custom}</span>;
487487
}}
488488
/>
489489
{months.map((x, index) => {
@@ -494,7 +494,7 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
494494
type="Custom"
495495
customAggregate={calculteNetPayAggregate}
496496
footerTemplate={(props: any) => {
497-
return <span style={{ fontWeight: 600 }}>$ {props.Custom}</span>;
497+
return <span>$ {props.Custom}</span>;
498498
}}
499499
/>
500500
);

‎Employee_Managment_App/src/components/EmployeePayStub.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,7 @@ const EmployeePayStub = (props: { employeeData: EmployeeDetails }) => {
174174
Paystub for the selected month in {currentYear}
175175
</div>
176176
<div className="paystubdd-container">
177+
Choose Month: &nbsp;&nbsp;
177178
<DropDownListComponent
178179
id="paystubdd"
179180
dataSource={months}
@@ -275,7 +276,7 @@ const EmployeePayStub = (props: { employeeData: EmployeeDetails }) => {
275276
field="Item"
276277
type="Custom"
277278
footerTemplate={() => {
278-
return <strong>Net Pay</strong>;
279+
return <span>Net Pay</span>;
279280
}}
280281
/>
281282
{months.map((x, index) => {
@@ -286,7 +287,7 @@ const EmployeePayStub = (props: { employeeData: EmployeeDetails }) => {
286287
type="Custom"
287288
customAggregate={calculteNetPayAggregate}
288289
footerTemplate={(props: any) => {
289-
return <strong>$ {props.Custom}</strong>;
290+
return <span>$ {props.Custom}</span>;
290291
}}
291292
/>
292293
);

‎Employee_Managment_App/src/components/Employees.tsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,14 @@ const Employees = (props?: EmployeesProps) => {
136136
);
137137
};
138138

139+
const nameTemplate = (args: any) => {
140+
return (
141+
<span className="empName employee-popover">
142+
{args[args.column.field]}
143+
</span>
144+
);
145+
};
146+
139147
const beforeRender = (args: TooltipEventArgs) => {
140148

141149
if(args.target.classList.contains('e-headercell')) {
@@ -147,13 +155,13 @@ const Employees = (props?: EmployeesProps) => {
147155
(tooltipObj.current as any).content = `
148156
<div id="democontent" className="democontent">
149157
<div style="display: inline-block; padding: 4px 4px 0 4px">
150-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" className="bi bi-person-circle" viewBox="0 0 16 15" color="#ffffff">
158+
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className="bi bi-person-circle" viewBox="0 0 16 15" color="#000000">
151159
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0" />
152160
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1" />
153161
</svg>
154162
<div style="display: inline-block; padding: 0 0 8px 8px">
155-
<div>${rowData?.Name ?? ''}</div>
156-
<div>${rowData?.Designation ?? ''}</div>
163+
<div style="color: #707070; font-weight: bold; font-size: 12px;">${rowData?.Name ?? ''}</div>
164+
<div style="color: #707070; font-size: 11px;">${rowData?.Designation ?? ''}</div>
157165
</div>
158166
</div>
159167
</div>`;
@@ -165,9 +173,10 @@ const Employees = (props?: EmployeesProps) => {
165173
<TooltipComponent
166174
id="content"
167175
cssClass="e-tooltip-template-css"
168-
target="#employees_grid .e-headercell, #employees_grid td.infotooltip"
176+
target="#employees_grid .e-headercell, #employees_grid td.infotooltip, .employee-popover"
169177
beforeRender={beforeRender}
170178
ref={tooltipObj}
179+
position='TopRight'
171180
>
172181
<GridComponent
173182
id="employees_grid"
@@ -211,8 +220,8 @@ const Employees = (props?: EmployeesProps) => {
211220
customAttributes={{ class: 'infotooltip' }}
212221
width="140"
213222
/>
214-
<ColumnDirective field="Name" customAttributes={{ class: 'infotooltip' }} width="150" />
215-
<ColumnDirective field="Mail" clipMode="EllipsisWithTooltip" width="260" />
223+
<ColumnDirective field="Name" template={nameTemplate} customAttributes={{ class: 'infotooltip' }} width="150" />
224+
<ColumnDirective field="Mail" headerText="Email ID" clipMode="EllipsisWithTooltip" width="260" />
216225
<ColumnDirective field="Designation" clipMode="EllipsisWithTooltip" width="260" />
217226
<ColumnDirective
218227
field="DateOfJoining"

‎Employee_Managment_App/src/components/Organization.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@
187187
/* Optional: improve search/toolbar areas inside Employees (if they inherit) */
188188
.org-theme .e-input-group .e-input,
189189
.org-theme .e-input-group input {
190-
border-radius: 10px;
190+
border-radius: 4px;
191191
}
192192

193193
/* Mobile adjustments */
@@ -206,7 +206,7 @@
206206
.employeespage .org-theme .e-toolbar .e-search .e-input-group.e-input-focus,
207207
.employeespage .org-theme .e-input-group input:focus,
208208
.employeespage .org-theme .e-input-group.e-input-focus {
209-
border-color: #1ab394 !important;
209+
border-color: #ccc !important;
210210
}
211211

212212
#employees_grid_e-popup .e-popup .e-checkbox-wrapper .e-frame.e-check,
@@ -220,4 +220,8 @@
220220
.e-grid .e-headercelldiv {
221221
font-weight: 500 !important;
222222
font-size: 13px !important;
223+
}
224+
225+
.e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper:hover {
226+
background-color: #ebebeb !important;
223227
}

0 commit comments

Comments
 (0)