indas-ui 0.0.1 → 0.1.0

package/dist/cjs/components/layout/top-header.js

@@ -0,0 +1,270 @@
+'use client';
+"use strict";
+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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopHeader = TopHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils.js");
+const ui_1 = require("../ui/index.js");
+const SessionAdapterContext_1 = require("../../contexts/SessionAdapterContext.js");
+const navigation_1 = require("next/navigation");
+const api_1 = require("../../lib/api/index.js");
+const dropdown_1 = require("../forms/dropdown/index.js");
+const InboxPanel_1 = require("@/app/(main)/activity/email/components/InboxPanel");
+const userprofile_dropdown_1 = require("./userprofile-dropdown.js");
+const AppConfigContext_1 = require("../../contexts/AppConfigContext.js");
+const NavigationContext_1 = require("../../contexts/NavigationContext.js");
+const EmailContext_1 = require("../../contexts/EmailContext.js");
+const MessagingContext_1 = require("../../contexts/MessagingContext.js");
+const messaging_panel_content_1 = require("../messaging/messaging-panel-content.js");
+const useNotifications_1 = require("../../hooks/useNotifications.js");
+const utils_2 = require("../../lib/utils.js");
+// Fallback production units if API fails
+const fallbackProductionUnits = [
+    { value: 'default', label: 'Default Unit' }
+];
+// Empty initial state - data comes from API only
+const defaultProductionUnits = [];
+function TopHeader({ className, sidebarCollapsed = true, onToggleSidebar, onToggleMobileSidebar }) {
+    const { data: session } = (0, SessionAdapterContext_1.useSessionAdapter)();
+    const companyName = session?.user?.CompanyName || '';
+    // Dynamic company logo: /app/{CompanyName}.png, fallback to /app/company-logo.png
+    const companyLogoSrc = companyName ? `/app/${companyName}.png` : '/app/company-logo.png';
+    const router = (0, navigation_1.useRouter)();
+    const appConfig = (0, AppConfigContext_1.useAppConfig)();
+    const { state: emailState } = (0, EmailContext_1.useEmail)();
+    const { state: messagingState } = (0, MessagingContext_1.useMessaging)();
+    const [productionUnits, setProductionUnits] = React.useState(defaultProductionUnits);
+    const [selectedUnit, setSelectedUnit] = React.useState('');
+    const [unitsLoading, setUnitsLoading] = React.useState(false);
+    const [apiCallMade, setApiCallMade] = React.useState(false);
+    const [searchQuery, setSearchQuery] = React.useState('');
+    const [showSearchModal, setShowSearchModal] = React.useState(false);
+    const [mounted, setMounted] = React.useState(false);
+    const [showEmailDropdown, setShowEmailDropdown] = React.useState(false);
+    const [commsPanelTab, setCommsPanelTab] = React.useState('messages');
+    // Notifications — extracted to useNotifications hook
+    const { notificationsLoading, showNotificationDropdown, setShowNotificationDropdown, activeNotificationCategory, setActiveNotificationCategory, notificationSearchQuery, setNotificationSearchQuery, getFilteredNotifications, getNotificationCounts, getUnreadCount, getUnreadCategoryCounts, markNotificationAsRead, markAllAsRead, deleteNotification, } = (0, useNotifications_1.useNotifications)(session);
+    // Fetch production units from API
+    React.useEffect(() => {
+        const fetchProductionUnits = async () => {
+            if (!session?.user) {
+                setUnitsLoading(false);
+                return;
+            }
+            // Prevent multiple simultaneous calls
+            if (unitsLoading || apiCallMade) {
+                return;
+            }
+            setUnitsLoading(true);
+            setApiCallMade(true);
+            // Set a timeout to prevent infinite loading
+            const timeoutId = setTimeout(() => {
+                setUnitsLoading(false);
+                setProductionUnits([]);
+            }, 10000);
+            try {
+                const response = await api_1.ProductionUnitsAPI.getProductionUnits(session);
+                if (response.success && response.data) {
+                    // Handle the nested ProductionUnits structure
+                    let unitsArray = response.data;
+                    if (response.data.ProductionUnits) {
+                        unitsArray = response.data.ProductionUnits;
+                    }
+                    if (Array.isArray(unitsArray)) {
+                        // Transform API data to match the expected format
+                        const units = unitsArray.map((unit) => {
+                            return {
+                                value: unit.ProductionUnitID || unit.Value || unit.value || unit.UnitCode || unit.unitCode || unit.id || unit.Id || unit.Code,
+                                label: unit.ProductionUnitName || unit.Label || unit.label || unit.UnitName || unit.unitName || unit.name || unit.Name || unit.Description
+                            };
+                        });
+                        if (units.length > 0) {
+                            setProductionUnits(units);
+                            // Set the first unit as default if no selection or current selection doesn't exist
+                            const unitExists = selectedUnit && units.some((unit) => unit.value === selectedUnit);
+                            if (!unitExists) {
+                                setSelectedUnit(units[0].value);
+                            }
+                        }
+                        else {
+                            setProductionUnits([]);
+                        }
+                    }
+                    else {
+                        setProductionUnits([]);
+                    }
+                }
+                else {
+                    setProductionUnits(fallbackProductionUnits);
+                    setSelectedUnit(fallbackProductionUnits[0].value);
+                }
+            }
+            catch (error) {
+                // Use fallback production units on any error
+                setProductionUnits(fallbackProductionUnits);
+                setSelectedUnit(fallbackProductionUnits[0].value);
+            }
+            finally {
+                clearTimeout(timeoutId);
+                setUnitsLoading(false);
+            }
+        };
+        fetchProductionUnits();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [session, selectedUnit]); // apiCallMade and unitsLoading are intentionally excluded - they're internal guards to prevent re-fetching
+    const { groupedModules, loading: navLoading } = (0, NavigationContext_1.useNavigation)();
+    // Flatten all modules for search
+    const allModules = React.useMemo(() => {
+        const modules = [];
+        groupedModules.forEach(group => {
+            group.modules?.forEach(module => {
+                const href = (0, utils_2.getModuleRoutePath)(module.ModuleName);
+                if (href !== '#') { // Skip non-clickable items
+                    modules.push({
+                        name: module.ModuleName,
+                        href,
+                        group: group.groupName
+                    });
+                }
+            });
+        });
+        return modules;
+    }, [groupedModules]);
+    const filteredResults = React.useMemo(() => {
+        if (!searchQuery.trim())
+            return { all: [], byGroup: {} };
+        const query = searchQuery.toLowerCase();
+        const filtered = allModules.filter(item => item.name.toLowerCase().includes(query) ||
+            item.group.toLowerCase().includes(query));
+        // Group results by group name
+        const byGroup = {};
+        filtered.forEach(item => {
+            if (!byGroup[item.group]) {
+                byGroup[item.group] = [];
+            }
+            byGroup[item.group].push(item);
+        });
+        return { all: filtered, byGroup };
+    }, [searchQuery, allModules]);
+    const handleSearchItemClick = (item) => {
+        setShowSearchModal(false);
+        setSearchQuery('');
+        router.push(item.href);
+    };
+    React.useEffect(() => {
+        setMounted(true);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("header", { className: (0, utils_1.cn)("sticky top-0 z-50 w-full", 
+            // Mobile: off-white surface with strong bottom depth
+            "bg-[rgb(var(--bg-subtle))] border-b border-[rgb(var(--bd-default))] shadow-[0_2px_8px_-2px_rgba(0,0,0,0.12)]", 
+            // Desktop: unchanged dark blue
+            "lg:bg-primary-hover lg:border-b lg:border-primary/20 lg:shadow-sm", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex h-14 lg:h-14 items-center justify-between px-2 pr-0 lg:px-6 gap-2 lg:gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 sm:gap-2 flex-shrink min-w-0", children: [onToggleSidebar && ((0, jsx_runtime_1.jsx)("button", { onClick: (e) => {
+                                    e.stopPropagation();
+                                    onToggleSidebar();
+                                }, className: "hidden lg:block p-2 text-white/60 hover:text-white transition-colors focus:outline-none flex-shrink-0", title: sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar", children: sidebarCollapsed ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftOpen, { className: "h-5 w-5" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { className: "h-5 w-5" })) })), (0, jsx_runtime_1.jsxs)("div", { className: "relative group/company flex-shrink", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => router.push('/home'), className: "text-[rgb(var(--color-primary))] lg:text-white font-bold text-lg lg:text-base lg:font-semibold hover:opacity-80 transition-colors cursor-pointer max-w-[200px] sm:max-w-[240px] md:max-w-[280px] lg:max-w-xs truncate", children: session?.user?.CompanyName || 'Loading...' }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-full left-0 mt-2 opacity-0 scale-95 pointer-events-none group-hover/company:opacity-100 group-hover/company:scale-100 group-hover/company:pointer-events-auto transition-all duration-200 z-50", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-[rgb(var(--bg-surface))] rounded-xl shadow-xl border border-[rgb(var(--bd-default))] overflow-hidden w-64", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 p-3.5 bg-[rgb(var(--bg-subtle))]", children: [(0, jsx_runtime_1.jsx)("img", { src: companyLogoSrc, onError: (e) => { e.target.src = '/app/company-logo.png'; }, alt: "", className: "h-10 w-10 rounded-lg object-contain bg-white p-1 shadow-sm border border-[rgb(var(--bd-default))]" }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold text-[rgb(var(--fg-default))] truncate", children: session?.user?.CompanyName || '-' }), (0, jsx_runtime_1.jsx)("p", { className: "text-[0.65rem] text-[rgb(var(--color-primary))] font-medium", children: session?.user?.FYear || '-' })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 space-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Factory, { className: "h-3.5 w-3.5 text-[rgb(var(--fg-muted))] flex-shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-default))]", children: productionUnits.find(u => u.value === selectedUnit)?.label || '-' })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.User, { className: "h-3.5 w-3.5 text-[rgb(var(--fg-muted))] flex-shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-default))]", children: session?.user?.name || '-' })] })] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "hidden sm:block w-20 sm:w-28 md:w-36 lg:w-40 flex-shrink-0", children: mounted ? ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: unitsLoading ? [{ value: '', label: 'Loading...', disabled: true }] : productionUnits, value: selectedUnit, onValueChange: (value) => {
+                                        const unitValue = Array.isArray(value) ? value[0] : String(value || '');
+                                        setSelectedUnit(unitValue);
+                                        appConfig.setSelectedProductionUnit(unitValue);
+                                    }, placeholder: "Unit", disabled: unitsLoading, triggerClassName: "bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-default))] lg:bg-white/10 lg:text-white text-[10px] sm:text-xs border-[rgb(var(--bd-default))] lg:border-white/20 lg:hover:bg-white/15 lg:focus:bg-white/15 lg:focus:ring-white/30 py-1 px-1.5 sm:px-2 min-h-0 h-6 sm:h-7" })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))] lg:bg-white/10 lg:text-white text-[10px] sm:text-xs border border-[rgb(var(--bd-default))] lg:border-white/20 rounded-md py-1 px-1.5 sm:px-2 h-6 sm:h-7 flex items-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-muted))] lg:text-white/60", children: "Loading..." }) })) }), (0, jsx_runtime_1.jsx)("div", { className: "hidden sm:block w-fit flex-shrink-0", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-[rgb(var(--bg-subtle))] lg:bg-white/10 text-[10px] sm:text-xs border border-[rgb(var(--bd-default))] lg:border-white/20 rounded-md py-1 px-2 sm:px-3 h-6 sm:h-7 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-[rgb(var(--fg-default))] lg:text-white font-medium whitespace-nowrap", children: session?.user?.FYear || 'N/A' }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "hidden xl:flex items-center text-[rgb(var(--fg-default))] lg:text-white/90 text-sm font-medium max-w-48 flex-shrink", children: [(0, jsx_runtime_1.jsxs)("span", { className: "truncate", children: ["Hello ", session?.user?.name || 'User'] }), !unitsLoading && apiCallMade && productionUnits.length === 0 && session && ((0, jsx_runtime_1.jsx)("span", { className: "ml-2 text-xs text-red-300", children: "(Units unavailable)" }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 lg:gap-3 flex-shrink-0 ml-auto", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setShowSearchModal(!showSearchModal), className: "hidden sm:inline-flex md:hidden p-2 rounded-lg text-[rgb(var(--fg-muted))] lg:text-white/80 hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))] lg:hover:text-white lg:hover:bg-white/10 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "h-[1.125rem] w-[1.125rem]" }) }), (0, jsx_runtime_1.jsx)("div", { className: "hidden md:block", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-[rgb(var(--fg-muted))] lg:text-white/60" }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search modules...", value: searchQuery, onChange: (e) => {
+                                                        setSearchQuery(e.target.value);
+                                                        if (e.target.value.length > 0) {
+                                                            setShowSearchModal(true);
+                                                        }
+                                                        else {
+                                                            setShowSearchModal(false);
+                                                        }
+                                                    }, onBlur: () => setTimeout(() => setShowSearchModal(false), 200), className: "pl-10 pr-3 py-1 w-56 lg:w-72 h-8 text-xs rounded-md border bg-[rgb(var(--bg-subtle))] lg:bg-white/10 border-[rgb(var(--bd-default))] lg:border-white/20 text-[rgb(var(--fg-default))] lg:text-white placeholder:text-[rgb(var(--fg-muted))] lg:placeholder:text-white/60 focus:outline-none lg:focus:bg-white/15 lg:focus:border-white/30 lg:focus:ring-2 lg:focus:ring-white/20 transition-all duration-200" })] }) }), showSearchModal && filteredResults.all.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-40 md:hidden bg-black/20", onClick: () => {
+                                                    setShowSearchModal(false);
+                                                    setSearchQuery('');
+                                                } }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("absolute z-50 bg-[rgb(var(--bg-surface))] rounded-lg shadow-xl border border-[rgb(var(--bd-default))] overflow-hidden", "md:top-full md:left-0 md:mt-2 md:w-80", "max-md:fixed max-md:inset-x-4 max-md:top-16 max-md:max-w-md max-md:mx-auto"), children: [(0, jsx_runtime_1.jsx)("div", { className: "md:hidden p-3 border-b border-[rgb(var(--bd-default))]", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-[rgb(var(--fg-muted))]" }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search modules...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), autoFocus: true, className: "pl-10 pr-3 py-2 w-full text-sm rounded-md border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-default))] placeholder:text-[rgb(var(--fg-muted))] focus:outline-none" })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "max-h-96 overflow-y-auto", children: filteredResults.all.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "p-8 text-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "h-10 w-10 text-[rgb(var(--fg-muted))] mx-auto mb-2 opacity-30" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: navLoading ? 'Loading...' : 'No results found' })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.entries(filteredResults.byGroup).map(([groupName, items]) => ((0, jsx_runtime_1.jsxs)("div", { className: "py-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "px-4 py-1.5 bg-[rgb(var(--bg-subtle))]", children: (0, jsx_runtime_1.jsx)("h4", { className: "text-xs font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wide", children: groupName }) }), (0, jsx_runtime_1.jsx)("div", { className: "px-2 py-1", children: items.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { onClick: () => handleSearchItemClick(item), className: "flex items-center gap-3 px-3 py-2 rounded-md hover:bg-[rgb(var(--bg-hover))] cursor-pointer group", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "h-4 w-4 text-[rgb(var(--fg-muted))] group-hover:text-[rgb(var(--color-primary))] flex-shrink-0" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-medium text-sm text-[rgb(var(--fg-default))] group-hover:text-[rgb(var(--color-primary))]", children: item.name }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-[rgb(var(--fg-muted))] truncate", children: item.href })] })] }, index))) })] }, groupName))) })) }), filteredResults.all.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "px-4 py-2 border-t border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: [filteredResults.all.length, " result", filteredResults.all.length !== 1 ? 's' : ''] }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "Click to navigate" })] }))] })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex lg:hidden items-center gap-3 overflow-visible", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative flex items-center justify-center w-5 h-5", children: [(0, jsx_runtime_1.jsx)("button", { className: "text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))] transition-colors", onClick: () => setShowEmailDropdown(!showEmailDropdown), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { className: "h-[1.1rem] w-[1.1rem]" }) }), (emailState.unreadCount + messagingState.totalUnreadCount) > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-1 -right-1.5 min-w-[1rem] h-4 px-0.5 text-[9px] font-bold rounded-full flex items-center justify-center pointer-events-none z-10 bg-[rgb(var(--color-primary))] text-[rgb(var(--color-primary-foreground))]", children: (emailState.unreadCount + messagingState.totalUnreadCount) > 99 ? '99+' : (emailState.unreadCount + messagingState.totalUnreadCount) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex items-center justify-center w-5 h-5", children: [(0, jsx_runtime_1.jsx)("button", { className: "text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))] transition-colors", onClick: () => setShowNotificationDropdown(!showNotificationDropdown), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { className: "h-[1.1rem] w-[1.1rem]" }) }), getUnreadCount() > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-1 -right-1.5 min-w-[1rem] h-4 px-0.5 text-[9px] font-bold rounded-full flex items-center justify-center pointer-events-none z-10 bg-[rgb(var(--color-primary))] text-[rgb(var(--color-primary-foreground))]", children: getUnreadCount() > 99 ? '99+' : getUnreadCount() }))] }), (0, jsx_runtime_1.jsx)("div", { className: "w-px h-4 bg-[rgb(var(--bd-default))]" }), (0, jsx_runtime_1.jsx)(userprofile_dropdown_1.UserDropdown, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)(ui_1.Button, { iconOnly: true, variant: "ghost", size: "sm", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { className: "h-4 w-4" }), className: "relative hidden lg:inline-flex p-1.5 sm:p-2 text-white/80 hover:text-white hover:bg-white/10", onClick: () => setShowEmailDropdown(!showEmailDropdown), children: [(emailState.unreadCount + messagingState.totalUnreadCount) > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute top-0 right-0 min-w-[18px] h-[18px] px-1 bg-red-600 text-white text-[10px] font-bold rounded-full flex items-center justify-center shadow-lg border-2 border-[rgb(var(--color-primary))]", children: (emailState.unreadCount + messagingState.totalUnreadCount) > 99 ? '99+' : (emailState.unreadCount + messagingState.totalUnreadCount) }), (0, jsx_runtime_1.jsx)("span", { className: "absolute top-0 right-0 w-2.5 h-2.5 bg-red-600 rounded-full animate-ping" })] })), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Communications" })] }), showEmailDropdown && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-40", onClick: () => setShowEmailDropdown(false) }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("z-50", "fixed top-14 left-2 right-2 sm:absolute sm:top-auto sm:left-auto sm:right-0 sm:mt-2 sm:w-[28rem]"), children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-[rgb(var(--bg-surface))] rounded-xl shadow-xl border border-[rgb(var(--bd-default))] overflow-hidden", children: [(0, jsx_runtime_1.jsx)("div", { className: "px-3 pt-3 pb-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex rounded-lg bg-[rgb(var(--bg-subtle))] p-0.5", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setCommsPanelTab('messages'), className: (0, utils_1.cn)('flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-md text-xs font-medium transition-all duration-150', commsPanelTab === 'messages'
+                                                                            ? 'bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] shadow-sm'
+                                                                            : 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))]'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { className: "w-3.5 h-3.5" }), "Messages", messagingState.totalUnreadCount > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "min-w-[1rem] h-4 px-1 rounded-full bg-[rgb(var(--color-primary))] text-white text-[9px] font-bold flex items-center justify-center", children: messagingState.totalUnreadCount > 99 ? '99+' : messagingState.totalUnreadCount }))] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setCommsPanelTab('email'), className: (0, utils_1.cn)('flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-md text-xs font-medium transition-all duration-150', commsPanelTab === 'email'
+                                                                            ? 'bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] shadow-sm'
+                                                                            : 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))]'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { className: "w-3.5 h-3.5" }), "Email", emailState.unreadCount > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "min-w-[1rem] h-4 px-1 rounded-full bg-[rgb(var(--color-primary))] text-white text-[9px] font-bold flex items-center justify-center", children: emailState.unreadCount > 99 ? '99+' : emailState.unreadCount }))] })] }) }), commsPanelTab === 'email' ? ((0, jsx_runtime_1.jsx)(InboxPanel_1.EmailPanelContent, { onClose: () => setShowEmailDropdown(false) })) : ((0, jsx_runtime_1.jsx)(messaging_panel_content_1.MessagingPanelContent, { onClose: () => setShowEmailDropdown(false) }))] }) })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { iconOnly: true, variant: "ghost", size: "sm", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { className: "h-4 w-4" }), className: "relative hidden lg:inline-flex p-1.5 sm:p-2 text-white/80 hover:text-white hover:bg-white/10", onClick: () => setShowNotificationDropdown(!showNotificationDropdown) }), getUnreadCount() > 0 && (() => {
+                                        const catCounts = getUnreadCategoryCounts();
+                                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 text-[10px] font-bold rounded-full items-center justify-center shadow-lg pointer-events-none z-10 bg-[rgb(var(--fg-default))] text-[rgb(var(--bg-surface))] hidden lg:flex", children: getUnreadCount() > 99 ? '99+' : getUnreadCount() }), (0, jsx_runtime_1.jsxs)("span", { className: "absolute -bottom-1.5 left-1/2 -translate-x-1/2 gap-0.5 pointer-events-none hidden lg:flex", children: [catCounts.escalations > 0 && (0, jsx_runtime_1.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-red-500" }), catCounts.pending > 0 && (0, jsx_runtime_1.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-amber-400" }), catCounts.updates > 0 && (0, jsx_runtime_1.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-blue-400" })] })] }));
+                                    })(), showNotificationDropdown && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-40", onClick: () => {
+                                                    setShowNotificationDropdown(false);
+                                                    setNotificationSearchQuery('');
+                                                } }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("z-50 bg-[rgb(var(--bg-surface))] rounded-2xl shadow-2xl border border-[rgb(var(--bd-default))] overflow-hidden", "fixed top-14 left-2 right-2 sm:absolute sm:top-auto sm:left-auto sm:right-0 sm:mt-2 sm:w-[28rem]"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-5 pt-5 pb-0 bg-[rgb(var(--bg-surface))]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 mb-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-bold text-[rgb(var(--fg-default))] flex-shrink-0", children: "Notifications" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[rgb(var(--fg-muted))]" }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search...", value: notificationSearchQuery, onChange: (e) => setNotificationSearchQuery(e.target.value), className: "w-full pl-9 pr-3 py-1.5 text-sm rounded-lg border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-default))] placeholder:text-[rgb(var(--fg-muted))] focus:outline-none focus:border-[rgb(var(--color-primary))] focus:bg-[rgb(var(--bg-surface))] transition-colors" })] }), (0, jsx_runtime_1.jsx)("button", { onClick: (e) => {
+                                                                            e.stopPropagation();
+                                                                            setShowNotificationDropdown(false);
+                                                                            router.push('/settings?tab=notifications');
+                                                                        }, className: "p-2 rounded-lg text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))] transition-colors flex-shrink-0", title: "Notification Settings", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { className: "h-4 w-4" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 overflow-x-auto pb-3 scrollbar-hide", children: [
+                                                                    { key: 'all', label: 'All', count: getNotificationCounts().all, activeClass: 'bg-[rgb(var(--fg-default))] text-white' },
+                                                                    { key: 'pending', label: 'Pending', count: getNotificationCounts().pending, activeClass: 'bg-amber-500 text-white' },
+                                                                    { key: 'escalations', label: 'Escalations', count: getNotificationCounts().escalations, activeClass: 'bg-red-500 text-white' },
+                                                                    { key: 'updates', label: 'Updates', count: getNotificationCounts().updates, activeClass: 'bg-blue-500 text-white' }
+                                                                ].map((category) => {
+                                                                    const isActive = activeNotificationCategory === category.key;
+                                                                    return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => setActiveNotificationCategory(category.key), className: (0, utils_1.cn)("inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold transition-all duration-200 whitespace-nowrap border", isActive
+                                                                            ? `${category.activeClass} border-transparent shadow-sm`
+                                                                            : "bg-transparent text-[rgb(var(--fg-muted))] border-[rgb(var(--bd-default))] hover:bg-[rgb(var(--bg-hover))]"), children: [category.label, (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] leading-none rounded-full font-bold", isActive
+                                                                                    ? 'bg-white/20 text-inherit'
+                                                                                    : 'bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-muted))]'), children: category.count })] }, category.key));
+                                                                }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "max-h-[400px] overflow-y-auto bg-[rgb(var(--bg-subtle))]", children: notificationsLoading ? ((0, jsx_runtime_1.jsxs)("div", { className: "p-8 text-center bg-[rgb(var(--bg-surface))]", children: [(0, jsx_runtime_1.jsx)("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-[rgb(var(--color-primary))] mx-auto" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))] mt-3", children: "Loading..." })] })) : getFilteredNotifications().length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "p-10 text-center bg-[rgb(var(--bg-surface))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { className: "h-12 w-12 mx-auto mb-3 text-[rgb(var(--fg-muted))] opacity-30" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: notificationSearchQuery ? 'No matching notifications' : 'All caught up! No notifications here.' })] })) : ((0, jsx_runtime_1.jsx)("div", { children: getFilteredNotifications().map((notification) => {
+                                                                const IconComponent = (0, useNotifications_1.getNotificationIcon)(notification);
+                                                                const iconBoxColors = (0, useNotifications_1.getIconBoxColors)(notification);
+                                                                return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("group px-5 py-4 flex gap-4 border-b border-[rgb(var(--bd-subtle))] transition-colors cursor-pointer relative", "hover:bg-[rgb(var(--bg-hover))]", !notification.isRead
+                                                                        ? "bg-[rgb(var(--bg-surface))]"
+                                                                        : "bg-[rgb(var(--bg-subtle))]/60"), onClick: () => {
+                                                                        if (!notification.isRead) {
+                                                                            markNotificationAsRead(notification.notificationId);
+                                                                        }
+                                                                        if (notification.actionUrl) {
+                                                                            setShowNotificationDropdown(false);
+                                                                            router.push(notification.actionUrl);
+                                                                        }
+                                                                    }, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center", iconBoxColors), children: (0, jsx_runtime_1.jsx)(IconComponent, { className: "h-5 w-5" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: (0, utils_1.cn)("text-sm leading-snug", notification.isRead
+                                                                                                ? "text-[rgb(var(--fg-default))] font-medium"
+                                                                                                : "text-[rgb(var(--fg-default))] font-bold"), children: notification.title }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-1 flex-shrink-0", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[11px] text-[rgb(var(--fg-muted))] whitespace-nowrap", children: (0, useNotifications_1.formatTimeAgo)(notification.createdAt) }), !notification.isRead && ((0, jsx_runtime_1.jsx)("span", { className: "w-2 h-2 rounded-full bg-[rgb(var(--color-primary))]" }))] })] }), notification.message && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-1 line-clamp-2 leading-relaxed", children: notification.message }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity bg-white/80 backdrop-blur-sm rounded-lg p-1 shadow-sm border border-[rgb(var(--bd-default))]", children: [!notification.isRead && ((0, jsx_runtime_1.jsx)("button", { onClick: (e) => {
+                                                                                        e.stopPropagation();
+                                                                                        markNotificationAsRead(notification.notificationId);
+                                                                                    }, className: "w-7 h-7 rounded-md border border-[rgb(var(--bd-default))] bg-white flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-emerald-500 hover:border-emerald-500 transition-colors", title: "Mark as read", children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCheck, { className: "h-3.5 w-3.5" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: (e) => {
+                                                                                        e.stopPropagation();
+                                                                                        deleteNotification(notification.notificationId);
+                                                                                    }, className: "w-7 h-7 rounded-md border border-[rgb(var(--bd-default))] bg-white flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-red-500 hover:border-red-500 transition-colors", title: "Dismiss", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { className: "h-3.5 w-3.5" }) })] })] }, notification.notificationId));
+                                                            }) })) }), (0, jsx_runtime_1.jsxs)("div", { className: "px-5 py-3 border-t border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] flex items-center justify-between", children: [getUnreadCount() > 0 ? ((0, jsx_runtime_1.jsx)("button", { className: "text-sm text-[rgb(var(--color-primary))] hover:underline font-semibold transition-colors", onClick: (e) => {
+                                                                    e.stopPropagation();
+                                                                    markAllAsRead();
+                                                                }, children: "Mark all as read" })) : ((0, jsx_runtime_1.jsx)("span", {})), (0, jsx_runtime_1.jsx)("button", { className: "text-sm text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] font-medium transition-colors", onClick: () => {
+                                                                    setShowNotificationDropdown(false);
+                                                                    setNotificationSearchQuery('');
+                                                                    router.push('/activity/notifications');
+                                                                }, children: "View History" })] })] })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "hidden lg:block", children: (0, jsx_runtime_1.jsx)(userprofile_dropdown_1.UserDropdown, {}) })] })] }) }) }));
+}

