@moontra/moonui-pro 2.5.13 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.5.13",
+  "version": "2.6.0",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/dashboard/demo.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import { Dashboard } from './index'
-import { Widget, MetricData, ChartData, ActivityItem } from './types'
+import { Widget, MetricData, ChartData, ActivityItem, DashboardNotification } from './types'
 import { MetricCard } from './widgets/metric-card'
 import { ChartWidget } from './widgets/chart-widget'
 import { ActivityFeed } from './widgets/activity-feed'
@@ -14,7 +14,11 @@ import {
   Package,
   CreditCard,
   Activity,
-  AlertCircle
+  AlertCircle,
+  User,
+  Settings2,
+  LogOut,
+  HelpCircle
 } from 'lucide-react'
 
 // Örnek metrik verileri
@@ -220,7 +224,107 @@ const sampleWidgets: Widget[] = [
   }
 ]
 
+// Örnek notification verileri
+const sampleNotifications: DashboardNotification[] = [
+  {
+    id: 'notif-1',
+    type: 'success',
+    title: 'Payment Received',
+    message: 'Payment of $1,250 has been processed successfully',
+    timestamp: new Date(Date.now() - 1000 * 60 * 5), // 5 dakika önce
+    read: false
+  },
+  {
+    id: 'notif-2',
+    type: 'warning',
+    title: 'Low Stock Alert',
+    message: 'Product "Premium Widget" is running low on stock',
+    timestamp: new Date(Date.now() - 1000 * 60 * 30), // 30 dakika önce
+    read: false
+  },
+  {
+    id: 'notif-3',
+    type: 'info',
+    title: 'New Feature Available',
+    message: 'Check out our new analytics dashboard features',
+    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2), // 2 saat önce
+    read: true
+  },
+  {
+    id: 'notif-4',
+    type: 'error',
+    title: 'Sync Failed',
+    message: 'Failed to sync data with external service',
+    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24), // 1 gün önce
+    read: true
+  }
+]
+
+// Örnek user bilgileri
+const sampleUser = {
+  name: 'John Doe',
+  email: 'john@example.com',
+  avatar: 'https://github.com/shadcn.png',
+  role: 'Admin'
+}
+
+// Örnek custom user menu items
+const customUserMenuItems = [
+  {
+    id: 'profile',
+    label: 'My Profile',
+    icon: <User className="h-4 w-4" />,
+    onClick: () => console.log('Profile clicked')
+  },
+  {
+    id: 'billing',
+    label: 'Billing & Plans',
+    icon: <CreditCard className="h-4 w-4" />,
+    onClick: () => console.log('Billing clicked')
+  },
+  { id: 'sep1', separator: true },
+  {
+    id: 'settings',
+    label: 'Settings',
+    icon: <Settings2 className="h-4 w-4" />,
+    onClick: () => console.log('Settings clicked')
+  },
+  {
+    id: 'help',
+    label: 'Help & Support',
+    icon: <HelpCircle className="h-4 w-4" />,
+    onClick: () => console.log('Help clicked')
+  },
+  { id: 'sep2', separator: true },
+  {
+    id: 'logout',
+    label: 'Sign Out',
+    icon: <LogOut className="h-4 w-4" />,
+    onClick: () => console.log('Logout clicked')
+  }
+]
+
 export function DashboardDemo() {
+  const [notifications, setNotifications] = React.useState(sampleNotifications)
+
+  const handleNotificationMarkAsRead = (notificationId: string) => {
+    setNotifications(prev => 
+      prev.map(n => n.id === notificationId ? { ...n, read: true } : n)
+    )
+  }
+
+  const handleNotificationClear = (notificationId: string) => {
+    setNotifications(prev => prev.filter(n => n.id !== notificationId))
+  }
+
+  const handleNotificationMarkAllAsRead = () => {
+    setNotifications(prev => prev.map(n => ({ ...n, read: true })))
+  }
+
+  const handleNotificationClearAll = () => {
+    setNotifications([])
+  }
+
   return (
     <div className="min-h-screen bg-background">
       <Dashboard
@@ -230,6 +334,16 @@ export function DashboardDemo() {
         editable={true}
         realtime={true}
         glassmorphism={true}
+        user={sampleUser}
+        userMenuItems={customUserMenuItems}
+        notifications={notifications}
+        onNotificationClick={(notification) => {
+          console.log('Notification clicked:', notification)
+        }}
+        onNotificationMarkAsRead={handleNotificationMarkAsRead}
+        onNotificationMarkAllAsRead={handleNotificationMarkAllAsRead}
+        onNotificationClear={handleNotificationClear}
+        onNotificationClearAll={handleNotificationClearAll}
         onWidgetAdd={(widget) => {
           console.log('Widget added:', widget)
         }}

package/src/components/dashboard/index.tsx

@@ -7,6 +7,8 @@ import { Badge } from '../ui/badge'
 import { Input } from '../ui/input'
 import { ScrollArea } from '../ui/scroll-area'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
+import { Separator } from '../ui/separator'
 import { 
   Activity,
   Download,
@@ -36,7 +38,13 @@ import {
   Clock,
   Target,
   ArrowUpRight,
-  CheckCircle
+  CheckCircle,
+  User,
+  LogOut,
+  Settings2,
+  AlertCircle,
+  Info,
+  CheckCheck
 } from 'lucide-react'
 import { cn } from '../../lib/utils'
 import { DashboardGrid } from './dashboard-grid'
@@ -53,7 +61,8 @@ import {
   ChartData,
   ActivityItem,
   DashboardTemplate,
-  WidgetType
+  WidgetType,
+  DashboardNotification
 } from './types'
 import {
   DropdownMenu,
@@ -99,6 +108,49 @@ interface DashboardProps {
   editable?: boolean
   realtime?: boolean
   glassmorphism?: boolean
+  
+  // Notification yönetimi
+  notifications?: DashboardNotification[]
+  onNotificationClick?: (notification: DashboardNotification) => void
+  onNotificationMarkAsRead?: (notificationId: string) => void
+  onNotificationMarkAllAsRead?: () => void
+  onNotificationClear?: (notificationId: string) => void
+  onNotificationClearAll?: () => void
+  
+  // User yönetimi
+  user?: {
+    name: string
+    email?: string
+    avatar?: string
+    role?: string
+  }
+  userMenuItems?: Array<{
+    id: string
+    label: string
+    icon?: React.ReactNode
+    onClick?: () => void
+    separator?: boolean
+  }>
+  onUserMenuClick?: () => void
+  onProfileClick?: () => void
+  onLogout?: () => void
+  
+  // Header actions
+  onSearch?: (query: string) => void
+  onThemeChange?: (theme: DashboardTheme) => void
+  onMenuClick?: () => void
+  onRefresh?: () => void
+  
+  // Custom header actions
+  headerActions?: React.ReactNode
+  
+  // Time range yönetimi
+  timeRange?: TimeRange
+  onTimeRangeChange?: (range: TimeRange) => void
+  
+  // Custom branding
+  logo?: React.ReactNode
+  brandName?: string
 }
 
 // Dashboard template'leri
@@ -230,6 +282,19 @@ const THEME_COLORS: Record<DashboardTheme, string> = {
   custom: 'from-gray-500/10 to-gray-600/10'
 }
 
+// Relative time formatter
+function formatRelativeTime(date: Date): string {
+  const now = new Date();
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+  
+  if (diffInSeconds < 60) return 'just now';
+  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
+  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
+  if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)}d ago`;
+  
+  return date.toLocaleDateString();
+}
+
 export function Dashboard({
   config,
   widgets: initialWidgets = [],
@@ -246,24 +311,51 @@ export function Dashboard({
   description = 'Real-time analytics and insights',
   editable = true,
   realtime = false,
-  glassmorphism = true
+  glassmorphism = true,
+  notifications = [],
+  onNotificationClick,
+  onNotificationMarkAsRead,
+  onNotificationMarkAllAsRead,
+  onNotificationClear,
+  onNotificationClearAll,
+  user,
+  userMenuItems,
+  onUserMenuClick,
+  onProfileClick,
+  onLogout,
+  onSearch,
+  onThemeChange,
+  onMenuClick,
+  onRefresh,
+  headerActions,
+  timeRange: propTimeRange,
+  onTimeRangeChange,
+  logo,
+  brandName
 }: DashboardProps) {
   // State yönetimi
   const [editMode, setEditMode] = React.useState(false)
   const [widgets, setWidgets] = React.useState<Widget[]>(initialWidgets)
   const [selectedTheme, setSelectedTheme] = React.useState<DashboardTheme>('analytics')
-  const [timeRange, setTimeRange] = React.useState<TimeRange>()
+  const [timeRange, setTimeRange] = React.useState<TimeRange | undefined>(propTimeRange)
   const [searchQuery, setSearchQuery] = React.useState('')
   const [showWidgetLibrary, setShowWidgetLibrary] = React.useState(false)
   const [showTemplates, setShowTemplates] = React.useState(false)
   const [refreshing, setRefreshing] = React.useState(false)
-  const [notifications, setNotifications] = React.useState<number>(3)
+  const [showNotifications, setShowNotifications] = React.useState(false)
 
   // initialWidgets değiştiğinde state'i güncelle
   React.useEffect(() => {
     setWidgets(initialWidgets)
   }, [initialWidgets])
 
+  // propTimeRange değiştiğinde state'i güncelle
+  React.useEffect(() => {
+    if (propTimeRange) {
+      setTimeRange(propTimeRange)
+    }
+  }, [propTimeRange])
+
   // WebSocket bağlantısı (real-time için)
   React.useEffect(() => {
     if (!realtime) return
@@ -375,7 +467,10 @@ export function Dashboard({
             <Input
               placeholder="Search widgets..."
               value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+                onSearch?.(e.target.value);
+              }}
               className="pl-10"
             />
           </div>
@@ -498,11 +593,26 @@ export function Dashboard({
                   whileHover={{ scale: 1.05 }}
                   whileTap={{ scale: 0.95 }}
                 >
-                  <Button variant="ghost" size="sm" className="lg:hidden">
+                  <Button 
+                    variant="ghost" 
+                    size="sm" 
+                    className="lg:hidden"
+                    onClick={onMenuClick}
+                  >
                     <Menu className="h-5 w-5" />
                   </Button>
                 </motion.div>
                 
+                {/* Logo and Brand */}
+                {(logo || brandName) && (
+                  <div className="flex items-center gap-2">
+                    {logo}
+                    {brandName && (
+                      <span className="font-semibold text-lg">{brandName}</span>
+                    )}
+                  </div>
+                )}
+                
                 <div>
                   <div className="flex items-center gap-2">
                     <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
@@ -522,21 +632,127 @@ export function Dashboard({
                 {/* Time range picker */}
                 <TimeRangePicker
                   value={timeRange}
-                  onChange={setTimeRange}
+                  onChange={(range) => {
+                    setTimeRange(range);
+                    onTimeRangeChange?.(range);
+                  }}
                   glassmorphism={glassmorphism}
                 />
 
                 {/* Notifications */}
-                <div className="relative">
-                  <Button variant="ghost" size="sm" className="relative">
-                    <Bell className="h-4 w-4" />
-                    {notifications > 0 && (
-                      <span className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-destructive text-[10px] font-medium text-destructive-foreground flex items-center justify-center">
-                        {notifications}
-                      </span>
-                    )}
-                  </Button>
-                </div>
+                <DropdownMenu open={showNotifications} onOpenChange={setShowNotifications}>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="sm" className="relative h-9 w-9 p-0">
+                      <Bell className="h-5 w-5" />
+                      {notifications.filter(n => !n.read).length > 0 && (
+                        <span className="absolute -top-1 -right-1 min-w-[1rem] h-4 px-1 rounded-full bg-destructive text-[10px] font-medium text-destructive-foreground flex items-center justify-center">
+                          {notifications.filter(n => !n.read).length}
+                        </span>
+                      )}
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent 
+                    align="end" 
+                    className="w-80"
+                    sideOffset={8}
+                  >
+                    <div className="flex items-center justify-between px-4 py-2">
+                      <h4 className="text-sm font-semibold">Notifications</h4>
+                      {notifications.length > 0 && (
+                        <div className="flex items-center gap-2">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-auto p-1 text-xs"
+                            onClick={() => onNotificationMarkAllAsRead?.()}
+                          >
+                            <CheckCheck className="h-3 w-3 mr-1" />
+                            Mark all read
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-auto p-1 text-xs"
+                            onClick={() => onNotificationClearAll?.()}
+                          >
+                            Clear all
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+                    <Separator />
+                    <ScrollArea className="h-[400px]">
+                      {notifications.length === 0 ? (
+                        <div className="p-8 text-center text-sm text-muted-foreground">
+                          <Bell className="h-8 w-8 mx-auto mb-2 opacity-20" />
+                          <p>No notifications</p>
+                        </div>
+                      ) : (
+                        <div className="p-1">
+                          {notifications.map((notification) => {
+                            const Icon = notification.type === 'error' ? AlertCircle :
+                                       notification.type === 'warning' ? AlertCircle :
+                                       notification.type === 'success' ? CheckCircle :
+                                       Info;
+                            
+                            return (
+                              <motion.div
+                                key={notification.id}
+                                initial={{ opacity: 0, x: -20 }}
+                                animate={{ opacity: 1, x: 0 }}
+                                className={cn(
+                                  "flex items-start gap-3 p-3 rounded-lg cursor-pointer transition-colors",
+                                  "hover:bg-muted/50",
+                                  !notification.read && "bg-muted/30"
+                                )}
+                                onClick={() => {
+                                  onNotificationClick?.(notification);
+                                  if (!notification.read) {
+                                    onNotificationMarkAsRead?.(notification.id);
+                                  }
+                                }}
+                              >
+                                <div className={cn(
+                                  "mt-0.5 p-1.5 rounded-full",
+                                  notification.type === 'error' && "bg-destructive/10 text-destructive",
+                                  notification.type === 'warning' && "bg-yellow-500/10 text-yellow-600 dark:text-yellow-500",
+                                  notification.type === 'success' && "bg-green-500/10 text-green-600 dark:text-green-500",
+                                  notification.type === 'info' && "bg-blue-500/10 text-blue-600 dark:text-blue-500"
+                                )}>
+                                  <Icon className="h-3.5 w-3.5" />
+                                </div>
+                                <div className="flex-1 space-y-1">
+                                  <p className="text-sm font-medium leading-none">
+                                    {notification.title}
+                                  </p>
+                                  {notification.message && (
+                                    <p className="text-xs text-muted-foreground">
+                                      {notification.message}
+                                    </p>
+                                  )}
+                                  <p className="text-xs text-muted-foreground">
+                                    {formatRelativeTime(notification.timestamp)}
+                                  </p>
+                                </div>
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  className="h-6 w-6 p-0"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    onNotificationClear?.(notification.id);
+                                  }}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              </motion.div>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </ScrollArea>
+                  </DropdownMenuContent>
+                </DropdownMenu>
 
                 {/* Theme selector */}
                 <DropdownMenu>
@@ -546,19 +762,28 @@ export function Dashboard({
                     </Button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
-                    <DropdownMenuItem onClick={() => setSelectedTheme('analytics')}>
+                    <DropdownMenuItem onClick={() => {
+                      setSelectedTheme('analytics');
+                      onThemeChange?.('analytics');
+                    }}>
                       <div className="flex items-center gap-2">
                         <div className="h-4 w-4 rounded bg-gradient-to-br from-blue-500 to-purple-500" />
                         Analytics
                       </div>
                     </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => setSelectedTheme('sales')}>
+                    <DropdownMenuItem onClick={() => {
+                      setSelectedTheme('sales');
+                      onThemeChange?.('sales');
+                    }}>
                       <div className="flex items-center gap-2">
                         <div className="h-4 w-4 rounded bg-gradient-to-br from-green-500 to-emerald-500" />
                         Sales
                       </div>
                     </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => setSelectedTheme('monitoring')}>
+                    <DropdownMenuItem onClick={() => {
+                      setSelectedTheme('monitoring');
+                      onThemeChange?.('monitoring');
+                    }}>
                       <div className="flex items-center gap-2">
                         <div className="h-4 w-4 rounded bg-gradient-to-br from-orange-500 to-red-500" />
                         Monitoring
@@ -567,6 +792,73 @@ export function Dashboard({
                   </DropdownMenuContent>
                 </DropdownMenu>
 
+                {/* Custom header actions */}
+                {headerActions}
+
+                {/* User Profile */}
+                {user && (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="sm" className="relative h-8 w-8 rounded-full">
+                        <Avatar className="h-8 w-8">
+                          <AvatarImage src={user.avatar} alt={user.name} />
+                          <AvatarFallback>
+                            {user.name.split(' ').map(n => n[0]).join('').toUpperCase()}
+                          </AvatarFallback>
+                        </Avatar>
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="w-56">
+                      <div className="flex items-center justify-start gap-2 p-2">
+                        <div className="flex flex-col space-y-1 leading-none">
+                          {user.name && (
+                            <p className="font-medium">{user.name}</p>
+                          )}
+                          {user.email && (
+                            <p className="text-xs text-muted-foreground">
+                              {user.email}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                      <DropdownMenuSeparator />
+                      {userMenuItems ? (
+                        // Custom menu items
+                        userMenuItems.map((item, index) => (
+                          item.separator ? (
+                            <DropdownMenuSeparator key={item.id || `sep-${index}`} />
+                          ) : (
+                            <DropdownMenuItem 
+                              key={item.id}
+                              onClick={() => item.onClick?.()}
+                            >
+                              {item.icon && <span className="mr-2">{item.icon}</span>}
+                              {item.label}
+                            </DropdownMenuItem>
+                          )
+                        ))
+                      ) : (
+                        // Default menu items
+                        <>
+                          <DropdownMenuItem onClick={() => onProfileClick?.()}>
+                            <User className="mr-2 h-4 w-4" />
+                            Profile
+                          </DropdownMenuItem>
+                          <DropdownMenuItem onClick={() => onUserMenuClick?.()}>
+                            <Settings2 className="mr-2 h-4 w-4" />
+                            Settings
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem onClick={() => onLogout?.()}>
+                            <LogOut className="mr-2 h-4 w-4" />
+                            Log out
+                          </DropdownMenuItem>
+                        </>
+                      )}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                )}
+
                 {/* More actions */}
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
@@ -619,7 +911,11 @@ export function Dashboard({
                     
                     <DropdownMenuSeparator />
                     
-                    <DropdownMenuItem onClick={() => setRefreshing(true)}>
+                    <DropdownMenuItem onClick={() => {
+                      setRefreshing(true);
+                      onRefresh?.();
+                      setTimeout(() => setRefreshing(false), 1000);
+                    }}>
                       <RefreshCw className="mr-2 h-4 w-4" />
                       Refresh Data
                     </DropdownMenuItem>