indas-ui 0.0.1 → 0.1.0

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

@@ -0,0 +1,219 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import { Home, MessageSquare, ClipboardCheck, Calculator, Menu, Receipt, Database, Cog, Layers, Boxes, BookOpen, Activity, TrendingUp, Users, Settings, Tag, BarChart3, Bell, Sparkles, FileText, FileCheck, Mail, Building, } from 'lucide-react';
+import { cn, getModuleRoutePath } from '../../lib/utils.js';
+import { useTranslation } from '../../hooks/useTranslation.js';
+import { useNavigation } from '../../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, MessageSquare, ClipboardCheck, Calculator, Menu,
+    Receipt, Database, Cog, Layers, Boxes, BookOpen,
+    Activity, TrendingUp, Users, Settings,
+    Tag, BarChart3, Bell, Sparkles, FileText, FileCheck, Mail, Building,
+};
+/** Resolve a lucide-react icon by name string (from DB IconName column). */
+export 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': Home,
+    '/synthia': Sparkles,
+    '/enquiry': FileText,
+    '/enquiry/sales': FileText,
+    '/enquiry/rate': TrendingUp,
+    '/costing/estimation': Calculator,
+    '/costing/quote-panel': FileCheck,
+    '/costing/price-approval': Receipt,
+    '/costing/grid-costing': BarChart3,
+    '/activity/notifications': Bell,
+    '/activity/email': Mail,
+    '/activity/auditlogs': Activity,
+    '/activity/messages': MessageSquare,
+    '/master/user': Users,
+    '/master/customer': Users,
+    '/master/item': Boxes,
+    '/master/machine': Cog,
+    '/master/process': Layers,
+    '/master/ledger': BookOpen,
+    '/master/category': Tag,
+    '/master/material-group': Database,
+    '/master/rate': TrendingUp,
+    '/master/tool': Settings,
+    '/master/company': Building,
+    '/report': BarChart3,
+    '/dashboard': BarChart3,
+    '/dashboard/sales': BarChart3,
+    '/settings': Settings,
+};
+export function getIconForPath(path) {
+    return MODULE_ICON_MAP[path] || 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',
+};
+export 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' },
+];
+const STORAGE_KEY = 'bottom-nav-quick-tabs-v4';
+/** Read saved quick tabs from localStorage */
+export 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 */
+export function setQuickTabs(tabs) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(tabs.slice(0, 3)));
+    window.dispatchEvent(new CustomEvent('quick-tabs-changed'));
+}
+/** Reset to defaults */
+export function resetQuickTabs() {
+    localStorage.removeItem(STORAGE_KEY);
+    window.dispatchEvent(new CustomEvent('quick-tabs-changed'));
+}
+// Export icon map + defaults for the home page settings section
+export { MODULE_ICON_MAP, DEFAULT_QUICK_TABS };
+export function BottomNav({ onOpenMenu, navRef }) {
+    const pathname = usePathname();
+    const router = useRouter();
+    const { t } = useTranslation();
+    const { groupedModules } = 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 = 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 (_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: _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 (_jsxs("button", { onClick: () => router.push(tab.path), className: 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 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute -left-2 bottom-0 w-2 h-2 pointer-events-none", children: _jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", className: "absolute bottom-0 right-0", children: _jsx("path", { d: "M8,0 Q8,8 0,8 L0,0 Z", fill: "rgb(var(--bg-surface))" }) }) }), _jsx("div", { className: "absolute -right-2 bottom-0 w-2 h-2 pointer-events-none", children: _jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", className: "absolute bottom-0 left-0", children: _jsx("path", { d: "M0,0 Q0,8 8,8 L8,0 Z", fill: "rgb(var(--bg-surface))" }) }) })] })), tab.isDynamic && !active && (_jsx("div", { className: "absolute top-1.5 w-1 h-1 rounded-full bg-[rgb(var(--color-primary))]" })), tab.path === '/synthia' && !mod?.iconName ? (_jsx("img", { src: "/app/synthia-logo.png", alt: "", className: cn('transition-all duration-200 shrink-0 h-5 w-5 rounded object-contain', active && 'h-6 w-6') })) : (_jsx(Icon, { className: 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))]') })), _jsx("span", { className: 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));
+                }), _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: [_jsx(Menu, { className: "h-5 w-5 text-[rgb(var(--fg-muted))]" }), _jsx("span", { className: "text-[0.6rem] leading-none font-medium text-[rgb(var(--fg-muted))]", children: t('Menu') })] })] }) }));
+}

package/dist/components/layout/floating-action-button.d.ts

