@appcorp/kismaa-web-ui 0.2.65 → 0.2.69

package/atoms/active-icon.d.ts

@@ -1,4 +1,4 @@
-import { PSYCHIC_ONLINE_STATUS } from '@appcorp/kismaa-utils';
+import { PSYCHIC_ONLINE_STATUS } from '@appcorp/kismaa-utils/api/type/psychic';
 import { FC } from 'react';
 export interface ActiveIconProps {
     onlineStatus: PSYCHIC_ONLINE_STATUS;

package/atoms/active-icon.js

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActiveIcon = void 0;
-var kismaa_utils_1 = require("@appcorp/kismaa-utils");
+var psychic_1 = require("@appcorp/kismaa-utils/api/type/psychic");
 var react_1 = __importDefault(require("react"));
 var statusColorMap = (_a = {},
-    _a[kismaa_utils_1.PSYCHIC_ONLINE_STATUS.ONLINE] = 'bg-green-500',
-    _a[kismaa_utils_1.PSYCHIC_ONLINE_STATUS.BUSY] = 'bg-orange-500',
-    _a[kismaa_utils_1.PSYCHIC_ONLINE_STATUS.OFFLINE] = 'bg-gray-500',
+    _a[psychic_1.PSYCHIC_ONLINE_STATUS.ONLINE] = 'bg-green-500',
+    _a[psychic_1.PSYCHIC_ONLINE_STATUS.BUSY] = 'bg-orange-500',
+    _a[psychic_1.PSYCHIC_ONLINE_STATUS.OFFLINE] = 'bg-gray-500',
     _a);
 var ActiveIcon = function (_a) {
     var onlineStatus = _a.onlineStatus;

package/molecules/ratings/ratings.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/nextjs';
 declare const meta: {
     component: import("react").FC<import("./type").RatingTypes>;
     tags: string[];

package/molecules/user-card/props.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.userCardData = void 0;
-var kismaa_utils_1 = require("@appcorp/kismaa-utils");
+var psychic_1 = require("@appcorp/kismaa-utils/api/type/psychic");
 exports.userCardData = {
     id: '1',
     description: '19210 for reading 2001',
@@ -9,7 +9,7 @@ exports.userCardData = {
     imageSrc: '/card-person.jpg',
     isHovered: false,
     name: 'Manish Kumar Arora',
-    onlineStatus: kismaa_utils_1.PSYCHIC_ONLINE_STATUS.OFFLINE,
+    onlineStatus: psychic_1.PSYCHIC_ONLINE_STATUS.OFFLINE,
     handleOnMouseEnter: function () { return void 0; },
     handleOnMouseLeave: function () { return void 0; },
     badges: [

package/molecules/user-card/type.d.ts

@@ -1,5 +1,5 @@
 import { LoggedInUser } from '../../organisms/navbar/type';
-import { PSYCHIC_ONLINE_STATUS } from '@appcorp/kismaa-utils';
+import { PSYCHIC_ONLINE_STATUS } from '@appcorp/kismaa-utils/api/type/psychic';
 export interface UserCardProps {
     imageAlt: string;
     imageSrc: string;

package/molecules/user-card/user-card.js

@@ -5,7 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserCard = void 0;
-var kismaa_utils_1 = require("@appcorp/kismaa-utils");
+var psychic_1 = require("@appcorp/kismaa-utils/api/type/psychic");
+var user_1 = require("@appcorp/kismaa-utils/api/type/user");
 var react_1 = __importDefault(require("react"));
 var image_1 = __importDefault(require("next/image"));
 var active_icon_1 = require("../../atoms/active-icon");
@@ -28,9 +29,9 @@ var UserCard = function (_a) {
                 react_1.default.createElement("div", { className: "relative h-64 w-full" },
                     react_1.default.createElement(image_1.default, { alt: imageAlt, className: "h-full w-full object-cover object-center", fill: true, height: 0, sizes: "20vw", src: imageSrc, width: 0 })),
                 isHovered &&
-                    onlineStatus === kismaa_utils_1.PSYCHIC_ONLINE_STATUS.ONLINE &&
+                    onlineStatus === psychic_1.PSYCHIC_ONLINE_STATUS.ONLINE &&
                     (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.userType) &&
-                    loggedInUser.userType == kismaa_utils_1.USER_TYPE.USER && (react_1.default.createElement(react_1.default.Fragment, null,
+                    loggedInUser.userType == user_1.USER_TYPE.USER && (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent to-[rgba(22,18,69,0.85)] transition-opacity duration-300" }),
                     react_1.default.createElement("div", { className: "absolute bottom-7 flex w-full justify-center" },
                         react_1.default.createElement("div", { className: "w-fit" },
@@ -56,7 +57,7 @@ var UserCard = function (_a) {
                         price.duration,
                         "min")),
                 (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.userType) &&
-                    loggedInUser.userType == kismaa_utils_1.USER_TYPE.USER && (react_1.default.createElement("div", { className: "absolute right-2 bottom-2 z-10 cursor-pointer" }, isFavorite ? (react_1.default.createElement("div", { onClick: function (e) {
+                    loggedInUser.userType == user_1.USER_TYPE.USER && (react_1.default.createElement("div", { className: "absolute right-2 bottom-2 z-10 cursor-pointer" }, isFavorite ? (react_1.default.createElement("div", { onClick: function (e) {
                         e.stopPropagation();
                         handleIsFavorite(id);
                     } },

package/organisms/extended-user-card/props.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extendedUserCardData = void 0;
-var kismaa_utils_1 = require("@appcorp/kismaa-utils");
+var psychic_1 = require("@appcorp/kismaa-utils/api/type/psychic");
 exports.extendedUserCardData = {
-    onlineStatus: kismaa_utils_1.PSYCHIC_ONLINE_STATUS.OFFLINE,
+    onlineStatus: psychic_1.PSYCHIC_ONLINE_STATUS.OFFLINE,
     imageUrl: 'https://ytiwekjzaihrkrirjgpk.supabase.co/storage/v1/object/public/publicBlob/assets/psychic.webp',
     title: 'TRUE HEALER',
     rate: '$199.00/min',

package/organisms/extended-user-card/type.d.ts

@@ -1,4 +1,4 @@
-import { PSYCHIC_ONLINE_STATUS } from '@appcorp/kismaa-utils';
+import { PSYCHIC_ONLINE_STATUS } from '@appcorp/kismaa-utils/api/type/psychic';
 export interface Expertise {
     label: string;
 }

package/organisms/navbar/logged-in-user-avatar.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { LoggedInUser, Notification } from './type';
+interface LoggedInUserProps {
+    avatarClassName: string;
+    loggedInUser: LoggedInUser | null;
+    notificationItems: Notification[] | [];
+}
+export declare const LoggedInUserAvatar: FC<LoggedInUserProps>;
+export {};

package/organisms/navbar/logged-in-user-avatar.js

@@ -0,0 +1,144 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoggedInUserAvatar = void 0;
+var atoms_1 = require("../../atoms");
+var react_1 = require("@headlessui/react");
+var image_1 = __importDefault(require("next/image"));
+var vista_vertical_divider_v4_1 = require("@appcorp/app-corp-vista/molecules/vista-vertical-divider-v4");
+var react_popper_1 = require("react-popper");
+var react_2 = __importStar(require("react"));
+var link_1 = __importDefault(require("next/link"));
+var BellIcon_1 = __importDefault(require("@heroicons/react/24/outline/BellIcon"));
+var notification_item_1 = require("./notification-item");
+var LoggedInUserAvatar = function (_a) {
+    var _b, _c;
+    var avatarClassName = _a.avatarClassName, loggedInUser = _a.loggedInUser, notificationItems = _a.notificationItems;
+    var _d = (0, react_2.useState)(null), avatarElement = _d[0], setAvatarElement = _d[1];
+    var _e = (0, react_2.useState)(null), notificationElement = _e[0], setNotificationElement = _e[1];
+    var _f = (0, react_2.useState)(null), avatarDropdown = _f[0], setAvatarDropdown = _f[1];
+    var _g = (0, react_2.useState)(null), notificationDropdown = _g[0], setNotificationDropdown = _g[1];
+    var _h = (0, react_popper_1.usePopper)(avatarElement, avatarDropdown, {
+        placement: 'top-start',
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: [145, 0],
+                },
+            },
+        ],
+    }), avatarStyles = _h.styles, avatarAttributes = _h.attributes;
+    var _j = (0, react_popper_1.usePopper)(notificationElement, notificationDropdown, {
+        placement: 'top-start',
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: [180, 0],
+                },
+            },
+        ],
+    }), notificationStyles = _j.styles, notificationAttributes = _j.attributes;
+    var unReadNotifications = (0, react_2.useMemo)(function () {
+        return notificationItems === null || notificationItems === void 0 ? void 0 : notificationItems.filter(function (_a) {
+            var isRead = _a.isRead;
+            return !isRead;
+        });
+    }, [notificationItems]);
+    var readNotifications = (0, react_2.useMemo)(function () {
+        return notificationItems === null || notificationItems === void 0 ? void 0 : notificationItems.filter(function (_a) {
+            var isRead = _a.isRead;
+            return isRead;
+        });
+    }, [notificationItems]);
+    return (react_2.default.createElement("div", null,
+        (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.route) &&
+            (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) &&
+            !((_b = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) === null || _b === void 0 ? void 0 : _b.length) && (react_2.default.createElement("div", { className: "flex flex-col items-end justify-center" },
+            react_2.default.createElement(BellIcon_1.default, { className: "size-8" }),
+            react_2.default.createElement(link_1.default, { href: loggedInUser.route }, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl) ? (react_2.default.createElement(image_1.default, { alt: loggedInUser.firstName, className: avatarClassName, height: 40, src: loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl, width: 40 })) : (react_2.default.createElement(atoms_1.UserIcon, { className: avatarClassName }))))),
+        (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) && (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems.length) > 0 && (react_2.default.createElement("div", { className: "flex flex-row items-center justify-end gap-2" },
+            react_2.default.createElement(react_1.Popover, { className: "relative" },
+                react_2.default.createElement("div", { className: "flex flex-row items-center justify-center" },
+                    react_2.default.createElement(react_1.PopoverButton, { ref: setNotificationElement },
+                        react_2.default.createElement("div", null,
+                            unReadNotifications.length > 0 && (react_2.default.createElement("span", { className: "relative flex size-3" },
+                                react_2.default.createElement("span", { className: "bg-primary absolute inline-flex h-full w-full animate-ping rounded-full opacity-75" }),
+                                react_2.default.createElement("span", { className: "bg-primary relative inline-flex size-3 rounded-full" }))),
+                            react_2.default.createElement(BellIcon_1.default, { className: "stroke-primary size-7 h-full" })))),
+                react_2.default.createElement(react_1.PopoverPanel, __assign({ transition: true, className: "absolute left-1/2 z-10 mt-2 flex w-screen max-w-min -translate-x-1/2 bg-transparent px-4 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in", ref: setNotificationDropdown, style: notificationStyles.popper }, notificationAttributes.popper),
+                    react_2.default.createElement("div", { className: "w-86 shrink rounded-xl bg-white p-4 text-sm/6 font-semibold text-gray-900 shadow-lg outline-1 outline-gray-900/5 dark:bg-gray-800 dark:text-white dark:shadow-none dark:outline dark:-outline-offset-1 dark:outline-white/10" },
+                        notificationItems.length === 0 && (react_2.default.createElement("p", { className: "" }, "No new notifications")),
+                        react_2.default.createElement("div", { className: "divider-y-gray-300 flex flex-col items-center justify-center" }, unReadNotifications &&
+                            unReadNotifications.length > 0 &&
+                            unReadNotifications.map(function (_a) {
+                                var message = _a.message, time = _a.time, id = _a.id;
+                                return (react_2.default.createElement(notification_item_1.NotificationItem, { avatarClassName: avatarClassName, id: id, message: message, time: time }));
+                            })),
+                        react_2.default.createElement("div", { className: "divider-y-gray-300 flex w-full flex-col items-center justify-center" },
+                            react_2.default.createElement("div", { className: "w-full" }, readNotifications && readNotifications.length > 0 && (react_2.default.createElement(vista_vertical_divider_v4_1.VistaVerticalDividerV4, { label: "Read Notifications" }))),
+                            readNotifications &&
+                                readNotifications.length > 0 &&
+                                readNotifications.map(function (_a) {
+                                    var message = _a.message, time = _a.time, id = _a.id;
+                                    return (react_2.default.createElement(react_2.default.Fragment, null,
+                                        react_2.default.createElement(notification_item_1.NotificationItem, { avatarClassName: avatarClassName, id: id, message: message, time: time })));
+                                }))))),
+            react_2.default.createElement(react_1.Popover, { className: "relative" },
+                react_2.default.createElement("div", { className: "flex flex-col items-end justify-start" },
+                    react_2.default.createElement(react_1.PopoverButton, { ref: setAvatarElement }, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl) ? (react_2.default.createElement(image_1.default, { alt: loggedInUser.firstName, className: avatarClassName, height: 40, src: loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl, width: 40 })) : (react_2.default.createElement(atoms_1.UserIcon, { className: avatarClassName })))),
+                react_2.default.createElement(react_1.PopoverPanel, __assign({ transition: true, className: "absolute left-1/2 z-10 mt-2 flex w-screen max-w-min -translate-x-1/2 bg-transparent px-4 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in", ref: setAvatarDropdown, style: avatarStyles.popper }, avatarAttributes.popper),
+                    react_2.default.createElement("div", { className: "w-56 shrink rounded-xl bg-white p-4 text-sm/6 font-semibold text-gray-900 shadow-lg outline-1 outline-gray-900/5 dark:bg-gray-800 dark:text-white dark:shadow-none dark:outline dark:-outline-offset-1 dark:outline-white/10" }, (_c = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) === null || _c === void 0 ? void 0 : _c.map(function (_a) {
+                        var label = _a.label, handleOnClick = _a.handleOnClick;
+                        return (react_2.default.createElement("button", { key: label, className: "hover:text-primary dark:hover:text-primary/50 block cursor-pointer p-2", onClick: handleOnClick },
+                            react_2.default.createElement("p", { className: "text-primary font-bold" }, label)));
+                    }))))))));
+};
+exports.LoggedInUserAvatar = LoggedInUserAvatar;

package/organisms/navbar/mobile-menu.js

@@ -9,10 +9,10 @@ var molecules_1 = require("../../molecules");
 var image_1 = __importDefault(require("next/image"));
 var react_1 = __importDefault(require("react"));
 var atoms_1 = require("../../atoms");
-var kismaa_utils_1 = require("@appcorp/kismaa-utils");
+var user_1 = require("@appcorp/kismaa-utils/api/type/user");
 var MobileMenu = function (_a) {
     var headerActions = _a.headerActions, isMobileMenuOpen = _a.isMobileMenuOpen, loggedInUser = _a.loggedInUser, navLinks = _a.navLinks, toggleMobileMenu = _a.toggleMobileMenu, homeLink = _a.homeLink;
-    var avatarClassName = (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.userType) === kismaa_utils_1.USER_TYPE.USER
+    var avatarClassName = (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.userType) === user_1.USER_TYPE.USER
         ? 'h-10 w-10  rounded-full ring-2 ring-white'
         : 'h-10 w-10  rounded-full';
     return (react_1.default.createElement("div", null, isMobileMenuOpen && (react_1.default.createElement("div", { className: "col-span-2 max-h-90 overflow-y-scroll bg-purple-200/90 lg:hidden" },

package/organisms/navbar/navbar.js

@@ -11,16 +11,13 @@ var Bars3Icon_1 = __importDefault(require("@heroicons/react/24/solid/Bars3Icon")
 var XMarkIcon_1 = __importDefault(require("@heroicons/react/24/solid/XMarkIcon"));
 var link_1 = __importDefault(require("next/link"));
 var react_1 = __importDefault(require("react"));
-var image_1 = __importDefault(require("next/image"));
 var mega_menu_1 = require("../mega-menu");
 var header_pointer_icon_1 = require("../../atoms/header-pointer-icon");
-var user_icon_1 = require("../../atoms/user-icon");
-var react_2 = require("@headlessui/react");
 var mobile_menu_1 = require("./mobile-menu");
-var kismaa_utils_1 = require("@appcorp/kismaa-utils");
+var user_1 = require("@appcorp/kismaa-utils/api/type/user");
+var logged_in_user_avatar_1 = require("./logged-in-user-avatar");
 var Navbar = function (_a) {
-    var _b, _c;
-    var handleMegaMenuToggle = _a.handleMegaMenuToggle, handleSearch = _a.handleSearch, headerActions = _a.headerActions, homeLink = _a.homeLink, isMobileMenuOpen = _a.isMobileMenuOpen, _d = _a.loggedInUser, loggedInUser = _d === void 0 ? null : _d, navLinks = _a.navLinks, _e = _a.showSearch, showSearch = _e === void 0 ? false : _e, toggleMobileMenu = _a.toggleMobileMenu;
+    var handleMegaMenuToggle = _a.handleMegaMenuToggle, handleSearch = _a.handleSearch, headerActions = _a.headerActions, homeLink = _a.homeLink, isMobileMenuOpen = _a.isMobileMenuOpen, _b = _a.loggedInUser, loggedInUser = _b === void 0 ? null : _b, navLinks = _a.navLinks, notificationItems = _a.notificationItems, _c = _a.showSearch, showSearch = _c === void 0 ? false : _c, toggleMobileMenu = _a.toggleMobileMenu;
     var renderNavLink = function (link) {
         var _a;
         return (react_1.default.createElement("div", { key: link.label, className: "relative w-fit", onMouseEnter: handleMegaMenuToggle, onMouseLeave: handleMegaMenuToggle },
@@ -31,7 +28,7 @@ var Navbar = function (_a) {
                 react_1.default.createElement("div", { className: "absolute w-max pt-10" },
                     react_1.default.createElement(mega_menu_1.MegaMenu, { items: link.megaMenuItems }))))));
     };
-    var avatarClassName = (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.userType) === kismaa_utils_1.USER_TYPE.USER
+    var avatarClassName = (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.userType) === user_1.USER_TYPE.USER
         ? 'h-10 w-10 cursor-pointer rounded-full ring-2 ring-white'
         : 'h-10 w-10 cursor-pointer rounded-full';
     return (react_1.default.createElement("nav", { className: "fixed z-20 w-full bg-purple-200/90" },
@@ -53,20 +50,7 @@ var Navbar = function (_a) {
                     showSearch && (react_1.default.createElement("div", { className: "", onClick: handleSearch },
                         react_1.default.createElement(search_icon_1.SearchIcon, { className: "size-5 cursor-pointer" }))),
                     loggedInUser ? (react_1.default.createElement(react_1.default.Fragment, null,
-                        (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.route) &&
-                            (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) &&
-                            !((_b = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) === null || _b === void 0 ? void 0 : _b.length) && (react_1.default.createElement("div", { className: "flex flex-col items-end justify-center" },
-                            react_1.default.createElement(link_1.default, { href: loggedInUser.route }, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl) ? (react_1.default.createElement(image_1.default, { alt: loggedInUser.firstName, className: avatarClassName, height: 40, src: loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl, width: 40 })) : (react_1.default.createElement(user_icon_1.UserIcon, { className: avatarClassName }))))),
-                        (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) &&
-                            (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems.length) > 0 && (react_1.default.createElement(react_2.Popover, { className: "relative" },
-                            react_1.default.createElement("div", { className: "flex flex-col items-end justify-start" },
-                                react_1.default.createElement(react_2.PopoverButton, null, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl) ? (react_1.default.createElement(image_1.default, { alt: loggedInUser.firstName, className: avatarClassName, height: 40, src: loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl, width: 40 })) : (react_1.default.createElement(user_icon_1.UserIcon, { className: avatarClassName })))),
-                            react_1.default.createElement(react_2.PopoverPanel, { transition: true, className: "absolute left-1/2 z-10 mt-2 flex w-screen max-w-min -translate-x-1/2 bg-transparent px-4 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in" },
-                                react_1.default.createElement("div", { className: "w-56 shrink rounded-xl bg-white p-4 text-sm/6 font-semibold text-gray-900 shadow-lg outline-1 outline-gray-900/5 dark:bg-gray-800 dark:text-white dark:shadow-none dark:outline dark:-outline-offset-1 dark:outline-white/10" }, (_c = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) === null || _c === void 0 ? void 0 : _c.map(function (_a) {
-                                    var label = _a.label, handleOnClick = _a.handleOnClick;
-                                    return (react_1.default.createElement("button", { key: label, className: "hover:text-primary dark:hover:text-primary/50 block cursor-pointer p-2", onClick: handleOnClick },
-                                        react_1.default.createElement("p", { className: "text-primary font-bold" }, label)));
-                                }))))))) : (react_1.default.createElement("div", { className: "flex items-center justify-end" }, headerActions
+                        react_1.default.createElement(logged_in_user_avatar_1.LoggedInUserAvatar, { loggedInUser: loggedInUser, avatarClassName: avatarClassName, notificationItems: notificationItems }))) : (react_1.default.createElement("div", { className: "flex items-center justify-end" }, headerActions
                         .filter(function (_a) {
                         var enabled = _a.enabled;
                         return enabled;

package/organisms/navbar/notification-item.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+interface NotificationItemProps {
+    avatarClassName: string;
+    id: string;
+    message: string;
+    time: string;
+}
+export declare const NotificationItem: FC<NotificationItemProps>;
+export {};

package/organisms/navbar/notification-item.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationItem = void 0;
+var react_timeago_1 = __importDefault(require("react-timeago"));
+var misc_1 = require("@appcorp/kismaa-utils/constants/misc");
+var react_1 = __importDefault(require("react"));
+var image_1 = __importDefault(require("next/image"));
+var NotificationItem = function (_a) {
+    var avatarClassName = _a.avatarClassName, message = _a.message, time = _a.time;
+    var formatter = function (value, unit) { return (react_1.default.createElement("p", { className: "text-xs font-normal text-gray-500" }, "".concat(value).concat(unit.charAt(0)))); };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { className: "flex w-full flex-row items-center justify-between gap-2 p-2" },
+            react_1.default.createElement(image_1.default, { alt: "avatar", className: avatarClassName, height: 40, src: misc_1.referenceAvatar, width: 40 }),
+            react_1.default.createElement("p", { className: "text-xs font-normal text-gray-500 dark:text-gray-400" }, message),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(react_timeago_1.default, { date: time, formatter: formatter })))));
+};
+exports.NotificationItem = NotificationItem;

package/organisms/navbar/props.js

@@ -48,6 +48,26 @@ exports.navbarData = {
             type: molecules_1.BUTTON_TYPES.SECONDARY,
         },
     ],
+    notificationItems: [
+        {
+            id: '1',
+            message: 'Missed chat opportunity with John Doe',
+            isRead: false,
+            time: new Date('2025-10-01T10:00:00Z').toLocaleDateString(),
+        },
+        {
+            id: '2',
+            message: 'Missed chat opportunity with John Doe',
+            isRead: true,
+            time: new Date('2025-05-01T10:00:00Z').toLocaleDateString(),
+        },
+        {
+            id: '3',
+            message: 'Missed chat opportunity with John Doe',
+            isRead: true,
+            time: new Date('2024-10-01T10:00:00Z').toLocaleDateString(),
+        },
+    ],
     handleMegaMenuToggle: function () { return void 0; },
     handleSearch: function () { return void 0; },
     isMobileMenuOpen: false,

package/organisms/navbar/type.d.ts

@@ -1,6 +1,6 @@
 import { MouseEvent } from 'react';
 import { BUTTON_TYPES, MegaMenuCardProps } from '../../molecules';
-import { USER_TYPE } from '@appcorp/kismaa-utils';
+import { USER_TYPE } from '@appcorp/kismaa-utils/api/type/user';
 export interface NavLinks {
     enabled: boolean;
     href: string;
@@ -28,6 +28,12 @@ export interface LoggedInUser {
     menuItems?: MenuItem[];
     userType?: USER_TYPE;
 }
+export interface Notification {
+    id: string;
+    message: string;
+    isRead: boolean;
+    time: string;
+}
 export interface NavbarProps {
     handleMegaMenuToggle: (e: MouseEvent<HTMLDivElement>) => void;
     handleSearch: () => void;
@@ -36,6 +42,7 @@ export interface NavbarProps {
     isMobileMenuOpen: boolean;
     loggedInUser: LoggedInUser | null;
     navLinks: NavLinks[];
+    notificationItems: Notification[] | [];
     showSearch?: boolean;
     toggleMobileMenu: () => void;
 }

package/organisms/user-cards-grid/props.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.userGridData = exports.userCardGridData = void 0;
-var kismaa_utils_1 = require("@appcorp/kismaa-utils");
+var psychic_1 = require("@appcorp/kismaa-utils/api/type/psychic");
 exports.userCardGridData = [
     {
         id: '1',
-        onlineStatus: kismaa_utils_1.PSYCHIC_ONLINE_STATUS.ONLINE,
+        onlineStatus: psychic_1.PSYCHIC_ONLINE_STATUS.ONLINE,
         imageSrc: 'https://ytiwekjzaihrkrirjgpk.supabase.co/storage/v1/object/public/publicBlob/assets/psychic.webp',
         imageAlt: '',
         name: 'Emma Thompson',
@@ -44,7 +44,7 @@ exports.userCardGridData = [
     },
     {
         id: '2',
-        onlineStatus: kismaa_utils_1.PSYCHIC_ONLINE_STATUS.ONLINE,
+        onlineStatus: psychic_1.PSYCHIC_ONLINE_STATUS.ONLINE,
         imageSrc: 'https://ytiwekjzaihrkrirjgpk.supabase.co/storage/v1/object/public/publicBlob/assets/psychic.webp',
         imageAlt: '',
         name: 'Michael Chen',
@@ -72,7 +72,7 @@ exports.userCardGridData = [
     },
     {
         id: '3',
-        onlineStatus: kismaa_utils_1.PSYCHIC_ONLINE_STATUS.OFFLINE,
+        onlineStatus: psychic_1.PSYCHIC_ONLINE_STATUS.OFFLINE,
         imageSrc: 'https://ytiwekjzaihrkrirjgpk.supabase.co/storage/v1/object/public/publicBlob/assets/psychic.webp',
         imageAlt: '',
         name: 'Sophia Rodriguez',
@@ -100,7 +100,7 @@ exports.userCardGridData = [
     },
     {
         id: '4',
-        onlineStatus: kismaa_utils_1.PSYCHIC_ONLINE_STATUS.ONLINE,
+        onlineStatus: psychic_1.PSYCHIC_ONLINE_STATUS.ONLINE,
         imageSrc: 'https://ytiwekjzaihrkrirjgpk.supabase.co/storage/v1/object/public/publicBlob/assets/psychic.webp',
         imageAlt: 'Alex Johnson',
         name: 'Alex Johnson',
@@ -127,7 +127,7 @@ exports.userCardGridData = [
     },
     {
         id: '5',
-        onlineStatus: kismaa_utils_1.PSYCHIC_ONLINE_STATUS.OFFLINE,
+        onlineStatus: psychic_1.PSYCHIC_ONLINE_STATUS.OFFLINE,
         imageSrc: 'https://ytiwekjzaihrkrirjgpk.supabase.co/storage/v1/object/public/publicBlob/assets/psychic.webp',
         imageAlt: 'Olivia Baker',
         name: 'Olivia Baker',
@@ -154,7 +154,7 @@ exports.userCardGridData = [
     },
     {
         id: '6',
-        onlineStatus: kismaa_utils_1.PSYCHIC_ONLINE_STATUS.ONLINE,
+        onlineStatus: psychic_1.PSYCHIC_ONLINE_STATUS.ONLINE,
         imageSrc: 'https://ytiwekjzaihrkrirjgpk.supabase.co/storage/v1/object/public/publicBlob/assets/psychic.webp',
         imageAlt: 'Daniel Lee',
         name: 'Daniel Lee',
@@ -182,7 +182,7 @@ exports.userCardGridData = [
     },
     {
         id: '7',
-        onlineStatus: kismaa_utils_1.PSYCHIC_ONLINE_STATUS.ONLINE,
+        onlineStatus: psychic_1.PSYCHIC_ONLINE_STATUS.ONLINE,
         imageSrc: 'https://ytiwekjzaihrkrirjgpk.supabase.co/storage/v1/object/public/publicBlob/assets/psychic.webp',
         imageAlt: 'Isbella Martineź',
         name: 'Isabella Martinez',
@@ -210,7 +210,7 @@ exports.userCardGridData = [
     },
     {
         id: '8',
-        onlineStatus: kismaa_utils_1.PSYCHIC_ONLINE_STATUS.BUSY,
+        onlineStatus: psychic_1.PSYCHIC_ONLINE_STATUS.BUSY,
         imageSrc: 'https://ytiwekjzaihrkrirjgpk.supabase.co/storage/v1/object/public/publicBlob/assets/psychic.webp',
         imageAlt: 'William Taylor',
         name: 'William Taylor',
@@ -238,7 +238,7 @@ exports.userCardGridData = [
     },
     {
         id: '9',
-        onlineStatus: kismaa_utils_1.PSYCHIC_ONLINE_STATUS.ONLINE,
+        onlineStatus: psychic_1.PSYCHIC_ONLINE_STATUS.ONLINE,
         imageSrc: 'https://ytiwekjzaihrkrirjgpk.supabase.co/storage/v1/object/public/publicBlob/assets/psychic.webp',
         imageAlt: 'Ava Wilson',
         name: 'Ava Wilson',
@@ -266,7 +266,7 @@ exports.userCardGridData = [
     },
     {
         id: '10',
-        onlineStatus: kismaa_utils_1.PSYCHIC_ONLINE_STATUS.ONLINE,
+        onlineStatus: psychic_1.PSYCHIC_ONLINE_STATUS.ONLINE,
         imageSrc: 'https://ytiwekjzaihrkrirjgpk.supabase.co/storage/v1/object/public/publicBlob/assets/psychic.webp',
         imageAlt: 'Ethan Brown',
         name: 'Ethan Brown',

package/organisms/user-details/props.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.userDetailsData = void 0;
-var kismaa_utils_1 = require("@appcorp/kismaa-utils");
+var psychic_1 = require("@appcorp/kismaa-utils/api/type/psychic");
 var props_1 = require("../attributes-section/props");
 exports.userDetailsData = {
     heading: 'Advisors',
@@ -10,7 +10,7 @@ exports.userDetailsData = {
     aboutTitle: 'About Me',
     description: 'My clairsentient abilities enable me to  receive psychic insights by sensing subtle energies and interpreting  images from my angels. Starting as a teenager, I discovered my unique  gift of consistently seeing a persons soul, always radiating  unconditional love, irrespective of their actions. Guided by my angels,  Ive honed this ability over 42 years of continuous learning. My extensive practice has allowed me to develop a range of skills,  including clairaudience, clairvoyance, empathic abilities, autowriting,  energy reading, and Tarot. Remote psychic readings are facilitated by  tapping into your energy field, providing accurate insights for both you and those close to you.',
     attributesData: props_1.attributesData,
-    onlineStatus: kismaa_utils_1.PSYCHIC_ONLINE_STATUS.ONLINE,
+    onlineStatus: psychic_1.PSYCHIC_ONLINE_STATUS.ONLINE,
     profileImageSrc: '/card-person.jpg',
     profileImageAlt: '',
     title: 'TRUE HEALER',

package/organisms/user-details/type.d.ts

@@ -1,4 +1,4 @@
-import { PSYCHIC_ONLINE_STATUS } from '@appcorp/kismaa-utils';
+import { PSYCHIC_ONLINE_STATUS } from '@appcorp/kismaa-utils/api/type/psychic';
 import { BreadcrumbsProps } from '../../molecules/breadcrumbs';
 import { AttributeItem } from '../attributes-section';
 import { Expertise } from '../extended-user-card';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/kismaa-web-ui",
-  "version": "0.2.65",
+  "version": "0.2.69",
   "source": "src/index.ts",
   "main": "lib/main.js",
   "module": "lib/module.js",
@@ -44,10 +44,9 @@
     }
   },
   "devDependencies": {
-    "@appcorp/app-corp-designs": "^0.4.92",
-    "@appcorp/app-corp-vista": "^0.3.35",
-    "@appcorp/kismaa-utils": "^0.2.57",
-    "@chromatic-com/storybook": "3.2.6",
+    "@appcorp/app-corp-vista": "^0.3.46",
+    "@appcorp/kismaa-utils": "^0.2.64",
+    "@chromatic-com/storybook": "^4",
     "@headlessui/react": "^2",
     "@headlessui/tailwindcss": "^0",
     "@heroicons/react": "^2",
@@ -56,16 +55,11 @@
     "@next/eslint-plugin-next": "^15",
     "@next/mdx": "^15",
     "@react-pakistan/util-functions": "^1.24.57",
-    "@storybook/addon-essentials": "^8",
-    "@storybook/addon-interactions": "^8",
-    "@storybook/addon-links": "^8",
-    "@storybook/addon-onboarding": "^8",
-    "@storybook/addon-themes": "^8",
-    "@storybook/blocks": "^8",
-    "@storybook/nextjs": "^8",
-    "@storybook/react": "^8",
-    "@storybook/test": "^8",
-    "@storybook/types": "^8",
+    "@storybook/addon-docs": "^9",
+    "@storybook/addon-links": "^9",
+    "@storybook/addon-onboarding": "^9",
+    "@storybook/addon-themes": "^9",
+    "@storybook/nextjs": "^9",
     "@tailwindcss/cli": "^4",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/postcss": "^4",
@@ -100,14 +94,20 @@
     "prettier-plugin-tailwindcss": "^0",
     "react": "^19",
     "react-dom": "^19",
+    "react-timeago": "^8.3.0",
     "rimraf": "^6",
-    "storybook": "^8",
+    "storybook": "^9",
     "swiper": "^11",
     "tailwindcss": "^4",
     "ts-jest": "^29",
     "ts-node": "^10",
     "typescript": "^5",
+    "uuid": "^13",
     "zod": "^4"
   },
-  "packageManager": "yarn@4.9.2"
+  "packageManager": "yarn@4.9.2",
+  "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "react-popper": "^2.3.0"
+  }
 }