package/dist/cjs/components/layout/userprofile-dropdown.js

@@ -0,0 +1,100 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserDropdown = UserDropdown;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SessionAdapterContext_1 = require("../../contexts/SessionAdapterContext.js");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const navigation_1 = require("next/navigation");
+const logout_modal_1 = require("../modals/logout-modal.js");
+const device_detection_1 = require("../../lib/utils/device-detection.js");
+const logout_cleanup_1 = require("../../lib/utils/logout-cleanup.js");
+const useNotifications_1 = require("../../hooks/useNotifications.js");
+function UserDropdown() {
+    const { data: session, signOut } = (0, SessionAdapterContext_1.useSessionAdapter)();
+    const { getNotificationCounts } = (0, useNotifications_1.useNotifications)(session);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [showLogoutModal, setShowLogoutModal] = (0, react_1.useState)(false);
+    const [sessionDuration, setSessionDuration] = (0, react_1.useState)('0h 0m');
+    const router = (0, navigation_1.useRouter)();
+    // Pending tasks = notifications in the "Pending" section (category === 'Pending')
+    const pendingCount = getNotificationCounts().pending;
+    // Calculate session duration
+    (0, react_1.useEffect)(() => {
+        const calculateSessionDuration = () => {
+            const loginTime = session?.user?.loginTime || sessionStorage.getItem('loginTime');
+            if (!loginTime)
+                return;
+            const diffMs = Date.now() - new Date(loginTime).getTime();
+            const hours = Math.floor(diffMs / (1000 * 60 * 60));
+            const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+            setSessionDuration(`${hours}h ${minutes}m`);
+        };
+        calculateSessionDuration();
+        const interval = setInterval(calculateSessionDuration, 60000);
+        return () => clearInterval(interval);
+    }, [session]);
+    // Profile picture from localStorage
+    const [profilePicture, setProfilePicture] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const savedPicture = localStorage.getItem('userProfilePicture');
+        if (savedPicture)
+            setProfilePicture(savedPicture);
+        const handleStorageChange = (e) => {
+            if (e.key === 'userProfilePicture')
+                setProfilePicture(e.newValue);
+        };
+        window.addEventListener('storage', handleStorageChange);
+        return () => window.removeEventListener('storage', handleStorageChange);
+    }, []);
+    const handleOpenLogoutModal = () => {
+        setShowLogoutModal(true);
+    };
+    const profileAvatarSmall = ((0, jsx_runtime_1.jsx)("div", { className: "h-8 w-8 rounded-full overflow-hidden flex items-center justify-center", children: profilePicture ? ((0, jsx_runtime_1.jsx)("img", { src: profilePicture, alt: "Profile", className: "h-full w-full object-cover" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.CircleUser, { className: "h-8 w-8 text-[rgb(var(--fg-muted))] lg:text-white/80", strokeWidth: 1.5 })) }));
+    const profileAvatarLarge = ((0, jsx_runtime_1.jsx)("div", { className: "h-10 w-10 rounded-full overflow-hidden flex items-center justify-center flex-shrink-0", children: profilePicture ? ((0, jsx_runtime_1.jsx)("img", { src: profilePicture, alt: "Profile", className: "h-full w-full object-cover border border-[rgb(var(--bd-default))] rounded-full" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.CircleUser, { className: "h-10 w-10 text-[rgb(var(--fg-muted))]", strokeWidth: 1.5 })) }));
+    const getSessionData = () => {
+        const device = (0, device_detection_1.detectDevice)();
+        const currentDevice = {
+            id: (0, device_detection_1.getDeviceId)(),
+            name: (0, device_detection_1.getDeviceName)(),
+            type: device.deviceType,
+            browser: device.browser,
+            os: device.os,
+            lastUsed: new Date(),
+            isCurrent: true
+        };
+        return {
+            duration: sessionDuration,
+            startTime: new Date(session?.user?.loginTime || sessionStorage.getItem('loginTime') || new Date().toISOString()),
+            tasks: { overdue: 0, dueSoon: pendingCount, total: pendingCount },
+            activeDevices: [currentDevice],
+            isInactivityWarning: false
+        };
+    };
+    const handleLogout = async () => {
+        try {
+            await (0, logout_cleanup_1.performLogoutCleanup)();
+            const origin = typeof window !== 'undefined' ? window.location.origin : '';
+            await signOut({ callbackUrl: `${origin}/login`, redirect: true });
+        }
+        catch {
+            const origin = typeof window !== 'undefined' ? window.location.origin : '';
+            await signOut({ callbackUrl: `${origin}/login`, redirect: true });
+        }
+    };
+    if (!session?.user)
+        return null;
+    const { user } = session;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setIsOpen(!isOpen), className: "flex items-center justify-center h-10 w-10 rounded-full text-[rgb(var(--fg-muted))] lg:text-white/80 hover:text-[rgb(var(--color-primary))] lg:hover:text-white lg:hover:bg-white/10 transition-colors", children: profileAvatarSmall }), isOpen && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute right-0 mt-2 w-60 bg-[rgb(var(--bg-surface))] rounded-xl shadow-xl border border-[rgb(var(--bd-default))] z-50 overflow-hidden", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-3.5 border-b border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))]", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [profileAvatarLarge, (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold text-[rgb(var(--fg-default))] truncate", children: user.name }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))] truncate", children: user.email }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-1.5 inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[0.65rem] font-medium border", style: {
+                                                        background: `rgb(var(${user.IsAdmin ? '--color-error' : '--color-success'}) / 0.08)`,
+                                                        borderColor: `rgb(var(${user.IsAdmin ? '--color-error' : '--color-success'}) / 0.2)`,
+                                                        color: `rgb(var(${user.IsAdmin ? '--color-error' : '--color-success'}))`
+                                                    }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Shield, { className: "h-2.5 w-2.5" }), user.IsAdmin ? 'Administrator' : 'User'] })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "p-1.5", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => { setIsOpen(false); router.push('/settings'); }, className: "flex items-center w-full gap-2.5 px-3 py-2 text-sm text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))] rounded-lg transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { className: "h-3.5 w-3.5 text-[rgb(var(--color-icon))]" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Settings" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => {
+                                            setIsOpen(false);
+                                            handleOpenLogoutModal();
+                                        }, className: "flex items-center w-full gap-2.5 px-3 py-2 text-sm text-[rgb(var(--color-error))] hover:bg-[rgb(var(--color-error)/0.08)] rounded-lg transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { className: "h-3.5 w-3.5" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Log Out" })] })] })] })] })), (0, jsx_runtime_1.jsx)(logout_modal_1.LogoutModal, { isOpen: showLogoutModal, onClose: () => setShowLogoutModal(false), onLogout: handleLogout, onLogoutEverywhere: handleLogout, sessionData: getSessionData(), onExtendSession: () => setShowLogoutModal(false), onViewTasks: () => {
+                    setShowLogoutModal(false);
+                    router.push('/activity/notifications');
+                } })] }));
+}