@@ -0,0 +1,10 @@
+export interface FABAction {
+    label: string;
+    onClick: () => void;
+}
+interface FloatingActionButtonProps {
+    actions: FABAction[];
+    className?: string;
+}
+export declare function FloatingActionButton({ actions, className }: FloatingActionButtonProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { MoreHorizontal, X } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+export function FloatingActionButton({ actions, className }) {
+    const [open, setOpen] = useState(false);
+    const [pos, setPos] = useState(null);
+    const dragging = useRef(false);
+    const hasMoved = useRef(false);
+    const startPointer = useRef({ x: 0, y: 0 });
+    const startPos = useRef({ x: 0, y: 0 });
+    const fabRef = useRef(null);
+    // Initialise position from saved value or default bottom-right
+    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 = 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 = 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 = 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 (_jsxs("div", { ref: fabRef, style: { left: pos.x, top: pos.y, touchAction: 'none' }, className: cn('fixed z-50 lg:hidden', className), onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, children: [open && (_jsx("div", { className: 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) => (_jsx("button", { onClick: () => handleAction(action), className: 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))) })), _jsx("button", { className: 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
+                    ? _jsx(X, { className: "h-8 w-8 text-[rgb(var(--color-primary-foreground))] stroke-[3] transition-transform duration-300" })
+                    : _jsx(MoreHorizontal, { className: "h-8 w-8 text-[rgb(var(--color-primary-foreground))] stroke-[3] transition-transform duration-300" }) })] }));
+}

package/dist/components/layout/footer.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { LucideIcon } from "lucide-react";
+export interface FooterKPI {
+    id: string;
+    label: string;
+    value: string | number;
+    trend?: {
+        value: number;
+        direction: 'up' | 'down';
+    };
+    onClick?: () => void;
+}
+export interface FooterIconButton {
+    id: string;
+    icon: LucideIcon;
+    label: string;
+    onClick: () => void;
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+    disabled?: boolean;
+}
+export interface FooterProps {
+    kpis?: FooterKPI[];
+    actions?: React.ReactNode;
+    iconButtons?: FooterIconButton[];
+    leftContent?: React.ReactNode;
+    className?: string;
+    sticky?: boolean;
+    compact?: boolean;
+    padding?: 'compact' | 'normal' | 'medium';
+    variant?: 'page' | 'modal';
+    gradient?: boolean;
+}
+export declare function Footer({ kpis, actions, iconButtons, leftContent, className, sticky, compact, padding, variant, gradient }: FooterProps): React.JSX.Element;
+export declare function CompactFooter({ className, children }: {
+    className?: string;
+    children?: React.ReactNode;
+}): React.JSX.Element;

