From 32307005da1a5a29896ba01c8641c40d17bbf421 Mon Sep 17 00:00:00 2001 From: VaseegaranSF4468 <162665726+VaseegaranSF4468@users.noreply.github.com> Date: Fri, 26 Dec 2025 17:37:38 +0530 Subject: [PATCH] 1000395: Fixed issues in Employee Management --- .../src/components/Announcement.css | 28 +++++++++++------- .../src/components/Announcement.tsx | 3 +- .../components/AnnouncementDetailDialog.tsx | 13 +++++++-- .../src/components/EmployeeLeave.css | 29 +++++++++++++++++++ .../src/components/EmployeePayRoll.tsx | 4 +-- .../src/components/EmployeePayStub.tsx | 4 +-- .../src/components/TopNav.css | 4 ++- Employee_Managment_App/src/index.css | 2 +- 8 files changed, 67 insertions(+), 20 deletions(-) diff --git a/Employee_Managment_App/src/components/Announcement.css b/Employee_Managment_App/src/components/Announcement.css index 58a05d7..8795f7b 100644 --- a/Employee_Managment_App/src/components/Announcement.css +++ b/Employee_Managment_App/src/components/Announcement.css @@ -78,30 +78,32 @@ /* Tabs */ .annc-panel-tabs { - display: flex; - gap: 8px; - padding: 8px 8px 0 8px; + display: grid; + grid-template-columns: 1fr 1fr; /* two tabs take full width equally */ + padding: 0; /* remove extra gaps to match design */ border-bottom: 1px solid var(--annc-border); } .annc-panel-tabs button { background: transparent; border: none; - color: #475569; - padding: 8px 10px; - border-radius: 8px 8px 0 0; + padding: 12px 0; /* taller clickable area */ + border-radius: 0; /* flush edges*/ position: relative; cursor: pointer; + width: 100%; + display: flex; + align-items: center; + justify-content: center; /* center icon */ } .annc-panel-tabs button.active { color: var(--annc-theme); } .annc-panel-tabs button.active::after { content: ''; position: absolute; - left: 8px; - right: 8px; + left: 0; /* underline spans the full half */ + right: 0; bottom: -1px; height: 2px; background: var(--annc-theme); - border-radius: 2px; } /* Subheader */ @@ -120,6 +122,13 @@ font-weight: 600; cursor: pointer; } +/* Disabled state for Syncfusion button */ +.annc-panel-cta.e-disabled, +.annc-panel-cta[disabled] { + opacity: 0.5; + cursor: not-allowed; + pointer-events: none; +} /* Content */ .annc-panel-content { @@ -158,7 +167,6 @@ .annc-panel-item.is-read { margin-bottom: 5px; padding: 6px; - opacity: 0.75; } .annc-panel-item:hover { background: var(--color-sf-secondary-bg-color-hover); diff --git a/Employee_Managment_App/src/components/Announcement.tsx b/Employee_Managment_App/src/components/Announcement.tsx index fb15012..9fd2c4b 100644 --- a/Employee_Managment_App/src/components/Announcement.tsx +++ b/Employee_Managment_App/src/components/Announcement.tsx @@ -162,6 +162,7 @@ export const AnnouncementPanel: React.FC = ({ !it.read)} onClick={handleMarkAllRead} > Mark all read @@ -185,7 +186,7 @@ export const AnnouncementPanel: React.FC = ({
-
{it.title}
+
{it.title}
{(it.subtitle || it.date) && (
{it.subtitle && {it.subtitle}} diff --git a/Employee_Managment_App/src/components/AnnouncementDetailDialog.tsx b/Employee_Managment_App/src/components/AnnouncementDetailDialog.tsx index 06d548d..3cdfacb 100644 --- a/Employee_Managment_App/src/components/AnnouncementDetailDialog.tsx +++ b/Employee_Managment_App/src/components/AnnouncementDetailDialog.tsx @@ -56,6 +56,11 @@ export const AnnouncementDetailDialog: React.FC = onMarkRead, }) => { const { label, Icon } = getMeta(item?.type); + // Use dialog ref to trigger built-in hide animation for custom buttons + const dialogRef = React.useRef(null); + const hideWithAnimation = () => { + dialogRef.current?.hide(); + }; const headerTemplate = () => (
@@ -96,17 +101,19 @@ export const AnnouncementDetailDialog: React.FC = { const isNotification = item.type === 'notification'; onMarkRead?.(item.id, isNotification); - onClose(); + // trigger dialog close with animation; onClose will be fired on close event + hideWithAnimation(); }}> Mark as read )} - Close + Close
); return ( = header={headerTemplate} footerTemplate={footerTemplate} target="body" - overlayClick={onClose} + overlayClick={hideWithAnimation} close={onClose} >
diff --git a/Employee_Managment_App/src/components/EmployeeLeave.css b/Employee_Managment_App/src/components/EmployeeLeave.css index 550ccd9..1bf9b43 100644 --- a/Employee_Managment_App/src/components/EmployeeLeave.css +++ b/Employee_Managment_App/src/components/EmployeeLeave.css @@ -82,6 +82,16 @@ color: inherit; } +/* Apply icon vertical adjustment only on mobile screens */ +@media (max-width: 768px) { + .drp-icon-left .e-icons, + .drp-caret-right .e-icons, + .calendar-i, + .caret-i { + margin-top: 8px; + } +} + /* ensure icon button sits above the input text */ .drp-icon-left, .drp-caret-right { @@ -267,3 +277,22 @@ .status-pending { background-color: #007bff; /* blue */ } + +/* Mobile tab next-arrow should be perfectly vertical (remove skew from scroll buttons) */ +@media (max-width: 768px) { + /* Horizontal Tab header scroll buttons */ + .e-tab .e-hscroll.e-scroll-device .e-scroll-nav, + .e-tab .e-rtl.e-hscroll.e-scroll-device .e-scroll-nav, + .e-tab .e-vscroll.e-scroll-device .e-scroll-nav, + .e-tab .e-rtl.e-vscroll.e-scroll-device .e-scroll-nav { + -webkit-transform: none !important; + transform: none !important; + } + .e-tab .e-hscroll.e-scroll-device .e-scroll-nav .e-nav-arrow, + .e-tab .e-rtl.e-hscroll.e-scroll-device .e-scroll-nav .e-nav-arrow, + .e-tab .e-vscroll.e-scroll-device .e-scroll-nav .e-nav-arrow, + .e-tab .e-rtl.e-vscroll.e-scroll-device .e-scroll-nav .e-nav-arrow { + -webkit-transform: none !important; + transform: none !important; + } +} diff --git a/Employee_Managment_App/src/components/EmployeePayRoll.tsx b/Employee_Managment_App/src/components/EmployeePayRoll.tsx index 467dfca..cd18b58 100644 --- a/Employee_Managment_App/src/components/EmployeePayRoll.tsx +++ b/Employee_Managment_App/src/components/EmployeePayRoll.tsx @@ -470,7 +470,7 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => { field="Item" type="Custom" footerTemplate={() => { - return Net Pay; + return Net Pay; }} /> { type="Custom" customAggregate={calculteNetPayInYear} footerTemplate={(props: any) => { - return $ {props.Custom}; + return $ {props.Custom}; }} /> {months.map((x, index) => { diff --git a/Employee_Managment_App/src/components/EmployeePayStub.tsx b/Employee_Managment_App/src/components/EmployeePayStub.tsx index 8601ce1..6f3e0b1 100644 --- a/Employee_Managment_App/src/components/EmployeePayStub.tsx +++ b/Employee_Managment_App/src/components/EmployeePayStub.tsx @@ -275,7 +275,7 @@ const EmployeePayStub = (props: { employeeData: EmployeeDetails }) => { field="Item" type="Custom" footerTemplate={() => { - return Net Pay; + return Net Pay; }} /> {months.map((x, index) => { @@ -286,7 +286,7 @@ const EmployeePayStub = (props: { employeeData: EmployeeDetails }) => { type="Custom" customAggregate={calculteNetPayAggregate} footerTemplate={(props: any) => { - return $ {props.Custom}; + return $ {props.Custom}; }} /> ); diff --git a/Employee_Managment_App/src/components/TopNav.css b/Employee_Managment_App/src/components/TopNav.css index abbdc48..63459c2 100644 --- a/Employee_Managment_App/src/components/TopNav.css +++ b/Employee_Managment_App/src/components/TopNav.css @@ -36,6 +36,7 @@ --search-text: #111827; --search-muted: #6b7280; --search-icon: #6b7280; + --nav-border:rgb(150, 150, 160); --shadow-rest: 0 1px 2px rgba(0,0,0,.06); --shadow-focus: 0 6px 18px rgba(16, 185, 129, 0.16); @@ -54,7 +55,8 @@ z-index: 1000; height: var(--topnav-height); background: var(--topnav-bg); - border-bottom: 2px solid var(--topnav-border); + border-bottom: 0.5px solid var(--nav-border); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); } /* Optional green accent line/shadow */ diff --git a/Employee_Managment_App/src/index.css b/Employee_Managment_App/src/index.css index b4b88d6..312a0a8 100644 --- a/Employee_Managment_App/src/index.css +++ b/Employee_Managment_App/src/index.css @@ -50379,7 +50379,7 @@ body.e-colorpicker-overflow { -webkit-box-shadow: none; box-shadow: none; font-weight: 400; - border-bottom: 1px solid var(--color-sf-border-light); + border-bottom: 1px solid rgb(0, 0, 0, 0.2); } .e-tab .e-tab-header::before {