create-fluxstack 1.0.13 → 1.0.14

package/app/server/live/LiveClockComponent.ts

@@ -0,0 +1,214 @@
+// 🔥 LiveClock - Real-time Clock Live Component
+import { LiveComponent } from "@/core/types/types";
+
+interface LiveClockState {
+  currentTime: string;
+  timeZone: string;
+  format: '12h' | '24h';
+  showSeconds: boolean;
+  showDate: boolean;
+  lastSync: Date;
+  serverUptime: number;
+}
+
+export class LiveClockComponent extends LiveComponent<LiveClockState> {
+  private clockInterval: NodeJS.Timeout | null = null;
+  private startTime: Date;
+
+  constructor(initialState: LiveClockState, ws: any, options?: { room?: string; userId?: string }) {
+    const now = new Date();
+    super({
+      currentTime: now.toLocaleTimeString('pt-BR'),
+      timeZone: 'America/Sao_Paulo',
+      format: '24h',
+      showSeconds: true,
+      showDate: true,
+      lastSync: now,
+      serverUptime: 0,
+      ...initialState
+    }, ws, options);
+    
+    this.startTime = now;
+    console.log(`🕐 ${this.constructor.name} created: ${this.id}`);
+    
+    // Start the real-time clock immediately
+    this.startClock();
+  }
+
+  private startClock() {
+    // Clear any existing interval
+    if (this.clockInterval) {
+      clearInterval(this.clockInterval);
+    }
+
+    // Update clock every second
+    this.clockInterval = setInterval(() => {
+      this.updateClock();
+    }, 1000);
+
+    // Initial update
+    this.updateClock();
+  }
+
+  private updateClock() {
+    const now = new Date();
+    const uptimeMs = now.getTime() - this.startTime.getTime();
+    
+    let timeString;
+    if (this.state.format === '12h') {
+      timeString = now.toLocaleTimeString('en-US', {
+        hour12: true,
+        hour: 'numeric',
+        minute: '2-digit',
+        second: this.state.showSeconds ? '2-digit' : undefined
+      });
+    } else {
+      timeString = now.toLocaleTimeString('pt-BR', {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit',
+        second: this.state.showSeconds ? '2-digit' : undefined
+      });
+    }
+
+    this.setState({
+      currentTime: timeString,
+      lastSync: now,
+      serverUptime: Math.floor(uptimeMs / 1000)
+    });
+
+    // Broadcast time update to all connected clients
+    if (this.room) {
+      this.broadcast('CLOCK_TICK', {
+        currentTime: timeString,
+        timestamp: now.toISOString(),
+        serverUptime: Math.floor(uptimeMs / 1000)
+      });
+    }
+  }
+
+  async setTimeFormat(payload: { format: '12h' | '24h' }) {
+    const { format } = payload;
+    
+    if (format !== '12h' && format !== '24h') {
+      throw new Error('Invalid time format. Use "12h" or "24h"');
+    }
+
+    this.setState({ 
+      format,
+      lastSync: new Date()
+    });
+
+    // Immediately update the clock display with new format
+    this.updateClock();
+
+    console.log(`🕐 Time format changed to: ${format}`);
+    return { success: true, format };
+  }
+
+  async toggleSeconds(payload?: { showSeconds?: boolean }) {
+    const showSeconds = payload?.showSeconds ?? !this.state.showSeconds;
+    
+    this.setState({ 
+      showSeconds,
+      lastSync: new Date()
+    });
+
+    // Update clock display immediately
+    this.updateClock();
+
+    console.log(`🕐 Seconds display: ${showSeconds ? 'ON' : 'OFF'}`);
+    return { success: true, showSeconds };
+  }
+
+  async toggleDate(payload?: { showDate?: boolean }) {
+    const showDate = payload?.showDate ?? !this.state.showDate;
+    
+    this.setState({ 
+      showDate,
+      lastSync: new Date()
+    });
+
+    console.log(`🕐 Date display: ${showDate ? 'ON' : 'OFF'}`);
+    return { success: true, showDate };
+  }
+
+  async setTimeZone(payload: { timeZone: string }) {
+    const { timeZone } = payload;
+    
+    // Basic timezone validation
+    try {
+      new Date().toLocaleString('en-US', { timeZone });
+    } catch (error) {
+      throw new Error(`Invalid timezone: ${timeZone}`);
+    }
+
+    this.setState({ 
+      timeZone,
+      lastSync: new Date()
+    });
+
+    console.log(`🕐 Timezone changed to: ${timeZone}`);
+    return { success: true, timeZone };
+  }
+
+  async getServerInfo() {
+    console.log(`🕐 getServerInfo called for component: ${this.id}`);
+    
+    const now = new Date();
+    const uptimeMs = now.getTime() - this.startTime.getTime();
+    
+    const result = {
+      success: true,
+      info: {
+        serverTime: now.toISOString(),
+        localTime: now.toLocaleString('pt-BR'),
+        uptime: Math.floor(uptimeMs / 1000),
+        uptimeFormatted: this.formatUptime(Math.floor(uptimeMs / 1000)),
+        timezone: this.state.timeZone,
+        componentId: this.id,
+        startTime: this.startTime.toISOString()
+      }
+    };
+    
+    console.log(`🕐 getServerInfo result:`, result);
+    return result;
+  }
+
+  async syncTime() {
+    // Force a manual time sync
+    this.updateClock();
+    
+    console.log(`🕐 Manual time sync performed`);
+    return { 
+      success: true, 
+      syncTime: new Date().toISOString(),
+      currentTime: this.state.currentTime
+    };
+  }
+
+  private formatUptime(seconds: number): string {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = seconds % 60;
+    
+    if (hours > 0) {
+      return `${hours}h ${minutes}m ${secs}s`;
+    } else if (minutes > 0) {
+      return `${minutes}m ${secs}s`;
+    } else {
+      return `${secs}s`;
+    }
+  }
+
+  public destroy() {
+    // Clean up the interval when component is destroyed
+    if (this.clockInterval) {
+      clearInterval(this.clockInterval);
+      this.clockInterval = null;
+      console.log(`🕐 Clock interval cleared for component: ${this.id}`);
+    }
+    
+    super.destroy();
+  }
+}

