@umituz/web-dashboard 2.0.7 → 2.0.8

package/package.json

@@ -1,89 +1,45 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "Dashboard Layout System - Customizable, themeable dashboard layouts and settings",
-  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "sideEffects": false,
   "exports": {
-    "./layouts": {
-      "types": "./dist/layouts/index.d.ts",
-      "import": "./dist/layouts/index.js"
-    },
-    "./layouts/components": {
-      "types": "./dist/layouts/components/index.d.ts",
-      "import": "./dist/layouts/components/index.js"
-    },
-    "./layouts/hooks": {
-      "types": "./dist/layouts/hooks/index.d.ts",
-      "import": "./dist/layouts/hooks/index.js"
-    },
-    "./layouts/utils": {
-      "types": "./dist/layouts/utils/index.d.ts",
-      "import": "./dist/layouts/utils/index.js"
-    },
-    "./layouts/types": {
-      "types": "./dist/layouts/types/index.d.ts",
-      "import": "./dist/layouts/types/index.js"
-    },
-    "./layouts/theme": {
-      "types": "./dist/layouts/theme/index.d.ts",
-      "import": "./dist/layouts/theme/index.js"
-    },
-    "./settings": {
-      "types": "./dist/settings/index.d.ts",
-      "import": "./dist/settings/index.js"
-    },
-    "./settings/components": {
-      "types": "./dist/settings/components/index.d.ts",
-      "import": "./dist/settings/components/index.js"
-    },
-    "./settings/hooks": {
-      "types": "./dist/settings/hooks/index.d.ts",
-      "import": "./dist/settings/hooks/index.js"
-    },
-    "./settings/utils": {
-      "types": "./dist/settings/utils/index.d.ts",
-      "import": "./dist/settings/utils/index.js"
-    },
-    "./settings/types": {
-      "types": "./dist/settings/types/index.d.ts",
-      "import": "./dist/settings/types/index.js"
-    },
-    "./onboarding": {
-      "types": "./dist/onboarding/index.d.ts",
-      "import": "./dist/onboarding/index.js"
-    },
-    "./onboarding/components": {
-      "types": "./dist/onboarding/components/index.d.ts",
-      "import": "./dist/onboarding/components/index.js"
-    },
-    "./onboarding/hooks": {
-      "types": "./dist/onboarding/hooks/index.d.ts",
-      "import": "./dist/onboarding/hooks/index.js"
-    },
-    "./onboarding/utils": {
-      "types": "./dist/onboarding/utils/index.d.ts",
-      "import": "./dist/onboarding/utils/index.js"
-    },
-    "./onboarding/types": {
-      "types": "./dist/onboarding/types/index.d.ts",
-      "import": "./dist/onboarding/types/index.js"
-    },
+    ".": "./src/index.ts",
+    "./layouts": "./src/domains/layouts/index.ts",
+    "./layouts/components": "./src/domains/layouts/components/index.ts",
+    "./layouts/hooks": "./src/domains/layouts/hooks/index.ts",
+    "./layouts/utils": "./src/domains/layouts/utils/index.ts",
+    "./layouts/types": "./src/domains/layouts/types/index.ts",
+    "./layouts/theme": "./src/domains/layouts/theme/index.ts",
+    "./settings": "./src/domains/settings/index.ts",
+    "./settings/components": "./src/domains/settings/components/index.ts",
+    "./settings/hooks": "./src/domains/settings/hooks/index.ts",
+    "./settings/utils": "./src/domains/settings/utils/index.ts",
+    "./settings/types": "./src/domains/settings/types/index.ts",
+    "./onboarding": "./src/domains/onboarding/index.ts",
+    "./onboarding/components": "./src/domains/onboarding/components/index.ts",
+    "./onboarding/hooks": "./src/domains/onboarding/hooks/index.ts",
+    "./onboarding/utils": "./src/domains/onboarding/utils/index.ts",
+    "./onboarding/types": "./src/domains/onboarding/types/index.ts",
     "./package.json": "./package.json"
   },
   "files": [
-    "dist",
+    "src",
     "README.md"
   ],
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
     "lint": "eslint src",
