Merge pull request #39 from SyncfusionExamples/EJ2-1000395-Issuefix

1000395: Fixed issues in Employee Management

Author: BalajiSGrid

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);

Employee_Managment_App/src/components/Announcement.tsx

@@ -162,6 +162,7 @@ export const AnnouncementPanel: React.FC<AnnouncementPanelProps> = ({
             <ButtonComponent
               cssClass="annc-panel-cta"
               type="button"
+              disabled={!items.some((it) => !it.read)}
               onClick={handleMarkAllRead}
             >
               Mark all read
@@ -185,7 +186,7 @@ export const AnnouncementPanel: React.FC<AnnouncementPanelProps> = ({
                       <i className={it.iconClass ?? (it.type === 'announcement' ? 'e-icons e-audio' : 'e-icons e-multiple-comment')} />
                     </span>
                     <div className="annc-item-body">
-                      <div className={`annc-item-title ${it.read ? 'read' : 'unread'}`}>{it.title}</div>
+                      <div className={`annc-item-title ${!it.read ? 'unread' : ''}`}>{it.title}</div>
                       {(it.subtitle || it.date) && (
                         <div className="annc-item-meta">
                           {it.subtitle && <span className="meta">{it.subtitle}</span>}

Employee_Managment_App/src/components/AnnouncementDetailDialog.tsx

@@ -56,6 +56,11 @@ export const AnnouncementDetailDialog: React.FC<AnnouncementDetailDialogProps> =
   onMarkRead,
 }) => {
   const { label, Icon } = getMeta(item?.type);
+  // Use dialog ref to trigger built-in hide animation for custom buttons
+  const dialogRef = React.useRef<DialogComponent | null>(null);
+  const hideWithAnimation = () => {
+    dialogRef.current?.hide();
+  };
 
   const headerTemplate = () => (
     <div className="annc-dlg-header" role="group" aria-label="Announcement header">
@@ -96,17 +101,19 @@ export const AnnouncementDetailDialog: React.FC<AnnouncementDetailDialogProps> =
         <ButtonComponent cssClass="e-primary" onClick={() => {
           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
         </ButtonComponent>
       )}
-      <ButtonComponent onClick={onClose}>Close</ButtonComponent>
+      <ButtonComponent onClick={hideWithAnimation}>Close</ButtonComponent>
     </div>
   );
 
   return (
     <DialogComponent
+      ref={dialogRef}
       isModal
       visible={open}
       showCloseIcon
@@ -118,7 +125,7 @@ export const AnnouncementDetailDialog: React.FC<AnnouncementDetailDialogProps> =
       header={headerTemplate}
       footerTemplate={footerTemplate}
       target="body"
-      overlayClick={onClose}
+      overlayClick={hideWithAnimation}
       close={onClose}
     >
       <div className="annc-dlg-content">

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;
+  }
+}

Employee_Managment_App/src/components/EmployeePayRoll.tsx

@@ -470,15 +470,15 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
                 field="Item"
                 type="Custom"
                 footerTemplate={() => {
-                  return <span>Net Pay</span>;
+                  return <strong>Net Pay</strong>;
                 }}
               />
               <AggregateColumnDirective
                 field="Total"
                 type="Custom"
                 customAggregate={calculteNetPayInYear}
                 footerTemplate={(props: any) => {
-                  return <span>$ {props.Custom}</span>;
+                  return <strong>$ {props.Custom}</strong>;
                 }}
               />
               {months.map((x, index) => {

Employee_Managment_App/src/components/EmployeePayStub.tsx

@@ -275,7 +275,7 @@ const EmployeePayStub = (props: { employeeData: EmployeeDetails }) => {
                 field="Item"
                 type="Custom"
                 footerTemplate={() => {
-                  return <span>Net Pay</span>;
+                  return <strong>Net Pay</strong>;
                 }}
               />
               {months.map((x, index) => {
@@ -286,7 +286,7 @@ const EmployeePayStub = (props: { employeeData: EmployeeDetails }) => {
                     type="Custom"
                     customAggregate={calculteNetPayAggregate}
                     footerTemplate={(props: any) => {
-                      return <span>$ {props.Custom}</span>;
+                      return <strong>$ {props.Custom}</strong>;
                     }}
                   />
                 );

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 */

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 {