package/app/server/live/SidebarNavigation.ts

@@ -0,0 +1,156 @@
+// 🔥 Sidebar Navigation Live Component
+
+import { LiveComponent } from '@/core/types/types'
+
+export interface SidebarNavigationState {
+  currentPage: 'dashboard' | 'profile' | 'settings' | 'files' | 'analytics' | 'config'
+  isCollapsed: boolean
+  theme: 'light' | 'dark'
+  notifications: {
+    profile: number
+    settings: number
+    files: number
+    analytics: number
+    config: number
+  }
+  lastNavigation: number
+}
+
+export class SidebarNavigation extends LiveComponent<SidebarNavigationState> {
+  constructor(initialState: SidebarNavigationState, ws: any, options?: any) {
+    super(initialState, ws, options)
+    
+    // Set default state if needed
+    this.state = {
+      currentPage: 'dashboard',
+      isCollapsed: false,
+      theme: 'light',
+      notifications: {
+        profile: 0,
+        settings: 0,
+        files: 0,
+        analytics: 0,
+        config: 0
+      },
+      lastNavigation: Date.now(),
+      ...initialState
+    }
+  }
+
+  // Navigate to a different page
+  async navigateTo(data: { page: string }) {
+    const validPages = ['dashboard', 'profile', 'settings', 'files', 'analytics', 'config']
+    
+    if (!validPages.includes(data.page)) {
+      throw new Error(`Invalid page: ${data.page}`)
+    }
+
+    this.setState({
+      currentPage: data.page as any,
+      lastNavigation: Date.now()
+    })
+
+    // Clear notification for the page we're navigating to
+    this.setState({
+      notifications: {
+        ...this.state.notifications,
+        [data.page]: 0
+      }
+    })
+
+    this.emit('PAGE_CHANGED', {
+      page: data.page,
+      timestamp: Date.now()
+    })
+
+    console.log(`📍 Navigation: Changed to ${data.page}`)
+  }
+
+  // Toggle sidebar collapsed state
+  async toggleSidebar() {
+    this.setState({
+      isCollapsed: !this.state.isCollapsed
+    })
+
+    this.emit('SIDEBAR_TOGGLED', {
+      collapsed: this.state.isCollapsed,
+      timestamp: Date.now()
+    })
+
+    console.log(`📱 Sidebar: ${this.state.isCollapsed ? 'Collapsed' : 'Expanded'}`)
+  }
+
+  // Change theme
+  async setTheme(data: { theme: 'light' | 'dark' }) {
+    if (!['light', 'dark'].includes(data.theme)) {
+      throw new Error(`Invalid theme: ${data.theme}`)
+    }
+
+    this.setState({
+      theme: data.theme
+    })
+
+    this.emit('THEME_CHANGED', {
+      theme: data.theme,
+      timestamp: Date.now()
+    })
+
+    console.log(`🎨 Theme: Changed to ${data.theme}`)
+  }
+
+  // Add notification to a page
+  async addNotification(data: { page: string; count?: number }) {
+    const validPages = ['profile', 'settings', 'files', 'analytics']
+    
+    if (!validPages.includes(data.page)) {
+      throw new Error(`Invalid notification page: ${data.page}`)
+    }
+
+    const currentCount = this.state.notifications[data.page as keyof typeof this.state.notifications] || 0
+    const incrementBy = data.count || 1
+
+    this.setState({
+      notifications: {
+        ...this.state.notifications,
+        [data.page]: currentCount + incrementBy
+      }
+    })
+
+    this.emit('NOTIFICATION_ADDED', {
+      page: data.page,
+      count: currentCount + incrementBy,
+      timestamp: Date.now()
+    })
+
+    console.log(`🔔 Notification: Added ${incrementBy} to ${data.page} (total: ${currentCount + incrementBy})`)
+  }
+
+  // Clear all notifications
+  async clearAllNotifications() {
+    this.setState({
+      notifications: {
+        profile: 0,
+        settings: 0,
+        files: 0,
+        analytics: 0
+      }
+    })
+
+    this.emit('NOTIFICATIONS_CLEARED', {
+      timestamp: Date.now()
+    })
+
+    console.log(`🔕 Notifications: All cleared`)
+  }
+
+  // Get navigation history (mock for now)
+  async getNavigationHistory() {
+    // In a real app, this would fetch from database
+    return {
+      history: [
+        { page: this.state.currentPage, timestamp: this.state.lastNavigation }
+      ],
+      timestamp: Date.now()
+    }
+  }
+}