nl-d365boilerplate-vite 1.0.0

package/src/components/nl-header.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { memo, useState } from "react";
+import { Menu01Icon, Cancel01Icon } from "hugeicons-react";
+
+import { cn } from "@/lib/utils";
+import { navItems as defaultNavItems, type NavItem } from "@/lib/nav-items";
+import { Button } from "@/components/ui/button";
+import appLogo from "@/assets/images/novalogica-logo.svg";
+import { useNavigation } from "@/hooks/useNavigation";
+import { ThemeToggle } from "./ui/theme-toggle";
+
+export interface HeaderProps {
+  className?: string;
+  logo?: React.ReactNode;
+  navItems?: NavItem[];
+  currentPageId?: string;
+  onNavigate?: (pageId: string) => void;
+  onLogoClick?: () => void;
+}
+
+const Header = memo(function Header({
+  className,
+  navItems = defaultNavItems,
+  currentPageId = "home",
+  onLogoClick,
+}: HeaderProps) {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const toggleMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);
+
+  const { currentPage, navigate } = useNavigation();
+
+  const handleNavigate = (pageId: string) => {
+    navigate(pageId);
+    setIsMobileMenuOpen(false);
+  };
+
+  return (
+    <div
+      className={cn(
+        "fixed top-0 left-0 right-0 z-50 flex justify-center px-2",
+        "transition-all duration-200 pt-2",
+        className,
+      )}
+    >
+      <header
+        className={cn(
+          "bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60",
+          "border rounded-3xl w-full max-w-7xl",
+          "transition-all duration-200 shadow-sm relative",
+        )}
+      >
+        <div className="h-16 flex items-center justify-between px-4">
+          {/* Logo Section */}
+          <div className="shrink-0 flex items-center">
+            <button
+              onClick={onLogoClick}
+              className="flex items-center gap-2 transition-opacity hover:opacity-80"
+              type="button"
+            >
+              <img
+                src={appLogo}
+                alt="App Logo"
+                height={45}
+                width={45}
+                className="object-contain"
+              />
+            </button>
+          </div>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-full">
+            <div className="flex items-center gap-8 h-full">
+              {navItems.map((item) => {
+                const isActive = currentPage.id === item.pageId;
+                const Icon = item.icon;
+                return (
+                  <button
+                    key={item.pageId}
+                    onClick={() => navigate(item.pageId)}
+                    className={cn(
+                      "flex items-center gap-2 h-full px-1 text-sm font-medium transition-all duration-200 border-b-2",
+                      isActive
+                        ? "text-foreground border-primary"
+                        : "text-muted-foreground border-transparent hover:text-foreground",
+                    )}
+                    type="button"
+                  >
+                    <Icon className="size-4" />
+                    {item.label}
+                  </button>
+                );
+              })}
+            </div>
+          </nav>
+
+          {/* Right Section */}
+          <div className="flex items-center gap-2">
+            <div className="hidden md:block">
+              <ThemeToggle />
+            </div>
+
+            {/* Mobile Menu Toggle */}
+            <div className="md:hidden">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={toggleMenu}
+                className="size-9 rounded-full"
+              >
+                {isMobileMenuOpen ? (
+                  <Cancel01Icon className="size-5" />
+                ) : (
+                  <Menu01Icon className="size-5" />
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Mobile Menu Dropdown */}
+        {isMobileMenuOpen && (
+          <div className="absolute top-full left-0 right-0 mt-2 p-4 bg-background border rounded-2xl shadow-lg md:hidden flex flex-col gap-4 animate-in fade-in slide-in-from-top-5">
+            <nav className="flex flex-col p-2 gap-6">
+              {navItems.map((item) => {
+                const Icon = item.icon;
+                const isActive = currentPageId === item.pageId;
+
+                return (
+                  <button
+                    key={item.pageId}
+                    onClick={() => handleNavigate(item.pageId)}
+                    className={cn(
+                      "flex items-center gap-4 px-4 py-2 text-base font-medium transition-colors",
+                      isActive
+                        ? "text-foreground font-semibold"
+                        : "text-muted-foreground hover:text-foreground",
+                    )}
+                    type="button"
+                  >
+                    <Icon className="size-5" />
+                    {item.label}
+                  </button>
+                );
+              })}
+
+              <div className="h-px bg-border/50 mx-2" />
+
+              <div className="flex items-center justify-between px-4">
+                <span className="text-sm font-medium text-muted-foreground">
+                  Theme
+                </span>
+                <ThemeToggle />
+              </div>
+            </nav>
+          </div>
+        )}
+      </header>
+    </div>
+  );
+});
+
+Header.displayName = "Header";
+
+export default Header;

