Skip to content

1006807: Fixed the UI and Functionality issues in Employee Management #48

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 7 commits into from
Feb 11, 2026
Merged

1006807: Fixed the UI and Functionality issues in Employee Management #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7c04509
1006807: Fixed the UI and Functionality issues in Employee Management
SwathiRavi14 Feb 2, 2026
7a07741
1006807: Fixed the UI and Functionality issues in Employee Management
SwathiRavi14 Feb 3, 2026
7a302c1
1006807: Fixed the UI and Functionality issues in Employee Management
SwathiRavi14 Feb 9, 2026
cbc4605
1006807: Fixed the UI and Functionality issues in Employee Management
SwathiRavi14 Feb 11, 2026
b41fa23
correction applied
BalajiSGrid Feb 11, 2026
2dcc795
correction applied
BalajiSGrid Feb 11, 2026
a83c703
Applied Tailwind css
BalajiSGrid Feb 11, 2026
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
3 changes: 2 additions & 1 deletion Employee_Managment_App/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-icons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/31.1.17/tailwind3.css" rel="stylesheet" />
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
</html>
32 changes: 21 additions & 11 deletions Employee_Managment_App/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
left: 0;
bottom: 0;
width: var(--sidebar-current-width);
background-color: #242a35;
background-color: #2d323e;
color: #fff;
overflow: auto;
z-index: 1010; /* sits over header on mobile when open */
Expand Down Expand Up @@ -54,11 +54,12 @@
.app-main {
position: relative;
margin-left: var(--sidebar-current-width);
padding: calc(var(--header-h) + 16px) 0 24px;
padding: calc(var(--header-h) + 16px) 0 0;
min-height: 100vh;
box-sizing: border-box;
background: #fff;
background: rgb(255, 255, 255);
transition: margin-left 220ms ease;
padding-top: 50px;
}

/* Optional: collapse style tweaks */
Expand Down Expand Up @@ -97,15 +98,21 @@
}
.nav .nav-item .nav-link {
padding: 10px 16px;
color: #cfd6e4;
color: #c0c2c5;
text-decoration: none;
border-left: 4px solid transparent;
}
.nav .nav-item .nav-link.active,
.nav .nav-item .nav-link:hover {
background: rgba(255,255,255,0.08);
background: rgba(0, 0, 0, 0.1);
color: #fff;
}

.nav .nav-item .nav-link.active {
border-left: 4px solid #19aa8d;
background-color: rgba(0, 0, 0, 0.1);
}

#employees_grid .e-pager .e-currentitem, #employees_grid .e-pager .e-currentitem:hover {
background: var(--color-sf-primary-bg-color);
border-color: var(--color-sf-primary-bg-color);
Expand All @@ -128,16 +135,16 @@
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
background: transparent;
border: 1px solid rgba(255,255,255,0.12);
color: #e5e7eb;
border: none;
color: rgba(255, 255, 255, .8) !important;
cursor: pointer;
font-size: 24px;
}

.app-sidebar .sidebar-brand .title {
color: #e5e7eb;
font-weight: 600;
color: rgba(255, 255, 255, .8) !important;
font-weight: 400;
font-size: 16px;
}

Expand All @@ -158,7 +165,6 @@
gap: 12px;
padding: 10px 12px;
color: #cbd5e1;
border-radius: 8px;
text-decoration: none;
}

Expand Down Expand Up @@ -191,4 +197,8 @@
/* Keep brand title minimal when collapsed (we render 'HR' text already) */
.app-layout.sidebar-is-collapsed .app-sidebar .sidebar-brand {
justify-content: center;
}

