From 5701b9d012db0396dc0092d2ae33a5ff5f845e73 Mon Sep 17 00:00:00 2001 From: Vigneshwaran-SF4319 <149996230+Vigneshwaran-SF4319@users.noreply.github.com> Date: Tue, 18 Mar 2025 13:45:17 +0530 Subject: [PATCH 1/2] 947756: Need to fix the UI changes from UX team in employee management showcase application. --- Employee_Managment_App/src/App.tsx | 2 +- .../src/components/Achievements.tsx | 57 ++++++- .../src/components/Announcement.tsx | 23 ++- .../src/components/EmployeeInfo.tsx | 31 +++- .../src/components/Employees.tsx | 2 +- .../src/components/Policies.tsx | 161 +++++++++++++++--- Employee_Managment_App/src/index.css | 100 ++++++----- 7 files changed, 296 insertions(+), 80 deletions(-) diff --git a/Employee_Managment_App/src/App.tsx b/Employee_Managment_App/src/App.tsx index e3b92b2..fc66953 100644 --- a/Employee_Managment_App/src/App.tsx +++ b/Employee_Managment_App/src/App.tsx @@ -16,7 +16,7 @@ function App() {
-
NexGen7 Software PVT LTD
+
NexGen7 Software
  • diff --git a/Employee_Managment_App/src/components/Achievements.tsx b/Employee_Managment_App/src/components/Achievements.tsx index 1e0c93f..852c6a2 100644 --- a/Employee_Managment_App/src/components/Achievements.tsx +++ b/Employee_Managment_App/src/components/Achievements.tsx @@ -32,10 +32,6 @@ const Achievements = () => {
- - -
-
@@ -94,10 +90,63 @@ const Achievements = () => {
+
+
+
+
+
+ Professional Development and Skills Mastery +
+
+ Certification Attainment +
+
+
+
+ Celebrating individuals who acquire new skills and + certifications. Recognizing dedication to continuous + learning and professional growth. Validating expertise and + proficiency in specific technologies or methodologies. + Encouraging a culture of lifelong learning and skill + enhancement. +
+
+ + Read More + +
+
+
+
+
+
+
+
+ Client Impact and Customer Success +
+
+ Customer Satisfaction Excellence +
+
+
+
+ Recognizing teams that go above and beyond to deliver exceptional + customer experiences. Celebrating innovative solutions that address + client needs and enhance user satisfaction. Acknowledging effortsin + building strong customer relationships through reliable support and service. + Encouraging a customer-first mindset to drive long-term business success. +
+
+ + Read More + +
+
+
diff --git a/Employee_Managment_App/src/components/Announcement.tsx b/Employee_Managment_App/src/components/Announcement.tsx index 9104983..21f569c 100644 --- a/Employee_Managment_App/src/components/Announcement.tsx +++ b/Employee_Managment_App/src/components/Announcement.tsx @@ -23,6 +23,8 @@ const Announcement = () => { growth and innovation. Expanding our reach allows us to better serve our diverse clientele. Join us as we embark on this exciting journey of expansion and opportunity. + We look forward to collaborating with new partners and strengthening our global presence. + This expansion will unlock new possibilities and create exciting opportunities for our customers and employees alike.
@@ -46,7 +48,8 @@ const Announcement = () => { emerging market demands and challenges. Experience unparalleled features designed to enhance productivity and efficiency. Stay tuned for the official launch event and - product demonstrations. + product demonstrations. Be among the first to explore how this breakthrough technology can transform your workflow. + We are committed to pushing the boundaries of technology to bring you smarter, more efficient solutions.
@@ -74,7 +77,8 @@ const Announcement = () => { invaluable in driving our company's success. We extend our heartfelt appreciation for their commitment and passion. Let's continue to inspire and support each other in - achieving greatness. + achieving greatness. Together, we create a workplace where excellence and teamwork thrive. + Your dedication and perseverance are the foundation of our continued success and innovation.
@@ -98,7 +102,8 @@ const Announcement = () => { latest skills and knowledge to excel in your role. Explore a range of professional development opportunities tailored to your needs. Invest in your future success and unleash - your full potential with us. + your full potential with us. Continuous learning is key to staying ahead in today’s evolving industry landscape. + Take this opportunity to expand your expertise and gain a competitive edge in your field.
@@ -126,7 +131,8 @@ const Announcement = () => { accomplishments and looking forward to the future. Join us as we celebrate this momentous occasion with gratitude and pride. Together, we celebrate our resilience, dedication, - and shared success. + and shared success. This achievement is a testament to our unwavering commitment and hard work. + We couldn't have reached this milestone without the collective efforts of our incredible team.
@@ -150,7 +156,8 @@ const Announcement = () => { activities that contribute to sustainable development goals. Join us in giving back to the community and creating a brighter future for all. Together, we can drive - positive change and leave a lasting legacy. + positive change and leave a lasting legacy. By working together, we can make a tangible difference in the world. + Through collective action and responsibility, we aim to build a more sustainable and inclusive future.
@@ -178,7 +185,8 @@ const Announcement = () => { in our operational guidelines and protocols. Stay informed about changes that may affect your work and responsibilities. Your compliance and cooperation are - vital in upholding our standards of excellence. + vital in upholding our standards of excellence. Adapting to these + updates ensures smooth operations and continued workplace efficiency.
@@ -202,7 +210,8 @@ const Announcement = () => { range of wellness programs and resources. Join us in fostering a supportive and healthy workplace culture for all. Invest in your physical, mental, and emotional - wellness with us. + wellness with us. A healthier workforce leads to greater + productivity and overall happiness.
diff --git a/Employee_Managment_App/src/components/EmployeeInfo.tsx b/Employee_Managment_App/src/components/EmployeeInfo.tsx index 8946fc2..96b9703 100644 --- a/Employee_Managment_App/src/components/EmployeeInfo.tsx +++ b/Employee_Managment_App/src/components/EmployeeInfo.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations'; import { Internationalization } from '@syncfusion/ej2-base'; import { useLocation } from 'react-router-dom'; -import { EmployeeDetails } from '../interface'; +import { EmployeeDetails } from '../../interface'; import EmployeeLeave from './EmployeeLeave'; import EmployeePayStub from './EmployeePayStub'; import EmployeePayRoll from './EmployeePayRoll'; @@ -91,6 +91,34 @@ const EmployeeInfo = (props: { employeeData?: EmployeeDetails; userInfo?: Employ : {experience}+ years
+
+ User Work Shift + : + + {"Regular"} + +
+
+ WFH + : + + {"Yes"} + +
+
+ Employment Type + : + + {"Full-Time"} + +
+
+ Company Benefits + : + + {"Health Insurance, Gift Cards"} + +
); }; @@ -192,6 +220,7 @@ const EmployeeInfo = (props: { employeeData?: EmployeeDetails; userInfo?: Employ {employeeData.Name}
{employeeData.Designation}
+
Mail Id: {employeeData.Mail}
Branch: {employeeData.Branch}
Lead: {employeeData.TeamLead}
diff --git a/Employee_Managment_App/src/components/Employees.tsx b/Employee_Managment_App/src/components/Employees.tsx index a9a1052..e020192 100644 --- a/Employee_Managment_App/src/components/Employees.tsx +++ b/Employee_Managment_App/src/components/Employees.tsx @@ -124,8 +124,8 @@ const Employees = (props?: { employeeData?: EmployeeDetails; userInfo?: Employee dataSource={data} query={props?.employeeData ? query : undefined} allowPaging={true} + pageSettings={{ pageCount: 4, pageSize: 15 }} allowExcelExport={true} - height={270} width={'100%'} allowGrouping={true} groupSettings={{ enableLazyLoading: true }} diff --git a/Employee_Managment_App/src/components/Policies.tsx b/Employee_Managment_App/src/components/Policies.tsx index 064f804..be1c425 100644 --- a/Employee_Managment_App/src/components/Policies.tsx +++ b/Employee_Managment_App/src/components/Policies.tsx @@ -8,7 +8,7 @@ const Policies = () => {
-
+ -
+ +
+
+
+
+
+ Protecting Information Policy +
+
+
+
+ Protecting our company's information is the + responsibility of every associate, and we all share a common interest in making + sure information is not improperly or accidentally disclosed.Employees must follow + strict security protocols, including password protection, data encryption, and secure file sharing. + Confidential business data should not be shared with unauthorized personnel or stored on personal devices.
-
+ +
- Protecting Information Policy + Remote Work Policy
- Protecting our company's information is the responsibility - of every associate, and we all share a common interest in - making sure information is not improperly or accidentally - disclosed. + We support flexible work arrangements, allowing employees + to work remotely when feasible. Remote employees must ensure they have a + reliable internet connection, use approved work devices, + and maintain clear communication with their teams. + Productivity is measured by performance rather than work hours, + but availability during core business hours is expected.
- +
+
+
+
+
+
+
+
+ Code Conduct Policy +
+
+
+
+ All employees are expected to uphold professionalism, integrity, and respect + in all workplace interactions. Ethical behavior, clear communication, and adherence + to company policies foster a positive work culture. Discrimination, harassment, and + misconduct will not be tolerated. Employees must respect workplace diversity, + follow ethical decision-making principles, and comply with all applicable legal and corporate guidelines. +
+ +
+
+
+
+
+
+
Internet Usage Policy
+
+
+
+ Employees must use company-provided internet access responsibly. + Engaging in illegal activities, excessive personal browsing, or accessing + restricted content is prohibited. Downloading unapproved software or + violating copyright laws is strictly forbidden. Internet activity may be monitored + to ensure compliance with security and productivity guidelines. +
+ +
+
+
+
+
+
+
Expense Reimbursement Policy
- Employees have a yearly entitlement of 36 leave days. This - allocation allows for adequate time off to rest and - recharge. Such benefits contribute to employee well-being - and job satisfaction. + Employees may request reimbursement for approved work-related expenses, + including travel, meals, and lodging, provided they submit receipts and + supporting documents within the required timeframe. All expense claims must + align with company budgetary policies. Unauthorized or personal expenses will + not be reimbursed unless specifically approved.
diff --git a/Employee_Managment_App/src/index.css b/Employee_Managment_App/src/index.css index 3a64761..0f84d66 100644 --- a/Employee_Managment_App/src/index.css +++ b/Employee_Managment_App/src/index.css @@ -2,8 +2,6 @@ padding: 15px 20px 15px 20px; position: fixed; top: 0; - background-color: #ccccff; - box-shadow: 0 6px 6px rgba(0, 0, 0, 0.08); height: 75px; width: 100%; z-index: 10001; @@ -22,32 +20,35 @@ height: 650px; } +.col-md-10.main-content .row.card-layout { + padding: 20px; +} + .xyz-management-content .col-md-2.sidebar .title { font-size: 1.2em; text-align: center; - color: #2a2a72; + color: #f3f3f4; font-weight: bolder; margin-bottom: 30px; - box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); } .xyz-management-content .col-md-2.sidebar { width: 240px; - background-color: #ffffff; - color: #3a3b3c; + background-color: #2d323e; + color: white; position: fixed; height: 100%; padding-right: 0px; padding-top: 20px; border-right: 1px solid #e0e0e0; - box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); } .xyz-management-content .col-md-10.main-content { padding-right: 0px; padding-left: 0px; position: absolute; - left: 170px; + left: 225px; + width: calc(100% - 225px); } @media (max-width: 426px) { @@ -75,13 +76,24 @@ } @media (min-width:1024px) { .xyz-management-content .col-md-2.sidebar { - width: 185px; + width: 240px; float: left; } .xyz-management-content .col-md-10.main-content { width: calc(100% - 170px); float: left; } + .xyz-management-content .col-md-10.main-content { + left: 170px; + } + #_tab_header_items .e-hscroll-content{ + width: 100%; + } + + #_tab_header_items .e-toolbar-item { + width: 20%; + text-align: center; + } } @media (max-width:600px) { @@ -109,8 +121,19 @@ text-align: left; .nav > li > a.active, .nav > li > a:hover { text-decoration: none; - background-color: #D9E9FF; + background-color: rgb(0,0,0,0.1);; } + +.nav > li > a:hover { + text-decoration: none; + background-color: rgb(0,0,0,0.1); + color: #ffffff; +} + +.xyz-management-content .col-md-2.sidebar a.active { + color: #ffffff; +} + .policiespage a:focus, .policiespage a.active, .policiespage a:hover { @@ -138,18 +161,25 @@ text-align: left; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.07); } -.employeespage .employees-content, -.employeeinfopage .employeeinfo-content, -.policiespage .policies-content, -.announcementpage .announcement-content, -.achievementspage .achievements-content, -.employeeinfopage .overview-content { - padding: 20px; +#_tab_header_items { + width: 100%; +} + +.overview-content #_tab_header_items .e-toolbar-item.e-active { + background-color: #1ab394; +} +.overview-content #_tab_header_items .e-toolbar-item.e-active .e-tab-text{ + color: white; +} +.overview-content #_tab_header_items .e-indicator.e-ignore { + display: none; } .employeeinfopage .overview-header { padding: 20px; border-bottom: 1px solid rgb(0, 0, 0, 0.2); + display: flex; + background-color: #f3f3f4; } a.employee-popover:hover { @@ -159,7 +189,7 @@ a.employee-popover:hover { padding: 20px 10px 20px 10px; } .xyz-management-content .e-tab-header { - box-shadow: 0 6px 6px rgba(0, 0, 0, 0.07); + padding: 35px 10px 20px 35px; } /* Tooltip */ @@ -190,7 +220,7 @@ a.employee-popover:hover { font-family: 'Roboto', 'Segoe UI', 'GeezaPro', 'DejaVu Serif', 'sans-serif', '-apple-system', 'BlinkMacSystemFont'; line-height: 20px; - padding: 0 0 20px 0; + padding: 0 0 50px 0; } .paystubinfo, @@ -220,7 +250,11 @@ a.employee-popover:hover { float: left; } .profile-data { - padding: 2px 0; + padding: 5px 0; +} + +.employees-content #content { + height: calc(100vh - 150px); } .employeeLeave-header { @@ -228,7 +262,7 @@ a.employee-popover:hover { font-family: 'Roboto', 'Segoe UI', 'GeezaPro', 'DejaVu Serif', 'sans-serif', '-apple-system', 'BlinkMacSystemFont'; line-height: 20px; - padding: 0 0 20px 0; + padding: 0 0 50px 0; } .employeeLeave-header span { @@ -284,7 +318,7 @@ td.cardcell.separateline { } .detail { - padding-bottom: 15px; + padding-bottom: 20px; } .sub-heading { @@ -350,11 +384,6 @@ td.cardcell.separateline { /* Weather Card Layout Customization */ -.card-control-section.basic_card_layout .card-layout { - margin: auto; - max-width: 400px; -} - .policiespage .row, .achievementspage .row, .announcementpage .row { @@ -377,10 +406,6 @@ td.cardcell.separateline { .col-xs-6.col-sm-6.col-lg-6.col-md-6 { width: 100%; } - - .card-control-section.basic_card_layout .card-layout { - max-width: 870px; - } } @media (max-width: 600px) { @@ -398,16 +423,3 @@ td.cardcell.separateline { max-width: 600px; } } - -/* Horizontal Card Layout Customization */ - -.card-control-section.horizontal_card_layout - .col-xs-6.col-sm-6.col-lg-6.col-md-6 { - width: 100%; - margin: auto; -} - -.card-control-section.horizontal_card_layout .card-layout { - margin: auto; - max-width: 870px; -} From bbd2feca9dc963ca523e797c8e5462641cdb46e1 Mon Sep 17 00:00:00 2001 From: Vigneshwaran-SF4319 <149996230+Vigneshwaran-SF4319@users.noreply.github.com> Date: Tue, 18 Mar 2025 15:40:22 +0530 Subject: [PATCH 2/2] 947756: Need to fix the UI changes from UX team in employee management showcase application. --- Employee_Managment_App/src/index.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Employee_Managment_App/src/index.css b/Employee_Managment_App/src/index.css index 0f84d66..db2d6bf 100644 --- a/Employee_Managment_App/src/index.css +++ b/Employee_Managment_App/src/index.css @@ -26,7 +26,7 @@ .xyz-management-content .col-md-2.sidebar .title { font-size: 1.2em; - text-align: center; + padding-left: 15px; color: #f3f3f4; font-weight: bolder; margin-bottom: 30px; @@ -390,6 +390,10 @@ td.cardcell.separateline { padding: 0 0 10px 0; } +.achievementspage .e-card-content { + height: 100px; +} + .announcementpage .e-card-content { height: 150px; }