package/dist/cjs/components/master/editable-cells/EditableCell.js

@@ -0,0 +1,106 @@
+'use client';
+"use strict";
+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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableDecimalCell = exports.EditableNumberCell = exports.EditableTextCell = void 0;
+exports.EditableCell = EditableCell;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const ui_1 = require("../../ui/index.js");
+const lucide_react_1 = require("lucide-react");
+/**
+ * Unified Editable Cell Component
+ * Supports text, number, and decimal editing
+ *
+ * @example
+ * // Text editing
+ * <EditableCell value="John" onSave={handleSave} type="text" />
+ *
+ * // Integer editing
+ * <EditableCell value={100} onSave={handleSave} type="number" />
+ *
+ * // Decimal editing
+ * <EditableCell value={99.99} onSave={handleSave} type="decimal" step="0.01" />
+ */
+function EditableCell({ value, onSave, type = 'text', step = '0.01', className = 'w-full h-8 text-sm', placeholder = '-', disabled = false, editAffordance = false, editTitle, formatDisplay }) {
+    const [isEditing, setIsEditing] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState(value.toString());
+    const display = value !== '' && value != null && formatDisplay ? formatDisplay(value) : value;
+    React.useEffect(() => {
+        if (!isEditing)
+            setInputValue(value.toString());
+    }, [value, isEditing]);
+    const handleSave = () => {
+        let newValue = inputValue;
+        // Parse based on type
+        if (type === 'number') {
+            newValue = parseInt(inputValue) || 0;
+        }
+        else if (type === 'decimal') {
+            newValue = parseFloat(inputValue) || 0;
+        }
+        // Only save if changed
+        if (newValue !== value) {
+            onSave(newValue);
+        }
+        setIsEditing(false);
+    };
+    const handleCancel = () => {
+        setInputValue(value.toString());
+        setIsEditing(false);
+    };
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter') {
+            handleSave();
+        }
+        else if (e.key === 'Escape') {
+            handleCancel();
+        }
+    };
+    if (isEditing) {
+        return ((0, jsx_runtime_1.jsx)(ui_1.Input, { value: inputValue, onChange: (e) => setInputValue(e.target.value), onBlur: handleSave, onKeyDown: handleKeyPress, className: className, autoFocus: true, type: type === 'text' ? 'text' : 'number', step: type === 'decimal' ? step : undefined }));
+    }
+    if (editAffordance) {
+        return ((0, jsx_runtime_1.jsxs)("span", { className: `group/edit inline-flex items-center gap-1 max-w-full -mx-1 px-1 rounded transition-colors ${disabled ? 'cursor-not-allowed opacity-60' : 'cursor-text hover:bg-[rgb(var(--bg-muted))]'}`, onClick: () => !disabled && setIsEditing(true), title: disabled ? undefined : editTitle, children: [(0, jsx_runtime_1.jsx)("span", { className: "truncate", children: display || placeholder }), !disabled && ((0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { className: "h-3 w-3 flex-shrink-0 text-[rgb(var(--fg-muted))] opacity-0 group-hover/edit:opacity-100 transition-opacity" }))] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: `px-2 py-1 rounded ${disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-[rgb(var(--bg-muted))]'}`, onClick: () => !disabled && setIsEditing(true), children: display || placeholder }));
+}
+// Export type-specific aliases for backwards compatibility with type-safe callbacks
+const EditableTextCell = (props) => ((0, jsx_runtime_1.jsx)(EditableCell, { ...props, type: "text", onSave: props.onSave }));
+exports.EditableTextCell = EditableTextCell;
+const EditableNumberCell = (props) => ((0, jsx_runtime_1.jsx)(EditableCell, { ...props, type: "number", onSave: props.onSave }));
+exports.EditableNumberCell = EditableNumberCell;
+const EditableDecimalCell = (props) => ((0, jsx_runtime_1.jsx)(EditableCell, { ...props, type: "decimal", step: props.step, onSave: props.onSave }));
+exports.EditableDecimalCell = EditableDecimalCell;

