Merge pull request #46 from SyncfusionExamples/1000396-EmployeeManagement

1000396: Fixing UI issues in Employee Management

Author: BalajiSGrid

Employee_Managment_App/src/components/EmployeeInfo.tsx

@@ -87,9 +87,9 @@ const EmployeeInfo = (props: { employeeData?: EmployeeDetails; userInfo?: Employ
     let employeeData: EmployeeDetails = (routeEmployee as any) ?? (props.employeeData as any) ?? (userInfo as any) ?? (defaultEmployee as any) ?? defaultEmployeeData;
     // Format the date to the desired output
     const custom: Intl.DateTimeFormatOptions = {
-        day: 'numeric',  // Displays day as a number (e.g., 1)
-        month: 'short',  // Displays the short month name (e.g., Feb)
-        year: 'numeric'  // Displays the full year (e.g., 2005)
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric'
     };
 
     // Normalize possible string dates to Date objects and guard for missing values
@@ -100,8 +100,8 @@ const EmployeeInfo = (props: { employeeData?: EmployeeDetails; userInfo?: Employ
         ? new Date((employeeData as any).DOB)
         : null;
 
-    const dateOfJoining: string = dojDate ? dojDate.toLocaleDateString('en-GB', custom) : '-';
-    const dob: string = dobDate ? dobDate.toLocaleDateString('en-GB', custom) : '-';
+    const dateOfJoining: string = dojDate ? dojDate.toLocaleDateString('en-US', custom).replace(/,/g, ''): '-';
+    const dob: string = dobDate ? dobDate.toLocaleDateString('en-US', custom).replace(/,/g, ''): '-';
 
     const now = new Date();
     let experienceYears = 0;
@@ -329,7 +329,7 @@ const canSeePrivateTabs =
                             />
                         </svg>
                     </div>
-                    <div>
+                    <div className="profile-content">
                         <div className="profile-data-name">{employeeData.Name}</div>
                         <div className="profile-data-mail">{employeeData.Mail}</div>
                         <div className="profile-data-designation">{employeeData.Designation}</div>

Employee_Managment_App/src/components/Employees.tsx

@@ -217,7 +217,7 @@ const Employees = (props?: EmployeesProps) => {
               headerText="Date Joined"
               textAlign="Right"
               type="date"
-              format={{ type: 'date', format: "d MMM yyyy"}}
+              format={{ type: 'date', format: "MMM d yyyy"}}
               clipMode="EllipsisWithTooltip"
               width="150"
             />

Employee_Managment_App/src/components/Policies.css

@@ -148,7 +148,7 @@
   display: inline-flex;
   align-items: center;
   gap: 10px;
-  padding: 9px 14px;
+  padding: 5px 14px;
   border-radius: 999px;
   border: 1px solid var(--border);
   background: var(--surface);

Employee_Managment_App/src/components/Policies.tsx

@@ -168,8 +168,8 @@ const Policies: React.FC = () => {
             <ColumnsDirective>
               <ColumnDirective field="policyName" headerText="Policy Name" width="220" template={policyNameTemplate} />
               <ColumnDirective field="category" headerText="Category" width="170" template={categoryTemplate} />
-              <ColumnDirective field="lastUpdated" headerText="Last Updated" width="150" type="date" format="d MMM yyyy" textAlign="Right" />
-              <ColumnDirective field="enrolledOn" headerText="Enrolled On" width="150" type="date" format="d MMM yyyy" textAlign="Right" />
+              <ColumnDirective field="lastUpdated" headerText="Last Updated" width="150" type="date" format="MMM d yyyy" textAlign="Right" />
+              <ColumnDirective field="enrolledOn" headerText="Enrolled On" width="150" type="date" format="MMM d yyyy" textAlign="Right" />
               <ColumnDirective field="statusText" headerText="Status" width="130" template={statusTemplate} textAlign="Center" />
               <ColumnDirective headerText="Actions" width="110" commands={viewCommands} textAlign="Center" />
             </ColumnsDirective>

Employee_Managment_App/src/index.css

@@ -58156,6 +58156,10 @@ ejs-sidebar {
 .e-leftfreeze .CardTable{
   margin-left: 0px;
 }
+.profile-content{
+  display: ruby;
+  margin-left: 15px;
+}
 
 td[aria-label=" is template cell column header Total"] .CardTable {
   margin-left: 20px; /* Adjust as needed */