.nav-text {
margin-top: 3px;
}
10 changes: 7 additions & 3 deletions Employee_Managment_App/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,16 +162,20 @@ function App() {
showBackdrop={!isDesktop}
closeOnDocumentClick={!isDesktop}
open={() => {
if(document.querySelector('.employeeinfo-content .e-tab'))
(document.querySelector('.employeeinfo-content .e-tab') as any).ej2_instances[0].refreshActiveTab();
if (!isDesktop) setMobileSidebarOpen(true);
}}
close={() => {
if(document.querySelector('.employeeinfo-content .e-tab'))
(document.querySelector('.employeeinfo-content .e-tab')as any).ej2_instances[0].refreshActiveTab();
if (!isDesktop) setMobileSidebarOpen(false);
}}
>
<aside className="app-sidebar" role="navigation" aria-label="Main">
{/* Sidebar header with toggle inside sidebar */}
<div className="sidebar-brand">
<div className="title">{collapsed ? 'HR' : 'HR Portal'}</div>
<div className="title">{collapsed ? 'HR' : 'HR PORTAL'}</div>
<button
type="button"
className="sidebar-toggle e-icons e-menu"
Expand All @@ -191,7 +195,7 @@ function App() {
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/organization" title={collapsed ? 'Organization' : undefined} aria-label="Organization">
<span className="nav-icon e-icons e-xml-mapping" aria-hidden="true">
<span className="nav-icon sficon-organization menu-icon" aria-hidden="true">
</span>
{!collapsed && <span className="nav-text">Organization</span>}
</NavLink>
Expand All @@ -205,7 +209,7 @@ function App() {
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/achievements" title={collapsed ? 'Achievements' : undefined} aria-label="Achievements">
<span className="nav-icon e-icons e-activities" aria-hidden="true">
<span className="nav-icon sficon-badge menu-icon" aria-hidden="true">
</span>
{!collapsed && <span className="nav-text">Achievements</span>}
</NavLink>
Expand Down
128 changes: 110 additions & 18 deletions Employee_Managment_App/src/components/Achievements.css
View file
Open in desktop

Large diffs are not rendered by default.

38 changes: 23 additions & 15 deletions Employee_Managment_App/src/components/Achievements.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,8 @@ const years = [
{ text: '2022', value: 2022 },
{ text: '2023', value: 2023 },
{ text: '2024', value: 2024 },
{ text: '2025', value: 2025 }
{ text: '2025', value: 2025 },
{ text: '2026', value: 2026 }
];

function mapDesignationToRole(designation?: string): 'Developer' | 'QA' | 'Designer' | 'Manager' {
Expand Down Expand Up @@ -97,13 +98,15 @@ function monthIndex(m: string) {
return ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(m);
}


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

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

let tenureYears = 1;
try {
Expand All @@ -118,13 +121,19 @@ function buildScores(emp: EmployeeDetails, month: string, year: number): ScoreTr
}
const tenureBonus = 1 + tenureYears * 0.02;

const task = Math.round((12 + rand() * 18) * roleTaskWeight * tenureBonus);
const attendance = Math.round((8 + rand() * 14) * roleAttendWeight);
const overall = Math.round(task * 12 + attendance * 8 + rand() * 20);
// Task scores: 200-600 range
const task = Math.round((150 + randTask() * 400) * roleTaskWeight * tenureBonus);

// Attendance: Use PRNG for proper unique distribution (25-95 range)
const attendance = Math.round(25 + randAttend() * 70);

// Overall: combination of task, attendance (weighted heavily), and bonus
const overall = Math.round(task + (attendance * 4) + randOverall() * 200);

return { task, attendance, overall };
}


function initials(name?: string) {
if (!name) return 'NA';
const parts = name.trim().split(/\s+/);
Expand All @@ -135,7 +144,7 @@ function initials(name?: string) {
const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser = true }) => {
const [role, setRole] = useState<string>('All');
const [month, setMonth] = useState<string>('All');
const [year, setYear] = useState<number>(new Date().getFullYear());
const [year, setYear] = useState<number>(2026);

const [employees, setEmployees] = useState<EmployeeDetails[]>([]);
const [loading, setLoading] = useState<boolean>(true);
Expand Down Expand Up @@ -203,7 +212,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =
<div className="toolbar-sub">
{onlyTeamIfUser && userInfo?.Team
? `You can view only your team employees in leaderboard. (Team: ${userInfo.Team})`
: 'Leaderboard generated from employee records.'}
: 'You can view only your team employees in leaderboard.'}
</div>
</div>

Expand All @@ -222,6 +231,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =
aria-label="Filter by role"
floatLabelType="Never"
popupHeight="220px"
allowFiltering={true}
/>
</label>

Expand All @@ -239,6 +249,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =
aria-label="Filter by month"
floatLabelType="Never"
popupHeight="260px"
allowFiltering={true}
/>
</label>

Expand Down Expand Up @@ -272,8 +283,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =
<div className="lb-sections">
<section className="lb-section">
<header className="lb-header bg-r-overall">
<div className="lb-header-icon icon-overall e-icons e-people" aria-hidden>
</div>
<span id="categoryImageName" className="sficon-leaderboard-overall icon"></span>
<div className="lb-header-text">
<div className="lb-title">Overall</div>
<div className="lb-sub">LEADERBOARD</div>
Expand All @@ -296,8 +306,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =

<section className="lb-section">
<header className="lb-header bg-r-task">
<div className="lb-header-icon icon-task e-icons e-check-tick" aria-hidden>
</div>
<span id="categoryImageName" className="sficon-tasks icon"></span>
<div className="lb-header-text">
<div className="lb-title">Task</div>
<div className="lb-sub">LEADERBOARD</div>
Expand All @@ -320,8 +329,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =

<section className="lb-section">
<header className="lb-header bg-r-attendance">
<div className="lb-header-icon icon-att e-icons e-day" aria-hidden>
</div>
<span id="categoryImageName" className="sficon-user-time-wf icon"></span>
<div className="lb-header-text">
<div className="lb-title">Attendance</div>
<div className="lb-sub">LEADERBOARD</div>
Expand Down
26 changes: 13 additions & 13 deletions Employee_Managment_App/src/components/EmployeeInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,14 +113,14 @@ const EmployeeInfo = (props: { employeeData?: EmployeeDetails; userInfo?: Employ
experienceMonths = months % 12;
}
let headerText: Object[] = [
{ text: 'Official' },
{ text: 'Personal' },
{ text: 'Leave report' },
{ text: 'Pay Stub' },
{ text: 'Pay Roll' },
{ text: 'Contact' },
{ text: 'Education' },
{ text: 'About Me' },
{ text: 'OFFICIAL' },
{ text: 'PERSONAL' },
{ text: 'LEAVE REPORT' },
{ text: 'PAY STUB' },
{ text: 'PAY ROLL' },
{ text: 'CONTACT' },
{ text: 'EDUCATION' },
{ text: 'ABOUT ME' },
];
const content0 = () => {
return (
Expand Down Expand Up @@ -338,8 +338,8 @@ const canSeePrivateTabs =
<div className="Profile-data-availability e-badge"> Available - {employeeData.Branch}</div>
</div>
</div>
<div className="overview-content">
<TabComponent heightAdjustMode="Auto" swipeMode="None" overflowMode='Scrollable'>
<div className="overview-content" style={{height: "40px"}}>
<TabComponent heightAdjustMode="Auto" swipeMode="None" overflowMode='Scrollable' cssClass='content-overview'>
<TabItemsDirective >
<TabItemDirective header={headerText[0]} content={content0} />
{employeeData &&
Expand Down Expand Up @@ -369,12 +369,12 @@ const canSeePrivateTabs =
);
};
return (
<div className="employeeinfopage">
<div className="employeeinfopage" style={{backgroundColor: "rgb(255, 255, 255)"}}>
<div className="employeeinfo-content">
<TabComponent heightAdjustMode="Auto">
<TabComponent heightAdjustMode="Auto" cssClass='employee-header'>
<TabItemsDirective>
<TabItemDirective
header={{ text: 'Overview' }}
header={{ text: 'OVERVIEW' }}
content={overview}
/>
</TabItemsDirective>
Expand Down
Loading