package/src/components/page-layout.tsx

@@ -0,0 +1,78 @@
+import type { ReactNode } from "react";
+
+export interface PageLayoutProps {
+  /**
+   * Page title displayed in the header
+   */
+  title: string;
+
+  /**
+   * Optional subtitle/description below the title
+   */
+  description?: string;
+
+  /**
+   * Icon component to display next to the title
+   */
+  icon?: React.ElementType;
+
+  /**
+   * Optional toolbar/actions component (e.g., buttons, filters)
+   */
+  toolbar?: ReactNode;
+
+  /**
+   * Main page content
+   */
+  children: ReactNode;
+
+  /**
+   * Optional className for additional styling
+   */
+  className?: string;
+}
+
+/**
+ * PageLayout - Reusable page layout component
+ * Provides consistent structure across all application pages with header, icon, description, and content area
+ */
+export const PageLayout = ({
+  title,
+  description,
+  icon: Icon,
+  toolbar,
+  children,
+  className = "",
+}: PageLayoutProps) => {
+  return (
+    <div className="flex-1 flex flex-col h-full bg-background/50">
+      <div
+        className={`flex-1 container max-w-7xl mx-auto pt-24 pb-10 px-4 sm:px-6 lg:px-8 ${className}`}
+      >
+        {/* Header */}
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
+          <div className="flex items-start gap-4">
+            {Icon && (
+              <div className="p-3 bg-primary/10 rounded-xl">
+                <Icon className="w-8 h-8 text-primary" />
+              </div>
+            )}
+            <div>
+              <h1 className="text-2xl font-bold tracking-tight text-foreground">
+                {title}
+              </h1>
+              {description && (
+                <p className="text-muted-foreground mt-1">{description}</p>
+              )}
+            </div>
+          </div>
+
+          {toolbar && <div>{toolbar}</div>}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 flex flex-col">{children}</div>
+      </div>
+    </div>
+  );
+};

package/src/components/page-render.tsx

@@ -0,0 +1,16 @@
+import { useNavigation } from "@/hooks/useNavigation";
+
+export function PageRenderer() {
+  const { currentPage } = useNavigation();
+
+  const PageComponent = currentPage.component;
+
+  return (
+    <div
+      key={currentPage.id}
+      className="flex-1 flex flex-col w-full animate-in fade-in slide-in-from-bottom-4 duration-300 ease-out"
+    >
+      <PageComponent />
+    </div>
+  );
+}

package/src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

package/src/components/ui/badge.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+        soft: "bg-primary/10 text-primary [a&]:hover:bg-primary/20 border-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/button.tsx