-    "test": "vitest",
-    "prepublishOnly": "npm run build"
+    "version:patch": "npm version patch -m 'chore: release v%s'",
+    "version:minor": "npm version minor -m 'chore: release v%s'",
+    "version:major": "npm version major -m 'chore: release v%s'"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-router-dom": "^7.0.0"
   },
   "dependencies": {
     "class-variance-authority": "^0.7.1",
@@ -100,9 +56,7 @@
     "eslint": "^10.0.2",
     "react-i18next": "^16.5.4",
     "react-router-dom": "^7.13.1",
-    "tsup": "^8.4.0",
-    "typescript": "^5.9.3",
-    "vitest": "^4.0.18"
+    "typescript": "^5.9.3"
   },
   "keywords": [
     "dashboard",
@@ -116,10 +70,14 @@
     "admin",
     "sidebar",
     "header",
-    "config-driven"
+    "config-driven",
+    "package-driven"
   ],
-  "author": "Umit Uz",
+  "author": "umituz",
   "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/umituz/web-dashboard.git"

package/src/domains/layouts/components/BrandLogo.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { cn } from "@umituz/web-design-system/utils";
+
+interface BrandLogoProps {
+  className?: string;
+  size?: number;
+}
+
+/**
+ * BrandLogo Component
+ *
+ * Displays the application brand logo as an SVG.
+ * Supports custom sizing and styling through className.
+ *
+ * @param className - Optional CSS classes for styling
+ * @param size - Width and height in pixels (default: 32)
+ */
+export const BrandLogo = ({ className, size = 32 }: BrandLogoProps) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 100 100"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("shrink-0", className)}
+    >
+      {/* Solid Foundation / Platform */}
+      <rect
+        x="15"
+        y="65"
+        width="70"
+        height="15"
+        rx="4"
+        fill="hsl(var(--primary))"
+      />
+
+      {/* Assembly Paths / Structure */}
+      <rect
+        x="25"
+        y="25"
+        width="12"
+        height="40"
+        rx="2"
+        fill="hsl(var(--primary))"
+      />
+      <rect
+        x="44"
+        y="35"
+        width="12"
+        height="30"
+        rx="2"
+        fill="hsl(var(--primary))"
+      />
+      <rect
+        x="63"
+        y="20"
+        width="12"
+        height="45"
+        rx="2"
+        fill="hsl(var(--primary))"
+      />
+
+      {/* Modern Accent - The 'Assembly' Bridge */}
+      <rect
+        x="20"
+        y="45"
+        width="60"
+        height="10"
+        rx="2"
+        fill="hsl(var(--secondary))"
+      />
+
+      {/* Connection Point / Beacon */}
+      <circle
+        cx="50"
+        cy="20"
+        r="5"
+        fill="hsl(var(--secondary))"
+      />
+    </svg>
+  );
+};

package/src/domains/layouts/components/DashboardHeader.tsx

