@moontra/moonui-pro 2.20.1 → 2.20.2

package/src/components/calendar/index.tsx

@@ -38,7 +38,9 @@ import {
   Zap,
   Sun,
   Moon,
-  Palette
+  Palette,
+  Menu,
+  X
 } from 'lucide-react'
 import { cn } from '../../lib/utils'
 import { EventDialog } from './event-dialog'
@@ -228,6 +230,8 @@ export function Calendar({
   const [showFiltersPanel, setShowFiltersPanel] = React.useState(false)
   const [selectedTags, setSelectedTags] = React.useState<string[]>([])
   const [miniCalendarDate, setMiniCalendarDate] = React.useState(new Date())
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false) // Mobile sidebar state
+  const [isDesktopSidebarCollapsed, setIsDesktopSidebarCollapsed] = React.useState(false) // Desktop sidebar state
 
   const today = new Date()
   const currentMonth = currentDate.getMonth()
@@ -550,42 +554,184 @@ export function Calendar({
 
   return (
     <>
-      <Card className={cn("w-full max-w-full overflow-hidden", className)} style={{ height: height ? `${height}px` : undefined }}>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <div>
-            <CardTitle className="flex items-center gap-2">
-              <CalendarIcon className="h-5 w-5" />
-              Calendar
-            </CardTitle>
-            <CardDescription>
-              {MONTHS[currentMonth]} {currentYear}
-            </CardDescription>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={goToToday}>
-              Today
-            </Button>
-            <Button 
-              variant="outline" 
-              size="sm" 
-              onClick={() => navigateMonth('prev')}
-              disabled={disabled}
-            >
-              <ChevronLeft className="h-4 w-4" />
-            </Button>
-            <Button 
-              variant="outline" 
-              size="sm" 
-              onClick={() => navigateMonth('next')}
-              disabled={disabled}
-            >
-              <ChevronRight className="h-4 w-4" />
-            </Button>
+      <div className={cn("w-full flex relative", className)} style={{ height: height ? `${height}px` : undefined }}>
+        {/* Mobile Sidebar Overlay */}
+        {isSidebarOpen && (
+          <div 
+            className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+            onClick={() => setIsSidebarOpen(false)}
+          />
+        )}
+        
+        {/* Sidebar */}
+        <aside className={cn(
+          "bg-card border-r transition-all duration-300 flex-shrink-0 overflow-hidden",
+          // Mobile styles
+          "fixed inset-y-0 left-0 z-50 lg:relative lg:inset-auto",
+          isSidebarOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0",
+          // Desktop styles
+          isDesktopSidebarCollapsed ? "lg:w-0" : "lg:w-64"
+        )}>
+          <div className="w-64 h-full flex flex-col">
+            {/* Sidebar Header */}
+            <div className="p-4 border-b">
+              <div className="flex items-center justify-between">
+                <h3 className="font-semibold text-sm">Calendar</h3>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="lg:hidden"
+                  onClick={() => setIsSidebarOpen(false)}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+            
+            {/* Mini Calendar */}
+            <div className="p-4 border-b">
+              <div className="text-xs font-medium mb-2">
+                {MONTHS[miniCalendarDate.getMonth()]} {miniCalendarDate.getFullYear()}
+              </div>
+              <div className="grid grid-cols-7 gap-1 text-xs">
+                {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, index) => (
+                  <div key={`mini-day-${index}`} className="text-center text-muted-foreground">
+                    {day}
+                  </div>
+                ))}
+                {Array.from({ length: 35 }, (_, i) => {
+                  const date = new Date(miniCalendarDate.getFullYear(), miniCalendarDate.getMonth(), i - new Date(miniCalendarDate.getFullYear(), miniCalendarDate.getMonth(), 1).getDay() + 1)
+                  const isCurrentMonth = date.getMonth() === miniCalendarDate.getMonth()
+                  const isToday = date.toDateString() === today.toDateString()
+                  const hasEvents = getEventsForDate(date).length > 0
+                  
+                  return (
+                    <button
+                      key={i}
+                      className={cn(
+                        "p-1 rounded hover:bg-muted/50 transition-colors",
+                        !isCurrentMonth && "text-muted-foreground/50",
+                        isToday && "bg-primary text-primary-foreground",
+                        hasEvents && !isToday && "font-bold"
+                      )}
+                      onClick={() => {
+                        setCurrentDate(date)
+                        setSelectedDate(date)
+                        setIsSidebarOpen(false)
+                      }}
+                    >
+                      {date.getDate()}
+                    </button>
+                  )
+                })}
+              </div>
+            </div>
+            
+            {/* Categories Filter */}
+            <div className="p-4 space-y-2 flex-1 overflow-y-auto">
+              <h4 className="text-xs font-medium mb-2">Categories</h4>
+              <button
+                onClick={() => setFilterType('all')}
+                className={cn(
+                  "w-full text-left px-2 py-1 rounded text-xs hover:bg-muted/50 transition-colors",
+                  filterType === 'all' && "bg-muted"
+                )}
+              >
+                All Events
+              </button>
+              {['Personal', 'Work', 'Meeting', 'Task', 'Reminder', 'Holiday', 'Birthday', 'Other'].map((type) => (
+                <button
+                  key={type}
+                  onClick={() => setFilterType(type.toLowerCase())}
+                  className={cn(
+                    "w-full text-left px-2 py-1 rounded text-xs hover:bg-muted/50 transition-colors flex items-center gap-2",
+                    filterType === type.toLowerCase() && "bg-muted"
+                  )}
+                >
+                  <div className={cn("w-2 h-2 rounded-full", EVENT_COLORS[type.toLowerCase() as keyof typeof EVENT_COLORS] || "bg-gray-500")} />
+                  {type}
+                </button>
+              ))}
+              
+              <div className="pt-4">
+                <Button
+                  className="w-full"
+                  size="sm"
+                  onClick={() => {
+                    setEventDialogMode('create')
+                    setSelectedEvent(null)
+                    setEventDialogOpen(true)
+                    setIsSidebarOpen(false)
+                  }}
+                  disabled={disabled}
+                >
+                  <Plus className="h-4 w-4 mr-2" />
+                  New Event
+                </Button>
+              </div>
+            </div>
           </div>
-        </div>
-      </CardHeader>
-      <CardContent>
+        </aside>
+        
+        {/* Main Content */}
+        <Card className="flex-1 border-0 rounded-none">
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                {/* Mobile Menu Button */}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="lg:hidden"
+                  onClick={() => setIsSidebarOpen(true)}
+                >
+                  <Menu className="h-4 w-4" />
+                </Button>
+                
+                {/* Desktop Sidebar Toggle */}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="hidden lg:block"
+                  onClick={() => setIsDesktopSidebarCollapsed(!isDesktopSidebarCollapsed)}
+                >
+                  <Menu className="h-4 w-4" />
+                </Button>
+                
+                <div>
+                  <CardTitle className="flex items-center gap-2">
+                    <CalendarIcon className="h-5 w-5" />
+                    {view === 'month' && `${MONTHS[currentMonth]} ${currentYear}`}
+                    {view === 'week' && `Week of ${currentDate.toLocaleDateString()}`}
+                    {view === 'day' && currentDate.toLocaleDateString()}
+                    {view === 'agenda' && 'Agenda'}
+                  </CardTitle>
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button variant="outline" size="sm" onClick={goToToday} className="hidden sm:flex">
+                  Today
+                </Button>
+                <Button 
+                  variant="outline" 
+                  size="sm" 
+                  onClick={() => navigateMonth('prev')}
+                  disabled={disabled}
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+                <Button 
+                  variant="outline" 
+                  size="sm" 
+                  onClick={() => navigateMonth('next')}
+                  disabled={disabled}
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
         <div className="space-y-4">
           {/* Calendar View */}
           {view === 'month' && (
@@ -1052,21 +1198,22 @@ export function Calendar({
               </div>
             </div>
           )}
-        </div>
-      </CardContent>
-    </Card>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
 
-    {/* Event Dialog */}
-    <EventDialog
-      open={eventDialogOpen}
-      onOpenChange={setEventDialogOpen}
-      event={selectedEvent}
-      selectedDate={selectedDate}
-      onSave={handleEventSave}
-      onDelete={handleEventDialogDelete}
-      mode={eventDialogMode}
-    />
-  </>
+      {/* Event Dialog */}
+      <EventDialog
+        open={eventDialogOpen}
+        onOpenChange={setEventDialogOpen}
+        event={selectedEvent}
+        selectedDate={selectedDate}
+        onSave={handleEventSave}
+        onDelete={handleEventDialogDelete}
+        mode={eventDialogMode}
+      />
+    </>
   )
 }
 

package/src/components/dashboard/dashboard-grid.tsx

@@ -7,6 +7,8 @@ import { Widget } from './types'
 import { MetricCard } from './widgets/metric-card'
 import { ChartWidget } from './widgets/chart-widget'
 import { ActivityFeed } from './widgets/activity-feed'
+import { ProgressWidget } from './widgets/progress-widget'
+import { ComparisonWidget } from './widgets/comparison-widget'
 import { Responsive, WidthProvider, Layout, Layouts } from 'react-grid-layout'
 const ResponsiveGridLayout = WidthProvider(Responsive)
 import 'react-grid-layout/css/styles.css'
@@ -219,11 +221,27 @@ export function DashboardGrid({
             />
           )
 
+        case 'progress':
+          return (
+            <ProgressWidget
+              data={widget.data}
+              title={widget.title}
+              glassmorphism={glassmorphism}
+            />
+          )
+        
+        case 'comparison':
+          return (
+            <ComparisonWidget
+              data={widget.data}
+              title={widget.title}
+              glassmorphism={glassmorphism}
+            />
+          )
+
         case 'table':
         case 'map':
         case 'calendar':
-        case 'progress':
-        case 'comparison':
           // Bu widget tipleri için geçici olarak basit bir görünüm
           return (
             <div className={cn(
@@ -260,7 +278,7 @@ export function DashboardGrid({
         transition={{ duration: 0.2 }}
       >
         {/* Widget içeriği */}
-        <div className="h-full">
+        <div className="h-full dashboard-widget-container">
           {widgetContent()}
         </div>
 

package/src/components/dashboard/types.ts

@@ -100,6 +100,9 @@ export interface ProgressData {
   unit?: string
   color?: 'primary' | 'success' | 'warning' | 'danger'
   deadline?: Date
+  description?: string
+  milestone?: number
+  trend?: number
 }
 
 // Comparison widget

package/src/components/dashboard/widgets/activity-feed.tsx

@@ -61,6 +61,11 @@ export function ActivityFeed({
   const [filter, setFilter] = React.useState<'all' | 'info' | 'success' | 'warning' | 'error'>('all')
   const [notificationsEnabled, setNotificationsEnabled] = React.useState(true)
   const [newItems, setNewItems] = React.useState<ActivityItem[]>([])
+  const [isMounted, setIsMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsMounted(true)
+  }, [])
 
   // Simüle edilmiş real-time güncellemeler
   React.useEffect(() => {
@@ -179,7 +184,7 @@ export function ActivityFeed({
           {/* Zaman damgası */}
           <div className="flex items-center gap-1 text-xs text-muted-foreground whitespace-nowrap">
             <Clock className="h-3 w-3" />
-            {formatDistanceToNow(item.timestamp, { addSuffix: true })}
+            {isMounted ? formatDistanceToNow(item.timestamp, { addSuffix: true }) : 'Loading...'}
           </div>
         </div>
 

package/src/components/dashboard/widgets/comparison-widget.tsx

@@ -0,0 +1,177 @@
+"use client"
+
+import React from 'react'
+import { motion } from 'framer-motion'
+import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card'
+import { cn } from '../../../lib/utils'
+import { ComparisonData } from '../types'
+import { ArrowUpRight, ArrowDownRight, Minus, BarChart3 } from 'lucide-react'
+import { Badge } from '../../ui/badge'
+
+interface ComparisonWidgetProps {
+  data: ComparisonData
+  title?: string
+  className?: string
+  glassmorphism?: boolean
+}
+
+export function ComparisonWidget({
+  data,
+  title = "Comparison",
+  className,
+  glassmorphism = false
+}: ComparisonWidgetProps) {
+  const [isMounted, setIsMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  // En yüksek değeri bul
+  const maxValue = Math.max(...data.periods.map(p => p.value))
+  
+  // İlk iki period arasındaki değişimi hesapla
+  const change = data.periods.length >= 2 
+    ? ((data.periods[0].value - data.periods[1].value) / data.periods[1].value) * 100
+    : 0
+    
+  const changeType = change > 0 ? 'increase' : change < 0 ? 'decrease' : 'neutral'
+
+  // Değer formatla
+  const formatValue = (value: number) => {
+    if (!isMounted) return value.toString()
+    
+    if (value >= 1000000) {
+      return (value / 1000000).toFixed(1) + 'M'
+    } else if (value >= 1000) {
+      return (value / 1000).toFixed(0) + 'K'
+    }
+    return value.toLocaleString()
+  }
+
+  return (
+    <Card className={cn(
+      "h-full flex flex-col overflow-hidden",
+      glassmorphism && "bg-background/60 backdrop-blur-md border-white/10",
+      className
+    )}>
+      <CardHeader className="flex-shrink-0 pb-3 px-4">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex-1 min-w-0">
+            <CardTitle className="text-sm font-semibold flex items-center gap-2">
+              <BarChart3 className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+              <span className="truncate">{title}</span>
+            </CardTitle>
+            {data.metric && (
+              <p className="text-xs text-muted-foreground mt-1 truncate">{data.metric}</p>
+            )}
+          </div>
+          {change !== 0 && (
+            <div 
+              className={cn(
+                "inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium flex-shrink-0",
+                changeType === 'increase' && "bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20",
+                changeType === 'decrease' && "bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20",
+                changeType === 'neutral' && "bg-muted text-muted-foreground border border-border"
+              )}
+            >
+              {changeType === 'increase' ? <ArrowUpRight className="h-3 w-3" /> :
+               changeType === 'decrease' ? <ArrowDownRight className="h-3 w-3" /> :
+               <Minus className="h-3 w-3" />}
+              <span>
+                {Math.abs(change).toFixed(1)}%
+              </span>
+            </div>
+          )}
+        </div>
+      </CardHeader>
+      
+      <CardContent className="flex-1 px-4 pb-4 overflow-hidden flex flex-col gap-3">
+        {/* Bar list görünümü - scrollable area */}
+        <div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden pr-2 -mr-2">
+          <div className="space-y-2.5">
+            {data.periods.map((period, index) => {
+              const percentage = (period.value / maxValue) * 100
+              const isHighest = period.value === maxValue
+              
+              return (
+                <motion.div
+                  key={period.label}
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: index * 0.05 }}
+                >
+                  {/* Label ve değer */}
+                  <div className="flex items-center justify-between gap-3 mb-1">
+                    <span className={cn(
+                      "text-xs font-medium truncate flex-1",
+                      isHighest ? "text-foreground" : "text-muted-foreground"
+                    )}>
+                      {period.label}
+                    </span>
+                    <span className={cn(
+                      "text-xs font-semibold tabular-nums flex-shrink-0",
+                      isHighest && "text-primary"
+                    )}>
+                      {formatValue(period.value)}
+                    </span>
+                  </div>
+                  
+                  {/* Progress bar */}
+                  <div className="w-full bg-muted rounded-full h-1.5 overflow-hidden">
+                    <motion.div
+                      className={cn(
+                        "h-full rounded-full transition-colors",
+                        isHighest ? "bg-primary" : "bg-primary/60"
+                      )}
+                      initial={{ width: 0 }}
+                      animate={{ width: `${Math.min(percentage, 100)}%` }}
+                      transition={{ duration: 0.5, delay: index * 0.05 }}
+                    />
+                  </div>
+                </motion.div>
+              )
+            })}
+          </div>
+        </div>
+        
+        {/* Compact chart view - fixed height */}
+        {data.showChart && (
+          <div className="flex-shrink-0 pt-3 border-t">
+            <div className="h-14 flex items-end justify-between gap-1">
+              {data.periods.slice(0, 5).map((period, index) => {
+                const height = (period.value / maxValue) * 100
+                const isHighest = period.value === maxValue
+                
+                return (
+                  <motion.div
+                    key={period.label}
+                    className="flex-1 flex flex-col items-center gap-0.5"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ delay: index * 0.05 }}
+                  >
+                    <div className="w-full h-10 flex items-end justify-center px-0.5">
+                      <motion.div
+                        className={cn(
+                          "w-full max-w-[20px] rounded-t transition-colors",
+                          isHighest ? "bg-primary" : "bg-primary/40"
+                        )}
+                        initial={{ height: 0 }}
+                        animate={{ height: `${height}%` }}
+                        transition={{ duration: 0.5, delay: index * 0.05 }}
+                      />
+                    </div>
+                    <span className="text-[9px] text-muted-foreground">
+                      {period.label.slice(0, 3)}
+                    </span>
+                  </motion.div>
+                )
+              })}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/dashboard/widgets/index.ts

@@ -0,0 +1,5 @@
+export { MetricCard } from './metric-card'
+export { ChartWidget } from './chart-widget'
+export { ActivityFeed } from './activity-feed'
+export { ProgressWidget } from './progress-widget'
+export { ComparisonWidget } from './comparison-widget'

package/src/components/dashboard/widgets/metric-card.tsx

@@ -47,6 +47,11 @@ export function MetricCard({
   glassmorphism = false
 }: MetricCardProps) {
   const [isHovered, setIsHovered] = React.useState(false)
+  const [isMounted, setIsMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsMounted(true)
+  }, [])
 
   // Renk sınıfları
   const colorClasses = {
@@ -173,13 +178,28 @@ export function MetricCard({
 
   // Değer formatı
   const formatValue = (value: string | number): string => {
+    if (!isMounted) {
+      // Server-side: basit format kullan
+      if (typeof value === 'number') {
+        if (value >= 1000000) {
+          return (value / 1000000).toFixed(1) + 'M'
+        } else if (value >= 1000) {
+          return (value / 1000).toFixed(1) + 'K'
+        }
+        return value.toString()
+      }
+      return value.toString()
+    }
+    
+    // Client-side: locale formatting kullanabilir
     if (typeof value === 'number') {
       if (value >= 1000000) {
         return (value / 1000000).toFixed(1) + 'M'
       } else if (value >= 1000) {
         return (value / 1000).toFixed(1) + 'K'
       }
-      return value.toLocaleString()
+      // Nokta kullan, virgül değil
+      return value.toFixed(2)
     }
     return value.toString()
   }