@@ -0,0 +1,165 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Loading03Icon, Tick02Icon } from "hugeicons-react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 active:scale-95",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+
+        // Premium Soft Variants
+        soft: "bg-primary/10 text-primary hover:bg-primary/20",
+        "soft-blue":
+          "bg-blue-500/10 text-blue-600 dark:text-blue-400 hover:bg-blue-500/20",
+        "soft-emerald":
+          "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/20",
+        "soft-amber":
+          "bg-amber-500/10 text-amber-600 dark:text-amber-400 hover:bg-amber-500/20",
+        "soft-rose":
+          "bg-rose-500/10 text-rose-600 dark:text-rose-400 hover:bg-rose-500/20",
+        "soft-violet":
+          "bg-violet-500/10 text-violet-600 dark:text-violet-400 hover:bg-violet-500/20",
+        "soft-cyan":
+          "bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500/20",
+
+        // Premium Gradient Variants
+        gradient:
+          "bg-gradient-to-br from-primary to-primary/60 text-primary-foreground shadow-md hover:opacity-90",
+        "gradient-blue":
+          "bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-md hover:opacity-90",
+        "gradient-emerald":
+          "bg-gradient-to-br from-emerald-500 to-emerald-600 text-white shadow-md hover:opacity-90",
+        "gradient-violet":
+          "bg-gradient-to-br from-violet-500 to-violet-600 text-white shadow-md hover:opacity-90",
+        "gradient-rose":
+          "bg-gradient-to-br from-rose-500 to-rose-600 text-white shadow-md hover:opacity-90",
+
+        // Glow Variants
+        glow: "bg-primary text-primary-foreground shadow-lg shadow-primary/25 hover:shadow-primary/40",
+        "glow-blue":
+          "bg-blue-500 text-white shadow-lg shadow-blue-500/25 hover:shadow-blue-500/40",
+        "glow-emerald":
+          "bg-emerald-500 text-white shadow-lg shadow-emerald-500/25 hover:shadow-emerald-500/40",
+        "glow-violet":
+          "bg-violet-500 text-white shadow-lg shadow-violet-500/25 hover:shadow-violet-500/40",
+
+        // Glass Variants
+        glass:
+          "bg-white/10 text-foreground backdrop-blur-md border border-white/20 hover:bg-white/20",
+        "glass-dark":
+          "bg-black/10 text-foreground backdrop-blur-md border border-black/10 hover:bg-black/20",
+
+        // Functional Variants
+        success: "bg-emerald-500 text-white shadow-sm hover:bg-emerald-600",
+        warning: "bg-amber-500 text-white shadow-sm hover:bg-amber-600",
+      },
+      size: {
+        default: "h-9 px-4 py-2 [&_svg]:size-4",
+        sm: "h-8 px-3 text-xs [&_svg]:size-3.5",
+        lg: "h-10 px-8 [&_svg]:size-5",
+        xl: "h-12 px-10 text-base [&_svg]:size-6",
+        icon: "h-9 w-9 [&_svg]:size-4",
+        "icon-sm": "h-8 w-8 [&_svg]:size-3.5",
+        "icon-md": "h-9 w-9 [&_svg]:size-4",
+        "icon-lg": "h-10 w-10 [&_svg]:size-5",
+        "icon-xl": "h-12 w-12 [&_svg]:size-6",
+      },
+      rounded: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        default: "rounded-md",
+        md: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        "2xl": "rounded-2xl",
+        full: "rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      rounded: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  isLoading?: boolean;
+  isSuccess?: boolean;
+  leftIcon?: React.ElementType;
+  rightIcon?: React.ElementType;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      rounded,
+      asChild = false,
+      isLoading = false,
+      isSuccess = false,
+      leftIcon: LeftIcon,
+      rightIcon: RightIcon,
+      children,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+
+    // When using asChild, Slot expects exactly one child, so we can't add icons/loading states
+    if (asChild) {
+      return (
+        <Comp
+          className={cn(buttonVariants({ variant, size, rounded, className }))}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </Comp>
+      );
+    }
+
+    return (
+      <Comp
+        className={cn(
+          buttonVariants({ variant, size, rounded, className }),
+          isLoading && "disabled:cursor-progress",
+        )}
+        ref={ref}
+        disabled={isLoading || disabled}
+        {...props}
+      >
+        {isLoading && <Loading03Icon className="animate-spin" />}
+        {isSuccess && !isLoading && <Tick02Icon />}
+        {!isLoading && !isSuccess && LeftIcon && <LeftIcon />}
+        {children}
+        {!isLoading && RightIcon && <RightIcon />}
+      </Comp>
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}