package/dist/components/layout/footer.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { useTranslation } from "../../hooks/useTranslation.js";
+export 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 (_jsx("footer", { className: 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: _jsxs("div", { className: 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: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-4 w-full sm:w-auto", children: [leftContent, kpis && kpis.length > 0 && (_jsx("div", { className: "flex flex-wrap items-center gap-3 sm:gap-6 md:gap-8", children: kpis.map((kpi) => (_jsxs("div", { className: 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: [_jsxs("span", { className: "text-[rgb(var(--fg-muted))] whitespace-nowrap", children: [kpi.label, ":"] }), _jsx("span", { className: "font-medium text-[rgb(var(--fg-default))]", children: typeof kpi.value === 'number'
+                                            ? kpi.value.toLocaleString()
+                                            : kpi.value }), kpi.trend && (_jsxs("span", { className: 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 && (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-2", children: iconButtons.map((button) => {
+                        const Icon = button.icon;
+                        return (_jsxs("button", { onClick: button.onClick, disabled: button.disabled, className: 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: [_jsx(Icon, { className: "h-4 w-4 sm:h-5 sm:w-5" }), _jsx("span", { className: "text-[9px] sm:text-[10px] font-medium", children: button.label })] }, button.id));
+                    }) })), actions && (_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
+export function CompactFooter({ className, children }) {
+    const { t } = useTranslation();
+    return (_jsx("footer", { className: cn("bg-[rgb(var(--bg-subtle))] border-t border-[rgb(var(--bd-default))] py-2 px-4", className), children: _jsx("div", { className: "flex items-center justify-center", children: _jsx("div", { className: "text-xs text-[rgb(var(--fg-muted))]", children: children || t("Indas Estimo 3.0 ©2025") }) }) }));
+}

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

@@ -0,0 +1,8 @@
+export { DynamicSidebar } from './sidebar.js';
+export type { DynamicSidebarProps } from './sidebar.js';
+export { Footer, CompactFooter } from './footer.js';
+export type { FooterProps, FooterKPI } from './footer.js';
+export { AppShell, Page, Grid } from './app-shell.js';
+export type { AppShellProps, PageProps, GridProps } from './app-shell.js';
+export { FloatingActionButton } from './floating-action-button.js';
+export type { FABAction } from './floating-action-button.js';

package/dist/components/layout/index.js

@@ -0,0 +1,6 @@
+'use client';
+// Layout Components - Centralized exports
+export { DynamicSidebar } from './sidebar.js';
+export { Footer, CompactFooter } from './footer.js';
+export { AppShell, Page, Grid } from './app-shell.js';
+export { FloatingActionButton } from './floating-action-button.js';

package/dist/components/layout/mobile-menu-sheet.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface MobileMenuSheetProps {
+    open: boolean;
+    onClose: () => void;
+}
+export declare function MobileMenuSheet({ open, onClose }: MobileMenuSheetProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,159 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import { useSessionAdapter } from '../../contexts/SessionAdapterContext.js';
+import { X, Search, ChevronRight, MessageSquare, Calculator, Receipt, Database, Cog, Layers, Boxes, BookOpen, PieChart, Activity, ClipboardCheck, TrendingUp, DollarSign, Factory, Users, Settings, Tag, Shield, Target, ShoppingCart, BarChart3, UserCog, Building, Gauge } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { useNavigation } from '../../contexts/NavigationContext.js';
+import { useModuleAuth } from '../../contexts/ModuleAuthContext.js';
+import { useTranslation } from '../../hooks/useTranslation.js';
+import { useNotifications } from '../../hooks/useNotifications.js';
+import { getModuleRoutePath } from '../../lib/utils.js';
+// Reuse sidebar icon mapping
+function getGroupIcon(groupName) {
+    const name = groupName.toLowerCase();
+    if (name.includes('dashboard') || name.includes('home'))
+        return Gauge;
+    if (name.includes('sales'))
+        return TrendingUp;
+    if (name.includes('enquiry') || name.includes('inquiry') || name.includes('lead'))
+        return MessageSquare;
+    if (name.includes('estimation') || name.includes('estimate') || name.includes('costing'))
+        return Calculator;
+    if (name.includes('quotation') || name.includes('quote'))
+        return Receipt;
+    if (name.includes('masters') || name.includes('master'))
+        return Database;
+    if (name.includes('user') && name.includes('management'))
+        return UserCog;
+    if (name.includes('company') || name.includes('branch'))
+        return Building;
+    if (name.includes('category') || name.includes('tag'))
+        return Tag;
+    if (name.includes('process'))
+        return Layers;
+    if (name.includes('machine') || name.includes('equipment'))
+        return Cog;
+    if (name.includes('item') || name.includes('product') || name.includes('inventory'))
+        return Boxes;
+    if (name.includes('ledger') || name.includes('account'))
+        return BookOpen;
+    if (name.includes('mis') || name.includes('report'))
+        return PieChart;
+    if (name.includes('analytics') || name.includes('analysis'))
+        return BarChart3;
+    if (name.includes('order') || name.includes('purchase'))
+        return ShoppingCart;
+    if (name.includes('price') || name.includes('material'))
+        return DollarSign;
+    if (name.includes('quality') || name.includes('control'))
+        return Shield;
+    if (name.includes('production') || name.includes('manufacturing'))
+        return Factory;
+    if (name.includes('customer') || name.includes('client'))
+        return Users;
+    if (name.includes('setting') || name.includes('config'))
+        return Settings;
+    if (name.includes('target') || name.includes('goal'))
+        return Target;
+    if (name.includes('activity') || name.includes('email') || name.includes('notification') || name.includes('audit'))
+        return Activity;
+    return ClipboardCheck;
+}
+export function MobileMenuSheet({ open, onClose }) {
+    const pathname = usePathname();
+    const router = useRouter();
+    const { data: session } = useSessionAdapter();
+    const { t } = useTranslation();
+    const { mobileModules } = useNavigation();
+    const { hasAccess } = useModuleAuth();
+    const { getUnreadCount } = 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 = 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 = 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 (_jsxs(_Fragment, { children: [_jsx("div", { className: 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 }), _jsxs("div", { className: 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: [_jsx("div", { className: "flex justify-center pt-2.5 pb-1", children: _jsx("div", { className: "w-9 h-1 rounded-full bg-[rgb(var(--bd-default))]" }) }), _jsxs("div", { className: "flex items-center gap-3 px-4 py-2.5 border-b border-[rgb(var(--bd-default))]", children: [_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: _jsx("span", { className: "text-xs font-semibold text-[rgb(var(--fg-muted))]", children: getInitials(userName) }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-semibold text-[rgb(var(--fg-default))] truncate leading-tight", children: userName }), userRole && (_jsx("p", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] truncate", children: userRole }))] }), _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: _jsx(X, { className: "h-4.5 w-4.5" }) })] }), _jsx("div", { className: "px-4 py-2.5", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[rgb(var(--fg-muted))]" }), _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 && (_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: _jsx(X, { className: "h-3.5 w-3.5" }) }))] }) }), _jsx("div", { className: "flex-1 overflow-y-auto px-2 pb-2", children: filteredGroups.length === 0 ? (_jsxs("div", { className: "py-12 text-center", children: [_jsx(Search, { className: "h-8 w-8 mx-auto mb-2 text-[rgb(var(--fg-muted))] opacity-30" }), _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 (_jsxs("div", { className: "mb-0.5", children: [_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: [_jsx(GroupIcon, { className: "h-4 w-4 text-[rgb(var(--fg-muted))] flex-shrink-0" }), _jsx("span", { className: "text-xs font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wide flex-1", children: t(group.groupName) }), _jsx(ChevronRight, { className: cn('h-3.5 w-3.5 text-[rgb(var(--fg-muted))]/50 transition-transform duration-200', isExpanded && 'rotate-90') })] }), isExpanded && (_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 = getModuleRoutePath(mod.ModuleName);
+                                            const displayName = mod.ModuleDisplayName || mod.ModuleName;
+                                            const isActive = isModuleActive(path);
+                                            const isNotif = path === '/activity/notifications';
+                                            return (_jsxs("button", { onClick: () => handleNavigate(path), className: 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: [_jsx("span", { className: cn('text-sm flex-1 text-[rgb(var(--fg-default))]', isActive && 'font-semibold'), children: t(displayName) }), isActive && (_jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-[rgb(var(--fg-default))] flex-shrink-0" })), isNotif && notifCount > 0 && (_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));
+                        })) }), _jsx("div", { className: "border-t border-[rgb(var(--bd-default))] px-4", style: { paddingBottom: 'env(safe-area-inset-bottom, 0px)' }, children: _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: [_jsx(Settings, { className: "h-4 w-4" }), _jsx("span", { className: "text-sm font-medium", children: t('Settings') })] }) })] })] }));
+}

