Merge pull request #36 from SyncfusionExamples/104398-employee

104398: Need to Resolve UI issue in employee management

Author: BalajiSGrid

Employee_Managment_App/src/App.tsx

@@ -181,31 +181,30 @@ function App() {
               >
               </button>
             </div>
-
             <ul className="nav flex-column">
               <li className="nav-item">
-                <NavLink className="nav-link" to="/" end>
+                <NavLink className="nav-link" to="/" end title={collapsed ? 'My Profile' : undefined} aria-label="My Profile">
                   <span className="nav-icon e-icons e-user" aria-hidden="true">
                   </span>
                   {!collapsed && <span className="nav-text">My Profile</span>}
                 </NavLink>
               </li>
               <li className="nav-item">
-                <NavLink className="nav-link" to="/organization">
+                <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>
                   {!collapsed && <span className="nav-text">Organization</span>}
                 </NavLink>
               </li>
               <li className="nav-item">
-                <NavLink className="nav-link" to="/policies">
+                <NavLink className="nav-link" to="/policies" title={collapsed ? 'Policies' : undefined} aria-label="Policies">
                   <span className="nav-icon e-icons e-file-format" aria-hidden="true">
                   </span>
                   {!collapsed && <span className="nav-text">Policies</span>}
                 </NavLink>
               </li>
               <li className="nav-item">
-                <NavLink className="nav-link" to="/achievements">
+                <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>
                   {!collapsed && <span className="nav-text">Achievements</span>}

Employee_Managment_App/src/components/Employees.css

@@ -0,0 +1,3 @@
+#employees_grid .e-content {
+  overflow-y: hidden !important;
+}

Employee_Managment_App/src/components/Employees.tsx

@@ -12,6 +12,7 @@ import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-react-popups
 import { EmployeeDetails } from '../interface.ts';
 import { ClickEventArgs } from '@syncfusion/ej2-navigations';
 import type { SelectedFilter } from './Organization';
+import './Employees.css';
 
 DataUtil.serverTimezoneOffset = 0;
 
@@ -203,10 +204,10 @@ const Employees = (props?: EmployeesProps) => {
             />
             <ColumnDirective
               field="EmployeeCode"
-              headerText="ID"
+              headerText="Employee ID"
               template={codeTemplate}
               customAttributes={{ class: 'infotooltip' }}
-              width="120"
+              width="140"
             />
             <ColumnDirective field="Name" customAttributes={{ class: 'infotooltip' }} width="150" />
             <ColumnDirective field="Mail" clipMode="EllipsisWithTooltip" width="260" />

Employee_Managment_App/src/index.css

@@ -70805,7 +70805,7 @@ a.employee-popover:hover {
   font-size: 13px;
   font-family: 'Roboto', sans-serif;
   line-height: 20px;
-  padding: 0 0 50px 0;
+  padding: 0 0 25px 0;
 }
 
 .employeeLeave-header span {
@@ -70835,21 +70835,33 @@ a.employee-popover:hover {
 .badge-casual {
   background-color: #65cea7;
   color: #fff;
+  border-radius: 20px;
+  padding: 2px 10px;
+  display: inline-block;
 }
 
 .badge-sick {
   background-color: #23c6c8;
   color: #fff;
+  border-radius: 20px;
+  padding: 2px 10px;
+  display: inline-block;
 }
 
 .badge-others {
   background-color: #5c8a8a;
   color: #fff;
+  border-radius: 20px;
+  padding: 2px 10px;
+  display: inline-block;
 }
 
 .badge-request {
   background-color: #f3ce85;
   color: #fff;
+  border-radius: 20px;
+  padding: 2px 10px;
+  display: inline-block;
 }
 
 td.cardcell {