@goplusvn/core 0.1.0 → 0.1.1

package/src/ui/layout/footer.tsx

@@ -0,0 +1,43 @@
+import { cn } from "../../utils";
+import { buttonVariants } from "../index";
+
+export function Footer() {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="bg-background border-t border-sidebar-border overflow-x-hidden">
+      <div className="container flex justify-between items-center py-1 px-4 md:px-6">
+        <p className="text-xs text-muted-foreground">
+          © {currentYear}{" "}
+          <a
+            href="/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn(
+              buttonVariants({ variant: "link" }),
+              "inline p-0 text-xs",
+            )}
+          >
+            GoERP
+          </a>
+          .
+        </p>
+        <p className="text-xs leading-tight text-muted-foreground">
+          Make with ❤ by{" "}
+          <a
+            href="https://github.com/Qualiora"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn(
+              buttonVariants({ variant: "link" }),
+              "inline p-0 text-xs",
+            )}
+          >
+            Goplus.vn
+          </a>
+          .
+        </p>
+      </div>
+    </footer>
+  );
+}

package/src/ui/layout/full-screen-toggle.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { Maximize, Minimize } from "lucide-react";
+
+import { useToggle } from "../../hooks";
+import { Button } from "../index";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider,
+} from "../primitives/client";
+
+export function FullScreenToggle() {
+  const [isFullscreen, toggleFullscreen, setFullscreen] = useToggle(false);
+
+  const handleToggle = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+      setFullscreen(true);
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+        setFullscreen(false);
+      }
+    }
+  };
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={handleToggle}
+            aria-label="Toggle Fullscreen"
+          >
+            {isFullscreen ? (
+              <Minimize className="size-4" />
+            ) : (
+              <Maximize className="size-4" />
+            )}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

