@goplusvn/core 0.1.0 → 0.1.1

package/src/ui/layout/sidebar-group-icon-menu.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useMemo } from "react";
+import Link from "next/link";
+
+import type { DictionaryType } from "../../hooks";
+import type {
+  LocaleType,
+  NavigationNestedItem,
+  NavigationRootItem,
+} from "../../types";
+
+import { ensureLocalizedPathname } from "../../utils";
+import {
+  cn,
+  getDictionaryValue,
+  isActivePathname,
+  titleCaseToCamelCase,
+} from "../../utils";
+
+import {
+  Badge,
+  DynamicIcon,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  PrefetchLink,
+  ScrollArea,
+  SidebarMenuButton,
+} from "../index";
+
+interface SidebarGroupIconMenuProps {
+  groupTitle: string;
+  items: NavigationRootItem[];
+  dictionary: DictionaryType;
+  locale: LocaleType;
+  pathname: string;
+  isRTL: boolean;
+  onItemClick?: () => void;
+}
+
+export function SidebarGroupIconMenu({
+  groupTitle,
+  items,
+  dictionary,
+  locale,
+  pathname,
+  isRTL,
+  onItemClick,
+}: SidebarGroupIconMenuProps) {
+  // Get first item with icon for trigger button
+  const firstItemWithIcon = useMemo(
+    () => items.find((item) => "iconName" in item && item.iconName),
+    [items],
+  );
+
+  const renderMenuItem = (
+    item: NavigationRootItem | NavigationNestedItem,
+    level: number = 0,
+  ) => {
+    const title = getDictionaryValue(
+      // @ts-ignore - dictionary typing might need adjustment or ignore
+      titleCaseToCamelCase(item.title),
+      dictionary.navigation,
+      item.title,
+    );
+    const label =
+      item.label &&
+      getDictionaryValue(titleCaseToCamelCase(item.label), dictionary.label);
+
+    // Handle nested items
+    if (item.items && item.items.length > 0) {
+      return (
+        <div key={item.title} className="space-y-1">
+          <div
+            className={cn(
+              "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-sidebar-foreground/70",
+              level > 0 && "text-xs",
+            )}
+          >
+            {"iconName" in item && (
+              <DynamicIcon name={item.iconName} className="h-4 w-4 shrink-0" />
+            )}
+            <span className="font-medium">{title}</span>
+            {label && (
+              <Badge variant="secondary" className="ml-auto text-xs">
+                {label}
+              </Badge>
+            )}
+          </div>
+          <div className={cn("ml-4 space-y-1", level > 0 && "ml-2")}>
+            {item.items.map((subItem) => renderMenuItem(subItem, level + 1))}
+          </div>
+        </div>
+      );
+    }
+
+    // Handle regular link items
+    if ("href" in item && item.href) {
+      const localizedPathname = ensureLocalizedPathname(item.href, locale);
+      const isActive = isActivePathname(localizedPathname, pathname);
+      const isCrudLink = localizedPathname.startsWith("/crud/");
+      const crudEntity = isCrudLink
+        ? localizedPathname.replace("/crud/", "").split("/")[0]
+        : undefined;
+
+      // Need to find where PrefetchLink is defined.
+      // Assuming it is exported from "../index".
+
+      const LinkComponent: any = isCrudLink ? PrefetchLink : Link;
+
+      return (
+        <LinkComponent
+          key={item.title}
+          href={localizedPathname}
+          {...(isCrudLink && crudEntity ? { crudEntity } : {})}
+          className={cn(
+            "group/menu-item relative flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
+            "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+            isActive &&
+              "bg-sidebar-accent font-medium text-sidebar-accent-foreground",
+            level > 0 && "text-xs pl-6",
+          )}
+          onClick={onItemClick}
+        >
+          {"iconName" in item && (
+            <DynamicIcon
+              name={item.iconName}
+              className="h-4 w-4 shrink-0 text-sidebar-foreground/70 group-hover/menu-item:text-sidebar-accent-foreground"
+            />
+          )}
+          <span className="flex-1 truncate">{title}</span>
+          {label && (
+            <Badge variant="secondary" className="ml-auto shrink-0 text-xs">
+              {label}
+            </Badge>
+          )}
+          {isActive && (
+            <div className="absolute left-0 top-1/2 h-1.5 w-1 -translate-y-1/2 rounded-r-full bg-sidebar-accent-foreground" />
+          )}
+        </LinkComponent>
+      );
+    }
+
+    return null;
+  };
+
+  if (!firstItemWithIcon || !("iconName" in firstItemWithIcon)) {
+    return null;
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <SidebarMenuButton
+          className="size-8! p-2! justify-center!"
+          tooltip={groupTitle}
+        >
+          <DynamicIcon name={firstItemWithIcon.iconName} className="h-4 w-4" />
+        </SidebarMenuButton>
+      </PopoverTrigger>
+      <PopoverContent
+        side={isRTL ? "left" : "right"}
+        align="start"
+        sideOffset={12}
+        className="w-64 p-0"
+      >
+        <div className="flex flex-col">
+          {/* Header */}
+          <div className="border-b px-3 py-2.5">
+            <div className="flex items-center gap-2">
+              {"iconName" in firstItemWithIcon && (
+                <DynamicIcon
+                  name={firstItemWithIcon.iconName}
+                  className="h-4 w-4 text-sidebar-foreground/70"
+                />
+              )}
+              <span className="text-sm font-semibold text-sidebar-foreground">
+                {groupTitle}
+              </span>
+            </div>
+          </div>
+
+          {/* Menu Items */}
+          <ScrollArea className="max-h-[calc(100vh-12rem)]">
+            <div className="p-2 space-y-1">
+              {items.map((item) => renderMenuItem(item))}
+            </div>
+          </ScrollArea>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/ui/layout/sidebar.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+import { ChevronDown } from "lucide-react";
+
+import type { DictionaryType } from "../../hooks"; // Assuming generic type location
+import type {
+  LocaleType,
+  NavigationNestedItem,
+  NavigationRootItem,
+  NavigationType,
+} from "../../types";
+
+import { i18n } from "../../configs";
+import { ensureLocalizedPathname } from "../../utils";
+import {
+  cn,
+  getDictionaryValue,
+  isActivePathname,
+  titleCaseToCamelCase,
+} from "../../utils";
+
+import { useSettings } from "../../hooks"; // Exported from core/hooks
+
+import {
+  Badge,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  DynamicIcon,
+  PrefetchLink,
+  ScrollArea,
+  Sidebar as SidebarWrapper,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuSubButton, // Added this import
+  SidebarMenuItem,
+  SidebarMenuSub,
+  useSidebar,
+} from "../index"; // Importing from index
+
+import { CommandMenu } from "./command-menu";
+import { Logo } from "./logo";
+import { SidebarGroupIconMenu } from "./sidebar-group-icon-menu";
+
+interface SidebarProps {
+  dictionary: DictionaryType;
+  navigation: NavigationType[];
+  onGlobalSearch?: (query: string) => void;
+  searchResults?: any[]; // SearchGroup[] - using any to avoid import issues for now
+  searchLoading?: boolean;
+}
+
+export function AppSidebar({
+  dictionary,
+  navigation,
+  onGlobalSearch,
+  searchResults,
+  searchLoading,
+}: SidebarProps) {
+  // Navigation is now REQUIRED prop, no fallback to internal data
+  const navData = navigation;
+  const pathname = usePathname();
+  const params = useParams();
+  const { openMobile, setOpenMobile, isMobile, state, isHoverExpanded } =
+    useSidebar();
+  const { settings } = useSettings();
+
+  const locale = params.lang as LocaleType;
+  const direction = i18n.localeDirection[locale];
+  const isRTL = (direction as "ltr" | "rtl") === "rtl";
+  const isHoizontalAndDesktop = settings.layout === "horizontal" && !isMobile;
+
+  // If the layout is horizontal and not on mobile, don't render the sidebar. (We use a menubar for horizontal layout navigation.)
+  if (isHoizontalAndDesktop) return null;
+
+  const renderMenuItem = (
+    item: NavigationRootItem | NavigationNestedItem,
+    isSub = false,
+  ) => {
+    const title = getDictionaryValue(
+      titleCaseToCamelCase(item.title),
+      dictionary.navigation,
+      item.title, // Fallback to original title if not found
+    );
+    const label =
+      item.label &&
+      getDictionaryValue(titleCaseToCamelCase(item.label), dictionary.label);
+
+    // If the item has nested items, render it with a collapsible dropdown.
+    if (item.items) {
+      return (
+        <Collapsible className="group/collapsible" defaultOpen={true}>
+          <CollapsibleTrigger asChild>
+            <SidebarMenuButton className="w-full justify-between [&[data-state=open]>svg]:rotate-180">
+              <span className="flex items-center">
+                {"iconName" in item && (
+                  <DynamicIcon name={item.iconName} className="me-2 h-4 w-4" />
+                )}
+                <span>{title}</span>
+                {"label" in item && (
+                  <Badge variant="secondary" className="me-2">
+                    {label}
+                  </Badge>
+                )}
+              </span>
+              <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+            </SidebarMenuButton>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+            <SidebarMenuSub>
+              {item.items.map((subItem: NavigationNestedItem) => (
+                <SidebarMenuItem key={subItem.title}>
+                  {renderMenuItem(subItem, true)}
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenuSub>
+          </CollapsibleContent>
+        </Collapsible>
+      );
+    }
+
+    // Otherwise, render the item with a link.
+    if ("href" in item) {
+      const localizedPathname = ensureLocalizedPathname(item.href, locale);
+      const isExactMatchRequired =
+        item.title === "Tổng quan" ||
+        item.title === "Overview" ||
+        item.title === "Dashboard";
+      const isActive = isActivePathname(
+        localizedPathname,
+        pathname,
+        isExactMatchRequired,
+      );
+
+      // ✅ Check if this is a CRUD link for prefetching
+      const isCrudLink = localizedPathname.startsWith("/crud/");
+      const crudEntity = isCrudLink
+        ? localizedPathname.replace("/crud/", "").split("/")[0]
+        : undefined;
+      const LinkComponent = isCrudLink ? PrefetchLink : Link;
+
+      const MenuButtonComponent = isSub
+        ? SidebarMenuSubButton
+        : SidebarMenuButton;
+
+      return (
+        <MenuButtonComponent
+          isActive={isActive}
+          onClick={() => setOpenMobile(!openMobile)}
+          asChild
+        >
+          <LinkComponent
+            href={localizedPathname}
+            {...(isCrudLink && crudEntity ? { crudEntity } : {})}
+          >
+            {"iconName" in item && (
+              <DynamicIcon name={item.iconName} className="h-4 w-4" />
+            )}
+            <span>{title}</span>
+            {"label" in item && <Badge variant="secondary">{label}</Badge>}
+          </LinkComponent>
+        </MenuButtonComponent>
+      );
+    }
+  };
+
+  // Enforce icon mode for Carbon style consistency if not set explicitly to offcanvas by some override (though we prefer icon)
+  const collapsibleMode =
+    settings.sidebarCollapsible === "offcanvas"
+      ? "icon"
+      : settings.sidebarCollapsible || "icon";
+
+  return (
+    <SidebarWrapper
+      side={isRTL ? "right" : "left"}
+      variant={settings.sidebarVariant}
+      collapsible={collapsibleMode}
+    >
+      <SidebarHeader className="space-y-2 group-data-[collapsible=icon]:items-center group-data-[hover-expanded=true]:!items-stretch">
+        <Link
+          href={ensureLocalizedPathname("/", locale)}
+          className={cn(
+            "w-fit pb-0",
+            state === "collapsed" && !isHoverExpanded && !isMobile
+              ? "p-1"
+              : "p-2",
+          )}
+          onClick={() => isMobile && setOpenMobile(!openMobile)}
+        >
+          <Logo
+            className="group-data-[collapsible=icon]:justify-center group-data-[hover-expanded=true]:!justify-start"
+            size={
+              state === "collapsed" && !isHoverExpanded && !isMobile
+                ? "sm"
+                : "md"
+            }
+            showText={state === "expanded" || isHoverExpanded || isMobile}
+            collapsed={state === "collapsed" && !isHoverExpanded && !isMobile}
+          />
+        </Link>
+        <CommandMenu
+          dictionary={dictionary}
+          navigation={navData}
+          variant={
+            state === "collapsed" && !isHoverExpanded && !isMobile
+              ? "icon"
+              : "default"
+          }
+          buttonClassName={cn(
+            "group-data-[collapsible=icon]:mx-auto",
+            "group-data-[hover-expanded=true]:!mx-0 group-data-[hover-expanded=true]:!w-full",
+          )}
+          onSearch={onGlobalSearch}
+          searchResults={searchResults}
+          loading={searchLoading}
+        />
+      </SidebarHeader>
+      <ScrollArea>
+        <SidebarContent className="gap-0">
+          {navData.map((nav) => {
+            const title = getDictionaryValue(
+              titleCaseToCamelCase(nav.title),
+              dictionary.navigation,
+              nav.title, // Fallback to original title if not found
+            );
+
+            // Only show icon mode if collapsed AND NOT hover expanded AND NOT mobile
+            const isIconMode =
+              collapsibleMode === "icon" &&
+              state === "collapsed" &&
+              !isHoverExpanded &&
+              !isMobile;
+
+            const groupContent = (
+              <SidebarGroup key={nav.title}>
+                <SidebarGroupLabel>{title}</SidebarGroupLabel>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {nav.items.map((item) => (
+                      <SidebarMenuItem key={item.title}>
+                        {renderMenuItem(item)}
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            );
+
+            // When in icon mode, show icon menu instead of full group
+            if (isIconMode) {
+              return (
+                <div key={nav.title} className="flex justify-center p-2">
+                  <SidebarGroupIconMenu
+                    groupTitle={title}
+                    items={nav.items}
+                    dictionary={dictionary}
+                    locale={locale}
+                    pathname={pathname}
+                    isRTL={isRTL}
+                    onItemClick={() => isMobile && setOpenMobile(false)}
+                  />
+                </div>
+              );
+            }
+
+            return groupContent;
+          })}
+        </SidebarContent>
+      </ScrollArea>
+    </SidebarWrapper>
+  );
+}

package/src/ui/layout/tab-content-cache.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+} from "react";
+import { usePathname } from "next/navigation";
+import type { ReactNode } from "react";
+
+interface CachedContent {
+  html: string;
+  scrollPosition: number;
+  timestamp: number;
+  data?: unknown;
+}
+
+interface TabContentCacheContextValue {
+  getCachedContent: (path: string) => CachedContent | null;
+  setCachedContent: (path: string, content: CachedContent) => void;
+  clearCache: (path?: string) => void;
+  clearAllCache: () => void;
+  isCached: (path: string) => boolean;
+}
+
+const TabContentCacheContext = createContext<
+  TabContentCacheContextValue | undefined
+>(undefined);
+
+const CACHE_STORAGE_KEY = "tab-content-cache";
+const CACHE_EXPIRY = 30 * 60 * 1000; // 30 minutes
+
+export function TabContentCacheProvider({ children }: { children: ReactNode }) {
+  const [cache, setCache] = useState<Map<string, CachedContent>>(new Map());
+  const pathname = usePathname();
+  const scrollPositionsRef = useRef<Map<string, number>>(new Map());
+
+  // Load cache from sessionStorage on mount
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    try {
+      const stored = sessionStorage.getItem(CACHE_STORAGE_KEY);
+      if (stored) {
+        const parsedCache = JSON.parse(stored) as Record<string, CachedContent>;
+        const cacheMap = new Map(Object.entries(parsedCache));
+
+        // Remove expired entries
+        const now = Date.now();
+        const validCache = new Map<string, CachedContent>();
+        for (const [path, content] of cacheMap.entries()) {
+          if (now - content.timestamp < CACHE_EXPIRY) {
+            validCache.set(path, content);
+          }
+        }
+
+        setCache(validCache);
+      }
+    } catch (error) {
+      console.error("Failed to load tab content cache:", error);
+    }
+  }, []);
+
+  // Save cache to sessionStorage whenever it changes
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    try {
+      const cacheObj = Object.fromEntries(cache);
+      sessionStorage.setItem(CACHE_STORAGE_KEY, JSON.stringify(cacheObj));
+    } catch (error) {
+      console.error("Failed to save tab content cache:", error);
+    }
+  }, [cache]);
+
+  // Save scroll position before navigation
+  useEffect(() => {
+    const handleScroll = () => {
+      if (pathname) {
+        scrollPositionsRef.current.set(pathname, window.scrollY);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [pathname]);
+
+  // Restore scroll position when pathname changes
+  useEffect(() => {
+    if (!pathname) return;
+
+    const cachedContent = cache.get(pathname);
+    if (cachedContent) {
+      // Restore scroll position after a short delay to ensure content is rendered
+      setTimeout(() => {
+        window.scrollTo({
+          top:
+            cachedContent.scrollPosition ||
+            scrollPositionsRef.current.get(pathname) ||
+            0,
+          behavior: "instant",
+        });
+      }, 50);
+    }
+  }, [pathname, cache]);
+
+  const getCachedContent = useCallback(
+    (path: string): CachedContent | null => {
+      const cached = cache.get(path);
+      if (!cached) return null;
+
+      // Check if cache is expired
+      const now = Date.now();
+      if (now - cached.timestamp > CACHE_EXPIRY) {
+        cache.delete(path);
+        return null;
+      }
+
+      return cached;
+    },
+    [cache],
+  );
+
+  const setCachedContent = useCallback(
+    (path: string, content: CachedContent) => {
+      setCache((prev) => {
+        const newCache = new Map(prev);
+        newCache.set(path, {
+          ...content,
+          scrollPosition: scrollPositionsRef.current.get(path) || 0,
+          timestamp: Date.now(),
+        });
+        return newCache;
+      });
+    },
+    [],
+  );
+
+  const clearCache = useCallback((path?: string) => {
+    if (path) {
+      setCache((prev) => {
+        const newCache = new Map(prev);
+        newCache.delete(path);
+        return newCache;
+      });
+      scrollPositionsRef.current.delete(path);
+    } else {
+      setCache(new Map());
+      scrollPositionsRef.current.clear();
+    }
+  }, []);
+
+  const clearAllCache = useCallback(() => {
+    setCache(new Map());
+    scrollPositionsRef.current.clear();
+    if (typeof window !== "undefined") {
+      sessionStorage.removeItem(CACHE_STORAGE_KEY);
+    }
+  }, []);
+
+  const isCached = useCallback(
+    (path: string): boolean => {
+      const cached = cache.get(path);
+      if (!cached) return false;
+
+      const now = Date.now();
+      return now - cached.timestamp < CACHE_EXPIRY;
+    },
+    [cache],
+  );
+
+  return (
+    <TabContentCacheContext.Provider
+      value={{
+        getCachedContent,
+        setCachedContent,
+        clearCache,
+        clearAllCache,
+        isCached,
+      }}
+    >
+      {children}
+    </TabContentCacheContext.Provider>
+  );
+}
+
+const noopTabContentCache: TabContentCacheContextValue = {
+  getCachedContent: () => null,
+  setCachedContent: () => {},
+  clearCache: () => {},
+  clearAllCache: () => {},
+  isCached: () => false,
+};
+
+export function useTabContentCache() {
+  const context = useContext(TabContentCacheContext);
+  return context ?? noopTabContentCache;
+}