feature/IO-3096-GlobalNotifications - Checkpoint

client/src/components/notification-center/notification-center.component.jsx

@@ -1,10 +1,12 @@
+// notification-center.component.jsx
 import React from "react";
 import { Virtuoso } from "react-virtuoso";
 import { Button, Checkbox, List, Badge, Typography, Alert } from "antd";
 import { useTranslation } from "react-i18next";
 import "./notification-center.styles.scss";
+import { Link } from "react-router-dom";
 
-const { Text } = Typography;
+const { Text, Title } = Typography;
 
 const NotificationCenterComponent = ({
   visible,
@@ -14,25 +16,35 @@ const NotificationCenterComponent = ({
   error,
   showUnreadOnly,
   toggleUnreadOnly,
-  markAllRead
+  markAllRead,
+  loadMore
 }) => {
   const { t } = useTranslation();
 
   const renderNotification = (index, notification) => {
-    console.log(`Rendering notification ${index}:`, {
-      id: notification.id,
-      scenarioTextLength: notification.scenarioText.length,
-      read: notification.read,
-      created_at: notification.created_at,
-      associationid: notification.associationid
-    });
+    console.log("Rendering notification at index:", index, notification);
     return (
       <List.Item
-        key={`${notification.id}-${index}`} // Ensure unique key per render
+        key={`${notification.id}-${index}`}
         className={notification.read ? "notification-read" : "notification-unread"}
       >
         <Badge dot={!notification.read}>
           <div>
+            {/* RO number as title/link */}
+            <Title
+              level={5}
+              style={{
+                margin: "0 0 8px 0",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              }}
+            >
+              <Link to={`/manage/jobs/${notification.jobid}`} target="_blank">
+                RO #{notification.roNumber}
+              </Link>
+              <Text type="secondary">{new Date(notification.created_at).toLocaleString()}</Text>
+            </Title>
             <Text strong={!notification.read}>
               <ul>
                 {notification.scenarioText.map((text, idx) => (
@@ -40,48 +52,37 @@ const NotificationCenterComponent = ({
                 ))}
               </ul>
             </Text>
-            <Text type="secondary">{new Date(notification.created_at).toLocaleString()}</Text>
-            {notification.associationid && <Text type="secondary">Association ID: {notification.associationid}</Text>}
           </div>
         </Badge>
       </List.Item>
     );
   };
 
-  console.log(
-    "Rendering NotificationCenter with notifications:",
-    notifications.length,
-    notifications.map((n) => ({
-      id: n.id,
-      read: n.read,
-      created_at: n.created_at,
-      associationid: n.associationid
-    }))
-  );
+  console.log("NotificationCenterComponent render:", { notifications, loading, error, showUnreadOnly });
 
   return (
     <div className={`notification-center ${visible ? "visible" : ""}`}>
       <div className="notification-header">
-        <h3>{t("notifications.title", "Notifications")}</h3>
+        <h3>{t("notifications.labels.new-notification-title")}</h3>
         <div className="notification-controls">
           <Checkbox checked={showUnreadOnly} onChange={(e) => toggleUnreadOnly(e.target.checked)}>
-            {t("notifications.showUnreadOnly", "Show Unread Only")}
+            {t("notifications.labels.show-unread-only")}
           </Checkbox>
           <Button type="link" onClick={markAllRead} disabled={!notifications.some((n) => !n.read)}>
-            {t("notifications.markAllRead", "Mark All Read")}
+            {t("notifications.labels.mark-all-read")}
           </Button>
         </div>
       </div>
       {error && <Alert message="Error" description={error} type="error" closable onClose={() => onClose()} />}
       <Virtuoso
-        style={{ height: "400px", width: "100%", overflow: "auto" }} // Default Virtuoso styling
+        style={{ height: "400px", width: "100%" }}
         data={notifications}
         totalCount={notifications.length}
-        overscan={20}
-        increaseViewportBy={200}
+        overscan={200}
+        endReached={loadMore}
         itemContent={renderNotification}
       />
-      {loading && !error && <div>{t("notifications.loading", "Loading...")}</div>}
+      {loading && !error && <div>{t("notifications.labels.loading")}</div>}
     </div>
   );
 };