@umituz/web-dashboard 2.0.7 → 2.0.8

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

@@ -0,0 +1,152 @@
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@umituz/web-design-system/atoms";
+import { BrandLogo } from "./BrandLogo";
+import { PenTool, Menu, ChevronLeft, ChevronDown, ChevronRight } from "lucide-react";
+import type { DashboardSidebarProps } from "../types/layout";
+import type { DashboardUser } from "../types/user";
+import type { SidebarGroup } from "../types/sidebar";
+import { filterSidebarItems } from "../utils/dashboard";
+
+interface DashboardSidebarPropsExtended extends DashboardSidebarProps {
+  /** Sidebar groups configuration */
+  sidebarGroups: SidebarGroup[];
+  /** Brand name */
+  brandName?: string;
+  /** Brand tagline */
+  brandTagline?: string;
+  /** Create post route */
+  createPostRoute?: string;
+  /** Auth user */
+  user?: DashboardUser;
+}
+
+/**
+ * Dashboard Sidebar Component
+ *
+ * Displays collapsible sidebar with navigation menu items.
+ * Supports app-based filtering (mobile/web) and collapsible groups.
+ *
+ * @param props - Dashboard sidebar props
+ */
+export const DashboardSidebar = ({
+  collapsed,
+  setCollapsed,
+  sidebarGroups,
+  brandName = "App",
+  brandTagline = "grow smarter",
+  createPostRoute = "/dashboard/create",
+  user,
+}: DashboardSidebarPropsExtended) => {
+  const location = useLocation();
+  const { t } = useTranslation();
+  const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
+
+  const toggleGroup = (title: string) => {
+    setCollapsedGroups(prev => ({
+      ...prev,
+      [title]: !prev[title]
+    }));
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Brand Section */}
+      <div className="flex h-16 items-center gap-3 border-b border-sidebar-border px-4 transition-all duration-300">
+        <BrandLogo size={32} />
+        {!collapsed && (
+          <div className="flex flex-col -gap-1">
+            <span className="text-2xl font-black text-sidebar-foreground tracking-tighter leading-none">{brandName}</span>
+            <span className="text-[11px] font-bold text-primary/70 lowercase tracking-tight mt-2 ml-1 select-none underline decoration-primary/40 underline-offset-[6px] decoration-2">
+              {brandTagline}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Create Button */}
+      <div className="px-3 py-4 border-b border-sidebar-border/50">
+        <Link to={createPostRoute}>
+          <Button
+            variant="default"
+            className={`w-full gap-3 shadow-glow transition-all active:scale-95 group overflow-hidden rounded-xl ${
+              collapsed ? "px-0 justify-center h-10 w-10 mx-auto" : "justify-start px-4 h-11"
+            }`}
+            title={collapsed ? t('sidebar.createPost') : undefined}
+          >
+            <PenTool className={`shrink-0 transition-transform duration-300 ${collapsed ? "h-5 w-5" : "h-4 w-4 group-hover:scale-110"}`} />
+            {!collapsed && <span className="font-bold tracking-tight">{t('sidebar.createPost')}</span>}
+          </Button>
+        </Link>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 overflow-y-auto px-2 py-3 scrollbar-hide">
+        <div className="space-y-6">
+          {sidebarGroups.map((group) => {
+            const filteredItems = filterSidebarItems(group.items, user);
+
+            if (filteredItems.length === 0) return null;
+
+            const isGroupCollapsed = collapsedGroups[group.title];
+
+            return (
+              <div key={group.title} className="space-y-1">
+                {!collapsed && (
+                  <button
+                    onClick={() => toggleGroup(group.title)}
+                    className="w-full flex items-center justify-between px-3 mb-2 group/header"
+                  >
+                    <span className="text-[10px] font-bold uppercase tracking-widest text-sidebar-foreground/40 group-hover/header:text-sidebar-foreground/70 transition-colors">
+                      {group.title === "sidebar.ai" ? `${brandName} AI` : t(group.title)}
+                    </span>
+                    {isGroupCollapsed ? (
+                      <ChevronRight className="h-3 w-3 text-sidebar-foreground/30 flex-shrink-0 group-hover/header:text-sidebar-foreground/50 transition-colors" />
+                    ) : (
+                      <ChevronDown className="h-3 w-3 text-sidebar-foreground/30 flex-shrink-0 group-hover/header:text-sidebar-foreground/50 transition-colors" />
+                    )}
+                  </button>
+                )}
+
+                {(!isGroupCollapsed || collapsed) && filteredItems.map((item) => {
+                  const active = location.pathname === item.path;
+                  return (
+                    <Link
+                      key={item.path}
+                      to={item.path}
+                      className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 ${
+                        active
+                          ? "bg-sidebar-accent text-sidebar-accent-foreground shadow-sm"
+                          : "text-sidebar-foreground/70 hover:bg-sidebar-accent/40 hover:text-sidebar-foreground"
+                      } ${collapsed ? "justify-center" : ""}`}
+                      title={collapsed ? t(item.label) : undefined}
+                    >
+                      <item.icon className={`h-4 w-4 shrink-0 transition-transform ${active && "scale-110"}`} />
+                      {!collapsed && <span>{t(item.label)}</span>}
+                    </Link>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </div>
+      </nav>
+
+      {/* Collapse Toggle */}
+      <div className="border-t border-sidebar-border p-3">
+        <div className={`flex items-center ${collapsed ? "justify-center" : "justify-between"}`}>
+          {!collapsed && (
+            <p className="text-[10px] uppercase tracking-wider text-sidebar-foreground/40 font-bold px-2">
+              {t('sidebar.system')}
+            </p>
+          )}
+          <Button variant="ghost" size="icon" onClick={() => setCollapsed(!collapsed)} className="text-sidebar-foreground/70">
+            {collapsed ? <Menu className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/domains/layouts/components/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Layout Components Export
+ */
+
+export { DashboardLayout } from './DashboardLayout';
+export { DashboardHeader } from './DashboardHeader';
+export { DashboardSidebar } from './DashboardSidebar';
+export { BrandLogo } from './BrandLogo';

package/src/domains/layouts/hooks/dashboard.ts

@@ -0,0 +1,81 @@
+/**
+ * Dashboard Hooks
+ *
+ * Custom React hooks for dashboard functionality
+ */
+
+import { useState, useCallback } from "react";
+import type { DashboardNotification } from "../types/notification";
+
+/**
+ * Use Notifications Hook
+ *
+ * Manages notification state and actions
+ *
+ * @param initialNotifications - Initial notification list
+ * @returns Notification state and actions
+ */
+export function useNotifications(initialNotifications: DashboardNotification[] = []) {
+  const [notifications, setNotifications] = useState<DashboardNotification[]>(initialNotifications);
+
+  const markAllRead = useCallback(() => {
+    setNotifications((prev) =>
+      prev.map((n) => ({ ...n, read: true }))
+    );
+  }, []);
+
+  const dismiss = useCallback((id: string) => {
+    setNotifications((prev) => prev.filter((n) => n.id !== id));
+  }, []);
+
+  const add = useCallback((notification: Omit<DashboardNotification, "id">) => {
+    const newNotification: DashboardNotification = {
+      ...notification,
+      id: crypto.randomUUID(),
+      read: false,
+      createdAt: new Date(),
+    };
+    setNotifications((prev) => [newNotification, ...prev]);
+  }, []);
+
+  return {
+    notifications,
+    markAllRead,
+    dismiss,
+    add,
+  };
+}
+
+/**
+ * Use Sidebar Hook
+ *
+ * Manages sidebar state
+ *
+ * @returns Sidebar state and actions
+ */
+export function useSidebar(initialCollapsed = false) {
+  const [collapsed, setCollapsed] = useState(initialCollapsed);
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  const toggle = useCallback(() => {
+    setCollapsed((prev) => !prev);
+  }, []);
+
+  const openMobile = useCallback(() => {
+    setMobileOpen(true);
+  }, []);
+
+  const closeMobile = useCallback(() => {
+    setMobileOpen(false);
+  }, []);
+
+  return {
+    collapsed,
+    setCollapsed,
+    toggle,
+    mobileOpen,
+    setMobileOpen: setMobileOpen,
+    openMobile,
+    closeMobile,
+  };
+}

package/src/domains/layouts/hooks/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Layout Hooks Export
+ */
+
+export {
+  useNotifications,
+  useSidebar,
+} from './dashboard';

package/src/domains/layouts/index.ts

@@ -0,0 +1,11 @@
+/**
+ * @umituz/web-dashboard - Layouts Domain
+ *
+ * Dashboard Layout System
+ */
+
+export * from './components';
+export * from './hooks';
+export * from './utils';
+export * from './types';
+export * from './theme';

package/{dist/layouts/theme/default.js → src/domains/layouts/theme/default.ts}

@@ -1,7 +1,15 @@
-"use client";
+/**
+ * Dashboard Theme - Default Themes
+ *
+ * Default light and dark theme configurations
+ */
 
-// src/domains/layouts/theme/default.ts
-var DEFAULT_DASHBOARD_THEME = {
+import type { DashboardTheme } from '../types/theme';
+
+/**
+ * Default dashboard theme (light mode)
+ */
+export const DEFAULT_DASHBOARD_THEME: DashboardTheme = {
   primary: "hsl(222.2 47.4% 11.2%)",
   secondary: "hsl(217.2 32.6% 17.5%)",
   sidebarBackground: "hsl(222.2 47.4% 11.2%)",
@@ -21,9 +29,13 @@ var DEFAULT_DASHBOARD_THEME = {
   cardForeground: "hsl(222.2 84% 4.9%)",
   popover: "hsl(0 0% 100%)",
   popoverForeground: "hsl(222.2 84% 4.9%)",
-  radius: "0.5rem"
+  radius: "0.5rem",
 };
-var DEFAULT_DASHBOARD_THEME_DARK = {
+
+/**
+ * Default dashboard theme (dark mode)
+ */
+export const DEFAULT_DASHBOARD_THEME_DARK: DashboardTheme = {
   primary: "hsl(217.2 91.2% 59.8%)",
   secondary: "hsl(217.2 32.6% 17.5%)",
   sidebarBackground: "hsl(222.2 47.4% 11.2%)",
@@ -43,10 +55,5 @@ var DEFAULT_DASHBOARD_THEME_DARK = {
   cardForeground: "hsl(210 40% 98%)",
   popover: "hsl(222.2 84% 4.9%)",
   popoverForeground: "hsl(210 40% 98%)",
-  radius: "0.5rem"
-};
-export {
-  DEFAULT_DASHBOARD_THEME,
-  DEFAULT_DASHBOARD_THEME_DARK
+  radius: "0.5rem",
 };
-//# sourceMappingURL=default.js.map

package/src/domains/layouts/theme/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Layout Theme Export
+ */
+
+export {
+  DEFAULT_DASHBOARD_THEME,
+  DEFAULT_DASHBOARD_THEME_DARK,
+} from './default';
+
+export {
+  DASHBOARD_THEME_PRESETS,
+} from './presets';
+
+export {
+  applyDashboardTheme,
+  getDashboardThemePreset,
+  mergeDashboardTheme,
+} from './utils';

package/src/domains/layouts/theme/presets.ts

@@ -0,0 +1,96 @@
+/**
+ * Dashboard Theme - Presets
+ *
+ * Pre-configured theme presets
+ */
+
+import type { DashboardThemePreset } from '../types/theme';
+import { DEFAULT_DASHBOARD_THEME, DEFAULT_DASHBOARD_THEME_DARK } from './default';
+
+/**
+ * Available theme presets
+ */
+export const DASHBOARD_THEME_PRESETS: DashboardThemePreset[] = [
+  {
+    name: "default",
+    theme: DEFAULT_DASHBOARD_THEME,
+    dark: false,
+  },
+  {
+    name: "default-dark",
+    theme: DEFAULT_DASHBOARD_THEME_DARK,
+    dark: true,
+  },
+  {
+    name: "blue",
+    theme: {
+      ...DEFAULT_DASHBOARD_THEME,
+      primary: "hsl(221.2 83.2% 53.3%)",
+      accent: "hsl(221.2 83.2% 53.3%)",
+    },
+    dark: false,
+  },
+  {
+    name: "blue-dark",
+    theme: {
+      ...DEFAULT_DASHBOARD_THEME_DARK,
+      primary: "hsl(221.2 83.2% 53.3%)",
+      accent: "hsl(221.2 83.2% 53.3%)",
+    },
+    dark: true,
+  },
+  {
+    name: "purple",
+    theme: {
+      ...DEFAULT_DASHBOARD_THEME,
+      primary: "hsl(271.5 81.3% 55.9%)",
+      accent: "hsl(271.5 81.3% 55.9%)",
+    },
+    dark: false,
+  },
+  {
+    name: "purple-dark",
+    theme: {
+      ...DEFAULT_DASHBOARD_THEME_DARK,
+      primary: "hsl(271.5 81.3% 55.9%)",
+      accent: "hsl(271.5 81.3% 55.9%)",
+    },
+    dark: true,
+  },
+  {
+    name: "green",
+    theme: {
+      ...DEFAULT_DASHBOARD_THEME,
+      primary: "hsl(142.1 76.2% 36.3%)",
+      accent: "hsl(142.1 76.2% 36.3%)",
+    },
+    dark: false,
+  },
+  {
+    name: "green-dark",
+    theme: {
+      ...DEFAULT_DASHBOARD_THEME_DARK,
+      primary: "hsl(142.1 76.2% 36.3%)",
+      accent: "hsl(142.1 76.2% 36.3%)",
+    },
+    dark: true,
+  },
+  {
+    name: "orange",
+    theme: {
+      ...DEFAULT_DASHBOARD_THEME,
+      primary: "hsl(24.6 95% 53.1%)",
+      accent: "hsl(24.6 95% 53.1%)",
+    },
+    dark: false,
+  },
+  {
+    name: "orange-dark",
+    theme: {
+      ...DEFAULT_DASHBOARD_THEME_DARK,
+      primary: "hsl(24.6 95% 53.1%)",
+      accent: "hsl(24.6 95% 53.1%)",
+    },
+    dark: true,
+  },
+];

package/src/domains/layouts/theme/utils.ts

@@ -0,0 +1,67 @@
+/**
+ * Dashboard Theme - Utilities
+ *
+ * Theme utility functions
+ */
+
+import type { DashboardTheme, DashboardThemePreset } from '../types/theme';
+import { DEFAULT_DASHBOARD_THEME, DEFAULT_DASHBOARD_THEME_DARK } from './default';
+import { DASHBOARD_THEME_PRESETS } from './presets';
+
+/**
+ * Apply theme to document root via CSS variables
+ */
+export function applyDashboardTheme(theme: DashboardTheme): void {
+  if (typeof document === "undefined") return;
+
+  const root = document.documentElement;
+
+  const cssVars: Record<string, string | undefined> = {
+    "--primary": theme.primary,
+    "--secondary": theme.secondary,
+    "--sidebar": theme.sidebarBackground,
+    "--sidebar-foreground": theme.sidebarForeground,
+    "--sidebar-border": theme.sidebarBorder,
+    "--background": theme.background,
+    "--foreground": theme.foreground,
+    "--border": theme.border,
+    "--accent": theme.accent,
+    "--accent-foreground": theme.accentForeground,
+    "--destructive": theme.destructive,
+    "--destructive-foreground": theme.destructiveForeground,
+    "--muted": theme.muted,
+    "--muted-foreground": theme.mutedForeground,
+    "--card": theme.card,
+    "--card-foreground": theme.cardForeground,
+    "--popover": theme.popover,
+    "--popover-foreground": theme.popoverForeground,
+    "--radius": theme.radius,
+  };
+
+  Object.entries(cssVars).forEach(([key, value]) => {
+    if (value) {
+      root.style.setProperty(key, value);
+    }
+  });
+}
+
+/**
+ * Get theme preset by name
+ */
+export function getDashboardThemePreset(name: string): DashboardThemePreset | undefined {
+  return DASHBOARD_THEME_PRESETS.find((preset) => preset.name === name);
+}
+
+/**
+ * Merge custom theme with default theme
+ */
+export function mergeDashboardTheme(
+  customTheme: Partial<DashboardTheme>,
+  dark = false
+): DashboardTheme {
+  const baseTheme = dark ? DEFAULT_DASHBOARD_THEME_DARK : DEFAULT_DASHBOARD_THEME;
+  return {
+    ...baseTheme,
+    ...customTheme,
+  } as DashboardTheme;
+}

package/src/domains/layouts/types/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Layout Types Export
+ */
+
+export type { SidebarItem, SidebarGroup } from './sidebar';
+export type { DashboardHeaderProps, DashboardSidebarProps, DashboardLayoutConfig } from './layout';
+export type { DashboardTheme, DashboardThemePreset } from './theme';
+export type { DashboardNotification } from './notification';
+export type { DashboardUser, UserNavMenuItem } from './user';

package/src/domains/layouts/types/layout.ts

@@ -0,0 +1,43 @@
+/**
+ * Dashboard Types - Layout
+ *
+ * Type definitions for layout components
+ */
+
+/**
+ * Dashboard header props
+ */
+export interface DashboardHeaderProps {
+  /** Whether sidebar is collapsed */
+  collapsed: boolean;
+  /** Toggle sidebar collapsed state */
+  setCollapsed: (collapsed: boolean) => void;
+  /** Toggle mobile menu open state */
+  setMobileOpen: (open: boolean) => void;
+  /** Current page title */
+  title: string;
+}
+
+/**
+ * Dashboard sidebar props
+ */
+export interface DashboardSidebarProps {
+  /** Whether sidebar is collapsed */
+  collapsed: boolean;
+  /** Toggle sidebar collapsed state */
+  setCollapsed: (collapsed: boolean) => void;
+}
+
+/**
+ * Dashboard layout configuration
+ */
+export interface DashboardLayoutConfig {
+  /** Sidebar groups */
+  sidebarGroups: import('./sidebar').SidebarGroup[];
+  /** Extra title mappings for routes */
+  extraTitleMap?: Record<string, string>;
+  /** Brand name */
+  brandName?: string;
+  /** Brand tagline */
+  brandTagline?: string;
+}

package/src/domains/layouts/types/notification.ts

@@ -0,0 +1,19 @@
+/**
+ * Dashboard Types - Notification
+ *
+ * Type definitions for notification system
+ */
+
+/**
+ * Notification item
+ */
+export interface DashboardNotification {
+  /** Unique ID */
+  id: string;
+  /** Notification text */
+  text: string;
+  /** Whether notification is read */
+  read: boolean;
+  /** Creation timestamp */
+  createdAt: Date | string | number;
+}

package/src/domains/layouts/types/sidebar.ts

@@ -0,0 +1,35 @@
+/**
+ * Dashboard Types - Sidebar
+ *
+ * Type definitions for sidebar components
+ */
+
+import type { LucideIcon } from "lucide-react";
+
+/**
+ * Single sidebar menu item
+ */
+export interface SidebarItem {
+  /** Display label (can be i18n key) */
+  label: string;
+  /** Icon from lucide-react */
+  icon: LucideIcon;
+  /** Route path */
+  path: string;
+  /** Filter by app type (optional) */
+  requiredApp?: 'mobile' | 'web';
+  /** Enable/disable this item (default: true) */
+  enabled?: boolean;
+}
+
+/**
+ * Group of sidebar items with a title
+ */
+export interface SidebarGroup {
+  /** Group title (can be i18n key) */
+  title: string;
+  /** Items in this group */
+  items: SidebarItem[];
+  /** Optional: Route to title mapping for page headers */
+  titleMap?: Record<string, string>;
+}

package/src/domains/layouts/types/theme.ts

@@ -0,0 +1,64 @@
+/**
+ * Dashboard Types - Theme
+ *
+ * Type definitions for theme system
+ */
+
+/**
+ * Dashboard theme configuration
+ * Extends CSS variables for customization
+ */
+export interface DashboardTheme {
+  /** Primary color (CSS variable compatible) */
+  primary?: string;
+  /** Secondary color */
+  secondary?: string;
+  /** Sidebar background */
+  sidebarBackground?: string;
+  /** Sidebar foreground */
+  sidebarForeground?: string;
+  /** Sidebar border */
+  sidebarBorder?: string;
+  /** Header background */
+  headerBackground?: string;
+  /** Background color */
+  background?: string;
+  /** Foreground color */
+  foreground?: string;
+  /** Border color */
+  border?: string;
+  /** Accent color */
+  accent?: string;
+  /** Accent foreground */
+  accentForeground?: string;
+  /** Destructive color */
+  destructive?: string;
+  /** Destructive foreground */
+  destructiveForeground?: string;
+  /** Muted background */
+  muted?: string;
+  /** Muted foreground */
+  mutedForeground?: string;
+  /** Card background */
+  card?: string;
+  /** Card foreground */
+  cardForeground?: string;
+  /** Popover background */
+  popover?: string;
+  /** Popover foreground */
+  popoverForeground?: string;
+  /** Radius (border-radius) */
+  radius?: string;
+}
+
+/**
+ * Theme preset for quick setup
+ */
+export interface DashboardThemePreset {
+  /** Preset name */
+  name: string;
+  /** Theme configuration */
+  theme: DashboardTheme;
+  /** Whether this is a dark theme */
+  dark?: boolean;
+}