feature/IO-3096-GlobalNotifications - Checkpoint - Notification Center

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

@@ -0,0 +1,81 @@
+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";
+
+const { Text } = Typography;
+
+const NotificationCenterComponent = ({
+  visible,
+  onClose,
+  notifications,
+  loading,
+  error,
+  showUnreadOnly,
+  toggleUnreadOnly,
+  markAllRead
+}) => {
+  const { t } = useTranslation();
+
+  const renderNotification = (index, notification) => {
+    console.log(`Rendering notification ${index}:`, {
+      id: notification.id,
+      scenarioTextLength: notification.scenarioText.length,
+      key: `${notification.id}-${index}`
+    });
+    return (
+      <List.Item
+        key={`${notification.id}-${index}`} // Ensure unique key per render
+        className={notification.read ? "notification-read" : "notification-unread"}
+      >
+        <Badge dot={!notification.read}>
+          <div>
+            <Text strong={!notification.read}>
+              <ul>
+                {notification.scenarioText.map((text, idx) => (
+                  <li key={`${notification.id}-${idx}`}>{text}</li>
+                ))}
+              </ul>
+            </Text>
+            <Text type="secondary">{new Date(notification.created_at).toLocaleString()}</Text>
+          </div>
+        </Badge>
+      </List.Item>
+    );
+  };
+
+  console.log("Rendering NotificationCenter with notifications:", {
+    count: notifications.length,
+    ids: notifications.map((n) => n.id),
+    totalCount: notifications.length
+  });
+
+  return (
+    <div className={`notification-center ${visible ? "visible" : ""}`}>
+      <div className="notification-header">
+        <h3>{t("notifications.title", "Notifications")}</h3>
+        <div className="notification-controls">
+          <Checkbox checked={showUnreadOnly} onChange={(e) => toggleUnreadOnly(e.target.checked)}>
+            {t("notifications.showUnreadOnly", "Show Unread Only")}
+          </Checkbox>
+          <Button type="link" onClick={markAllRead} disabled={!notifications.some((n) => !n.read)}>
+            {t("notifications.markAllRead", "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
+        data={notifications}
+        totalCount={notifications.length}
+        overscan={20}
+        increaseViewportBy={200}
+        itemContent={renderNotification}
+      />
+      {loading && !error && <div>{t("notifications.loading", "Loading...")}</div>}
+    </div>
+  );
+};
+
+export default NotificationCenterComponent;