package/src/ui/layout/header-breadcrumb.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { Fragment, useMemo } from "react";
+import { useParams, usePathname } from "next/navigation";
+
+import type { LocaleType } from "../../types";
+
+import { cn } from "../../utils";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../index";
+
+function formatSegmentLabel(segment: string) {
+  return segment
+    .replace(/[-_]+/g, " ")
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
+export function HeaderBreadcrumb({ className }: { className?: string }) {
+  const pathname = usePathname();
+  const params = useParams();
+  const locale = params?.lang as LocaleType | undefined;
+
+  const segments = useMemo(() => {
+    if (!pathname) return [];
+    const parts = pathname.split("/").filter(Boolean);
+
+    if (parts.length && locale && parts[0] === locale) {
+      parts.shift();
+    }
+
+    return parts;
+  }, [pathname, locale]);
+
+  return (
+    <Breadcrumb className={cn("text-sm text-muted-foreground", className)}>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          {segments.length > 0 ? (
+            <BreadcrumbLink href={locale ? `/${locale}` : "/"}>
+              Home
+            </BreadcrumbLink>
+          ) : (
+            <BreadcrumbPage>Home</BreadcrumbPage>
+          )}
+        </BreadcrumbItem>
+        {segments.map((segment, index) => {
+          const href =
+            locale && locale.length > 0
+              ? `/${locale}/${segments.slice(0, index + 1).join("/")}`
+              : `/${segments.slice(0, index + 1).join("/")}`;
+          const label = formatSegmentLabel(segment);
+          const isLast = index === segments.length - 1;
+
+          return (
+            <Fragment key={href}>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                {isLast ? (
+                  <BreadcrumbPage>{label}</BreadcrumbPage>
+                ) : (
+                  <BreadcrumbLink href={href}>{label}</BreadcrumbLink>
+                )}
+              </BreadcrumbItem>
+            </Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}

package/src/ui/layout/horizontal-layout-header.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { Settings } from "lucide-react";
+
+import type { DictionaryType } from "../../hooks";
+import type { LocaleType, NavigationType } from "../../types";
+
+import { ensureLocalizedPathname } from "../../utils";
+
+import { Button } from "../index";
+import { CommandMenu } from "./command-menu";
+import { Customizer } from "./customizer";
+import { FullScreenToggle } from "./full-screen-toggle";
+import { Logo } from "./logo";
+import { NotificationDropdown } from "./notification-dropdown";
+import { PageTabs } from "./page-tabs";
+import { UserDropdown } from "./user-dropdown";
+import { ToggleMobileSidebar } from "./toggle-mobile-sidebar";
+import { TopBarHeaderMenubar } from "./top-bar-header-menubar";
+
+export function HorizontalLayoutHeader({
+  dictionary,
+  navigation,
+}: {
+  dictionary: DictionaryType;
+  navigation?: NavigationType[];
+}) {
+  const params = useParams();
+  const locale = params.lang as LocaleType;
+
+  return (
+    <>
+      <header className="sticky top-0 z-50 w-full bg-background/95 border-b border-sidebar-border backdrop-blur supports-[backdrop-filter]:bg-background/80 flex flex-col">
+        <div className="container flex flex-wrap items-center gap-3 py-0 lg:h-12">
+          <div className="flex items-center gap-2">
+            <ToggleMobileSidebar />
+            <Link
+              href={ensureLocalizedPathname("/", locale)}
+              className="hidden text-foreground font-black lg:flex"
+            >
+              <Logo />
+            </Link>
+          </div>
+
+          <div className="hidden flex-1 items-center gap-4 lg:flex">
+            <TopBarHeaderMenubar dictionary={dictionary} navigation={navigation} />
+            {/* <HeaderBreadcrumb className="flex-1" /> */}
+          </div>
+
+          <div className="flex items-center gap-2 ml-auto">
+            <CommandMenu
+              dictionary={dictionary}
+              variant="fiori"
+              navigation={navigation ?? []}
+            />
+            <div className="hidden sm:flex items-center gap-2">
+              <NotificationDropdown dictionary={dictionary} />
+              <FullScreenToggle />
+            </div>
+            <Customizer
+              trigger={
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  aria-label="Customize layout"
+                >
+                  <Settings className="h-4 w-4" />
+                </Button>
+              }
+            />
+            {/* <ModeDropdown dictionary={dictionary} /> */}
+            {/* <LanguageDropdown dictionary={dictionary} /> */}
+            {/* User dropdown */}
+            <UserDropdown dictionary={dictionary} locale={locale} />
+          </div>
+        </div>
+        <PageTabs dictionary={dictionary} />
+      </header>
+    </>
+  );
+}

package/src/ui/layout/horizontal-layout.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import type { DictionaryType } from "../../hooks";
+import type { ReactNode } from "react";
+import type { NavigationType } from "../../types";
+
+import { SidebarProvider } from "../primitives/sidebar";
+import { Footer } from "./footer";
+import { AppSidebar } from "./sidebar"; // Use renamed AppSidebar
+import { HorizontalLayoutHeader } from "./horizontal-layout-header";
+
+interface HorizontalLayoutProps {
+  children: ReactNode;
+  dictionary: DictionaryType;
+  navigation?: NavigationType[];
+  onGlobalSearch?: (query: string) => void;
+  searchResults?: any[];
+  searchLoading?: boolean;
+}
+
+export function HorizontalLayout({
+  children,
+  dictionary,
+  navigation,
+  onGlobalSearch,
+  searchResults,
+  searchLoading,
+}: HorizontalLayoutProps) {
+  return (
+    <SidebarProvider>
+      <AppSidebar
+        dictionary={dictionary}
+        navigation={navigation ?? []}
+        onGlobalSearch={onGlobalSearch}
+        searchResults={searchResults}
+        searchLoading={searchLoading}
+      />
+      <div className="w-full min-h-screen flex flex-col bg-muted/40">
+        <HorizontalLayoutHeader
+          dictionary={dictionary}
+          navigation={navigation}
+        />
+        <main className="w-full mx-auto flex-1 min-h-0 px-4 md:px-8 py-4">
+          {children}
+        </main>
+        <Footer />
+      </div>
+    </SidebarProvider>
+  );
+}

package/src/ui/layout/index.tsx

@@ -0,0 +1,25 @@
+export * from "./sidebar";
+export * from "./language-dropdown";
+export * from "./footer";
+export * from "./logo";
+export * from "./header-breadcrumb";
+export * from "./animated-list";
+export * from "./animated-sidebar";
+export * from "./command-menu";
+export * from "./sidebar-group-icon-menu";
+export * from "./customizer";
+export * from "./user-dropdown";
+export * from "./notification-dropdown";
+export * from "./mode-dropdown";
+export * from "./full-screen-toggle";
+export * from "./page-tabs";
+export * from "./tab-navigation-provider";
+export * from "./route-cache";
+export * from "./toggle-mobile-sidebar";
+export * from "./top-bar-header-menubar";
+export * from "./vertical-layout-header";
+export * from "./horizontal-layout-header";
+export * from "./vertical-layout";
+export * from "./horizontal-layout";
+export * from "./main-layout";
+export * from "./tab-content-cache";

package/src/ui/layout/language-dropdown.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useCallback } from "react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+import { Earth } from "lucide-react";
+
+import type { LocaleType } from "../../types";
+import { useSettings } from "../../hooks";
+import { relocalizePathname, getDictionaryValue } from "../../utils";
+import { Button } from "../index";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "../primitives/client";
+
+// Minimal definition for Dictionary to avoid circular dep
+// In a real app this should be imported from a central types location
+export type LanguageDictionaryType = any;
+
+const i18n = {
+  locales: ["vi", "en"] as const,
+  localeNames: {
+    vi: "Tiếng Việt",
+    en: "English",
+  },
+  localeDirection: {
+    vi: "ltr",
+    en: "ltr",
+  } as const,
+};
+
+export function LanguageDropdown({
+  dictionary,
+}: {
+  dictionary: LanguageDictionaryType;
+}) {
+  const pathname = usePathname();
+  const params = useParams();
+  const { settings, updateSettings } = useSettings();
+
+  const locale = (params.lang as LocaleType) || "vi";
+  const direction = i18n.localeDirection[locale] || "ltr";
+
+  const setLocale = useCallback(
+    (localeName: LocaleType) => {
+      updateSettings({ ...settings, locale: localeName });
+    },
+    [settings, updateSettings],
+  );
+
+  return (
+    <DropdownMenu dir={direction}>
+      <Tooltip>
+        <DropdownMenuTrigger asChild>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon" aria-label="Language">
+              <Earth className="size-4" />
+            </Button>
+          </TooltipTrigger>
+        </DropdownMenuTrigger>
+        <TooltipContent>
+          <p>Language</p>
+        </TooltipContent>
+      </Tooltip>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>
+          {dictionary?.navigation?.language?.language || "Language"}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup value={locale}>
+          {i18n.locales.map((l) => {
+            const localeName = i18n.localeNames[l];
+            const localizedLocaleName = getDictionaryValue(
+              localeName,
+              dictionary?.navigation?.language || {},
+            );
+
+            return (
+              <Link
+                key={l}
+                href={relocalizePathname(pathname, l)}
+                onClick={() => setLocale(l)}
+              >
+                <DropdownMenuRadioItem value={l}>
+                  {localizedLocaleName}
+                </DropdownMenuRadioItem>
+              </Link>
+            );
+          })}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/ui/layout/logo.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import Image from "next/image";
+
+import { cn } from "../../utils";
+
+interface LogoProps {
+  className?: string;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl";
+  showText?: boolean;
+  collapsed?: boolean;
+}
+
+const sizeMap = {
+  sm: { width: 40, height: 40 },
+  md: { width: 36, height: 36 },
+  lg: { width: 40, height: 40 },
+  xl: { width: 44, height: 44 },
+  "2xl": { width: 36, height: 36 },
+};
+
+export function Logo({
+  className,
+  size = "md",
+  showText = true,
+  collapsed = false,
+}: LogoProps) {
+  const dimensions = sizeMap[size];
+
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <Image
+        src="/images/logos/goeat_logo.png"
+        alt="GoERP Logo"
+        width={dimensions.width}
+        height={dimensions.height}
+        className="object-contain"
+        priority
+      />
+      {showText && !collapsed && (
+        <div className="flex flex-col leading-none">
+          <span className="text-base font-bold text-foreground">GoERP</span>
+          <span className="text-[11px] text-muted-foreground">ERP System</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function LogoCompact({ className }: { className?: string }) {
+  return (
+    <div className={cn("flex items-center justify-center", className)}>
+      <Image
+        src="/images/logos/goeat_logo.png"
+        alt="GoERP"
+        width={32}
+        height={32}
+        className="object-contain"
+        priority
+      />
+    </div>
+  );
+}

package/src/ui/layout/main-layout.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import type { DictionaryType } from "../../hooks";
+import type { ReactNode } from "react";
+import type { NavigationType } from "../../types";
+
+import { useIsVertical, useMounted } from "../../hooks";
+import { HorizontalLayout } from "./horizontal-layout";
+import { VerticalLayout } from "./vertical-layout";
+
+interface LayoutProps {
+  children: ReactNode;
+  dictionary: DictionaryType;
+  navigation?: NavigationType[];
+  onGlobalSearch?: (query: string) => void;
+  searchResults?: any[];
+  searchLoading?: boolean;
+}
+
+export function MainLayout({
+  children,
+  dictionary,
+  navigation,
+  onGlobalSearch,
+  searchResults,
+  searchLoading,
+}: LayoutProps) {
+  const mounted = useMounted();
+  const isVertical = useIsVertical();
+
+  // Before client mount, always render vertical (SSR-safe default).
+  // This prevents the SSR→CSR hydration mismatch / layout jump when
+  // the user has "horizontal" saved in localStorage.
+  const showVertical = !mounted || isVertical;
+
+  return showVertical ? (
+    <VerticalLayout
+      dictionary={dictionary}
+      navigation={navigation}
+      onGlobalSearch={onGlobalSearch}
+      searchResults={searchResults}
+      searchLoading={searchLoading}
+    >
+      {children}
+    </VerticalLayout>
+  ) : (
+    <HorizontalLayout
+      dictionary={dictionary}
+      navigation={navigation}
+      onGlobalSearch={onGlobalSearch}
+      searchResults={searchResults}
+      searchLoading={searchLoading}
+    >
+      {children}
+    </HorizontalLayout>
+  );
+}

package/src/ui/layout/mode-dropdown.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { MoonStar, Sun, SunMoon } from "lucide-react";
+import { useSettings } from "../../hooks"; // exported from core/hooks
+
+import { Button } from "../index";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../primitives/client";
+
+export function ModeDropdown() {
+  const { settings, updateSettings } = useSettings();
+
+  return (
+    <DropdownMenu>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="h-9 w-9">
+              <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+              <MoonStar className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+              <span className="sr-only">Toggle theme</span>
+            </Button>
+          </DropdownMenuTrigger>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Toggle theme</p>
+        </TooltipContent>
+      </Tooltip>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem
+          onClick={() => updateSettings({ ...settings, mode: "light" })}
+        >
+          <Sun className="me-2 h-4 w-4" />
+          <span>Light</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => updateSettings({ ...settings, mode: "dark" })}
+        >
+          <MoonStar className="me-2 h-4 w-4" />
+          <span>Dark</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => updateSettings({ ...settings, mode: "system" })}
+        >
+          <SunMoon className="me-2 h-4 w-4" />
+          <span>System</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}