indas-ui 0.0.1 → 0.1.1

package/dist/cjs/components/layout/bottom-nav.js

@@ -0,0 +1,262 @@
+'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.DEFAULT_QUICK_TABS = exports.MODULE_ICON_MAP = void 0;
+exports.getIconByName = getIconByName;
+exports.getIconForPath = getIconForPath;
+exports.getNameForPath = getNameForPath;
+exports.getQuickTabs = getQuickTabs;
+exports.setQuickTabs = setQuickTabs;
+exports.resetQuickTabs = resetQuickTabs;
+exports.BottomNav = BottomNav;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const navigation_1 = require("next/navigation");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils.js");
+const useTranslation_1 = require("../../hooks/useTranslation.js");
+const NavigationContext_1 = require("../../contexts/NavigationContext.js");
+// ── Icon name registry — maps lucide-react icon name strings to components ──
+// Add new icons here as the DB starts referencing them.
+const ICON_NAME_MAP = {
+    Home: lucide_react_1.Home, MessageSquare: lucide_react_1.MessageSquare, ClipboardCheck: lucide_react_1.ClipboardCheck, Calculator: lucide_react_1.Calculator, Menu: lucide_react_1.Menu,
+    Receipt: lucide_react_1.Receipt, Database: lucide_react_1.Database, Cog: lucide_react_1.Cog, Layers: lucide_react_1.Layers, Boxes: lucide_react_1.Boxes, BookOpen: lucide_react_1.BookOpen,
+    Activity: lucide_react_1.Activity, TrendingUp: lucide_react_1.TrendingUp, Users: lucide_react_1.Users, Settings: lucide_react_1.Settings,
+    Tag: lucide_react_1.Tag, BarChart3: lucide_react_1.BarChart3, Bell: lucide_react_1.Bell, Sparkles: lucide_react_1.Sparkles, FileText: lucide_react_1.FileText, FileCheck: lucide_react_1.FileCheck, Mail: lucide_react_1.Mail, Building: lucide_react_1.Building,
+};
+/** Resolve a lucide-react icon by name string (from DB IconName column). */
+function getIconByName(name) {
+    if (!name)
+        return null;
+    return ICON_NAME_MAP[name] || null;
+}
+// ── Path-based fallback (used when DB IconName is missing) ──
+const MODULE_ICON_MAP = {
+    '/home': lucide_react_1.Home,
+    '/synthia': lucide_react_1.Sparkles,
+    '/enquiry': lucide_react_1.FileText,
+    '/enquiry/sales': lucide_react_1.FileText,
+    '/enquiry/rate': lucide_react_1.TrendingUp,
+    '/costing/estimation': lucide_react_1.Calculator,
+    '/costing/quote-panel': lucide_react_1.FileCheck,
+    '/costing/price-approval': lucide_react_1.Receipt,
+    '/costing/grid-costing': lucide_react_1.BarChart3,
+    '/activity/notifications': lucide_react_1.Bell,
+    '/activity/email': lucide_react_1.Mail,
+    '/activity/auditlogs': lucide_react_1.Activity,
+    '/activity/messages': lucide_react_1.MessageSquare,
+    '/master/user': lucide_react_1.Users,
+    '/master/customer': lucide_react_1.Users,
+    '/master/item': lucide_react_1.Boxes,
+    '/master/machine': lucide_react_1.Cog,
+    '/master/process': lucide_react_1.Layers,
+    '/master/ledger': lucide_react_1.BookOpen,
+    '/master/category': lucide_react_1.Tag,
+    '/master/material-group': lucide_react_1.Database,
+    '/master/rate': lucide_react_1.TrendingUp,
+    '/master/tool': lucide_react_1.Settings,
+    '/master/company': lucide_react_1.Building,
+    '/report': lucide_react_1.BarChart3,
+    '/dashboard': lucide_react_1.BarChart3,
+    '/dashboard/sales': lucide_react_1.BarChart3,
+    '/settings': lucide_react_1.Settings,
+};
+exports.MODULE_ICON_MAP = MODULE_ICON_MAP;
+function getIconForPath(path) {
+    return MODULE_ICON_MAP[path] || lucide_react_1.ClipboardCheck;
+}
+// ── Canonical short names for bottom nav display ──
+const MODULE_NAME_MAP = {
+    '/home': 'Home',
+    '/synthia': 'Parkbuddy',
+    '/enquiry': 'Enquiry',
+    '/enquiry/sales': 'Enquiry',
+    '/enquiry/rate': 'Rate Enquiry',
+    '/costing/estimation': 'Estimation',
+    '/costing/quote-panel': 'Approvals',
+    '/costing/price-approval': 'Price Appr.',
+    '/costing/grid-costing': 'Grid Costing',
+    '/activity/notifications': 'Alerts',
+    '/activity/email': 'Email',
+    '/activity/auditlogs': 'Audit Logs',
+    '/activity/messages': 'Messages',
+    '/master/user': 'Users',
+    '/master/customer': 'Customers',
+    '/master/item': 'Items',
+    '/master/machine': 'Machines',
+    '/master/process': 'Processes',
+    '/master/ledger': 'Ledgers',
+    '/master/category': 'Categories',
+    '/master/material-group': 'Materials',
+    '/master/rate': 'Rates',
+    '/master/tool': 'Tools',
+    '/master/company': 'Company',
+    '/report': 'Reports',
+    '/dashboard': 'Dashboard',
+    '/dashboard/sales': 'Sales',
+    '/settings': 'Settings',
+};
+function getNameForPath(path, fallback) {
+    return MODULE_NAME_MAP[path] || fallback;
+}
+// ── Default middle 3 tabs ──
+const DEFAULT_QUICK_TABS = [
+    { name: 'Enquiry', path: '/enquiry/sales' },
+    { name: 'Parkbuddy', path: '/synthia' },
+    { name: 'Approvals', path: '/costing/quote-panel' },
+];
+exports.DEFAULT_QUICK_TABS = DEFAULT_QUICK_TABS;
+const STORAGE_KEY = 'bottom-nav-quick-tabs-v4';
+/** Read saved quick tabs from localStorage */
+function getQuickTabs() {
+    if (typeof window === 'undefined')
+        return DEFAULT_QUICK_TABS;
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            if (Array.isArray(parsed) && parsed.length === 3)
+                return parsed;
+        }
+    }
+    catch { }
+    return DEFAULT_QUICK_TABS;
+}
+/** Save quick tabs to localStorage */
+function setQuickTabs(tabs) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(tabs.slice(0, 3)));
+    window.dispatchEvent(new CustomEvent('quick-tabs-changed'));
+}
+/** Reset to defaults */
+function resetQuickTabs() {
+    localStorage.removeItem(STORAGE_KEY);
+    window.dispatchEvent(new CustomEvent('quick-tabs-changed'));
+}
+function BottomNav({ onOpenMenu, navRef }) {
+    const pathname = (0, navigation_1.usePathname)();
+    const router = (0, navigation_1.useRouter)();
+    const { t } = (0, useTranslation_1.useTranslation)();
+    const { groupedModules } = (0, NavigationContext_1.useNavigation)();
+    const [quickTabs, setQuickTabsState] = React.useState(DEFAULT_QUICK_TABS);
+    // Build a path → module lookup so we can resolve IconName / DisplayName from DB
+    const moduleByPath = React.useMemo(() => {
+        const map = new Map();
+        const visit = (mod) => {
+            const path = (0, utils_1.getModuleRoutePath)(mod.ModuleName);
+            if (path && path !== '#') {
+                map.set(path, { displayName: mod.ModuleDisplayName, iconName: mod.IconName });
+            }
+            if (Array.isArray(mod.children))
+                for (const c of mod.children)
+                    visit(c);
+        };
+        for (const g of groupedModules)
+            for (const m of g.modules)
+                visit(m);
+        return map;
+    }, [groupedModules]);
+    // Load from localStorage on mount + listen for changes
+    React.useEffect(() => {
+        setQuickTabsState(getQuickTabs());
+        const handleChange = () => setQuickTabsState(getQuickTabs());
+        window.addEventListener('quick-tabs-changed', handleChange);
+        window.addEventListener('storage', handleChange);
+        return () => {
+            window.removeEventListener('quick-tabs-changed', handleChange);
+            window.removeEventListener('storage', handleChange);
+        };
+    }, []);
+    const isActive = (path) => {
+        if (path === '/home')
+            return pathname === '/home' || pathname === '/';
+        return pathname === path || pathname?.startsWith(path + '/');
+    };
+    // Fixed tabs — always present. Filter them out of quickTabs to prevent duplicate keys.
+    const FIXED_PATHS = new Set(['/home']);
+    const filteredQuickTabs = quickTabs.filter(t => !FIXED_PATHS.has(t.path));
+    // Resolve current pathname to a known module path
+    const currentModulePath = React.useMemo(() => {
+        if (!pathname)
+            return null;
+        // Try exact match first, then progressively shorter prefixes
+        const candidates = Object.keys(MODULE_NAME_MAP);
+        // Exact match
+        if (candidates.includes(pathname))
+            return pathname;
+        // Prefix match — longest wins (e.g. /enquiry/sales before /enquiry)
+        const sorted = candidates.sort((a, b) => b.length - a.length);
+        for (const c of sorted) {
+            if (pathname === c || pathname.startsWith(c + '/'))
+                return c;
+        }
+        return null;
+    }, [pathname]);
+    const baseTabs = [
+        { name: 'Home', path: '/home' },
+        ...filteredQuickTabs,
+    ];
+    // If user is on a page not in their tabs, show it as a dynamic 5th tab
+    const isCurrentInTabs = baseTabs.some(tab => {
+        if (tab.path === '/home')
+            return pathname === '/home' || pathname === '/';
+        return pathname === tab.path || pathname?.startsWith(tab.path + '/');
+    });
+    const dynamicTab = (!isCurrentInTabs && currentModulePath)
+        ? (() => {
+            const mod = moduleByPath.get(currentModulePath);
+            return {
+                name: mod?.displayName || getNameForPath(currentModulePath, currentModulePath.split('/').pop() || ''),
+                path: currentModulePath,
+                iconName: mod?.iconName,
+                isDynamic: true,
+            };
+        })()
+        : null;
+    const allTabs = [
+        ...baseTabs.map(t => ({ ...t, isDynamic: false })),
+        ...(dynamicTab ? [dynamicTab] : []),
+    ];
+    return ((0, jsx_runtime_1.jsx)("nav", { ref: navRef, id: "mobile-bottom-nav", className: "fixed bottom-0 left-0 right-0 z-50 lg:hidden bg-[rgb(var(--bg-surface))] border-t border-[rgb(var(--bd-default))] transition-transform duration-200", style: { paddingBottom: 'env(safe-area-inset-bottom, 0px)' }, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex h-14 px-1", children: [allTabs.map((tab) => {
+                    const active = isActive(tab.path);
+                    const mod = moduleByPath.get(tab.path);
+                    const Icon = getIconByName(tab.iconName) || getIconByName(mod?.iconName) || getIconForPath(tab.path);
+                    return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => router.push(tab.path), className: (0, utils_1.cn)('relative flex items-center justify-center flex-1 transition-all duration-200 touch-manipulation mx-0.5', active
+                            ? 'flex-col gap-1 -mt-3 h-[68px] rounded-t-2xl border border-b-0 border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))]'
+                            : 'flex-col gap-1 h-14 bg-transparent hover:bg-[rgb(var(--bg-hover))]'), children: [active && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute -left-2 bottom-0 w-2 h-2 pointer-events-none", children: (0, jsx_runtime_1.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 8 8", className: "absolute bottom-0 right-0", children: (0, jsx_runtime_1.jsx)("path", { d: "M8,0 Q8,8 0,8 L0,0 Z", fill: "rgb(var(--bg-surface))" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "absolute -right-2 bottom-0 w-2 h-2 pointer-events-none", children: (0, jsx_runtime_1.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 8 8", className: "absolute bottom-0 left-0", children: (0, jsx_runtime_1.jsx)("path", { d: "M0,0 Q0,8 8,8 L8,0 Z", fill: "rgb(var(--bg-surface))" }) }) })] })), tab.isDynamic && !active && ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-1.5 w-1 h-1 rounded-full bg-[rgb(var(--color-primary))]" })), tab.path === '/synthia' && !mod?.iconName ? ((0, jsx_runtime_1.jsx)("img", { src: "/app/synthia-logo.png", alt: "", className: (0, utils_1.cn)('transition-all duration-200 shrink-0 h-5 w-5 rounded object-contain', active && 'h-6 w-6') })) : ((0, jsx_runtime_1.jsx)(Icon, { className: (0, utils_1.cn)('transition-all duration-200 shrink-0', active
+                                    ? 'h-5 w-5 text-[rgb(var(--color-error-hover))] stroke-[2.5]'
+                                    : 'h-5 w-5 text-[rgb(var(--fg-muted))]') })), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-[0.6rem] leading-none mt-0.5 truncate max-w-full px-0.5', active ? 'font-semibold text-[rgb(var(--color-error-hover))]' : 'font-medium text-[rgb(var(--fg-muted))]'), children: t(mod?.displayName || tab.name) })] }, tab.path));
+                }), (0, jsx_runtime_1.jsxs)("button", { onClick: onOpenMenu, className: "relative flex flex-col items-center justify-center gap-1 flex-1 h-14 bg-transparent hover:bg-[rgb(var(--bg-hover))] transition-colors touch-manipulation mx-0.5", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Menu, { className: "h-5 w-5 text-[rgb(var(--fg-muted))]" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[0.6rem] leading-none font-medium text-[rgb(var(--fg-muted))]", children: t('Menu') })] })] }) }));
+}

package/dist/cjs/components/layout/floating-action-button.js

@@ -0,0 +1,77 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingActionButton = FloatingActionButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils.js");
+function FloatingActionButton({ actions, className }) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [pos, setPos] = (0, react_1.useState)(null);
+    const dragging = (0, react_1.useRef)(false);
+    const hasMoved = (0, react_1.useRef)(false);
+    const startPointer = (0, react_1.useRef)({ x: 0, y: 0 });
+    const startPos = (0, react_1.useRef)({ x: 0, y: 0 });
+    const fabRef = (0, react_1.useRef)(null);
+    // Initialise position from saved value or default bottom-right
+    (0, react_1.useEffect)(() => {
+        const saved = localStorage.getItem('fabPos');
+        if (saved) {
+            try {
+                setPos(JSON.parse(saved));
+            }
+            catch { /* ignore */ }
+        }
+        else {
+            setPos({ x: window.innerWidth - 64, y: window.innerHeight - 100 });
+        }
+    }, []);
+    const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (!fabRef.current)
+            return;
+        dragging.current = true;
+        hasMoved.current = false;
+        startPointer.current = { x: e.clientX, y: e.clientY };
+        const rect = fabRef.current.getBoundingClientRect();
+        startPos.current = { x: rect.left, y: rect.top };
+        fabRef.current.setPointerCapture(e.pointerId);
+        e.preventDefault();
+    }, []);
+    const onPointerMove = (0, react_1.useCallback)((e) => {
+        if (!dragging.current || !fabRef.current)
+            return;
+        const dx = e.clientX - startPointer.current.x;
+        const dy = e.clientY - startPointer.current.y;
+        if (Math.abs(dx) > 4 || Math.abs(dy) > 4)
+            hasMoved.current = true;
+        const size = 48;
+        const newX = clamp(startPos.current.x + dx, 0, window.innerWidth - size);
+        const newY = clamp(startPos.current.y + dy, 0, window.innerHeight - size);
+        setPos({ x: newX, y: newY });
+    }, []);
+    const onPointerUp = (0, react_1.useCallback)((e) => {
+        if (!dragging.current)
+            return;
+        dragging.current = false;
+        if (pos)
+            localStorage.setItem('fabPos', JSON.stringify(pos));
+        // Only toggle open if it was a tap, not a drag
+        if (!hasMoved.current)
+            setOpen(prev => !prev);
+        e.preventDefault();
+    }, [pos]);
+    const handleAction = (action) => {
+        setOpen(false);
+        action.onClick();
+    };
+    if (!pos)
+        return null;
+    const actionsAbove = pos.y > window.innerHeight / 2;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: fabRef, style: { left: pos.x, top: pos.y, touchAction: 'none' }, className: (0, utils_1.cn)('fixed z-50 lg:hidden', className), onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, children: [open && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('absolute right-0 flex flex-col gap-2 w-48 animate-in fade-in duration-200', actionsAbove
+                    ? 'bottom-full mb-4 slide-in-from-bottom-4'
+                    : 'top-full mt-4 slide-in-from-top-4'), onPointerDown: e => e.stopPropagation(), children: actions.map((action, idx) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => handleAction(action), className: (0, utils_1.cn)('w-full justify-start px-4 py-2.5 rounded-xl text-sm font-semibold text-left', 'bg-[rgb(var(--bg-surface))]/95 hover:bg-[rgb(var(--bg-surface))]', 'text-[rgb(var(--color-primary))]', 'border-2 border-[rgb(var(--color-success))]/60 hover:border-[rgb(var(--color-success))]', 'shadow-md hover:shadow-lg backdrop-blur-sm', 'transition-all duration-200 hover:scale-105 active:scale-95', 'whitespace-nowrap'), children: action.label }, idx))) })), (0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)('h-12 w-12 rounded-xl flex items-center justify-center', 'bg-[rgb(var(--color-primary))]/50 hover:bg-[rgb(var(--color-primary))]/65', 'border-2 border-[rgb(var(--color-primary))]/60 hover:border-[rgb(var(--color-primary))]/75', 'shadow-lg', 'transition-all duration-300 ease-out', 'hover:scale-110 active:scale-95', open && 'rotate-45'), "aria-label": open ? 'Close actions' : 'Open actions', "aria-expanded": open, onPointerDown: e => e.stopPropagation(), onClick: () => !hasMoved.current && setOpen(prev => !prev), children: open
+                    ? (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-8 w-8 text-[rgb(var(--color-primary-foreground))] stroke-[3] transition-transform duration-300" })
+                    : (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { className: "h-8 w-8 text-[rgb(var(--color-primary-foreground))] stroke-[3] transition-transform duration-300" }) })] }));
+}