package/dist/components/layout/side-panel.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+export interface SidePanelItem {
+    id: string;
+    label: React.ReactNode;
+    /** Plain string used for search filter when label is a ReactNode */
+    searchText?: string;
+    /** Disable row click (e.g. during inline edit so onItemSelect doesn't fire) */
+    disableSelect?: boolean;
+    icon?: LucideIcon | React.ElementType;
+    badge?: number | string;
+    onContextMenu?: (e: React.MouseEvent) => void;
+}
+export interface SidePanelCategory {
+    id: string;
+    label: string;
+    icon?: LucideIcon | React.ElementType;
+    items: SidePanelItem[];
+}
+export interface SidePanelProps {
+    title: React.ReactNode;
+    icon?: LucideIcon | React.ElementType;
+    categories: SidePanelCategory[];
+    activeItemId: string;
+    onItemSelect: (id: string) => void;
+    className?: string;
+    defaultOpenCategories?: string[];
+    actionButton?: {
+        label: string;
+        icon?: LucideIcon | React.ElementType;
+        onClick: () => void;
+    };
+    isOpen?: boolean;
+    onClose?: () => void;
+    showSearch?: boolean;
+    itemContextMenu?: (itemId: string, close: () => void) => React.ReactNode;
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapseChange?: (collapsed: boolean) => void;
+    showItemIcons?: boolean;
+    /** Optional footer content (e.g. KPI stats, summary cards). Hidden when collapsed. */
+    footer?: React.ReactNode;
+    /** When provided, replaces the category/item list with arbitrary content.
+     *  Use this when the panel hosts a form or custom UI instead of a nav list. */
+    children?: React.ReactNode;
+    /** Optional element rendered on the right side of the "Recents" header row.
+     *  Used by chat to host a grouping-mode toggle next to the section label. */
+    recentsAction?: React.ReactNode;
+}
+export declare function SidePanel({ title, icon: Icon, categories, activeItemId, onItemSelect, className, defaultOpenCategories, actionButton, isOpen, onClose, showSearch, itemContextMenu, collapsible, defaultCollapsed, onCollapseChange, showItemIcons, footer, children, recentsAction }: SidePanelProps): React.JSX.Element;