From 4988e7fee3c62c2ebbca249de046a754c43fdd44 Mon Sep 17 00:00:00 2001
From: TamilRamGanesan-SF5080 <tamilram.ganesan@syncfusion.com>
Date: Wed, 17 Dec 2025 17:15:27 +0530
Subject: [PATCH 1/2] 999936: fixed the bugs and UI changes

---
 Employee_Managment_App/src/App.tsx            |   1 +
 .../src/components/Achievements.css           |  24 ++--
 .../src/components/Achievements.tsx           |  21 ++--
 .../src/components/Announcement.tsx           |  80 +++++++-----
 .../components/AnnouncementDetailDialog.tsx   |  10 +-
 .../src/components/Employees.tsx              |  10 +-
 .../src/components/Organization.css           |   5 +-
 .../src/components/Policies.css               | 110 +++--------------
 .../src/components/Policies.tsx               |  45 +++----
 .../src/components/TopNav.css                 |  15 ++-
 .../src/components/TopNav.tsx                 | 104 ++++++++--------
 Employee_Managment_App/src/index.css          | 115 ++++++++++--------
 12 files changed, 256 insertions(+), 284 deletions(-)

diff --git a/Employee_Managment_App/src/App.tsx b/Employee_Managment_App/src/App.tsx
index 87dfc8d..ddd47c5 100644
--- a/Employee_Managment_App/src/App.tsx
+++ b/Employee_Managment_App/src/App.tsx
@@ -90,6 +90,7 @@ function App() {
           width={`${SIDEBAR_WIDTH}px`}
           dockSize={`${SIDEBAR_WIDTH_COLLAPSED}px`}
           enableDock={sbEnableDock}
+          enableGestures={false}
           isOpen={sbIsOpen}
           type={sbType as any}
           position="Left"
diff --git a/Employee_Managment_App/src/components/Achievements.css b/Employee_Managment_App/src/components/Achievements.css
index a42730f..7b9d23e 100644
--- a/Employee_Managment_App/src/components/Achievements.css
+++ b/Employee_Managment_App/src/components/Achievements.css
@@ -34,8 +34,8 @@ body,
   /* removed decorative radial gradients */
   min-height: 100%;
   color: var(--text);
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
-}
+  font-family: 'Roboto', sans-serif;
+  }
 
 /* Toolbar - flat */
 .achievements-toolbar {
@@ -70,7 +70,9 @@ body,
 }
 
 .toolbar-field {
-  display: grid;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   gap: 6px;
   font-size: 12px;
   color: var(--muted);
@@ -78,6 +80,7 @@ body,
 
 .field-label {
   opacity: .9;
+  font-size: 14px;
 }
 
 /* Syncfusion dropdowns */
@@ -144,7 +147,7 @@ body,
 .lb-section {
   background: var(--surface);
   border: 1px solid var(--border);
-  border-radius: 10px;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   overflow: hidden;
 }
 
@@ -153,6 +156,7 @@ body,
   display: flex;
   align-items: center;
   gap: 10px;
+  height: 70px;
   padding: 10px 12px;
   border-bottom: 1px solid var(--border);
   background: #fff;
@@ -171,18 +175,21 @@ body,
 .bg-r-overall {
   background: #fb5757;
   color: #fff;
+  font-size: 22px;
 }
 
 .icon-task,
 .bg-r-task {
   background: #d65e22;
   color: #fff;
+  font-size: 22px;
 }
 
 .icon-att,
 .bg-r-attendance {
   background: #317701;
   color: #fff;
+  font-size: 22px;
 }
 
 .lb-header-text {
@@ -196,7 +203,7 @@ body,
 }
 
 .lb-sub {
-  font-size: 10px;
+  font-size: 14px;
   color: #fff;
   letter-spacing: 1px;
   padding-top: 5px;
@@ -292,13 +299,6 @@ body,
   font-size: 13px;
   letter-spacing: .2px;
   font-feature-settings: "tnum" on, "lnum" on;
-  background: #f8fafc;
   padding: 4px 8px;
-  border-radius: 6px;
-  border: 1px solid #e5e7eb;
   font-family: 'Roboto', sans-serif;
 }
-
-.score.flat {
-  background: #f8fafc;
-}
\ No newline at end of file
diff --git a/Employee_Managment_App/src/components/Achievements.tsx b/Employee_Managment_App/src/components/Achievements.tsx
index f4cfe2f..d756e03 100644
--- a/Employee_Managment_App/src/components/Achievements.tsx
+++ b/Employee_Managment_App/src/components/Achievements.tsx
@@ -209,14 +209,14 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =
 
         <div className="toolbar-right">
           <label className="toolbar-field">
-            <span className="field-label">Role</span>
+            <span className="field-label" >Role</span>
             <DropDownListComponent
               id="role-ddl"
               cssClass="sf-field-input"
               dataSource={roles}
               fields={{ text: 'text', value: 'value' }}
               value={role}
-              width="180px"
+              width="135px"
               placeholder="Select role"
               change={(e: any) => setRole(e.value)}
               aria-label="Filter by role"
@@ -231,6 +231,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =
               id="month-ddl"
               cssClass="sf-field-input"
               dataSource={months}
+              width="100px"
               fields={{ text: 'text', value: 'value' }}
               value={month}
               placeholder="Select month"
@@ -247,6 +248,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =
               id="year-ddl"
               cssClass="sf-field-input"
               dataSource={years}
+              width="100px"
               fields={{ text: 'text', value: 'value' }}
               value={year}
               placeholder="Select year"
@@ -270,10 +272,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =
           <div className="lb-sections">
             <section className="lb-section">
               <header className="lb-header bg-r-overall">
-                <div className="lb-header-icon icon-overall" aria-hidden>
-                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M7 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm10 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM12 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm-7 8v-1a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1H5zm10 0v-1a5 5 0 0 1 5-5h.5A1.5 1.5 0 0 1 22 12.5V17H15z" />
-                  </svg>
+                <div className="lb-header-icon icon-overall e-icons e-user" aria-hidden>
                 </div>
                 <div className="lb-header-text">
                   <div className="lb-title">Overall</div>
@@ -297,10 +296,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =
 
             <section className="lb-section">
               <header className="lb-header bg-r-task">
-                <div className="lb-header-icon icon-task" aria-hidden>
-                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
-                  </svg>
+                <div className="lb-header-icon icon-task e-icons e-check-tick" aria-hidden>
                 </div>
                 <div className="lb-header-text">
                   <div className="lb-title">Task</div>
@@ -324,10 +320,7 @@ const Achievements: React.FC<AchievementsProps> = ({ userInfo, onlyTeamIfUser =
 
             <section className="lb-section">
               <header className="lb-header bg-r-attendance">
-                <div className="lb-header-icon icon-att" aria-hidden>
-                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 16H5V8h14v11z" />
-                  </svg>
+                <div className="lb-header-icon icon-att e-icons e-day" aria-hidden>
                 </div>
                 <div className="lb-header-text">
                   <div className="lb-title">Attendance</div>
diff --git a/Employee_Managment_App/src/components/Announcement.tsx b/Employee_Managment_App/src/components/Announcement.tsx
index 325667b..7c84e5f 100644
--- a/Employee_Managment_App/src/components/Announcement.tsx
+++ b/Employee_Managment_App/src/components/Announcement.tsx
@@ -1,10 +1,10 @@
 // src/components/Announcement.tsx
 // Reusable right-side drawer that shows Notifications and Announcements
 // Adds Syncfusion Dialog for item details
-
 import React from 'react';
 import './Announcement.css';
 import { AnnouncementDetailDialog } from './AnnouncementDetailDialog';
+import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
 
 export type PanelItem = {
   id: string | number;
@@ -14,6 +14,7 @@ export type PanelItem = {
   type?: 'announcement' | 'notification' | 'message';
   content?: string; // full body to show in dialog
   read?: boolean;   // optional read flag
+  iconClass?: string;
 };
 
 export type AnnouncementPanelProps = {
@@ -51,7 +52,9 @@ export const AnnouncementPanel: React.FC<AnnouncementPanelProps> = ({
   }, [open, defaultTab]);
 
   React.useEffect(() => {
-    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
     document.addEventListener('keydown', onKey);
     return () => document.removeEventListener('keydown', onKey);
   }, [onClose]);
@@ -80,6 +83,22 @@ export const AnnouncementPanel: React.FC<AnnouncementPanelProps> = ({
     setSelectedItem(null);
   };
 
+  const handleMarkAllRead = () => {
+    // Notify parent (if provided)
+    onMarkAllRead?.(tab);
+
+    // Keep your existing badge-hiding logic (targets TopNav icon buttons)
+    const selector =
+      tab === 'announcements'
+        ? '.icon-btn.e-icons.e-audio span'
+        : '.icon-btn.e-icons.e-multiple-comment span';
+    document.querySelectorAll(selector).forEach((el) => {
+      const span = el as HTMLElement;
+      span.style.display = 'none';
+      span.setAttribute('aria-hidden', 'true');
+    });
+  };
+
   const items = tab === 'notifications' ? notificationItems : announcementItems;
 
   return (
@@ -98,31 +117,43 @@ export const AnnouncementPanel: React.FC<AnnouncementPanelProps> = ({
         >
           <div className="annc-panel-header">
             <div className="annc-panel-title">Notification</div>
-            <button className="annc-panel-close" type="button" aria-label="Close" onClick={onClose} title="Close">
+            <ButtonComponent
+              className="annc-panel-close"
+              cssClass="annc-panel-close"
+              type="button"
+              aria-label="Close"
+              onClick={onClose}
+              title="Close"
+            >
               <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
-                <path fill="currentColor" d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+                <path
+                  fill="currentColor"
+                  d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
               </svg>
-            </button>
+            </ButtonComponent>
           </div>
 
           <div className="annc-panel-tabs" role="tablist" aria-label="Notification categories">
-            <button role="tab" aria-selected={tab === 'notifications'} className={tab === 'notifications' ? 'active' : ''} onClick={() => setActiveTab('notifications')} title="Notifications">
-              <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
-                <path fill="currentColor" d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2z" />
-              </svg>
+            <button role="tab" aria-selected={tab === 'notifications'} className={tab === 'notifications' ? 'active e-icons e-multiple-comment' : 'e-icons e-multiple-comment'} onClick={() => setActiveTab('notifications')} title="Notifications">
             </button>
-            <button role="tab" aria-selected={tab === 'announcements'} className={tab === 'announcements' ? 'active' : ''} onClick={() => setActiveTab('announcements')} title="Announcements">
-              <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
-                <path fill="currentColor" d="M3 10v4a1 1 0 0 0 1 1h1l3.89 2.6a2 2 0 0 0 3.11-1.65V7.05A2 2 0 0 0 8.89 5.4L5 8H4a1 1 0 0 0-1 1zm18-4v12l-8-4V10l8-4z" />
-              </svg>
+            <button role="tab" aria-selected={tab === 'announcements'} className={tab === 'announcements' ? 'active e-icons e-audio' : 'e-icons e-audio'} onClick={() => setActiveTab('announcements')} title="Announcements">
             </button>
           </div>
 
           <div className="annc-panel-subhead">
-            {tab === 'notifications' ? <span>Notifications for the last 15 days</span> : <span>Announcements</span>}
-            <button className="annc-panel-cta" type="button" onClick={() => onMarkAllRead?.(tab)}>
+            {tab === 'notifications' ? (
+              <span>Notifications for the last 15 days</span>
+            ) : (
+              <span>Announcements</span>
+            )}
+            <ButtonComponent
+              cssClass="annc-panel-cta"
+              type="button"
+              onClick={handleMarkAllRead}
+            >
               Mark all read
-            </button>
+            </ButtonComponent>
           </div>
 
           <div className="annc-panel-content" role="region" aria-live="polite">
@@ -138,17 +169,8 @@ export const AnnouncementPanel: React.FC<AnnouncementPanelProps> = ({
                     onKeyDown={(e) => e.key === 'Enter' && openDetail(it)}
                     title="View details"
                   >
-                    <span className={`annc-item-icon ${tab === 'announcements' ? 'bullhorn' : ''}`}>
-                      <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
-                        <path
-                          fill="currentColor"
-                          d={
-                            tab === 'announcements'
-                              ? 'M3 10v4a1 1 0 0 0 1 1h1l3.89 2.6a2 2 0 0 0 3.11-1.65V7.05A2 2 0 0 0 8.89 5.4L5 8H4a1 1 0 0 0-1 1zm18-4v12l-8-4V10l8-4z'
-                              : 'M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2z'
-                          }
-                        />
-                      </svg>
+                    <span className="panel-item-icon" aria-hidden="true">
+                      <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.title}</div>
@@ -164,7 +186,9 @@ export const AnnouncementPanel: React.FC<AnnouncementPanelProps> = ({
               </ul>
             ) : (
               <div className="annc-panel-empty">
-                {tab === 'notifications' ? 'No notification for the last 15 days.' : 'No announcements for the last 15 days.'}
+                {tab === 'notifications'
+                  ? 'No notification for the last 15 days.'
+                  : 'No announcements for the last 15 days.'}
               </div>
             )}
           </div>
diff --git a/Employee_Managment_App/src/components/AnnouncementDetailDialog.tsx b/Employee_Managment_App/src/components/AnnouncementDetailDialog.tsx
index 25ab566..caab36d 100644
--- a/Employee_Managment_App/src/components/AnnouncementDetailDialog.tsx
+++ b/Employee_Managment_App/src/components/AnnouncementDetailDialog.tsx
@@ -27,14 +27,10 @@ export type AnnouncementDetailDialogProps = {
 const dialogAnimation: AnimationSettingsModel = { effect: 'Zoom', duration: 140 };
 
 const BullhornIcon = () => (
-  <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
-    <path fill="currentColor" d="M3 10v4a1 1 0 0 0 1 1h1l3.89 2.6a2 2 0 0 0 3.11-1.65V7.05A2 2 0 0 0 8.89 5.4L5 8H4a1 1 0 0 0-1 1zm18-4v12l-8-4V10l8-4z" />
-  </svg>
+  <div className="e-icons e-audio"></div>
 );
 const BellIcon = () => (
-  <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
-    <path fill="currentColor" d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2z" />
-  </svg>
+  <div className='e-icons e-multiple-comment'></div>
 );
 const MessageIcon = () => (
   <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
@@ -97,7 +93,7 @@ export const AnnouncementDetailDialog: React.FC<AnnouncementDetailDialogProps> =
   const footerTemplate = () => (
     <div className="annc-dlg-footer">
       {item && (
-        <ButtonComponent cssClass="e-primary" onClick={() => onMarkRead?.(item)}>
+        <ButtonComponent cssClass="e-primary" onClick={onClose}>
           Mark as read
         </ButtonComponent>
       )}
diff --git a/Employee_Managment_App/src/components/Employees.tsx b/Employee_Managment_App/src/components/Employees.tsx
index d7ce7f0..4003d20 100644
--- a/Employee_Managment_App/src/components/Employees.tsx
+++ b/Employee_Managment_App/src/components/Employees.tsx
@@ -125,6 +125,11 @@ const Employees = (props?: EmployeesProps) => {
   };
 
   const beforeRender = (args: TooltipEventArgs) => {
+   
+    if(args.target.classList.contains('e-headercell')) {
+      (tooltipObj.current as any).content =args.target.innerText;
+    }
+    else {
     const rowInfo: RowInfo = employeeGridIns.current?.getRowInfo(args.target.closest('td') as HTMLElement) as RowInfo;
     const rowData = rowInfo?.rowData as EmployeeDetails;
     (tooltipObj.current as any).content = `
@@ -140,6 +145,7 @@ const Employees = (props?: EmployeesProps) => {
           </div>
         </div>
       </div>`;
+    }
   };
 
   return (
@@ -147,7 +153,7 @@ const Employees = (props?: EmployeesProps) => {
       <TooltipComponent
         id="content"
         cssClass="e-tooltip-template-css"
-        target="td.infotooltip"
+        target="#employees_grid .e-headercell, #employees_grid td.infotooltip"
         beforeRender={beforeRender}
         ref={tooltipObj}
       >
@@ -160,6 +166,7 @@ const Employees = (props?: EmployeesProps) => {
           allowExcelExport={true}
           //width={'100%'}
           //height={'100%'}
+          
           allowGrouping={true}
           groupSettings={{ enableLazyLoading: true }}
           toolbar={toolbar}
@@ -177,6 +184,7 @@ const Employees = (props?: EmployeesProps) => {
               field="Image"
               headerText="Image"
               template={imageTemplate}
+              clipMode='Clip'
               allowFiltering={false}
               allowSorting={false}
               allowGrouping={false}
diff --git a/Employee_Managment_App/src/components/Organization.css b/Employee_Managment_App/src/components/Organization.css
index 0f8f6b9..4342e40 100644
--- a/Employee_Managment_App/src/components/Organization.css
+++ b/Employee_Managment_App/src/components/Organization.css
@@ -34,6 +34,9 @@
   /* background: linear-gradient(180deg, var(--org-bg), #ffffff); */
   padding: 4px 0 0;
 }
+.org-theme .org-page .employees-content{
+  padding: 0px 24px;
+}
 
 /* =========================
    Tabs: professional green
@@ -84,7 +87,7 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 10px 12px;
+  padding: 10px 25px;
   margin: 12px 0 14px;
   /* border: 1px solid var(--org-border); */
   /* background: linear-gradient(180deg, var(--org-surface), var(--org-surface-2)); */
diff --git a/Employee_Managment_App/src/components/Policies.css b/Employee_Managment_App/src/components/Policies.css
index 43f49ef..75f55fa 100644
--- a/Employee_Managment_App/src/components/Policies.css
+++ b/Employee_Managment_App/src/components/Policies.css
@@ -31,8 +31,6 @@
 
 .policies-grid-wrapper {
   padding: 28px 24px;
-  max-width: 1160px;
-  margin: 0 auto;
   color: var(--text-strong);
 }
 
@@ -90,6 +88,7 @@
   text-decoration: underline;
 }
 
+
 /* Section headers and Reset link */
 .section-header {
   display: flex;
@@ -183,12 +182,11 @@
   position: relative;
   display: inline-flex;
   align-items: center;
+  text-align: center;
   gap: 8px;
-  padding-left: 22px;
 }
 
 .filter-chip .filter-chip__label::before {
-  content: '🏷️';
   position: absolute;
   left: 0;
   top: 50%;
@@ -196,31 +194,6 @@
   font-size: 14px;
 }
 
-.filter-chip-row .filter-chip:nth-child(1) .filter-chip__label::before {
-  content: '📚';
-}
-
-.filter-chip-row .filter-chip:nth-child(2) .filter-chip__label::before {
-  content: '🔒';
-}
-
-.filter-chip-row .filter-chip:nth-child(3) .filter-chip__label::before {
-  content: '🗓️';
-}
-
-.filter-chip-row .filter-chip:nth-child(4) .filter-chip__label::before {
-  content: '🧾';
-}
-
-.filter-chip-row .filter-chip:nth-child(5) .filter-chip__label::before {
-  content: '💻';
-}
-
-.filter-chip-row .filter-chip:nth-child(6) .filter-chip__label::before {
-  content: '👔';
-}
-
-/* Employment */
 
 /* Grid styling (unchanged core look from previous refresh) */
 .policy-name-cell {
@@ -236,19 +209,13 @@
   filter: saturate(1.05);
 }
 
-.status {
-  font-size: 12px;
-  font-weight: 900;
-  padding: 6px 10px;
-  border-radius: 999px;
-  display: inline-block;
-  box-shadow: var(--shadow-xs);
-}
+
 
 .status--active {
-  color: #065f46;
-  background: #d1fae5;
-  border: 1px solid #b7f3d4;
+
+    font-size: 12px;
+    background: #d1fae5;
+    color: #065f46;
 }
 
 .status--review {
@@ -307,14 +274,7 @@
   font-size: 16px;
 }
 
-/* Category pills in the grid */
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Category"] {
-  position: relative;
-  padding-left: 28px;
-}
-
 .policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Category"]::before {
-  content: '🏷️';
   position: absolute;
   left: 8px;
   top: 50%;
@@ -323,40 +283,6 @@
   opacity: .95;
 }
 
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Security"]::before {
-  content: '🔒';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="HR & Leave"]::before {
-  content: '🗓️';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Compliance"]::before {
-  content: '🧾';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="IT & Devices"]::before {
-  content: '💻';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Employment"]::before {
-  content: '👔';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Code of Conduct"]::before {
-  content: '📜';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Category"]>span {
-  display: inline-block;
-  padding: 4px 10px 4px 8px;
-  border-radius: 999px;
-  border: 1px solid var(--border);
-  background: #f9fafb;
-  font-weight: 700;
-  color: #1f2937;
-}
-
 /* Dialog */
 .policy-dialog .e-dlg-header-content {
   border-bottom: 1px solid var(--border);
@@ -403,25 +329,19 @@
 }
 
 .meta-value {
-  font-weight: 800;
+  font-weight: 600;
+  font-size: 11px;
+  padding-top: 5px;
   color: var(--text-strong);
 }
 
-.meta-badge {
-  font-size: 12px;
-  font-weight: 900;
-  padding: 6px 10px;
-  border-radius: 999px;
-  display: inline-block;
-  box-shadow: var(--shadow-xs);
-}
-
 .meta-badge.status--active {
-  color: #065f46;
-  background: #d1fae5;
-  border: 1px solid #b7f3d4;
+  font-size: 11px;
+}
+.policy-description{
+  line-height: 1.75;
+  padding-top: 10px;
 }
-
 .meta-badge.status--review {
   color: #92400e;
   background: #fef3c7;
diff --git a/Employee_Managment_App/src/components/Policies.tsx b/Employee_Managment_App/src/components/Policies.tsx
index 60e460b..2659e08 100644
--- a/Employee_Managment_App/src/components/Policies.tsx
+++ b/Employee_Managment_App/src/components/Policies.tsx
@@ -30,14 +30,14 @@ type Policy = {
 
 const Policies: React.FC = () => {
   const policyData: Policy[] = [
-    { id: 1, policyName: 'Assets Policy', policyDesciption: 'Our company provides employees with necessary work devices to enhance productivity. Employees may take these devices home but are responsible for their safekeeping and proper usage. Devices must remain in good condition and be returned in working order when no longer needed or upon employment termination. Employees are not permitted to install unauthorized software, modify device settings, or use company assets for personal gain.', category: 'IT & Devices', lastUpdated: 'May 15, 2023', enrolledOn: 'May 15, 2023', statusText: 'Active', statusClass: 'status status--active' },
-    { id: 2, policyName: 'Attendance Policy', policyDesciption: 'Punctuality and consistent attendance are crucial for maintaining workflow efficiency and team collaboration. Employees should adhere to their assigned work schedules and inform supervisors promptly about any absences. Repeated lateness or unexcused absences may lead to corrective measures. Remote employees are also expected to maintain a professional work routine and be available during business hours.', category: 'Employment', lastUpdated: 'May 12, 2023', enrolledOn: 'May 12, 2023', statusText: 'Active', statusClass: 'status status--active' },
-    { id: 3, policyName: 'Protecting Information Policy', policyDesciption: 'Protecting our company 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.', category: 'Security', lastUpdated: 'May 11, 2023', enrolledOn: 'May 11, 2023', statusText: 'Active', statusClass: 'status status--active' },
-    { id: 4, policyName: 'Leave Policy', policyDesciption: 'Our company values employee well-being and offers 36 annual leave days to support work-life balance. Employees are required to submit leave requests in advance for approval. Leave categories include annual leave, medical leave, family leave, and emergency leave. Unused leave may be carried over based on company policy. Employees must ensure that their responsibilities are covered during their absence to maintain workflow efficiency.', category: 'HR & Leave', lastUpdated: 'May 10, 2023', enrolledOn: 'May 10, 2023', statusText: 'Active', statusClass: 'status status--active' },
-    { id: 5, policyName: 'Remote Work Policy', policyDesciption: '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.', category: 'Employment', lastUpdated: 'May 15, 2023', enrolledOn: 'May 15, 2023', statusText: 'Active', statusClass: 'status status--active' },
-    { id: 6, policyName: 'Security Policy', policyDesciption: 'Ensuring the security of company assets and information is a collective responsibility. Employees must follow security protocols such as using strong passwords, securing physical devices, and reporting any suspicious activity. Unauthorized system access, data breaches, or sharing of confidential information with unauthorized parties is strictly prohibited.', category: 'Security', lastUpdated: 'May 9, 2023', enrolledOn: 'May 9, 2023', statusText: 'Active', statusClass: 'status status--active' },
-    { id: 7, policyName: 'Internet Usage Policy', policyDesciption: '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.', category: 'IT & Devices', lastUpdated: 'May 7, 2023', enrolledOn: 'May 7, 2023', statusText: 'Under Review', statusClass: 'status status--review' },
-    { id: 8, policyName: 'Expense Reimbursement Policy', policyDesciption: '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.', category: 'Compliance', lastUpdated: 'May 6, 2023', enrolledOn: 'May 6, 2023', statusText: 'Active', statusClass: 'status status--active' }
+    { id: 1, policyName: 'Assets Policy', policyDesciption: 'Our company provides employees with necessary work devices to enhance productivity. Employees may take these devices home but are responsible for their safekeeping and proper usage. Devices must remain in good condition and be returned in working order when no longer needed or upon employment termination. Employees are not permitted to install unauthorized software, modify device settings, or use company assets for personal gain.', category: 'IT & Devices', lastUpdated: 'May 15, 2023', enrolledOn: 'May 15, 2023', statusText: 'Active', statusClass: 'e-badge status--active e-badge-pill' },
+    { id: 2, policyName: 'Attendance Policy', policyDesciption: 'Punctuality and consistent attendance are crucial for maintaining workflow efficiency and team collaboration. Employees should adhere to their assigned work schedules and inform supervisors promptly about any absences. Repeated lateness or unexcused absences may lead to corrective measures. Remote employees are also expected to maintain a professional work routine and be available during business hours.', category: 'Employment', lastUpdated: 'May 12, 2023', enrolledOn: 'May 12, 2023', statusText: 'Active', statusClass: 'e-badge status--active e-badge-pill' },
+    { id: 3, policyName: 'Protecting Information Policy', policyDesciption: 'Protecting our company 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.', category: 'Security', lastUpdated: 'May 11, 2023', enrolledOn: 'May 11, 2023', statusText: 'Active', statusClass: 'e-badge status--active e-badge-pill' },
+    { id: 4, policyName: 'Leave Policy', policyDesciption: 'Our company values employee well-being and offers 36 annual leave days to support work-life balance. Employees are required to submit leave requests in advance for approval. Leave categories include annual leave, medical leave, family leave, and emergency leave. Unused leave may be carried over based on company policy. Employees must ensure that their responsibilities are covered during their absence to maintain workflow efficiency.', category: 'HR & Leave', lastUpdated: 'May 10, 2023', enrolledOn: 'May 10, 2023', statusText: 'Active', statusClass: 'e-badge status--active e-badge-pill' },
+    { id: 5, policyName: 'Remote Work Policy', policyDesciption: '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.', category: 'Employment', lastUpdated: 'May 15, 2023', enrolledOn: 'May 15, 2023', statusText: 'Active', statusClass: 'e-badge status--active e-badge-pill' },
+    { id: 6, policyName: 'Security Policy', policyDesciption: 'Ensuring the security of company assets and information is a collective responsibility. Employees must follow security protocols such as using strong passwords, securing physical devices, and reporting any suspicious activity. Unauthorized system access, data breaches, or sharing of confidential information with unauthorized parties is strictly prohibited.', category: 'Security', lastUpdated: 'May 9, 2023', enrolledOn: 'May 9, 2023', statusText: 'Active', statusClass: 'e-badge status--active e-badge-pill' },
+    { id: 7, policyName: 'Internet Usage Policy', policyDesciption: '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.', category: 'IT & Devices', lastUpdated: 'May 7, 2023', enrolledOn: 'May 7, 2023', statusText: 'Active', statusClass: 'e-badge status--active e-badge-pill' },
+    { id: 8, policyName: 'Expense Reimbursement Policy', policyDesciption: '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.', category: 'Compliance', lastUpdated: 'May 6, 2023', enrolledOn: 'May 6, 2023', statusText: 'Active', statusClass: 'e-badge status--active e-badge-pill' }
   ];
 
   const [open, setOpen] = React.useState(false);
@@ -71,7 +71,6 @@ const Policies: React.FC = () => {
 
   const policyNameTemplate = (props: any) => (
     <div className="policy-name-cell">
-      <span className="policy-icon" aria-hidden="true">📄</span>
       <span className="policy-name-text">{props.policyName}</span>
     </div>
   );
@@ -121,21 +120,23 @@ const Policies: React.FC = () => {
         <section className="policy-filters" aria-labelledby="policy-filters-title">
           <div className="section-header">
             <h3 id="policy-filters-title" className="section-title">Policy Categories</h3>
-            <a className="view-all-link" href="#" onClick={clearCategoryFilter} aria-label="Clear category filter">Reset</a>
           </div>
 
           <div className="filter-chip-row" role="tablist" aria-label="Filter by category">
             {categoryChips.map(chip => (
-              <button
-                key={chip.key}
-                onClick={handleChipClick(chip.key)}
-                className={`filter-chip ${activeCategory === chip.key ? 'is-active' : ''}`}
-                aria-pressed={activeCategory === chip.key}
-                type="button"
-              >
-                <span className="filter-chip__label">{chip.name}</span>
-                <span className="filter-chip__count">{chip.count}</span>
-              </button>
+            <ButtonComponent
+              key={chip.key}
+              // Keep your chip classes and add Syncfusion state class when active
+              cssClass={`filter-chip ${activeCategory === chip.key ? 'is-active e-active' : ''}`}
+              // If you want built-in toggle semantics/styles, enable this:
+              isToggle={true}
+              onClick={handleChipClick(chip.key)}
+              aria-pressed={activeCategory === chip.key}
+              type="button"
+            >
+              <span className="filter-chip__label">{chip.name}</span>
+              <span className="filter-chip__count">{chip.count}</span>
+            </ButtonComponent>
             ))}
           </div>
         </section>
@@ -189,7 +190,7 @@ const Policies: React.FC = () => {
               </div>
               <div>
                 <div className="meta-label">Status</div>
-                <div className={`meta-badge ${selected.statusClass}`}>{selected.statusText}</div>
+                <div className={`meta-badge e-badge status--active e-badge-pill`}>{selected.statusText}</div>
               </div>
               <div>
                 <div className="meta-label">Last Updated</div>
@@ -202,7 +203,7 @@ const Policies: React.FC = () => {
             </div>
 
             <div className="policy-dialog__section">
-              <div className="section-title">Description</div>
+              <div className="section-title">Description:</div>
               <p className="policy-description">{selected.policyDesciption}</p>
             </div>
 
diff --git a/Employee_Managment_App/src/components/TopNav.css b/Employee_Managment_App/src/components/TopNav.css
index 535aa68..724455d 100644
--- a/Employee_Managment_App/src/components/TopNav.css
+++ b/Employee_Managment_App/src/components/TopNav.css
@@ -22,13 +22,12 @@
   --bs-success: #1ab394;
 
   /* Component sizing to match HR portal */
-  --control-height: 38px;   /* search and create height */
   --create-width: 96px;     /* button width similar to screenshots */
   --search-max: 600px;      /* desktop search width similar to HR portal */
   
   --hr-search-width: 210px;
 
-  --control-height: 40px;
+  --control-height: 35px;
   --radius-pill: 9999px;
 
   --accent: #10b981;                   /* focus ring + border accent */
@@ -103,13 +102,13 @@
 
 /* Input group container */
 .search-field.input-group {
+  pointer-events: none;
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
   height: var(--control-height);
   background: var(--search-bg);
-  border-radius: var(--radius-pill);
   box-shadow: var(--shadow-rest);
   transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 120ms ease;
 }
@@ -224,7 +223,6 @@
 
 .icon-btn {
   position: relative;
-  display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
@@ -332,7 +330,14 @@
 }
 
 /* Avatar */
-.topnav-avatar-wrapper { position: relative; }
+.topnav-avatar-wrapper { 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.topnav-avatar-name{
+  margin-left: 10px;
+}
 
 .topnav-avatar {
   width: 36px;
diff --git a/Employee_Managment_App/src/components/TopNav.tsx b/Employee_Managment_App/src/components/TopNav.tsx
index 10752af..2a21499 100644
--- a/Employee_Managment_App/src/components/TopNav.tsx
+++ b/Employee_Managment_App/src/components/TopNav.tsx
@@ -2,6 +2,7 @@
 import React, { useMemo, useState, useEffect, useRef } from 'react';
 import './TopNav.css';
 import { AnnouncementPanel, PanelItem } from './Announcement';
+import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
 
 type TopNavProps = {
   portalShort?: string;
@@ -59,17 +60,9 @@ const TopNav: React.FC<TopNavProps> = ({
   const [avatarMenuOpen, setAvatarMenuOpen] = useState(false);
   const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
   const [createMenuOpen, setCreateMenuOpen] = useState(false);
-
   const [panelOpen, setPanelOpen] = useState(false);
   const [panelTab, setPanelTab] = useState<'notifications' | 'announcements'>('announcements');
 
-  const initials = useMemo(() => {
-    const parts = userFullName.trim().split(/\s+/);
-    const f = parts[0]?.[0] ?? '';
-    const l = parts.length > 1 ? parts[parts.length - 1]?.[0] ?? '' : '';
-    return (f + l).toUpperCase();
-  }, [userFullName]);
-
   const submitSearch = (e?: React.FormEvent) => {
     if (e) e.preventDefault();
     onSearch?.(query.trim());
@@ -113,6 +106,24 @@ const TopNav: React.FC<TopNavProps> = ({
 
   const TOPNAV_HEIGHT = 56;
 
+  const notificationItemsWithIcon = useMemo<PanelItem[]>(
+    () =>
+      (notificationItems || []).map((it) => ({
+        ...it,
+        iconClass: 'e-icons e-multiple-comment',
+      })),
+    [notificationItems]
+  );
+
+  const announcementItemsWithIcon = useMemo<PanelItem[]>(
+    () =>
+      (announcementItems || []).map((it) => ({
+        ...it,
+        iconClass: 'e-icons e-audio',
+      })),
+    [announcementItems]
+  );
+
   return (
     <>
       <header
@@ -157,9 +168,9 @@ const TopNav: React.FC<TopNavProps> = ({
                   }}
                   autoComplete="off"
                 />
-                <button
+                <ButtonComponent
                   type="button"
-                  className="clear-btn"
+                  cssClass="clear-btn"
                   onClick={() => setQuery('')}
                   aria-label="Clear search"
                   title="Clear"
@@ -167,13 +178,14 @@ const TopNav: React.FC<TopNavProps> = ({
                   <svg width="16" height="16" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                     <path fill="currentColor" d="M18.3 5.71L12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.3 19.71 2.89 18.3 9.17 12 2.89 5.71 4.3 4.29l6.29 6.3 6.29-6.3z" />
                   </svg>
-                </button>
+                </ButtonComponent>
               </div>
             </form>
           </div>
 
           <div className="cluster-right">
-            <button className="icon-btn show-md-down"
+            <ButtonComponent
+              cssClass="icon-btn show-md-down"
               aria-label={mobileSearchOpen ? 'Close search' : 'Open search'}
               type="button"
               onClick={() => setMobileSearchOpen((v) => !v)}
@@ -185,42 +197,50 @@ const TopNav: React.FC<TopNavProps> = ({
                   d="M9.5 3a6.5 6.5 0 0 1 5.19 10.55l5.38 5.38-1.41 1.41-5.38-5.38A6.5 6.5 0 1 1 9.5 3m0 2a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0-9Z"
                 />
               </svg>
-            </button>
+            </ButtonComponent>
 
             <div className="btn-create-group" ref={createRef}>
-              <button
-                className="btn-create"
+              <ButtonComponent
+                cssClass="btn-create"
                 type="button"
                 onClick={() => setCreateMenuOpen((o) => !o)}
                 aria-haspopup="menu"
                 aria-expanded={createMenuOpen}
                 title="Create"
+                iconCss="e-icons e-chevron-down-fill"
+                iconPosition="Right"
               >
                 <span>Create</span>
-                <span className="e-icons e-chevron-down-fill" aria-hidden="true"></span>
-              </button>
+              </ButtonComponent>
 
               {createMenuOpen && (
                 <ul className="create-menu" role="menu">
                   <li role="menuitem">
-                    <button type="button" onClick={onCreate}>Create Leave</button>
+                    <ButtonComponent type="button" onClick={onCreate}>
+                      Create Leave
+                    </ButtonComponent>
                   </li>
                   <li role="menuitem">
-                    <button type="button" onClick={onCreate}>Create Permission</button>
+                    <ButtonComponent type="button" onClick={onCreate}>
+                      Create Permission
+                    </ButtonComponent>
                   </li>
                 </ul>
               )}
             </div>
 
-            <button className="icon-btn" type="button" onClick={onOpenChat} title="Messages">
-              <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
-                <path fill="currentColor" d="M21 6H3v12h5v4l4-4h9z" />
-              </svg>
-              {!!notifications.chat && <span className="badge">{notifications.chat}</span>}
+            <button className="icon-btn e-icons e-multiple-comment" type="button" onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setPanelTab('notifications');
+                setPanelOpen(true);
+                onOpenNotifications?.();
+              }} title="Messages">
+              {!!notifications.chat && <span className="badge">{notifications.announcements}</span>}
             </button>
 
             <button
-              className="icon-btn"
+              className="icon-btn e-icons e-audio"
               type="button"
               onClick={(e) => {
                 e.preventDefault();
@@ -231,12 +251,6 @@ const TopNav: React.FC<TopNavProps> = ({
               }}
               title="Announcements"
             >
-              <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
-                <path
-                  fill="currentColor"
-                  d="M3 10v4a1 1 0 0 0 1 1h1l3.89 2.6a2 2 0 0 0 3.11-1.65V7.05A2 2 0 0 0 8.89 5.4L5 8H4a1 1 0 0 0-1 1zm18-4v12l-8-4V10l8-4z"
-                />
-              </svg>
               {!!notifications.announcements && (
                 <span className="badge">{notifications.announcements}</span>
               )}
@@ -252,26 +266,18 @@ const TopNav: React.FC<TopNavProps> = ({
             </button>
 
             <div className="topnav-avatar-wrapper" ref={avatarRef}>
-              <button
-                className="topnav-avatar"
+              <ButtonComponent
+                cssClass="topnav-avatar"
+                iconCss="e-icons e-user"
                 type="button"
-                onClick={() => setAvatarMenuOpen((v) => !v)}
                 aria-haspopup="menu"
                 aria-expanded={avatarMenuOpen}
                 title="Account"
-              >
-                {initials}
-              </button>
-              {avatarMenuOpen && (
-                <ul className="topnav-avatar-menu" role="menu">
-                  <li role="menuitem">
-                    <button type="button" onClick={onProfile}>My Profile</button>
-                  </li>
-                  <li role="menuitem">
-                    <button type="button" onClick={onSignOut}>Sign out</button>
-                  </li>
-                </ul>
-              )}
+                onClick={() => setAvatarMenuOpen((o) => !o)}
+              />
+              <div>
+                <span className="topnav-avatar-name">Hi, Michael Anderson</span>
+              </div>
             </div>
           </div>
         </div>
@@ -313,8 +319,8 @@ const TopNav: React.FC<TopNavProps> = ({
       <AnnouncementPanel
         open={panelOpen}
         defaultTab={panelTab}
-        notificationItems={notificationItems}
-        announcementItems={announcementItems}
+        notificationItems={notificationItemsWithIcon}
+        announcementItems={announcementItemsWithIcon}
         topOffset={TOPNAV_HEIGHT}
         onClose={() => setPanelOpen(false)}
         onChangeTab={(t) => setPanelTab(t)}
diff --git a/Employee_Managment_App/src/index.css b/Employee_Managment_App/src/index.css
index 06b93dd..c2df43c 100644
--- a/Employee_Managment_App/src/index.css
+++ b/Employee_Managment_App/src/index.css
@@ -15,7 +15,18 @@
   line-height: 1;
   text-transform: none;
 }
-
+#payroll_grid .e-summaryrow .e-leftfreeze.e-summarycell[data-index="2"] {
+  border-right-color: #818cf8;
+  border-right-width: 2px;
+}
+ 
+#payroll_grid.e-grid.e-left-shadow .e-summaryrow .e-leftfreeze.e-summarycell[data-index="2"] {
+    clip-path: inset(0 -15px 0 0);
+    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.12);
+    border-right-width: 0px;
+}
+ 
+ 
 .e-icons.e-small {
   font-size: 8px;
 }
@@ -3019,7 +3030,7 @@
 .e-control,
 .e-css,
 .e-error {
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 12px;
   font-weight: 400;
 }
@@ -4363,7 +4374,7 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 24px;
   font-weight: 400;
   height: 40px;
@@ -4429,7 +4440,7 @@
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 15px;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
@@ -4787,7 +4798,7 @@
 
 .e-card .e-card-actions .e-card-btn,
 .e-card .e-card-actions a {
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   line-height: 30px;
   margin: 0 0 0 8px;
@@ -5079,7 +5090,7 @@
   -webkit-box-flex: 1;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   font-weight: 400;
 }
@@ -5881,7 +5892,7 @@
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
   border-bottom: 1px solid var(--color-sf-border-light);
   color: var(--color-sf-content-text-color);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 16px;
   font-weight: 400;
   height: 38px;
@@ -6539,7 +6550,7 @@
   box-sizing: border-box;
   cursor: pointer;
   display: inline-block;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   font-weight: 600;
   -webkit-box-pack: center;
@@ -8517,7 +8528,7 @@
 .e-css.e-checkbox-wrapper .e-label {
   cursor: pointer;
   display: inline-block;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   font-weight: normal;
   line-height: 16px;
@@ -9106,7 +9117,7 @@
 
 .e-radio+label .e-label {
   display: inline-block;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: 'Roboto', sans-serif;
   font-size: 14px;
   font-weight: normal;
   line-height: 1;
@@ -9723,7 +9734,7 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 12px;
   height: 100%;
   -webkit-box-pack: center;
@@ -25439,7 +25450,7 @@ label[for*=_wholeWord_e-de-rtl] {
 .e-popup.e-mention .e-dropdownbase.e-nodata {
   color: var(--color-sf-content-text-color);
   cursor: default;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   padding: 14px 16px;
   text-align: center;
@@ -25539,7 +25550,7 @@ label[for*=_wholeWord_e-de-rtl] {
   border-bottom: 0;
   border-color: var(--color-sf-border-light);
   color: var(--color-sf-flyout-text-color);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   line-height: 32px;
   min-height: 32px;
@@ -25552,7 +25563,7 @@ label[for*=_wholeWord_e-de-rtl] {
 .e-fixed-head {
   border-color: var(--color-sf-border-light);
   color: var(--color-sf-flyout-text-color);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   font-weight: 500;
   line-height: 32px;
@@ -25611,7 +25622,7 @@ label[for*=_wholeWord_e-de-rtl] {
   border-style: solid;
   border-width: 0 0 1px 0;
   color: var(--color-sf-flyout-text-color);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   font-weight: 500;
   text-indent: 10px;
@@ -25670,7 +25681,7 @@ label[for*=_wholeWord_e-de-rtl] {
   border-bottom: 0;
   border-color: var(--color-sf-border-light);
   color: var(--color-sf-flyout-text-color);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   text-indent: 12px;
   font-size: 14px;
   padding-right: 16px;
@@ -27195,7 +27206,7 @@ ejs-dropdownlist {
 .e-multi-select-wrapper input[type=text] {
   background: none;
   border: 0;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   font-weight: normal;
   height: 30px;
@@ -27209,7 +27220,7 @@ ejs-dropdownlist {
   background: none;
   border: 0;
   color: inherit;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   font-weight: normal;
   height: 30px;
@@ -27244,7 +27255,7 @@ ejs-dropdownlist {
 }
 
 .e-multi-select-wrapper .e-delim-values {
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   line-height: 28px;
   max-width: 100%;
@@ -27441,7 +27452,7 @@ ejs-dropdownlist {
 
 .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
   color: var(--color-sf-content-text-color);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
 }
 
@@ -27714,7 +27725,7 @@ ejs-multiselect {
 .e-multi-select-wrapper .e-chips>.e-chipcontent {
   -webkit-text-fill-color: var(--color-sf-content-text-color);
   color: var(--color-sf-content-text-color);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
 }
 
@@ -28803,7 +28814,7 @@ ejs-listbox {
 .e-listbox-wrapper,
 .e-listbox-container,
 .e-listboxtool-wrapper {
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
 }
 
@@ -29377,7 +29388,7 @@ textarea.e-input,
 .e-input-group.e-control-wrapper,
 .e-input-group.e-disabled,
 .e-input-group.e-control-wrapper.e-disabled {
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   font-weight: normal;
   -webkit-font-feature-settings: "calt" 0;
@@ -29958,7 +29969,7 @@ label.e-float-text,
 .e-float-input.e-control-wrapper.e-disabled,
 .e-float-input.e-input-group.e-disabled,
 .e-float-input.e-input-group.e-control-wrapper.e-disabled {
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   font-weight: normal;
 }
@@ -38305,7 +38316,7 @@ input.e-input.e-bigger.e-small,
 
 /*! maskedtextbox layout */
 .e-control-wrapper.e-mask .e-maskedtextbox {
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
 }
 
@@ -38662,7 +38673,7 @@ input.e-input.e-bigger.e-small,
 .e-control-wrapper.e-slider-container .e-scale {
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   height: 28px;
   width: 100%;
   line-height: normal;
@@ -38691,7 +38702,7 @@ input.e-input.e-bigger.e-small,
 
 .e-control-wrapper.e-slider-container .e-scale .e-tick .e-tick-value {
   color: var(--color-sf-content-text-color-alt1);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 12px;
   outline: none;
   position: absolute;
@@ -39007,7 +39018,7 @@ input.e-input.e-bigger.e-small,
 }
 
 .e-upload.e-control-wrapper {
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
 }
 
 .e-upload .e-hidden-file-input {
@@ -39920,7 +39931,7 @@ input.e-input.e-bigger.e-small,
 }
 
 .e-bigger.e-small .e-upload.e-control-wrapper {
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
 }
 
 .e-bigger.e-small .e-upload .e-hidden-file-input {
@@ -42803,7 +42814,7 @@ body.e-colorpicker-overflow {
 
 .e-listview {
   border-color: var(--color-sf-border-light);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
 }
 
@@ -47512,7 +47523,7 @@ body.e-colorpicker-overflow {
 
 .e-contextmenu-wrapper ul.e-ul,
 .e-contextmenu-container ul.e-ul {
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
 }
 
 .e-contextmenu-wrapper ul .e-menu-item,
@@ -48195,7 +48206,7 @@ body.e-colorpicker-overflow {
 
 .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
   display: inherit;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   font-weight: 500;
   text-transform: capitalize;
@@ -49178,7 +49189,7 @@ body.e-colorpicker-overflow {
 .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon::before,
 .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-down-icon::before {
   float: left;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   font-weight: 500;
   line-height: 36px;
@@ -50048,7 +50059,7 @@ body.e-colorpicker-overflow {
 
 .e-tab-clone-element .e-tab-text {
   display: inherit;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   font-weight: 500;
   text-transform: capitalize;
@@ -53903,7 +53914,7 @@ body.e-colorpicker-overflow {
 
 .e-treeview.e-drag-item {
   background-color: var(--color-sf-content-bg-color-alt4);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
 }
 
 .e-treeview.e-drag-item .e-icon-collapsible::before,
@@ -54686,7 +54697,7 @@ ejs-sidebar {
 .e-menu-wrapper .e-menu-header,
 .e-menu-container .e-menu-header {
   display: none;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 16px;
   font-weight: 400;
   height: 38px;
@@ -57628,7 +57639,7 @@ ejs-sidebar {
 }
 
 .e-dialog .e-dlg-header-content+.e-dlg-content {
-  padding-top: 16px;
+  padding-top: 0px !important;
 }
 
 .e-dialog .e-btn .e-btn-icon.e-icon-dlg-close {
@@ -58232,6 +58243,7 @@ ejs-sidebar {
 
 .e-popup.e-popup-open {
   display: block;
+  max-height: 500px !important;
 }
 
 .e-popup.e-popup-close {
@@ -58378,6 +58390,11 @@ ejs-sidebar {
   border-left: 8px solid var(--color-sf-tooltip-border);
   border-top: 8px solid transparent;
 }
+.panel-item-icon{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
 .e-tooltip-wrap .e-arrow-tip-inner {
   height: 0;
@@ -58425,7 +58442,7 @@ ejs-sidebar {
 .e-tooltip-wrap .e-tip-content {
   border-radius: inherit;
   color: var(--color-sf-tooltip-text-color);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 12px;
 }
 
@@ -58565,7 +58582,7 @@ ejs-sidebar {
 }
 
 .e-spinner-pane .e-spinner-inner .e-spin-label {
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   margin-top: 10px;
   text-align: center;
@@ -61319,7 +61336,7 @@ ejs-sidebar {
   box-sizing: border-box;
   color: var(--color-sf-content-text-color-alt1);
   display: inline-block;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 10px;
   font-weight: 500;
   line-height: 16px;
@@ -62213,7 +62230,7 @@ button .e-badge.e-badge-circle.e-badge-ghost {
   border-radius: 6px;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-weight: 400;
   font-style: normal;
   padding: 11px 7px;
@@ -64278,7 +64295,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-width: 1px;
   border-radius: 1px;
   display: block;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   height: auto;
   position: relative;
@@ -66375,7 +66392,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 
 .e-grid .e-row .e-input-group .e-input.e-field,
 .e-grid .e-row .e-input-focus .e-input.e-field {
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 14px;
   padding-bottom: 1px;
   padding-top: 2px;
@@ -69168,7 +69185,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger .e-grid .e-row .e-input-focus .e-input.e-field,
 .e-grid.e-bigger .e-row .e-input-group .e-input.e-field,
 .e-grid.e-bigger .e-row .e-input-focus .e-input.e-field {
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--font-family);
   font-size: 16px;
   padding-bottom: 0;
   padding-top: 0;
@@ -70533,8 +70550,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   padding: 20px;
   height: 70px;
   font-size: 17px;
-  font-family: 'Roboto', 'Segoe UI', 'GeezaPro', 'DejaVu Serif', 'sans-serif',
-    '-apple-system', 'BlinkMacSystemFont';
+  font-family: 'Roboto', sans-serif;
   line-height: 29px;
   color: rgba(0, 0, 0, 0.87);
   border-bottom: 1px solid rgb(0, 0, 0, 0.2);
@@ -70601,8 +70617,7 @@ a.employee-popover:hover {
 .paystub-header,
 .payroll-header {
   font-size: 13px;
-  font-family: 'Roboto', 'Segoe UI', 'GeezaPro', 'DejaVu Serif', 'sans-serif',
-    '-apple-system', 'BlinkMacSystemFont';
+  font-family: 'Roboto', sans-serif;
   line-height: 20px;
   padding: 0 0 50px 0;
 }
@@ -70685,8 +70700,7 @@ a.employee-popover:hover {
 
 .employeeLeave-header {
   font-size: 13px;
-  font-family: 'Roboto', 'Segoe UI', 'GeezaPro', 'DejaVu Serif', 'sans-serif',
-    '-apple-system', 'BlinkMacSystemFont';
+  font-family: 'Roboto', sans-serif;
   line-height: 20px;
   padding: 0 0 50px 0;
 }
@@ -71076,6 +71090,7 @@ td.cardcell.separateline {
 .app-sidebar .sidebar-brand .title {
   color: #e5e7eb;
   font-weight: 600;
+  font-size: 16px;
 }
 
 /* Nav items: icon + text; hide text when docked */

From 5073279b55cb8d5a2ae4c039b794ee3d650f7c70 Mon Sep 17 00:00:00 2001
From: VinothkumarYuvaraj <Vinothkumar.y@syncfusion.com>
Date: Thu, 18 Dec 2025 16:06:56 +0530
Subject: [PATCH 2/2] 999936: fixed the bugs and UI changes

---
 Employee_Managment_App/src/App.tsx            | 59 ++++++++++++++++++-
 .../src/components/Announcement.css           | 32 +++++++++-
 .../src/components/Announcement.tsx           | 24 +++-----
 .../components/AnnouncementDetailDialog.tsx   | 10 +++-
 .../src/components/TopNav.tsx                 |  8 ++-
 5 files changed, 109 insertions(+), 24 deletions(-)

diff --git a/Employee_Managment_App/src/App.tsx b/Employee_Managment_App/src/App.tsx
index ddd47c5..3dff7ae 100644
--- a/Employee_Managment_App/src/App.tsx
+++ b/Employee_Managment_App/src/App.tsx
@@ -1,5 +1,5 @@
 // src/App.tsx
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { BrowserRouter as Router, Routes, Route, NavLink } from 'react-router-dom';
 import './App.css';
 import TopNav from './components/TopNav';
@@ -8,6 +8,7 @@ import Policies from './components/Policies';
 import Achievements from './components/Achievements';
 import Organization from './components/Organization';
 import EmployeeInfo from './components/EmployeeInfo';
+import { PanelItem } from './components/Announcement';
 
 // Syncfusion Sidebar
 import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
@@ -45,11 +46,62 @@ function App() {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false); // desktop dock
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false); // mobile overlay
   const isDesktop = useMediaQuery('(min-width: 992px)');
+  
+  // Notification items with read status
+  const [notificationItems, setNotificationItems] = useState<PanelItem[]>([
+    { id: 1, title: 'Interview for Customer Support Specialist', subtitle: 'Announcement', date: 'Sep 18', type: 'notification', content: 'You are invited for the Customer Support Specialist interview on Sep 22 at 11:00 AM. Please bring your updated resume and ID.', read: false },
+    { id: 2, title: 'Interview for Facilities Executive', subtitle: 'Announcement', date: 'Sep 9', type: 'notification', content: 'Facilities Executive interview is scheduled for Sep 23 at 2:30 PM in Meeting Room A.', read: false },
+    { id: 3, title: 'Interview for Office Coordinator / Admin', subtitle: 'Announcement', date: 'Sep 5', type: 'notification', content: 'Your interview for the Office Coordinator / Admin position is scheduled on Sep 25 at 10:00 AM in Conference Room B. Please bring your updated resume and a government-issued ID.', read: false },
+  ]);
+
+  const [announcementItems, setAnnouncementItems] = useState<PanelItem[]>([
+    { id: 'a1', title: 'Policy Update: Remote Work Guidelines', subtitle: 'Corporate Communication', date: 'Sep 16', type: 'announcement', content: 'We have updated our Remote Work Guidelines effective Oct 1. Key changes include flexible core hours and equipment reimbursement policy. Please read the full policy on the intranet.', read: false },
+    { id: 'a2', title: 'Holiday: Office Closed on 2nd Oct', subtitle: 'HR', date: 'Sep 14', type: 'announcement', content: 'In observance of a public holiday, all offices will remain closed on 2nd October. Normal operations resume on 3rd October.', read: false },
+    { id: 'a3', title: 'Quarterly Town Hall this Friday', subtitle: 'Admin', date: 'Sep 12', type: 'announcement', content: 'Join us for the Quarterly Town Hall on Sep 20 at 4:00 PM in the Main Auditorium. Leadership will share company updates, upcoming initiatives, and answer your questions. Attendance is encouraged.', read: false },
+  ]);
 
   useEffect(() => {
     if (isDesktop) setMobileSidebarOpen(false);
   }, [isDesktop]);
 
+  // Calculate unread counts
+  const notifications = useMemo(() => ({
+    bell: 3,
+    chat: notificationItems.filter(item => !item.read).length,
+    tasks: 1,
+    announcements: announcementItems.filter(item => !item.read).length,
+  }), [notificationItems, announcementItems]);
+
+  // Handler to mark a single item as read
+  const handleMarkRead = (itemId: string | number, isNotification: boolean) => {
+    if (isNotification) {
+      setNotificationItems((prev) =>
+        prev.map((item) =>
+          item.id === itemId ? { ...item, read: true } : item
+        )
+      );
+    } else {
+      setAnnouncementItems((prev) =>
+        prev.map((item) =>
+          item.id === itemId ? { ...item, read: true } : item
+        )
+      );
+    }
+  };
+
+  // Handler to mark all as read
+  const handleMarkAllRead = (tab: 'notifications' | 'announcements') => {
+    if (tab === 'notifications') {
+      setNotificationItems((prev) =>
+        prev.map((item) => ({ ...item, read: true }))
+      );
+    } else {
+      setAnnouncementItems((prev) =>
+        prev.map((item) => ({ ...item, read: true }))
+      );
+    }
+  };
+
   const layoutVars: LayoutCSSVars = {
     '--sidebar-expanded': `${SIDEBAR_WIDTH}px`,
     '--sidebar-collapsed': `${SIDEBAR_WIDTH_COLLAPSED}px`,
@@ -82,7 +134,12 @@ function App() {
           companyName="NexGen7 Software"
           userFullName="Test Person"
           headerOffsetLeft={isDesktop ? (sidebarCollapsed ? SIDEBAR_WIDTH_COLLAPSED : SIDEBAR_WIDTH) : 0}
+          notifications={notifications}
+          notificationItems={notificationItems}
+          announcementItems={announcementItems}
           onSearch={(q) => console.log('Search:', q)}
+          onMarkRead={handleMarkRead}
+          onMarkAllRead={handleMarkAllRead}
         />
 
         {/* Syncfusion Sidebar */}
diff --git a/Employee_Managment_App/src/components/Announcement.css b/Employee_Managment_App/src/components/Announcement.css
index f080c1e..7af8054 100644
--- a/Employee_Managment_App/src/components/Announcement.css
+++ b/Employee_Managment_App/src/components/Announcement.css
@@ -137,17 +137,37 @@
 }
 .annc-panel-item {
   display: grid;
-  grid-template-columns: 36px 1fr;
+  grid-template-columns: 36px 1fr 20px;
   gap: 10px;
   padding: 10px 8px;
   border-radius: 12px;
   border: 1px solid transparent;
-  transition: background 160ms ease, border-color 160ms ease;
+  transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
+  position: relative;
+}
+.annc-panel-item.is-unread {
+  background: #f0fdf9;
+  border-color: #d1fae5;
+}
+.annc-panel-item.is-read {
+  opacity: 0.75;
 }
 .annc-panel-item:hover {
   background: #f8fffb;
   border-color: #e8f7f1;
 }
+.annc-panel-item.is-unread:hover {
+  background: #ecfdf5;
+}
+.unread-indicator {
+  width: 8px;
+  height: 8px;
+  background: var(--annc-theme);
+  border-radius: 50%;
+  align-self: center;
+  justify-self: end;
+  margin-right: 4px;
+}
 .annc-item-icon {
   width: 36px;
   height: 36px;
@@ -169,6 +189,14 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.annc-item-title.unread {
+  font-weight: 700;
+  color: var(--annc-text);
+}
+.annc-item-title.read {
+  font-weight: 500;
+  color: #94a3b8;
+}
 .annc-item-meta {
   margin-top: 2px;
   font-size: 12px;
diff --git a/Employee_Managment_App/src/components/Announcement.tsx b/Employee_Managment_App/src/components/Announcement.tsx
index 7c84e5f..e612f0f 100644
--- a/Employee_Managment_App/src/components/Announcement.tsx
+++ b/Employee_Managment_App/src/components/Announcement.tsx
@@ -26,7 +26,7 @@ export type AnnouncementPanelProps = {
   onClose: () => void;
   onChangeTab?: (tab: 'notifications' | 'announcements') => void;
   onMarkAllRead?: (tab: 'notifications' | 'announcements') => void;
-  onMarkRead?: (item: PanelItem) => void;
+  onMarkRead?: (itemId: string | number, isNotification: boolean) => void;
 };
 
 export const AnnouncementPanel: React.FC<AnnouncementPanelProps> = ({
@@ -84,19 +84,8 @@ export const AnnouncementPanel: React.FC<AnnouncementPanelProps> = ({
   };
 
   const handleMarkAllRead = () => {
-    // Notify parent (if provided)
+    // Notify parent to update notification counts
     onMarkAllRead?.(tab);
-
-    // Keep your existing badge-hiding logic (targets TopNav icon buttons)
-    const selector =
-      tab === 'announcements'
-        ? '.icon-btn.e-icons.e-audio span'
-        : '.icon-btn.e-icons.e-multiple-comment span';
-    document.querySelectorAll(selector).forEach((el) => {
-      const span = el as HTMLElement;
-      span.style.display = 'none';
-      span.setAttribute('aria-hidden', 'true');
-    });
   };
 
   const items = tab === 'notifications' ? notificationItems : announcementItems;
@@ -162,18 +151,18 @@ export const AnnouncementPanel: React.FC<AnnouncementPanelProps> = ({
                 {items.map((it) => (
                   <li
                     key={it.id}
-                    className="annc-panel-item"
+                    className={`annc-panel-item ${it.read ? 'is-read' : 'is-unread'}`}
                     onClick={() => openDetail(it)}
                     role="button"
                     tabIndex={0}
                     onKeyDown={(e) => e.key === 'Enter' && openDetail(it)}
-                    title="View details"
+                    title={`${it.read ? 'Read' : 'Unread'} - ${it.title}`}
                   >
                     <span className="panel-item-icon" aria-hidden="true">
                       <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.title}</div>
+                      <div className={`annc-item-title ${it.read ? 'read' : 'unread'}`}>{it.title}</div>
                       {(it.subtitle || it.date) && (
                         <div className="annc-item-meta">
                           {it.subtitle && <span className="meta">{it.subtitle}</span>}
@@ -181,6 +170,7 @@ export const AnnouncementPanel: React.FC<AnnouncementPanelProps> = ({
                         </div>
                       )}
                     </div>
+                    {!it.read && <span className="unread-indicator" aria-label="Unread"></span>}
                   </li>
                 ))}
               </ul>
@@ -200,7 +190,7 @@ export const AnnouncementPanel: React.FC<AnnouncementPanelProps> = ({
           open={detailOpen}
           item={selectedItem}
           onClose={closeDetail}
-          onMarkRead={(it) => onMarkRead?.(it)}
+          onMarkRead={onMarkRead}
         />
       )}
     </>
diff --git a/Employee_Managment_App/src/components/AnnouncementDetailDialog.tsx b/Employee_Managment_App/src/components/AnnouncementDetailDialog.tsx
index caab36d..06d548d 100644
--- a/Employee_Managment_App/src/components/AnnouncementDetailDialog.tsx
+++ b/Employee_Managment_App/src/components/AnnouncementDetailDialog.tsx
@@ -21,7 +21,7 @@ export type AnnouncementDetailDialogProps = {
   open: boolean;
   item: DetailItem;
   onClose: () => void;
-  onMarkRead?: (item: DetailItem) => void;
+  onMarkRead?: (itemId: string | number, isNotification: boolean) => void;
 };
 
 const dialogAnimation: AnimationSettingsModel = { effect: 'Zoom', duration: 140 };
@@ -92,8 +92,12 @@ export const AnnouncementDetailDialog: React.FC<AnnouncementDetailDialogProps> =
 
   const footerTemplate = () => (
     <div className="annc-dlg-footer">
-      {item && (
-        <ButtonComponent cssClass="e-primary" onClick={onClose}>
+      {item && !item.read && (
+        <ButtonComponent cssClass="e-primary" onClick={() => {
+          const isNotification = item.type === 'notification';
+          onMarkRead?.(item.id, isNotification);
+          onClose();
+        }}>
           Mark as read
         </ButtonComponent>
       )}
diff --git a/Employee_Managment_App/src/components/TopNav.tsx b/Employee_Managment_App/src/components/TopNav.tsx
index 2a21499..bf1f0de 100644
--- a/Employee_Managment_App/src/components/TopNav.tsx
+++ b/Employee_Managment_App/src/components/TopNav.tsx
@@ -27,6 +27,8 @@ type TopNavProps = {
   onProfile?: () => void;
   onSignOut?: () => void;
   userFullName?: string;
+  onMarkRead?: (itemId: string | number, isNotification: boolean) => void;
+  onMarkAllRead?: (tab: 'notifications' | 'announcements') => void;
 };
 
 const TopNav: React.FC<TopNavProps> = ({
@@ -55,6 +57,8 @@ const TopNav: React.FC<TopNavProps> = ({
   onProfile,
   onSignOut,
   userFullName = 'Test Person',
+  onMarkRead,
+  onMarkAllRead,
 }) => {
   const [query, setQuery] = useState('');
   const [avatarMenuOpen, setAvatarMenuOpen] = useState(false);
@@ -236,7 +240,7 @@ const TopNav: React.FC<TopNavProps> = ({
                 setPanelOpen(true);
                 onOpenNotifications?.();
               }} title="Messages">
-              {!!notifications.chat && <span className="badge">{notifications.announcements}</span>}
+              {!!notifications.chat && <span className="badge">{notifications.chat}</span>}
             </button>
 
             <button
@@ -324,6 +328,8 @@ const TopNav: React.FC<TopNavProps> = ({
         topOffset={TOPNAV_HEIGHT}
         onClose={() => setPanelOpen(false)}
         onChangeTab={(t) => setPanelTab(t)}
+        onMarkAllRead={onMarkAllRead}
+        onMarkRead={onMarkRead}
       />
     </>
   );