package/dist/cjs/components/layout/footer.js

@@ -0,0 +1,60 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = Footer;
+exports.CompactFooter = CompactFooter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../lib/utils.js");
+const useTranslation_1 = require("../../hooks/useTranslation.js");
+function Footer({ kpis, actions, iconButtons, leftContent, className, sticky = false, compact = false, padding, variant = 'page', gradient = false }) {
+    if (!kpis && !actions && !leftContent && !iconButtons) {
+        return null;
+    }
+    const isModal = variant === 'modal';
+    // Get variant colors — CSS variables only (theme-safe)
+    const getVariantColors = (variant = 'default') => {
+        switch (variant) {
+            case 'primary':
+                return 'bg-[rgb(var(--color-primary))]/10 hover:bg-[rgb(var(--color-primary))]/20 text-[rgb(var(--color-primary))]';
+            case 'success':
+                return 'bg-[rgb(var(--color-success))]/10 hover:bg-[rgb(var(--color-success))]/20 text-[rgb(var(--color-success))]';
+            case 'warning':
+                return 'bg-[rgb(var(--color-warning))]/10 hover:bg-[rgb(var(--color-warning))]/20 text-[rgb(var(--color-warning))]';
+            case 'error':
+                return 'bg-[rgb(var(--color-error))]/10 hover:bg-[rgb(var(--color-error))]/20 text-[rgb(var(--color-error))]';
+            case 'info':
+                return 'bg-[rgb(var(--color-info))]/10 hover:bg-[rgb(var(--color-info))]/20 text-[rgb(var(--color-info))]';
+            default:
+                return 'bg-[rgb(var(--bg-subtle))] hover:bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))]';
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("footer", { className: (0, utils_1.cn)("border-t border-[rgb(var(--bd-default))]", 
+        // Background variants
+        !gradient && "bg-[rgb(var(--bg-surface))]", 
+        // Shadow
+        !isModal && "shadow-lg", 
+        // Mobile (< lg): sit ABOVE the fixed bottom nav (h-16, lg:hidden) and span the
+        // full width — there is no sidebar, so no left offset. Desktop: bottom edge,
+        // left margin for the collapsed sidebar.
+        sticky && "fixed right-0 z-[25] bottom-16 lg:bottom-0", sticky && !isModal && "left-0 lg:left-14", 
+        // Shrink behavior for modal
+        isModal && "flex-shrink-0", className), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 sm:gap-4", 
+            // Responsive padding
+            isModal ? "px-3 sm:px-4 md:px-6" : "px-2 sm:px-4", padding === 'compact' ? "py-1" :
+                padding === 'medium' ? "py-1.5 sm:py-2" :
+                    padding === 'normal' ? "py-3 sm:py-4" :
+                        compact ? "py-1" :
+                            isModal ? "py-1.5 sm:py-2" : "py-3 sm:py-4"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center gap-2 sm:gap-4 w-full sm:w-auto", children: [leftContent, kpis && kpis.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-3 sm:gap-6 md:gap-8", children: kpis.map((kpi) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm", kpi.onClick && "cursor-pointer hover:text-[rgb(var(--color-primary-hover))] transition-colors"), onClick: kpi.onClick, children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-[rgb(var(--fg-muted))] whitespace-nowrap", children: [kpi.label, ":"] }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-[rgb(var(--fg-default))]", children: typeof kpi.value === 'number'
+                                            ? kpi.value.toLocaleString()
+                                            : kpi.value }), kpi.trend && ((0, jsx_runtime_1.jsxs)("span", { className: (0, utils_1.cn)("text-xs font-medium", kpi.trend.direction === 'up'
+                                            ? "text-[rgb(var(--color-success))]"
+                                            : "text-[rgb(var(--color-error))]"), children: [kpi.trend.direction === 'up' ? '↑' : '↓', Math.abs(kpi.trend.value), "%"] }))] }, kpi.id))) }))] }), iconButtons && iconButtons.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-2", children: iconButtons.map((button) => {
+                        const Icon = button.icon;
+                        return ((0, jsx_runtime_1.jsxs)("button", { onClick: button.onClick, disabled: button.disabled, className: (0, utils_1.cn)("group relative flex flex-col items-center justify-center gap-0.5 sm:gap-1 rounded-lg sm:rounded-xl p-1.5 sm:p-2.5 min-w-[48px] sm:min-w-[64px] transition-all duration-200", getVariantColors(button.variant), button.disabled && "opacity-50 cursor-not-allowed", !button.disabled && "hover:scale-105 active:scale-95"), title: button.label, children: [(0, jsx_runtime_1.jsx)(Icon, { className: "h-4 w-4 sm:h-5 sm:w-5" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[9px] sm:text-[10px] font-medium", children: button.label })] }, button.id));
+                    }) })), actions && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-2 md:gap-3 w-full sm:w-auto justify-end", children: actions }))] }) }));
+}
+// Compact footer variant for minimal footprints
+function CompactFooter({ className, children }) {
+    const { t } = (0, useTranslation_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsx)("footer", { className: (0, utils_1.cn)("bg-[rgb(var(--bg-subtle))] border-t border-[rgb(var(--bd-default))] py-2 px-4", className), children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-[rgb(var(--fg-muted))]", children: children || t("Indas Estimo 3.0 ©2025") }) }) }));
+}

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

@@ -0,0 +1,18 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidePanel = exports.FloatingActionButton = exports.Grid = exports.Page = exports.AppShell = exports.CompactFooter = exports.Footer = exports.DynamicSidebar = void 0;
+// Layout Components - Centralized exports
+var sidebar_1 = require("./sidebar.js");
+Object.defineProperty(exports, "DynamicSidebar", { enumerable: true, get: function () { return sidebar_1.DynamicSidebar; } });
+var footer_1 = require("./footer.js");
+Object.defineProperty(exports, "Footer", { enumerable: true, get: function () { return footer_1.Footer; } });
+Object.defineProperty(exports, "CompactFooter", { enumerable: true, get: function () { return footer_1.CompactFooter; } });
+var app_shell_1 = require("./app-shell.js");
+Object.defineProperty(exports, "AppShell", { enumerable: true, get: function () { return app_shell_1.AppShell; } });
+Object.defineProperty(exports, "Page", { enumerable: true, get: function () { return app_shell_1.Page; } });
+Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return app_shell_1.Grid; } });
+var floating_action_button_1 = require("./floating-action-button.js");
+Object.defineProperty(exports, "FloatingActionButton", { enumerable: true, get: function () { return floating_action_button_1.FloatingActionButton; } });
+var side_panel_1 = require("./side-panel.js");
+Object.defineProperty(exports, "SidePanel", { enumerable: true, get: function () { return side_panel_1.SidePanel; } });