package/dist/cjs/components/master/editable-cells/index.js

@@ -0,0 +1,17 @@
+'use client';
+"use strict";
+/**
+ * Unified Editable Cell Components
+ *
+ * Single source of truth for editable cell functionality in master pages.
+ *
+ * @example
+ * import { EditableCell, EditableTextCell, EditableDecimalCell } from './index.js'
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableDecimalCell = exports.EditableNumberCell = exports.EditableTextCell = exports.EditableCell = void 0;
+var EditableCell_1 = require("./EditableCell.js");
+Object.defineProperty(exports, "EditableCell", { enumerable: true, get: function () { return EditableCell_1.EditableCell; } });
+Object.defineProperty(exports, "EditableTextCell", { enumerable: true, get: function () { return EditableCell_1.EditableTextCell; } });
+Object.defineProperty(exports, "EditableNumberCell", { enumerable: true, get: function () { return EditableCell_1.EditableNumberCell; } });
+Object.defineProperty(exports, "EditableDecimalCell", { enumerable: true, get: function () { return EditableCell_1.EditableDecimalCell; } });

package/dist/cjs/components/master/index.js

@@ -0,0 +1,9 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableDecimalCell = exports.EditableTextCell = exports.EditableCell = void 0;
+// Editable Cells
+var editable_cells_1 = require("./editable-cells/index.js");
+Object.defineProperty(exports, "EditableCell", { enumerable: true, get: function () { return editable_cells_1.EditableCell; } });
+Object.defineProperty(exports, "EditableTextCell", { enumerable: true, get: function () { return editable_cells_1.EditableTextCell; } });
+Object.defineProperty(exports, "EditableDecimalCell", { enumerable: true, get: function () { return editable_cells_1.EditableDecimalCell; } });