999936: fixed the bugs and UI changes

Author: Vinoth2562000

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

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;

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,25 +151,26 @@ 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>}
                           {it.date && <span className="meta dot">{it.date}</span>}
                         </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}
         />
       )}
     </>

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

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