package/dist/cjs/components/layout/mobile-menu-sheet.js

@@ -0,0 +1,195 @@
+'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.MobileMenuSheet = MobileMenuSheet;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const navigation_1 = require("next/navigation");
+const SessionAdapterContext_1 = require("../../contexts/SessionAdapterContext.js");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils.js");
+const NavigationContext_1 = require("../../contexts/NavigationContext.js");
+const ModuleAuthContext_1 = require("../../contexts/ModuleAuthContext.js");
+const useTranslation_1 = require("../../hooks/useTranslation.js");
+const useNotifications_1 = require("../../hooks/useNotifications.js");
+const utils_2 = require("../../lib/utils.js");
+// Reuse sidebar icon mapping
+function getGroupIcon(groupName) {
+    const name = groupName.toLowerCase();
+    if (name.includes('dashboard') || name.includes('home'))
+        return lucide_react_1.Gauge;
+    if (name.includes('sales'))
+        return lucide_react_1.TrendingUp;
+    if (name.includes('enquiry') || name.includes('inquiry') || name.includes('lead'))
+        return lucide_react_1.MessageSquare;
+    if (name.includes('estimation') || name.includes('estimate') || name.includes('costing'))
+        return lucide_react_1.Calculator;
+    if (name.includes('quotation') || name.includes('quote'))
+        return lucide_react_1.Receipt;
+    if (name.includes('masters') || name.includes('master'))
+        return lucide_react_1.Database;
+    if (name.includes('user') && name.includes('management'))
+        return lucide_react_1.UserCog;
+    if (name.includes('company') || name.includes('branch'))
+        return lucide_react_1.Building;
+    if (name.includes('category') || name.includes('tag'))
+        return lucide_react_1.Tag;
+    if (name.includes('process'))
+        return lucide_react_1.Layers;
+    if (name.includes('machine') || name.includes('equipment'))
+        return lucide_react_1.Cog;
+    if (name.includes('item') || name.includes('product') || name.includes('inventory'))
+        return lucide_react_1.Boxes;
+    if (name.includes('ledger') || name.includes('account'))
+        return lucide_react_1.BookOpen;
+    if (name.includes('mis') || name.includes('report'))
+        return lucide_react_1.PieChart;
+    if (name.includes('analytics') || name.includes('analysis'))
+        return lucide_react_1.BarChart3;
+    if (name.includes('order') || name.includes('purchase'))
+        return lucide_react_1.ShoppingCart;
+    if (name.includes('price') || name.includes('material'))
+        return lucide_react_1.DollarSign;
+    if (name.includes('quality') || name.includes('control'))
+        return lucide_react_1.Shield;
+    if (name.includes('production') || name.includes('manufacturing'))
+        return lucide_react_1.Factory;
+    if (name.includes('customer') || name.includes('client'))
+        return lucide_react_1.Users;
+    if (name.includes('setting') || name.includes('config'))
+        return lucide_react_1.Settings;
+    if (name.includes('target') || name.includes('goal'))
+        return lucide_react_1.Target;
+    if (name.includes('activity') || name.includes('email') || name.includes('notification') || name.includes('audit'))
+        return lucide_react_1.Activity;
+    return lucide_react_1.ClipboardCheck;
+}
+function MobileMenuSheet({ open, onClose }) {
+    const pathname = (0, navigation_1.usePathname)();
+    const router = (0, navigation_1.useRouter)();
+    const { data: session } = (0, SessionAdapterContext_1.useSessionAdapter)();
+    const { t } = (0, useTranslation_1.useTranslation)();
+    const { mobileModules } = (0, NavigationContext_1.useNavigation)();
+    const { hasAccess } = (0, ModuleAuthContext_1.useModuleAuth)();
+    const { getUnreadCount } = (0, useNotifications_1.useNotifications)(session);
+    const [searchQuery, setSearchQuery] = React.useState('');
+    const [expandedGroups, setExpandedGroups] = React.useState([]);
+    const searchRef = React.useRef(null);
+    // Reset search when sheet opens — expand only the active group
+    React.useEffect(() => {
+        if (open) {
+            setSearchQuery('');
+            const activeGroups = mobileModules
+                .filter(group => group.modules.some(mod => {
+                const path = (0, utils_2.getModuleRoutePath)(mod.ModuleName);
+                return pathname === path || pathname?.startsWith(path + '/');
+            }))
+                .map(g => g.groupName);
+            setExpandedGroups(activeGroups.length > 0 ? activeGroups : [mobileModules[0]?.groupName].filter(Boolean));
+        }
+    }, [open, mobileModules, pathname]);
+    // Prevent body scroll when open
+    React.useEffect(() => {
+        if (open) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+        return () => { document.body.style.overflow = ''; };
+    }, [open]);
+    const toggleGroup = (groupName) => {
+        setExpandedGroups(prev => prev.includes(groupName)
+            ? prev.filter(g => g !== groupName)
+            : [...prev, groupName]);
+    };
+    // Filter modules by search query and permissions
+    const filteredGroups = React.useMemo(() => {
+        const query = searchQuery.toLowerCase().trim();
+        return mobileModules
+            .map(group => ({
+            ...group,
+            modules: group.modules.filter(mod => {
+                const path = (0, utils_2.getModuleRoutePath)(mod.ModuleName);
+                if (path === '#')
+                    return false;
+                if (!hasAccess(path))
+                    return false;
+                if (!query)
+                    return true;
+                const displayName = (mod.ModuleDisplayName || mod.ModuleName).toLowerCase();
+                return displayName.includes(query) || group.groupName.toLowerCase().includes(query);
+            }),
+        }))
+            .filter(group => group.modules.length > 0);
+    }, [mobileModules, searchQuery, hasAccess]);
+    // When searching, expand all matching groups
+    React.useEffect(() => {
+        if (searchQuery.trim()) {
+            setExpandedGroups(filteredGroups.map(g => g.groupName));
+        }
+    }, [searchQuery, filteredGroups]);
+    const handleNavigate = (path) => {
+        onClose();
+        router.push(path);
+    };
+    const userName = session?.user?.name || 'User';
+    const userRole = session?.user?.RoleName || session?.user?.roleName || '';
+    const notifCount = getUnreadCount();
+    const isModuleActive = (path) => {
+        if (!pathname)
+            return false;
+        if (pathname === path)
+            return true;
+        return pathname.startsWith(path + '/');
+    };
+    const getInitials = (name) => {
+        return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('fixed inset-0 z-[60] bg-black/50 transition-opacity duration-300 lg:hidden', open ? 'opacity-100' : 'opacity-0 pointer-events-none'), onClick: onClose }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('fixed inset-x-0 bottom-0 z-[61] lg:hidden', 'bg-[rgb(var(--bg-surface))] rounded-t-2xl shadow-2xl', 'transform transition-transform duration-300 ease-out', 'max-h-[85vh] flex flex-col', open ? 'translate-y-0' : 'translate-y-full'), children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-center pt-2.5 pb-1", children: (0, jsx_runtime_1.jsx)("div", { className: "w-9 h-1 rounded-full bg-[rgb(var(--bd-default))]" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 px-4 py-2.5 border-b border-[rgb(var(--bd-default))]", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-8 h-8 rounded-full bg-[rgb(var(--bg-subtle))] border border-[rgb(var(--bd-default))] flex items-center justify-center flex-shrink-0", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-[rgb(var(--fg-muted))]", children: getInitials(userName) }) }), (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 leading-tight", children: userName }), userRole && ((0, jsx_runtime_1.jsx)("p", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] truncate", children: userRole }))] }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "p-2 -mr-1 rounded-lg text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-hover))] transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4.5 w-4.5" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "px-4 py-2.5", 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 -translate-y-1/2 h-3.5 w-3.5 text-[rgb(var(--fg-muted))]" }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: t('Search modules...'), value: searchQuery, onChange: e => setSearchQuery(e.target.value), className: "w-full pl-9 pr-8 py-2 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))] transition-colors" }), searchQuery && ((0, jsx_runtime_1.jsx)("button", { onClick: () => { setSearchQuery(''); searchRef.current?.focus(); }, className: "absolute right-2.5 top-1/2 -translate-y-1/2 p-0.5 rounded text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-3.5 w-3.5" }) }))] }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto px-2 pb-2", children: filteredGroups.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "py-12 text-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "h-8 w-8 mx-auto mb-2 text-[rgb(var(--fg-muted))] opacity-30" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: t('No modules found') })] })) : (filteredGroups.map(group => {
+                            const GroupIcon = getGroupIcon(group.groupName);
+                            const isExpanded = expandedGroups.includes(group.groupName);
+                            return ((0, jsx_runtime_1.jsxs)("div", { className: "mb-0.5", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => toggleGroup(group.groupName), className: "w-full flex items-center gap-2.5 px-3 py-2.5 rounded-lg text-left hover:bg-[rgb(var(--bg-hover))] transition-colors min-h-[2.75rem]", children: [(0, jsx_runtime_1.jsx)(GroupIcon, { className: "h-4 w-4 text-[rgb(var(--fg-muted))] flex-shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wide flex-1", children: t(group.groupName) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: (0, utils_1.cn)('h-3.5 w-3.5 text-[rgb(var(--fg-muted))]/50 transition-transform duration-200', isExpanded && 'rotate-90') })] }), isExpanded && ((0, jsx_runtime_1.jsx)("div", { className: "ml-5 pl-3 border-l-2 border-[rgb(var(--bd-default))]/50 mb-1", children: group.modules.map(mod => {
+                                            const path = (0, utils_2.getModuleRoutePath)(mod.ModuleName);
+                                            const displayName = mod.ModuleDisplayName || mod.ModuleName;
+                                            const isActive = isModuleActive(path);
+                                            const isNotif = path === '/activity/notifications';
+                                            return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleNavigate(path), className: (0, utils_1.cn)('w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-left transition-colors min-h-[2.5rem]', isActive
+                                                    ? 'bg-[rgb(var(--bg-subtle))] font-semibold'
+                                                    : 'hover:bg-[rgb(var(--bg-hover))]'), children: [(0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-sm flex-1 text-[rgb(var(--fg-default))]', isActive && 'font-semibold'), children: t(displayName) }), isActive && ((0, jsx_runtime_1.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-[rgb(var(--fg-default))] flex-shrink-0" })), isNotif && notifCount > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "min-w-[1.25rem] h-5 px-1 text-[10px] font-bold rounded-full bg-[rgb(var(--color-error))] text-white flex items-center justify-center", children: notifCount > 99 ? '99+' : notifCount }))] }, mod.ModuleName));
+                                        }) }))] }, group.groupName));
+                        })) }), (0, jsx_runtime_1.jsx)("div", { className: "border-t border-[rgb(var(--bd-default))] px-4", style: { paddingBottom: 'env(safe-area-inset-bottom, 0px)' }, children: (0, jsx_runtime_1.jsxs)("button", { onClick: () => handleNavigate('/settings'), className: "w-full flex items-center gap-2.5 px-3 py-3 text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-hover))] rounded-lg transition-colors min-h-[2.75rem]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: t('Settings') })] }) })] })] }));
+}