Merge pull request #38 from SyncfusionExamples/1000396-UI-employee

config(1000396): Need to fix bugs and UI issues for all the pages in Employee Management

Author: BalajiSGrid

Employee_Managment_App/public/background.png

@@ -20,7 +20,6 @@
   top: 0;
   left: 0;
   bottom: 0;
-  background-image: url(../public/background.png);
   width: var(--sidebar-current-width);
   background-color: #242a35;
   color: #fff;

Employee_Managment_App/src/App.css

@@ -225,14 +225,15 @@ const EmployeeInfo = (props: { employeeData?: EmployeeDetails; userInfo?: Employ
                         <div className="profile-data-name">{employeeData.Name}</div>
                         <div className="profile-data-mail">{employeeData.Mail}</div>
                         <div className="profile-data-designation">{employeeData.Designation}</div>
+                        <div className='profile-data-Teamname'>{employeeData.Team}</div>
                         <div className="profile-data-supervisor">Supervisor: {employeeData.TeamLead}</div>
                         <div className="profile-data-branch">Branch: {employeeData.Branch}</div>
                         <div className="Profile-data-availability e-badge"> Available - {employeeData.Branch}</div>
                     </div>
                 </div>
                 <div className="overview-content">
-                    <TabComponent heightAdjustMode="Auto"  overflowMode='Scrollable'>
-                        <TabItemsDirective>
+                    <TabComponent heightAdjustMode="Auto" swipeMode="None" overflowMode='Scrollable'>
+                        <TabItemsDirective >
                             <TabItemDirective header={headerText[0]} content={content0} />
                             {employeeData &&
                                 userInfo &&

Employee_Managment_App/src/components/EmployeeInfo.tsx

@@ -134,6 +134,7 @@
   letter-spacing: .2px;
 }
 
+
 /* Container for grid cell alignment */
 .leave-type-badge {
   display: flex;
@@ -225,3 +226,44 @@
   color: #FFECA6;
   border-color: #6A5617;
 }
+
+/* container if you need any extra padding or alignment */
+.status-badge-wrapper {
+  display: flex;
+  justify-content: center; /* or flex-start/ end as you like */
+  align-items: center;
+}
+
+/* base badge overrides (optional) */
+.status-badge-wrapper .e-badge {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: .2px;            /* white text */
+}
+
+/* now per-status background colors */
+.status-approved {
+  background-color: #FFF3C4; /* light yellow for pending/request */
+  color: #8A6A00;            /* dark gold/brown */
+  border: 1px solid #FFE28A; /* green */
+}
+.status-closed {
+    background-color: #A8E6CF; /* light green */
+  color: #11624C;            /* dark green */
+  border: 1px solid #7BD4B4; /* gray */
+}
+.status-need-to-approve {
+    background-color: #FFD6D6; /* light red */
+  color: #9B1C1C;            /* dark red */
+  border: 1px solid #F5A8A8; /* orange */
+}
+.status-requested {
+  background-color: #17a2b8; /* teal */
+}
+.status-pending {
+  background-color: #007bff; /* blue */
+}

Employee_Managment_App/src/components/EmployeeLeave.css

@@ -220,25 +220,23 @@ const leaveTypeTemplate = (args: any) => {
     }
   };
 
-  const statusTemplate = (args: any) => {
-    return (
-      <div>
-        {args.Status === 'Closed' ? (
-          <div id="status" className="statustemp closed">
-            <span className="statustxt closed">{args.Status}</span>
-          </div>
-        ) : args.Status === 'Approved' ? (
-          <div id="status" className="statustemp approved">
-            <span className="statustxt approved">{args.Status}</span>
-          </div>
-        ) : (
-          <div id="status" className="statustemp needtoapprove">
-            <span className="statustxt needtoapprove">{args.Status}</span>
-          </div>
-        )}
-      </div>
-    );
-  };
+const statusTemplate = (args: any) => {
+  const rawStatus = args.Status || 'N/A';
+  // normalize id-safe key, e.g. "Need to Approve" → "need-to-approve"
+  const key = rawStatus
+    .toString()
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-');
+
+  return (
+    <div className="status-badge-wrapper">
+      <span className={`e-badge status-${key}`} title={rawStatus}>
+        {rawStatus}
+      </span>
+    </div>
+  );
+};
 
   const approveChange = (args: ChangeEventArgs) => {
     const td = ((args.event as any).target as HTMLElement)?.closest('td');
@@ -268,15 +266,11 @@ const leaveTypeTemplate = (args: any) => {
     <div className='employee-leave-detail'>
       <div className="employeeLeave-header">
         <div className="leaveinfo">
-          <div className='leave-headerinfo'>
-          <b>Leave:</b>{' '}
-          </div>
-          <div className='leave-value'>
+            <b>Leave:</b>{' '}
             <span className="e-badge badge-casual">{leaveCount.casual} d</span> Casual |{' '}
             <span className="e-badge badge-sick">{leaveCount.sick} d</span> Sick |{' '}
             <span className="e-badge badge-others">{leaveCount.others} d</span> Others |{' '}
             <span className="e-badge badge-request">{leaveCount.request} d</span> Request
-          </div>
         </div>
         <div className="daterange">
           <Presets dateRangeChange={dateRangeChange} />
@@ -311,7 +305,7 @@ const leaveTypeTemplate = (args: any) => {
           <ColumnDirective field="From" type="date" format="MMM d yyyy" textAlign="Right" width="120" />
           <ColumnDirective field="To" type="date" format="MMM d yyyy" textAlign="Right" width="120" />
           <ColumnDirective field="Days" headerText="Day(s)" textAlign="Right" width="120" />
-          <ColumnDirective field="Status" template={statusTemplate} width="150" />
+          <ColumnDirective field="Status" headerText="Status" template={statusTemplate} width="150" />
           {props.employeeData &&
             props.userInfo &&
             props.employeeData.TeamLead === props.userInfo.Name && (

Employee_Managment_App/src/components/EmployeeLeave.tsx

@@ -354,7 +354,7 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
         id="payroll_grid"
         ref={payRollGridIns}
         dataSource={gridData}
-        allowPaging={true}
+        allowPaging={false}
         query={query}
         width={'100%'}
         height={'auto'}

Employee_Managment_App/src/components/EmployeePayRoll.tsx

@@ -232,11 +232,9 @@
 }
 
 .policies-grid-wrapper .e-grid {
-  border: 1px solid var(--border);
-  border-radius: 16px;
+  
   overflow: hidden;
   background: #fff;
-  box-shadow: var(--shadow-md);
 }
 
 .policies-grid-wrapper .e-grid .e-rowcell {

Employee_Managment_App/src/components/Policies.css

@@ -352,6 +352,7 @@
   width: 36px;
   height: 36px;
   border-radius: 999px;
+  pointer-events: none;
   background: #f1f5f9;
   color: var(--topnav-text);
   border: 1px solid var(--topnav-border);

Employee_Managment_App/src/components/TopNav.css

@@ -70812,6 +70812,13 @@ a.employee-popover:hover {
   margin-top: 5px;
   font-family: var(--font-family);
 }
+.profile-data-Teamname{
+  font-weight: 400;
+    height: 16px;
+    font-size: 14px;
+    margin-top: 5px;
+    font-family: var(--font-family);
+}
 
 .profile-data-supervisor {
   margin-top: 5px;
@@ -70929,7 +70936,6 @@ td.cardcell.separateline {
 
 .statustemp.approved {
   background-color: #ffff99;
-  width: 75px;
 }
 
 .statustxt.approved {
@@ -70960,12 +70966,10 @@ td.cardcell.separateline {
 
 .statustemp.needtoapprove {
   background-color: #df2222;
-  width: 120px;
 }
 
 .statustemp.closed {
   background-color: #00b300;
-  width: 54px;
 }
 
 .statustxt.closed {
@@ -70976,13 +70980,6 @@ td.cardcell.separateline {
   color: white;
 }
 
-.statustemp {
-  position: relative;
-  height: 25px;
-  border-radius: 5px;
-  text-align: center;
-}
-
 #listSidebar .e-listview:not(.e-list-template) .e-list-item {
   height: 60px;
   padding: 12px;
@@ -71027,12 +71024,18 @@ td.cardcell.separateline {
   .achievements-content .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {
     width: 100%;
   }
+  .paystubpage, .employee-leave-detail, .payrollpage{
+    margin-right: 25px;
+  }
 }
 
 @media (max-width: 600px) {
   .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {
     width: 100%;
   }
+  .org-filters__pills .org-pill{
+    margin-bottom: 7px;
+  }
 
   .achievements-content .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {
     width: 100%;
@@ -71041,6 +71044,9 @@ td.cardcell.separateline {
   .card-control-section.basic_card_layout .card-layout {
     max-width: 600px;
   }
+  .employeeLeave-header span {
+  margin: 2px 2px
+  }
 }
 
 .e-line-very-small:before {