@@ -0,0 +1,240 @@
+import React, { useState } from "react";
+import {
+  Bell, X, Sun, Moon, Menu, User, Settings, LogOut,
+  ChevronDown, CreditCard
+} from "lucide-react";
+import { Button } from "@umituz/web-design-system/atoms";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import type { DashboardHeaderProps } from "../types/layout";
+import type { DashboardNotification } from "../types/notification";
+import type { DashboardUser } from "../types/user";
+import { formatNotificationTime } from "../utils/dashboard";
+
+interface DashboardHeaderPropsExtended extends DashboardHeaderProps {
+  /** Auth user */
+  user?: DashboardUser;
+  /** Notifications */
+  notifications?: DashboardNotification[];
+  /** Logout function */
+  onLogout?: () => Promise<void>;
+  /** Mark all as read function */
+  onMarkAllRead?: () => void;
+  /** Dismiss notification function */
+  onDismissNotification?: (id: string) => void;
+  /** Settings route */
+  settingsRoute?: string;
+  /** Profile route */
+  profileRoute?: string;
+  /** Billing route */
+  billingRoute?: string;
+}
+
+/**
+ * Dashboard Header Component
+ *
+ * Displays top navigation bar with theme toggle, notifications,
+ * user menu, and organisation selector.
+ *
+ * @param props - Dashboard header props
+ */
+export const DashboardHeader = ({
+  collapsed,
+  setCollapsed,
+  setMobileOpen,
+  title,
+  user,
+  notifications = [],
+  onLogout,
+  onMarkAllRead,
+  onDismissNotification,
+  settingsRoute = "/dashboard/settings",
+  profileRoute = "/dashboard/profile",
+  billingRoute = "/dashboard/billing",
+}: DashboardHeaderPropsExtended) => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const [notifOpen, setNotifOpen] = useState(false);
+  const [profileOpen, setProfileOpen] = useState(false);
+
+  const unreadCount = notifications.filter((n) => !n.read).length;
+
+  const markAllRead = () => {
+    onMarkAllRead?.();
+  };
+
+  const handleLogout = async () => {
+    try {
+      await onLogout?.();
+      navigate("/login");
+    } catch {
+      // Error handling can be added by parent component
+    }
+  };
+
+  // Placeholder components - these should be provided by the consuming app
+  const ThemeToggle = () => {
+    const [resolvedTheme, setResolvedTheme] = React.useState<"light" | "dark">("light");
+
+    return (
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => setResolvedTheme(resolvedTheme === "light" ? "dark" : "light")}
+        className="text-muted-foreground h-9 w-9"
+        title={resolvedTheme === "dark" ? t('common.tooltips.switchLight') : t('common.tooltips.switchDark')}
+      >
+        {resolvedTheme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+      </Button>
+    );
+  };
+
+  return (
+    <header className="flex h-14 items-center justify-between border-b border-border bg-card/50 backdrop-blur-md px-4 shrink-0 z-30">
+      <div className="flex items-center gap-3">
+        <Button variant="ghost" size="icon" className="md:hidden" onClick={() => setMobileOpen(true)}>
+          <Menu className="h-5 w-5" />
+        </Button>
+        {collapsed && (
+          <Button variant="ghost" size="icon" className="hidden md:inline-flex" onClick={() => setCollapsed(false)}>
+            <Menu className="h-5 w-5" />
+          </Button>
+        )}
+        <h2 className="text-sm font-semibold text-foreground">
+          {title}
+        </h2>
+      </div>
+
+      <div className="flex items-center gap-2">
+        {/* Theme Toggle */}
+        <ThemeToggle />
+
+        {/* Notifications */}
+        <div className="relative">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-muted-foreground relative h-9 w-9"
+            onClick={() => {
+              setNotifOpen(!notifOpen);
+              setProfileOpen(false);
+            }}
+          >
+            <Bell className="h-4 w-4" />
+            {unreadCount > 0 && (
+              <span className="absolute top-2 right-2 flex h-2 w-2">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-destructive opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-2 w-2 bg-destructive"></span>
+              </span>
+            )}
+          </Button>
+
+          {notifOpen && (
+            <>
+              <div className="fixed inset-0 z-40" onClick={() => setNotifOpen(false)} />
+              <div className="absolute top-12 right-0 w-80 bg-popover border border-border rounded-xl shadow-xl z-50 overflow-hidden animate-in fade-in zoom-in-95 duration-200">
+                <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-muted/50">
+                  <h3 className="text-xs font-bold uppercase tracking-wider text-foreground">{t('dashboard.notifications.title')}</h3>
+                  {unreadCount > 0 && (
+                    <button onClick={markAllRead} className="text-[10px] font-bold text-primary hover:underline uppercase">{t('dashboard.notifications.markAllRead')}</button>
+                  )}
+                </div>
+
+                <div className="max-h-[400px] overflow-y-auto">
+                  {notifications.map((n) => (
+                    <div key={n.id} className={`px-4 py-3 border-b border-border last:border-0 flex items-start gap-3 transition-colors hover:bg-muted/30 ${!n.read ? "bg-primary/5" : ""}`}>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm text-foreground leading-snug">{n.text}</p>
+                        <p className="text-[10px] text-muted-foreground mt-1 flex items-center gap-1">
+                          <span className="inline-block w-1 h-1 rounded-full bg-muted-foreground/30" />
+                          {formatNotificationTime(n.createdAt, t)}
+                        </p>
+                      </div>
+                      <button
+                        onClick={() => onDismissNotification?.(n.id)}
+                        className="text-muted-foreground/50 hover:text-foreground shrink-0 transition-colors"
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </div>
+                  ))}
+                  {notifications.length === 0 && (
+                    <div className="px-4 py-10 text-center">
+                      <div className="mx-auto w-10 h-10 rounded-full bg-muted flex items-center justify-center mb-3">
+                        <Bell className="h-5 w-5 text-muted-foreground/50" />
+                      </div>
+                      <p className="text-sm text-muted-foreground">{t('dashboard.notifications.none')}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+
+        <div className="h-6 w-px bg-border mx-1" />
+
+        <div className="relative">
+          <button
+            onClick={() => {
+              setProfileOpen(!profileOpen);
+              setNotifOpen(false);
+            }}
+            className="flex items-center gap-2 p-1 pl-1 rounded-full hover:bg-muted transition-colors group"
+          >
+            <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-[10px] font-bold text-primary overflow-hidden border border-primary/20 ring-primary/20 group-hover:ring-4 transition-all">
+              {user?.avatar && <img src={user.avatar} alt="User" className="w-full h-full object-cover" />}
+            </div>
+            <ChevronDown className={`h-4 w-4 text-muted-foreground transition-transform duration-200 ${profileOpen && "rotate-180"}`} />
+          </button>
+
+          {profileOpen && (
+            <>
+              <div className="fixed inset-0 z-40" onClick={() => setProfileOpen(false)} />
+              <div className="absolute top-12 right-0 w-56 bg-popover border border-border rounded-xl shadow-xl z-50 overflow-hidden animate-in fade-in zoom-in-95 duration-200 p-1.5">
+                <div className="px-3 py-2 border-b border-border/50 mb-1">
+                  <p className="text-sm font-bold text-foreground">{user?.name || t("common.roles.user")}</p>
+                  <p className="text-xs text-muted-foreground truncate">{user?.email}</p>
+                </div>
+
+                <div className="space-y-0.5">
+                  <button
+                    onClick={() => { navigate(profileRoute); setProfileOpen(false); }}
+                    className="flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-muted rounded-lg transition-colors"
+                  >
+                    <User className="h-4 w-4 text-muted-foreground" />
+                    {t('common.profile')}
+                  </button>
+                  <button
+                    onClick={() => { navigate(billingRoute); setProfileOpen(false); }}
+                    className="flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-muted rounded-lg transition-colors"
+                  >
+                    <CreditCard className="h-4 w-4 text-muted-foreground" />
+                    {t('common.billing')}
+                  </button>
+                  <button
+                    onClick={() => { navigate(settingsRoute); setProfileOpen(false); }}
+                    className="flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-muted rounded-lg transition-colors"
+                  >
+                    <Settings className="h-4 w-4 text-muted-foreground" />
+                    {t('common.settings')}
+                  </button>
+                </div>
+
+                <div className="h-px bg-border my-1.5" />
+
+                <button
+                  onClick={handleLogout}
+                  className="flex w-full items-center gap-2.5 px-3 py-2 text-sm text-destructive hover:bg-destructive/10 rounded-lg transition-colors font-medium"
+                >
+                  <LogOut className="h-4 w-4" />
+                  {t('common.logout')}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+};

package/src/domains/layouts/components/DashboardLayout.tsx

@@ -0,0 +1,155 @@
+import { useState, useEffect } from "react";
+import { useLocation, Outlet, Navigate } from "react-router-dom";
+import { Skeleton } from "@umituz/web-design-system/atoms";
+import { DashboardSidebar } from "./DashboardSidebar";
+import { DashboardHeader } from "./DashboardHeader";
+import type { DashboardLayoutConfig } from "../types/layout";
+import type { DashboardNotification } from "../types/notification";
+import type { DashboardUser } from "../types/user";
+
+interface DashboardLayoutProps {
+  /** Layout configuration */
+  config: DashboardLayoutConfig;
+  /** Auth user */
+  user?: DashboardUser;
+  /** Auth loading state */
+  authLoading?: boolean;
+  /** Authenticated state */
+  isAuthenticated?: boolean;
+  /** Notifications */
+  notifications?: DashboardNotification[];
+  /** Logout function */
+  onLogout?: () => Promise<void>;
+  /** Mark all as read function */
+  onMarkAllRead?: () => void;
+  /** Dismiss notification function */
+  onDismissNotification?: (id: string) => void;
+  /** Login route for redirect */
+  loginRoute?: string;
+}
+
+/**
+ * Dashboard Layout Component
+ *
+ * Main layout wrapper for dashboard pages.
+ * Provides sidebar, header, and content area with responsive design.
+ *
+ * Features:
+ * - Collapsible sidebar
+ * - Mobile menu overlay
+ * - Breadcrumb page titles
+ * - Loading skeletons
+ * - Auth protection
+ *
+ * @param props - Dashboard layout props
+ */
+export const DashboardLayout = ({
+  config,
+  user,
+  authLoading = false,
+  isAuthenticated = true,
+  notifications = [],
+  onLogout,
+  onMarkAllRead,
+  onDismissNotification,
+  loginRoute = "/login",
+}: DashboardLayoutProps) => {
+  const location = useLocation();
+  const [collapsed, setCollapsed] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    const timer = setTimeout(() => setLoading(false), 300);
+    return () => clearTimeout(timer);
+  }, [location.pathname]);
+
+  useEffect(() => {
+    setMobileOpen(false);
+  }, [location.pathname]);
+
+  if (authLoading) return null;
+  if (!isAuthenticated) return <Navigate to={loginRoute} replace />;
+
+  const activeItem = config.sidebarGroups
+    .flatMap((group) => group.items)
+    .find((i) => i.path === location.pathname);
+
+  const getTitle = () => {
+    if (!activeItem) return config.extraTitleMap?.[location.pathname] || "Dashboard";
+    return activeItem.label; // Note: In real app, this would be translated
+  };
+
+  const currentTitle = getTitle();
+
+  return (
+    <div className="flex h-screen w-full bg-background font-sans">
+      {/* Desktop Sidebar */}
+      <aside
+        className={`hidden md:flex flex-col shrink-0 border-r border-sidebar-border bg-sidebar transition-all duration-300 ${
+          collapsed ? "w-16" : "w-60"
+        }`}
+      >
+        <DashboardSidebar
+          collapsed={collapsed}
+          setCollapsed={setCollapsed}
+          sidebarGroups={config.sidebarGroups}
+          brandName={config.brandName}
+          brandTagline={config.brandTagline}
+          user={user}
+        />
+      </aside>
+
+      {/* Mobile Menu Overlay */}
+      {mobileOpen && (
+        <div className="fixed inset-0 z-50 md:hidden">
+          <div className="absolute inset-0 bg-background/80 backdrop-blur-sm" onClick={() => setMobileOpen(false)} />
+          <aside className="absolute left-0 top-0 h-full w-60 border-r border-sidebar-border bg-sidebar shadow-xl">
+            <DashboardSidebar
+              collapsed={false}
+              setCollapsed={() => setMobileOpen(false)}
+              sidebarGroups={config.sidebarGroups}
+              brandName={config.brandName}
+              brandTagline={config.brandTagline}
+              user={user}
+            />
+          </aside>
+        </div>
+      )}
+
+      {/* Main Content Area */}
+      <div className="flex flex-1 flex-col overflow-hidden min-w-0">
+        <DashboardHeader
+          collapsed={collapsed}
+          setCollapsed={setCollapsed}
+          setMobileOpen={setMobileOpen}
+          title={currentTitle}
+          user={user}
+          notifications={notifications}
+          onLogout={onLogout}
+          onMarkAllRead={onMarkAllRead}
+          onDismissNotification={onDismissNotification}
+        />
+
+        <main className="flex-1 overflow-y-auto p-4 md:p-8">
+          {loading ? (
+            <div className="mx-auto w-full max-w-7xl space-y-6">
+              <Skeleton className="h-8 w-1/3 rounded-xl" />
+              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                {Array.from({ length: 4 }).map((_, i) => (
+                  <Skeleton key={i} className="h-28 rounded-2xl" />
+                ))}
+              </div>
+              <Skeleton className="h-64 rounded-[32px]" />
+            </div>
+          ) : (
+            <Outlet />
+          )}
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardLayout;