@omniumretail/component-library 1.2.27 → 1.2.29

package/dist/main.css

@@ -31,3 +31,4 @@
 .aZEBTQus3Y3MyodeDwkf{display:flex;flex-direction:column;align-items:center;justify-content:center}.cc1pbQlAgw2CmXVml3bs{height:300px;width:400px}.aTf_CXAsyp0tySsoZdD_{display:flex;justify-content:space-between;margin:10px 10px 0px 10px;font-size:20px}.kuu1hf_JTvYD55IW6Nxl{color:#ff4d4f}.N8ODEO3zDbY7gmecjTrp{color:#52c41a}.WIsL9Shu6c0mGJq9qSSz{margin-top:20px;border-radius:4px;overflow:hidden}.WIsL9Shu6c0mGJq9qSSz img{width:100%;height:auto}
 .OJKeuXyOSPIeCCssVum2{display:flex;gap:32px}.jzxszvL7wzCV5nztJL0S{padding:12px}.OGA8oJw8RDyohcRftjmo{width:100%}.y2_7QVPOhjRZlAHCRWKf{display:grid;grid-template-columns:minmax(200px, 1fr) auto auto auto auto;gap:46px}.Smkcs3LGp1uPuQge2GxE{margin-top:16px}Label{margin-bottom:8px}.djarlYFkE9Kb7wUjUnrY{height:36px}
 :root{--color-grey: #e4e4e4;--color-grey-100: #E5E5E5}.SF5f_Q_Ggz_4JHUHS2Xa{display:flex;align-items:center;padding:13px 20px;box-sizing:border-box;height:72px}.SF5f_Q_Ggz_4JHUHS2Xa *{box-sizing:border-box}.gSVYvBn1sLbcMsGI32b9{display:flex;flex-grow:1;align-items:flex-end;justify-content:center;max-width:calc(100% - 60px)}.gSVYvBn1sLbcMsGI32b9 img{max-width:196px}.gSVYvBn1sLbcMsGI32b9 .fVSt3bSZBcJGsOdA5nIN{font-weight:var(--font-weight-semibold);text-transform:uppercase;color:var(--color-black)}.BIBQmS_NwoMw2Ncq5yuN{cursor:pointer;padding:4px 4px 4px 0;font-size:20px;width:30px;display:flex;align-items:center;justify-content:center}.ZinSgUtysxITkbGRKdux{position:fixed;top:0;left:-100%;bottom:0;width:100%;max-width:430px;background-color:var(--color-white);padding-inline:15px;z-index:999;box-shadow:0 3px 12px rgba(0,0,0,.45);transition:.6s ease-out}.ZinSgUtysxITkbGRKdux.FW1pOdad0uN5LO9h5PgQ{left:0;transition:.3s ease-in}.ZfA8OEmbRzRsNqLAmdtn{background-color:rgba(0,0,0,.3);backdrop-filter:blur(1px);position:absolute;left:0;top:0;right:0;bottom:0;z-index:998;pointer-events:none;opacity:0;transition:.3s}.ZfA8OEmbRzRsNqLAmdtn.FW1pOdad0uN5LO9h5PgQ{opacity:1;pointer-events:all}.YKSQJmdRP_7tKwvQpeuV{width:calc(100% + 30px);margin-left:-15px;background-color:var(--color-orange);display:flex;align-items:center;justify-content:center}.ISssYC5Uz452JVWP0xDc img{max-width:160px}.E6YZPpa60LxA7qqIW7jQ{position:absolute;top:23px;right:15px;font-size:25px;cursor:pointer;color:var(--color-white)}.YYp3pzktjEDEyW8knAZQ{overflow-y:auto;height:calc(100% - 51px);margin:0;padding:0}.u7k2VQ30AQDk6mKA22GX{height:60px;padding:10px;display:flex;align-items:center;border-bottom:1px solid var(--color-black);cursor:pointer;transition:.3s;text-transform:uppercase;width:100%}.u7k2VQ30AQDk6mKA22GX:hover{background-color:var(--color-grey);color:var(--color-black)}.QQoDB9XPcAK18l2DIym4{list-style:none}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN{height:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding-bottom:0}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX{position:relative}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .NytmT59TmaWHc4FLM2wa{position:absolute;width:60px;height:100%;background:var(--color-black);right:0;display:flex;align-items:center;justify-content:center}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .NytmT59TmaWHc4FLM2wa:hover{background-color:var(--color-orange)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .zo7CFksIKx7Fahu4e4S_{color:var(--color-white)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E{background:var(--color-grey)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E .NytmT59TmaWHc4FLM2wa{background-color:var(--color-orange)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E .uLgjMU9sbvfaa0qKEguP{height:auto;opacity:1}.uLgjMU9sbvfaa0qKEguP{padding:0;width:100%;margin:0;background-color:var(--color-orange);color:var(--color-white);height:0;opacity:0;overflow:hidden;transition:height .3s ease,opacity .3s ease}.uLgjMU9sbvfaa0qKEguP .u7k2VQ30AQDk6mKA22GX{min-height:60px;height:auto;padding-inline:40px}.efnjUnudkE0UTVQ6wrgH{cursor:pointer}.u7k2VQ30AQDk6mKA22GX .fjNRYZMP1O0pTvBDBB3L span{margin-left:8px;transform:translateY(-2px);display:inline-block;font-size:var(--font-size-body-3);text-transform:capitalize}
+.msELhnfhfo6un3c4Spoc{max-width:300px;max-height:400px;overflow-y:auto;padding:0}@media(max-width: 768px){.msELhnfhfo6un3c4Spoc{max-width:100%;max-height:300px}}@media(min-width: 1024px){.msELhnfhfo6un3c4Spoc{max-width:600px;max-height:700px}}.GeNg2HVTmhQDmsLLTpWj{display:flex;flex-direction:column;align-items:unset !important;padding:10px;border-bottom:1px solid #f0f0f0;background-color:#fff;cursor:pointer}.GeNg2HVTmhQDmsLLTpWj:hover{background-color:#f9f9f9}@media(max-width: 768px){.GeNg2HVTmhQDmsLLTpWj{padding:8px}}.GBb48KXbGnQtAY8xqmUp{display:flex;justify-content:space-between;align-items:center;padding:10px;background-color:#f5f5f5;border-bottom:1px solid #e8e8e8}@media(max-width: 768px){.GBb48KXbGnQtAY8xqmUp{flex-direction:column;align-items:flex-start;gap:8px}}.LoCH7sYpmK3VgRASqTgz{font-size:20px;cursor:pointer;color:#595959}.Xjs10kZPSsD_BVFomnIe{color:#ff674c;margin-right:8px}.oibCayv_cOyhyWCKzHSr{display:flex;align-items:center;gap:10px}.oibCayv_cOyhyWCKzHSr span{font-size:14px;font-weight:500;color:#595959}.hhwYXSd0CR75D8ETnUML{display:flex;align-items:center;position:relative;padding-left:12px}@media(max-width: 768px){.hhwYXSd0CR75D8ETnUML{padding-left:8px}}.LkP1cqeAyAYI9rCurnE8{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:16px}@media(max-width: 768px){.LkP1cqeAyAYI9rCurnE8{font-size:12px}}.u_jT9kmq2kyThRlj8HT1{width:50px;height:50px;margin-left:10px;margin-right:10px}@media(max-width: 768px){.u_jT9kmq2kyThRlj8HT1{width:40px;height:40px;margin-left:8px;margin-right:8px}}.ieGdf5FTgLUPcfuZi7Xz{flex:1;overflow:hidden}.QgZ3oHW9IRTexL8xWVqP{font-weight:bold;font-size:14px}@media(max-width: 768px){.QgZ3oHW9IRTexL8xWVqP{font-size:12px}}.JwfbSOSIRAz5OO2hiSFc{font-size:12px;color:#666;margin-top:2px}@media(max-width: 768px){.JwfbSOSIRAz5OO2hiSFc{font-size:10px}}.XfXQBYqMfZc4p8s2Mhla{width:6px;height:6px;background-color:#1890ff;border-radius:50%;margin-left:10px}@media(max-width: 768px){.XfXQBYqMfZc4p8s2Mhla{width:4px;height:4px;margin-left:8px}}.RGXTlVxCxbZpD6__J5_g{font-size:12px}.rWa5cnbZQLDtxFxJU6qA{font-size:20px;cursor:pointer}@media(max-width: 768px){.rWa5cnbZQLDtxFxJU6qA{font-size:18px}}.Pus_rAoqX05D4Qz2pYxo{animation:Pus_rAoqX05D4Qz2pYxo 1s ease-in-out infinite}@keyframes Pus_rAoqX05D4Qz2pYxo{0%{transform:rotate(0deg)}25%{transform:rotate(10deg)}50%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}100%{transform:rotate(0deg)}}

package/dist/types/components/BellNotifications/BellNotifications.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, Story } from "@storybook/react";
+import { BellNotificationsProps } from '.';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<BellNotificationsProps>;

package/dist/types/components/BellNotifications/index.d.ts

@@ -0,0 +1,23 @@
+export interface Criticality {
+    Id: string;
+    Name: string;
+    ColorHex: string;
+}
+export interface BellNotification {
+    Id: string;
+    Title: string;
+    Description: string;
+    RedirectURL: string;
+    Icon: string;
+    ExpirationDate: number;
+    Criticality: Criticality;
+    IsRead: boolean;
+}
+export interface BellNotificationsProps {
+    notifications: BellNotification[];
+    onFilterChange: (filter: 'all' | 'unread') => void;
+    onNotificationClick: (id: string, url: string) => void;
+    handleMarkAllAsRead: () => void;
+}
+export declare const BellNotifications: ({ notifications, onFilterChange, onNotificationClick, handleMarkAllAsRead }: BellNotificationsProps) => import("react/jsx-runtime").JSX.Element;
+export default BellNotifications;

package/dist/types/components/Header/Header.types.d.ts

@@ -1,3 +1,4 @@
+import { BellNotification } from "components/BellNotifications";
 export interface MenuItem {
     name: string;
     action: () => void;
@@ -18,4 +19,8 @@ export interface HeaderProps {
     onLeavingPage?: (targetRoute: string) => void;
     userName?: string;
     pageTitle?: string;
+    onFilterChange?: (filter: 'all' | 'unread') => void;
+    onNotificationClick?: (id: string, url: string) => void;
+    handleMarkAllAsRead?: () => void;
+    notifications?: BellNotification[];
 }

package/dist/types/components/Header/index.d.ts

@@ -3,5 +3,5 @@ import { HeaderProps } from './Header.types';
  * Header component to display navigation bar with dropdown menus and action button.
  * @param {HeaderProps} props - Properties passed to the component.
  */
-export declare const Header: ({ menuList, actionButton, logout, homeUrl, profileUrl, onLeavingPage, userName, pageTitle }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Header: ({ menuList, actionButton, logout, homeUrl, profileUrl, onLeavingPage, userName, pageTitle, onFilterChange, notifications, onNotificationClick, handleMarkAllAsRead }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/dist/types/components/index.d.ts

@@ -29,3 +29,4 @@ export * from './ResponsiveTable';
 export * from './WebCam';
 export * from './ResponseType';
 export * from './Header';
+export * from './BellNotifications';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.2.27",
+  "version": "1.2.29",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

package/src/components/BellNotifications/BellNotifications.stories.tsx

@@ -0,0 +1,116 @@
+import { Meta, Story } from "@storybook/react";
+import { BellNotifications, BellNotificationsProps } from '.';
+
+export default {
+    title: 'BellNotifications',
+    component: BellNotifications,
+} as Meta;
+
+const Template: Story<BellNotificationsProps> = (args) => <BellNotifications {...args}></BellNotifications>;
+
+const notifications = [
+    {
+        "Id": "A31EB2C3-4937-44F6-B533-18A039A4AA96",
+        "Title": "Creation of an Evaluation Cycle",
+        "Description": "A new evaluation cycle was created. You must answer it.",
+        "RedirectURL": "https://www.google.pt",
+        "Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
+        "ExpirationDate": 1736899200,
+        "Criticality": {
+            "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
+            "Name": "High",
+            "ColorHex": "#E05151"
+        },
+        "IsRead": false
+    },
+    {
+        "Id": "137C1FE7-296C-4523-AC59-F136D2FA91AB",
+        "Title": "Creation of an Evaluation Cycle",
+        "Description": "A new evaluation cycle was created. You must answer it.",
+        "RedirectURL": "https://www.google.pt",
+        "Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
+        "ExpirationDate": 1736899200,
+        "Criticality": {
+            "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
+            "Name": "High",
+            "ColorHex": "#E05151"
+        },
+        "IsRead": false
+    },
+    {
+        "Id": "662C390B-A38F-45AB-B97C-2D00F0A8ACAD",
+        "Title": "Creation of an Evaluation Cycle",
+        "Description": "A new evaluation cycle was created. You must answer it.",
+        "RedirectURL": "https://www.google.pt",
+        "Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
+        "ExpirationDate": 1736899200,
+        "Criticality": {
+            "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
+            "Name": "High",
+            "ColorHex": "#E05151"
+        },
+        "IsRead": false
+    },
+    {
+        "Id": "0419654F-66FE-41EA-BBA4-D8BB6E3D6B33",
+        "Title": "Creation of an Evaluation Cycle",
+        "Description": "A new evaluation cycle was created. You must answer it.",
+        "RedirectURL": "https://www.google.pt",
+        "Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
+        "ExpirationDate": 1736899200,
+        "Criticality": {
+            "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
+            "Name": "High",
+            "ColorHex": "#E05151"
+        },
+        "IsRead": false
+    },
+    {
+        "Id": "CC98EDA1-0461-4D08-982E-8424EF4AFB3B",
+        "Title": "Creation of an Evaluation Cycle",
+        "Description": "A new evaluation cycle was created. You must answer it.",
+        "RedirectURL": "https://www.google.pt",
+        "Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
+        "ExpirationDate": 1736899200,
+        "Criticality": {
+            "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
+            "Name": "High",
+            "ColorHex": "#E05151"
+        },
+        "IsRead": false
+    },
+    {
+        "Id": "3DB9310A-4BF8-4B90-8D5A-7583473664BB",
+        "Title": "Creation of an Evaluation Cycle",
+        "Description": "A new evaluation cycle was created. You must answer it.",
+        "RedirectURL": "https://www.google.pt",
+        "Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
+        "ExpirationDate": 1736899200,
+        "Criticality": {
+            "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
+            "Name": "High",
+            "ColorHex": "#E05151"
+        },
+        "IsRead": true
+    },
+    {
+        "Id": "D6FB93EE-3255-42B2-8EC1-27E7AC3F5249",
+        "Title": "Creation of a new user",
+        "Description": "A new user was created in the platform with the mecanographic number 8111.",
+        "RedirectURL": "https://www.google.pt",
+        "Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
+        "ExpirationDate": 1736985600,
+        "Criticality": {
+            "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
+            "Name": "High",
+            "ColorHex": "#E05151"
+        },
+        "IsRead": true
+    }
+];
+
+export const Primary = Template.bind({});
+Primary.args = {
+    notifications: notifications
+};
+

package/src/components/BellNotifications/index.tsx

@@ -0,0 +1,161 @@
+import { useEffect, useState } from 'react';
+import { Badge, Dropdown, Menu } from 'antd';
+import { BellOutlined, CheckCircleOutlined, ExclamationCircleOutlined, MoreOutlined } from '@ant-design/icons';
+import styles from './styles.module.scss';
+import { useTranslation } from 'react-i18next';
+import { Switch } from '../Switch';
+
+export interface Criticality {
+  Id: string;
+  Name: string;
+  ColorHex: string;
+}
+
+export interface BellNotification {
+  Id: string;
+  Title: string;
+  Description: string;
+  RedirectURL: string;
+  Icon: string;
+  ExpirationDate: number;
+  Criticality: Criticality;
+  IsRead: boolean;
+}
+
+export interface BellNotificationsProps {
+  notifications: BellNotification[];
+  onFilterChange: (filter: 'all' | 'unread') => void;
+  onNotificationClick: (id: string, url: string) => void;
+  handleMarkAllAsRead: () => void;
+}
+
+export const BellNotifications = ({ notifications, onFilterChange, onNotificationClick, handleMarkAllAsRead }: BellNotificationsProps) => {
+  const { t } = useTranslation();
+  const [maxChars, setMaxChars] = useState(30);
+  const [filter, setFilter] = useState<'all' | 'unread'>('all');
+  const [isShaking, setIsShaking] = useState(false);
+
+  const unreadCount = notifications.filter((notif) => !notif.IsRead).length;
+
+  const handleNotificationClick = (id: string, url: string) => {
+    onNotificationClick(id, url);
+  }
+
+  const handleFilterChange = (checked: boolean) => {
+    const newFilter = checked ? 'unread' : 'all';
+    setFilter(newFilter);
+    onFilterChange(newFilter);
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 1024) {
+        setMaxChars(30);
+      } else {
+        setMaxChars(60);
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (unreadCount > 0) {
+      const interval = setInterval(() => {
+        setIsShaking(true);
+
+        // Parar a animação após 2 segundos
+        const stopShakeTimeout = setTimeout(() => setIsShaking(false), 2000);
+
+        return () => clearTimeout(stopShakeTimeout);
+      }, 15000); // Repetir a cada 30 segundos
+
+      return () => clearInterval(interval);
+    }
+  }, [unreadCount]);
+
+  const optionsMenu = (
+    <Menu>
+      <Menu.Item key="markAllAsRead" onClick={handleMarkAllAsRead}>
+        <CheckCircleOutlined className={styles.checkIconStyle} />
+
+        {t('components.bellNotifications.markAllAsRead')}
+      </Menu.Item>
+    </Menu>
+  );
+
+  const menu = (
+    <Menu className={styles.notificationMenu}>
+
+      {unreadCount > 0 && (
+        <div className={styles.headerContainer}>
+          <div className={styles.switchContainer}>
+            <span>{t('components.bellNotifications.onlyShowNoRead')}</span>
+
+            <Switch
+              checked={filter === 'unread'}
+              onChange={handleFilterChange}
+              size="small"
+            />
+          </div>
+
+          <Dropdown overlay={optionsMenu} trigger={['click']}>
+            <MoreOutlined className={styles.moreOutlinedIconStyle} />
+          </Dropdown>
+        </div>
+      )}
+
+      {notifications.map((notif) => (
+        <Menu.Item
+          key={notif.Id}
+          className={styles.notificationItem}
+          onClick={() => handleNotificationClick(notif.Id, notif.RedirectURL)}
+        >
+          <div className={styles.notificationContent}>
+            {notif.Criticality?.Name === 'High' && (
+              <ExclamationCircleOutlined
+                className={styles.criticalityIcon}
+                style={{ color: notif.Criticality?.ColorHex }}
+              />
+            )}
+
+            <img src={notif.Icon} alt="Notification Icon" className={styles.notificationIcon} />
+
+            <div className={styles.notificationText}>
+              <div
+                className={styles.notificationTitle}
+              >
+                {notif.Title}
+              </div>
+
+              <div className={styles.notificationDescription}>
+                {notif.Description.length > maxChars
+                  ? `${notif.Description.slice(0, maxChars)}...`
+                  : notif.Description}
+              </div>
+            </div>
+
+            {!notif.IsRead && <div className={styles.unreadIndicator}></div>}
+          </div>
+        </Menu.Item>
+      ))}
+
+      {notifications.length === 0 && <Menu.Item disabled>{t('components.bellNotifications.noNotifications')}</Menu.Item>}
+    </Menu>
+  );
+
+  return (
+    <Dropdown overlay={menu} trigger={['click']}>
+      <Badge count={unreadCount} className={styles.badgeStyle} overflowCount={99} offset={[8, 0]}>
+        <BellOutlined className={`${styles.bellIcon} ${isShaking ? styles.shake : ''}`} />
+      </Badge>
+    </Dropdown>
+  );
+};
+
+export default BellNotifications;

package/src/components/BellNotifications/styles.module.scss

@@ -0,0 +1,186 @@
+.notificationMenu {
+  max-width: 300px;
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 0;
+
+  @media (max-width: 768px) {
+    max-width: 100%;
+    max-height: 300px;
+  }
+
+  @media (min-width: 1024px) {
+    max-width: 600px;
+    max-height: 700px;
+  }
+}
+
+.notificationItem {
+  display: flex;
+  flex-direction: column;
+  align-items: unset !important;
+  padding: 10px;
+  border-bottom: 1px solid #f0f0f0;
+  background-color: #fff;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f9f9f9;
+  }
+
+  @media (max-width: 768px) {
+    padding: 8px;
+  }
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #e8e8e8;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+}
+
+.moreOutlinedIconStyle {
+  font-size: 20px;
+  cursor: pointer;
+  color: #595959;
+}
+
+.checkIconStyle {
+  color: #FF674C;
+  margin-right: 8px;
+}
+
+.switchContainer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  span {
+    font-size: 14px;
+    font-weight: 500;
+    color: #595959;
+  }
+}
+
+.notificationContent {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding-left: 12px;
+
+  @media (max-width: 768px) {
+    padding-left: 8px;
+  }
+}
+
+.criticalityIcon {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 16px;
+
+  @media (max-width: 768px) {
+    font-size: 12px;
+  }
+}
+
+.notificationIcon {
+  width: 50px;
+  height: 50px;
+  margin-left: 10px;
+  margin-right: 10px;
+
+  @media (max-width: 768px) {
+    width: 40px;
+    height: 40px;
+    margin-left: 8px;
+    margin-right: 8px;
+  }
+}
+
+.notificationText {
+  flex: 1;
+  overflow: hidden;
+}
+
+.notificationTitle {
+  font-weight: bold;
+  font-size: 14px;
+
+  @media (max-width: 768px) {
+    font-size: 12px;
+  }
+}
+
+.notificationDescription {
+  font-size: 12px;
+  color: #666;
+  margin-top: 2px;
+
+  @media (max-width: 768px) {
+    font-size: 10px;
+  }
+}
+
+.unreadIndicator {
+  width: 6px;
+  height: 6px;
+  background-color: #1890ff;
+  border-radius: 50%;
+  margin-left: 10px;
+
+  @media (max-width: 768px) {
+    width: 4px;
+    height: 4px;
+    margin-left: 8px;
+  }
+}
+
+.badgeStyle {
+  font-size: 12px;
+}
+
+.bellIcon {
+  font-size: 20px;
+  cursor: pointer;
+
+  @media (max-width: 768px) {
+    font-size: 18px;
+  }
+}
+
+.shake {
+  animation: shake 1s ease-in-out infinite;
+}
+
+@keyframes shake {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  25% {
+    transform: rotate(10deg);
+  }
+
+  50% {
+    transform: rotate(-10deg);
+  }
+
+  75% {
+    transform: rotate(10deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}

package/src/components/Header/Header.types.ts

@@ -1,3 +1,5 @@
+import { BellNotification } from "components/BellNotifications";
+
 export interface MenuItem {
     name: string;
     action: () => void;
@@ -20,4 +22,8 @@ export interface HeaderProps {
     onLeavingPage?: (targetRoute: string) => void;
     userName?: string;
     pageTitle?: string;
+    onFilterChange?: (filter: 'all' | 'unread') => void;
+    onNotificationClick?: (id: string, url: string) => void;
+    handleMarkAllAsRead?: () => void;
+    notifications?: BellNotification[];
 }

package/src/components/Header/index.tsx

@@ -1,17 +1,32 @@
 import { useRef, useState } from 'react';
-import {  DownOutlined, UpOutlined, BarsOutlined, CloseOutlined } from '@ant-design/icons';
+import { DownOutlined, UpOutlined, BarsOutlined, CloseOutlined } from '@ant-design/icons';
 import omniumIcon from '../../assets/images/omnium-retail-logo.png';
 import omniumWhiteIcon from '../../assets/images/omnium-retail-logo-white.png';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
 import { HeaderProps, MenuItem } from './Header.types';
 import { getMenuTopList, getMenuBottomList } from './Header.data';
+import { BellNotifications } from '../BellNotifications';
 
 /**
  * Header component to display navigation bar with dropdown menus and action button.
  * @param {HeaderProps} props - Properties passed to the component.
  */
-export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl, onLeavingPage, userName, pageTitle }: HeaderProps) => {
+export const Header = ({
+    menuList,
+    actionButton,
+    logout,
+    homeUrl,
+    profileUrl,
+    onLeavingPage,
+    userName,
+    pageTitle,
+    onFilterChange,
+    notifications,
+    onNotificationClick,
+    handleMarkAllAsRead
+}: HeaderProps) => {
+
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const [activeDropdown, setActiveDropdown] = useState<number | null>(null);
     const headerRef = useRef<HTMLDivElement>(null);
@@ -21,7 +36,7 @@ export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl, on
      * Handle the logout action. If no logout function is provided, redirect to home as discussed in a meet
      */
     const onLogout = () => {
-        if( logout ) {
+        if (logout) {
             logout();
         } else {
             onHome();
@@ -96,9 +111,9 @@ export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl, on
                         }
                     }}
                 >
-                    <p 
-                    className={ styles.name } 
-                    dangerouslySetInnerHTML={{ __html: link.name }}></p>
+                    <p
+                        className={styles.name}
+                        dangerouslySetInnerHTML={{ __html: link.name }}></p>
 
                     {
                         link.dropdownMenu && link.dropdownMenu.length > 0 && <div className={styles.arrow} onClick={(event) => handleDropdownClick(event, index)}>
@@ -133,16 +148,20 @@ export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl, on
 
     return (
         <div className={styles.header} ref={headerRef}>
-            <BarsOutlined onClick={onToggleMenu} className={ styles.toggleMenuOpen } />
+            <BarsOutlined onClick={onToggleMenu} className={styles.toggleMenuOpen} />
 
             <div className={styles.logoContainer}>
                 {
-                    pageTitle 
-                        ? <p className={ styles.title}>{pageTitle}</p>
+                    pageTitle
+                        ? <p className={styles.title}>{pageTitle}</p>
                         : <img src={omniumIcon} alt="Omnium Retail Blue Logo" />
                 }
             </div>
 
+            {notifications &&
+                <BellNotifications onFilterChange={onFilterChange!} notifications={notifications} onNotificationClick={onNotificationClick!} handleMarkAllAsRead={handleMarkAllAsRead!} />
+            }
+
             <div className={classNames(styles.menu, { [styles.active]: isMenuOpen })}>
                 <div className={styles.head}>
                     <p className={styles.logoWrapper}>

package/src/components/ResponsiveTable/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Space, TableProps, Select, Dropdown, MenuProps } from 'antd';
+import { Space, TableProps, Select, Dropdown } from 'antd';
 import { Table as AntdTable } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import styles from './styles.module.scss';
@@ -7,7 +7,6 @@ import { useTranslation } from 'react-i18next';
 import { MoreOutlined } from '@ant-design/icons';
 import classnames from 'classnames';
 import { Button } from '../Button';
-import classNames from 'classnames';
 
 export interface FilterTableOptions {
     value: string;

package/src/components/index.tsx

@@ -29,3 +29,4 @@ export * from './ResponsiveTable';
 export * from './WebCam';
 export * from './ResponseType';
 export * from './Header';
+export * from './BellNotifications';

package/src/locales/en.json

@@ -125,6 +125,11 @@
         },
         "upload": {
             "loadFile": "Upload file"
+        },
+        "bellNotifications": {
+            "noNotifications": "No notifications",
+            "onlyShowNoRead": "Only show unread",
+            "markAllAsRead": "Mark all as read"
         }
     }
 }