Skip to content

Commit 7c04509

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

File tree

15 files changed

+195
-85
lines changed

15 files changed

+195
-85
lines changed

‎Employee_Managment_App/src/App.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
padding: calc(var(--header-h) + 16px) 0 24px;
5858
min-height: 100vh;
5959
box-sizing: border-box;
60-
background: #fff;
60+
background: #f3f3f4;
6161
transition: margin-left 220ms ease;
6262
}
6363

‎Employee_Managment_App/src/App.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,9 +162,13 @@ function App() {
162162
showBackdrop={!isDesktop}
163163
closeOnDocumentClick={!isDesktop}
164164
open={() => {
165+
if(document.querySelector('.employeeinfo-content .e-tab'))
166+
(document.querySelector('.employeeinfo-content .e-tab') as any).ej2_instances[0].refreshActiveTab();
165167
if (!isDesktop) setMobileSidebarOpen(true);
166168
}}
167169
close={() => {
170+
if(document.querySelector('.employeeinfo-content .e-tab'))
171+
(document.querySelector('.employeeinfo-content .e-tab')as any).ej2_instances[0].refreshActiveTab();
168172
if (!isDesktop) setMobileSidebarOpen(false);
169173
}}
170174
>

‎Employee_Managment_App/src/components/Achievements.css‎

Lines changed: 100 additions & 9 deletions
Large diffs are not rendered by default.

‎Employee_Managment_App/src/components/Achievements.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -272,8 +272,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =
272272
<div className="lb-sections">
273273
<section className="lb-section">
274274
<header className="lb-header bg-r-overall">
275-
<div className="lb-header-icon icon-overall e-icons e-people" aria-hidden>
276-
</div>
275+
<span id="categoryImageName" className="sficon-leaderboard-overall icon"></span>
277276
<div className="lb-header-text">
278277
<div className="lb-title">Overall</div>
279278
<div className="lb-sub">LEADERBOARD</div>
@@ -296,8 +295,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =
296295

297296
<section className="lb-section">
298297
<header className="lb-header bg-r-task">
299-
<div className="lb-header-icon icon-task e-icons e-check-tick" aria-hidden>
300-
</div>
298+
<span id="categoryImageName" className="sficon-tasks icon"></span>
301299
<div className="lb-header-text">
302300
<div className="lb-title">Task</div>
303301
<div className="lb-sub">LEADERBOARD</div>
@@ -320,8 +318,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =
320318

321319
<section className="lb-section">
322320
<header className="lb-header bg-r-attendance">
323-
<div className="lb-header-icon icon-att e-icons e-day" aria-hidden>
324-
</div>
321+
<span id="categoryImageName" className="sficon-user-time-wf icon"></span>
325322
<div className="lb-header-text">
326323
<div className="lb-title">Attendance</div>
327324
<div className="lb-sub">LEADERBOARD</div>

‎Employee_Managment_App/src/components/EmployeeInfo.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -113,14 +113,14 @@ const EmployeeInfo = (props: { employeeData?: EmployeeDetails; userInfo?: Employ
113113
experienceMonths = months % 12;
114114
}
115115
let headerText: Object[] = [
116-
{ text: 'Official' },
117-
{ text: 'Personal' },
118-
{ text: 'Leave report' },
119-
{ text: 'Pay Stub' },
120-
{ text: 'Pay Roll' },
121-
{ text: 'Contact' },
122-
{ text: 'Education' },
123-
{ text: 'About Me' },
116+
{ text: 'OFFICIAL' },
117+
{ text: 'PERSONAL' },
118+
{ text: 'LEAVE REPORT' },
119+
{ text: 'PAY STUB' },
120+
{ text: 'PAY ROLL' },
121+
{ text: 'CONTACT' },
122+
{ text: 'EDUCATION' },
123+
{ text: 'ABOUT ME' },
124124
];
125125
const content0 = () => {
126126
return (
@@ -339,7 +339,7 @@ const canSeePrivateTabs =
339339
</div>
340340
</div>
341341
<div className="overview-content">
342-
<TabComponent heightAdjustMode="Auto" swipeMode="None" overflowMode='Scrollable'>
342+
<TabComponent heightAdjustMode="Auto" swipeMode="None" overflowMode='Scrollable' cssClass='content-overview'>
343343
<TabItemsDirective >
344344
<TabItemDirective header={headerText[0]} content={content0} />
345345
{employeeData &&
@@ -371,10 +371,10 @@ const canSeePrivateTabs =
371371
return (
372372
<div className="employeeinfopage">
373373
<div className="employeeinfo-content">
374-
<TabComponent heightAdjustMode="Auto">
374+
<TabComponent heightAdjustMode="Auto" cssClass='employee-header'>
375375
<TabItemsDirective>
376376
<TabItemDirective
377-
header={{ text: 'Overview' }}
377+
header={{ text: 'OVERVIEW' }}
378378
content={overview}
379379
/>
380380
</TabItemsDirective>

‎Employee_Managment_App/src/components/EmployeeLeave.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -240,8 +240,6 @@
240240
/* container if you need any extra padding or alignment */
241241
.status-badge-wrapper {
242242
display: flex;
243-
justify-content: center; /* or flex-start/ end as you like */
244-
align-items: center;
245243
}
246244

247245
/* base badge overrides (optional) */

‎Employee_Managment_App/src/components/EmployeeLeave.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -302,10 +302,10 @@ const statusTemplate = (args: any) => {
302302
<ColumnDirective field="AttendanceID" headerText="Leave ID" isPrimaryKey={true} clipMode="EllipsisWithTooltip" width="140" />
303303
<ColumnDirective field="AbsenceType" headerText="Leave Type" width="120" clipMode="EllipsisWithTooltip" template={leaveTypeTemplate} />
304304
<ColumnDirective field="ShiftName" headerText="Shift Name" clipMode="EllipsisWithTooltip" width="120" />
305-
<ColumnDirective field="From" type="date" format="MMM d yyyy" textAlign="Right" width="120" />
306-
<ColumnDirective field="To" type="date" format="MMM d yyyy" textAlign="Right" width="120" />
307-
<ColumnDirective field="Days" headerText="Day(s)" textAlign="Right" width="120" />
308-
<ColumnDirective field="Status" headerText="Status" template={statusTemplate} width="150" />
305+
<ColumnDirective field="From" type="date" format="MMM d yyyy" textAlign="Left" width="120" />
306+
<ColumnDirective field="To" type="date" format="MMM d yyyy" textAlign="Left" width="120" />
307+
<ColumnDirective field="Days" headerText="Day(s)" textAlign="Left" width="120" />
308+
<ColumnDirective field="Status" headerText="Status" textAlign="Left" template={statusTemplate} width="150" />
309309
{props.employeeData &&
310310
props.userInfo &&
311311
props.employeeData.TeamLead === props.userInfo.Name && (

‎Employee_Managment_App/src/components/EmployeePayStub.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ const EmployeePayStub = (props: { employeeData: EmployeeDetails }) => {
180180
value={months[currentMonth].headerText}
181181
fields={{ text: 'headerText', value: 'headerText' }}
182182
change={paystubChange}
183-
width={250}
183+
width={90}
184184
/>
185185
</div>
186186
</div>

‎Employee_Managment_App/src/components/Employees.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ const Employees = (props?: EmployeesProps) => {
8181
const toolbar: string[] =
8282
props?.employeeData?.Name === props?.userInfo?.Name
8383
? ['ExcelExport', 'ColumnChooser', 'Search']
84-
: ['ColumnChooser', 'Search'];
84+
: ['Search', 'ColumnChooser'];
8585

8686
const searchSettings: { fields: string[] } = {
8787
fields: ['EmployeeCode', 'Name', 'Mail', 'Designation', 'Branch', 'Team', 'TeamLead', 'ManagerName'],
@@ -142,12 +142,12 @@ const Employees = (props?: EmployeesProps) => {
142142
(tooltipObj.current as any).content =args.target.innerText;
143143
}
144144
else {
145-
const rowInfo: RowInfo = employeeGridIns.current?.getRowInfo(args.target.closest('td') as HTMLElement) as RowInfo;
145+
const rowInfo: RowInfo = gridRef.current?.getRowInfo(args.target.closest('td') as HTMLElement) as RowInfo;
146146
const rowData = rowInfo?.rowData as EmployeeDetails;
147147
(tooltipObj.current as any).content = `
148148
<div id="democontent" className="democontent">
149149
<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="rgba(0, 0, 0, .54)">
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">
151151
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0" />
152152
<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" />
153153
</svg>

‎Employee_Managment_App/src/components/Organization.css‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -98,10 +98,9 @@
9898
.org-filters__label {
9999
display: inline-flex;
100100
align-items: center;
101-
gap: 8px;
102-
font-weight: 700;
101+
font-weight: 600;
103102
color: var(--org-text);
104-
margin-right: 6px;
103+
font-size: 13px;
105104
}
106105

107106
.org-filters__dot {
@@ -135,17 +134,20 @@
135134
========================= */
136135
.org-pill {
137136
border-radius: 9999px;
138-
padding: 6px 14px;
139-
line-height: 1.35;
140-
border: 1px solid var(--org-green-200);
137+
padding: 4px 8px;
138+
line-height: 1;
139+
border: 1px solid transparent !important;
141140
color: var(--org-green-800);
142141
background: #ffffff;
143142
transition: transform 0.04s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
143+
font-size: 13px;
144+
font-weight: 400;
145+
height: 23px;
144146
}
145147

146148
.org-pill:hover {
147149
background: var(--org-green-50);
148-
border-color: var(--org-green-300);
150+
border-color: gray !important;
149151
box-shadow: 0 2px 10px rgba(34, 197, 94, 0.12);
150152
}
151153

@@ -156,6 +158,7 @@
156158
color: #ffffff !important;
157159
border-color: var(--secondary-color) !important;
158160
/* box-shadow: 0 1px 5px rgba(26, 179, 148, 1), var(--org-ring); */
161+
padding: 4px 8px;
159162
}
160163

161164
.org-pill--active:hover {
@@ -212,4 +215,9 @@
212215
#employees_grid_e-popup .e-popup .e-css.e-checkbox-wrapper:hover .e-frame.e-check {
213216
background-color: var(--color-sf-primary-bg-color) !important;
214217
border-color: var(--color-sf-primary-bg-color) !important;
218+
}
219+
220+
.e-grid .e-headercelldiv {
221+
font-weight: 500 !important;
222+
font-size: 13px !important;
215223
}

0 commit comments

Comments
 (0)