@libreapps/ui 5.4.1

package/finance/components/NewsTimeline.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { useEffect, useRef, memo } from 'react'
+
+function NewsTimeline() {
+  const container = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!container.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (container.current.dataset.initialized === 'true') {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    container.current.dataset.initialized = 'true'
+
+    const script = document.createElement('script')
+    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-timeline.js'
+    script.type = 'text/javascript'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      displayMode: 'regular',
+      feedMode: 'all_symbols',
+      colorTheme: 'dark',
+      isTransparent: false,
+      locale: 'en',
+      width: '100%',
+      height: 550,
+    })
+
+    container.current.appendChild(script)
+
+    // Cleanup function
+    return () => {
+      if (container.current) {
+        // Remove initialization flag on unmount
+        delete container.current.dataset.initialized
+        // Remove all scripts
+        const scripts = container.current.querySelectorAll('script')
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [])
+
+  return (
+    <div className="tradingview-widget-container w-full" ref={container}>
+      <div className="tradingview-widget-container__widget"></div>
+    </div>
+  )
+}
+
+export default memo(NewsTimeline)

package/finance/components/OrderEntry.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import { useState } from 'react'
+
+export interface OrderEntryProps {
+  symbol: string
+  accountBalance: number
+  onPlaceOrder: (order: {
+    symbol: string
+    side: 'buy' | 'sell'
+    orderType: 'market' | 'limit'
+    shares: number
+    limitPrice?: number
+  }) => void
+  disabled?: boolean
+}
+
+export function OrderEntry({ 
+  symbol, 
+  accountBalance, 
+  onPlaceOrder,
+  disabled = false
+}: OrderEntryProps) {
+  const [orderType, setOrderType] = useState<'market' | 'limit'>('market')
+  const [orderSide, setOrderSide] = useState<'buy' | 'sell'>('buy')
+  const [shares, setShares] = useState('')
+  const [limitPrice, setLimitPrice] = useState('')
+
+  const getTickerFromSymbol = (symbol: string) => {
+    return symbol.split(':')[1] || symbol
+  }
+
+  const handlePlaceOrder = () => {
+    if (!shares || (orderType === 'limit' && !limitPrice)) return
+
+    onPlaceOrder({
+      symbol,
+      side: orderSide,
+      orderType,
+      shares: parseInt(shares),
+      limitPrice: orderType === 'limit' ? parseFloat(limitPrice) : undefined
+    })
+
+    // Reset form
+    setShares('')
+    setLimitPrice('')
+  }
+
+  return (
+    <div className="p-4 space-y-4">
+      {/* Account Balance */}
+      <div className="bg-white/5 rounded-lg p-3">
+        <div className="text-xs text-white/60 mb-1">Buying Power</div>
+        <div className="text-lg font-semibold text-white">
+          ${accountBalance.toLocaleString()}
+        </div>
+      </div>
+
+      {/* Buy/Sell Toggle */}
+      <div className="grid grid-cols-2 gap-2">
+        <button
+          onClick={() => setOrderSide('buy')}
+          disabled={disabled}
+          className={`py-2.5 rounded-lg font-semibold transition-all ${
+            orderSide === 'buy'
+              ? 'bg-success text-white'
+              : 'bg-white/5 text-white/60 hover:bg-white/10'
+          } disabled:opacity-50 disabled:cursor-not-allowed`}
+        >
+          Buy
+        </button>
+        <button
+          onClick={() => setOrderSide('sell')}
+          disabled={disabled}
+          className={`py-2.5 rounded-lg font-semibold transition-all ${
+            orderSide === 'sell'
+              ? 'bg-danger text-white'
+              : 'bg-white/5 text-white/60 hover:bg-white/10'
+          } disabled:opacity-50 disabled:cursor-not-allowed`}
+        >
+          Sell
+        </button>
+      </div>
+
+      {/* Order Type */}
+      <div>
+        <label className="text-xs text-white/60 mb-2 block">Order Type</label>
+        <div className="grid grid-cols-2 gap-2">
+          <button
+            onClick={() => setOrderType('market')}
+            disabled={disabled}
+            className={`py-2 rounded-lg text-sm font-medium transition-all ${
+              orderType === 'market'
+                ? 'bg-white/10 text-white'
+                : 'bg-white/5 text-white/60 hover:bg-white/10'
+            } disabled:opacity-50 disabled:cursor-not-allowed`}
+          >
+            Market
+          </button>
+          <button
+            onClick={() => setOrderType('limit')}
+            disabled={disabled}
+            className={`py-2 rounded-lg text-sm font-medium transition-all ${
+              orderType === 'limit'
+                ? 'bg-white/10 text-white'
+                : 'bg-white/5 text-white/60 hover:bg-white/10'
+            } disabled:opacity-50 disabled:cursor-not-allowed`}
+          >
+            Limit
+          </button>
+        </div>
+      </div>
+
+      {/* Shares */}
+      <div>
+        <label className="text-xs text-white/60 mb-2 block">Shares</label>
+        <input
+          type="number"
+          value={shares}
+          onChange={(e) => setShares(e.target.value)}
+          disabled={disabled}
+          className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-success disabled:opacity-50 disabled:cursor-not-allowed"
+          placeholder="0"
+        />
+      </div>
+
+      {/* Limit Price */}
+      {orderType === 'limit' && (
+        <div>
+          <label className="text-xs text-white/60 mb-2 block">Limit Price</label>
+          <input
+            type="number"
+            value={limitPrice}
+            onChange={(e) => setLimitPrice(e.target.value)}
+            disabled={disabled}
+            className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-success disabled:opacity-50 disabled:cursor-not-allowed"
+            placeholder="0.00"
+            step="0.01"
+          />
+        </div>
+      )}
+
+      {/* Place Order Button */}
+      <button
+        onClick={handlePlaceOrder}
+        disabled={disabled || !shares || (orderType === 'limit' && !limitPrice)}
+        className={`w-full py-3 rounded-lg font-semibold transition-all ${
+          orderSide === 'buy'
+            ? 'bg-success hover:bg-success/90 text-white'
+            : 'bg-danger hover:bg-danger/90 text-white'
+        } disabled:opacity-50 disabled:cursor-not-allowed`}
+      >
+        {orderSide === 'buy' ? 'Buy' : 'Sell'} {getTickerFromSymbol(symbol)}
+      </button>
+    </div>
+  )
+}

package/finance/components/OrdersHistory.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+export interface Order {
+  id: string
+  symbol: string
+  type: 'buy' | 'sell'
+  shares: number
+  price: number
+  status: 'open' | 'filled' | 'cancelled' | 'pending'
+  timestamp: number
+  orderType?: 'market' | 'limit'
+}
+
+export interface OrdersHistoryProps {
+  orders: Order[]
+  onCancelOrder?: (orderId: string) => void
+  onOrderClick?: (order: Order) => void
+}
+
+export function OrdersHistory({ orders, onCancelOrder, onOrderClick }: OrdersHistoryProps) {
+  const getTickerFromSymbol = (symbol: string) => {
+    return symbol.split(':')[1] || symbol
+  }
+
+  if (orders.length === 0) {
+    return (
+      <div className="p-4 text-center py-8 text-white/40">
+        <p className="text-sm">No orders yet</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-4 space-y-2">
+      {orders.map((order) => (
+        <div 
+          key={order.id} 
+          className={`bg-white/5 rounded-lg p-3 ${onOrderClick ? 'cursor-pointer hover:bg-white/10 transition-colors' : ''}`}
+          onClick={() => onOrderClick?.(order)}
+        >
+          <div className="flex items-start justify-between mb-2">
+            <div>
+              <div className="font-semibold text-white">
+                {getTickerFromSymbol(order.symbol)}
+              </div>
+              <div className="text-xs text-white/60">
+                {new Date(order.timestamp).toLocaleString()}
+              </div>
+            </div>
+            <div className={`text-xs px-2 py-1 rounded ${
+              order.status === 'filled'
+                ? 'bg-success/20 text-success'
+                : order.status === 'cancelled'
+                ? 'bg-white/10 text-white/60'
+                : order.status === 'pending'
+                ? 'bg-yellow-500/20 text-yellow-400'
+                : 'bg-blue-500/20 text-blue-400'
+            }`}>
+              {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
+            </div>
+          </div>
+          <div className="grid grid-cols-3 gap-2 text-xs">
+            <div>
+              <div className="text-white/60">Side</div>
+              <div className={`font-medium ${order.type === 'buy' ? 'text-success' : 'text-danger'}`}>
+                {order.type.toUpperCase()}
+              </div>
+            </div>
+            <div>
+              <div className="text-white/60">Shares</div>
+              <div className="text-white font-medium">{order.shares}</div>
+            </div>
+            <div>
+              <div className="text-white/60">Price</div>
+              <div className="text-white font-medium">
+                {order.price > 0 ? `$${order.price.toFixed(2)}` : 'Market'}
+              </div>
+            </div>
+          </div>
+          {order.orderType && (
+            <div className="mt-2 text-xs">
+              <span className="text-white/60">Type: </span>
+              <span className="text-white font-medium">
+                {order.orderType.charAt(0).toUpperCase() + order.orderType.slice(1)}
+              </span>
+            </div>
+          )}
+          {order.status === 'open' && onCancelOrder && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation()
+                onCancelOrder(order.id)
+              }}
+              className="w-full mt-2 py-1.5 text-xs bg-white/5 hover:bg-white/10 text-white/80 rounded transition-colors"
+            >
+              Cancel Order
+            </button>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

package/finance/components/PositionsList.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import { TrendingUp, TrendingDown } from 'lucide-react'
+
+export interface Position {
+  symbol: string
+  shares: number
+  avgPrice: number
+  currentPrice: number
+}
+
+export interface PositionsListProps {
+  positions: Position[]
+  onPositionClick?: (position: Position) => void
+}
+
+export function PositionsList({ positions, onPositionClick }: PositionsListProps) {
+  const getTickerFromSymbol = (symbol: string) => {
+    return symbol.split(':')[1] || symbol
+  }
+
+  if (positions.length === 0) {
+    return (
+      <div className="p-4 text-center py-8 text-white/40">
+        <p className="text-sm">No open positions</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-4 space-y-2">
+      {positions.map((position) => {
+        const pl = (position.currentPrice - position.avgPrice) * position.shares
+        const plPercent = ((position.currentPrice - position.avgPrice) / position.avgPrice) * 100
+        const totalValue = position.currentPrice * position.shares
+
+        return (
+          <div 
+            key={position.symbol} 
+            className={`bg-white/5 rounded-lg p-3 ${onPositionClick ? 'cursor-pointer hover:bg-white/10 transition-colors' : ''}`}
+            onClick={() => onPositionClick?.(position)}
+          >
+            <div className="flex items-center justify-between mb-2">
+              <div className="font-semibold text-white">
+                {getTickerFromSymbol(position.symbol)}
+              </div>
+              <div className={`flex items-center gap-1 text-sm ${pl >= 0 ? 'text-success' : 'text-danger'}`}>
+                {pl >= 0 ? <TrendingUp size={14} /> : <TrendingDown size={14} />}
+                {pl >= 0 ? '+' : ''}{plPercent.toFixed(2)}%
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-2 text-xs">
+              <div>
+                <div className="text-white/60">Shares</div>
+                <div className="text-white font-medium">{position.shares}</div>
+              </div>
+              <div>
+                <div className="text-white/60">Avg Price</div>
+                <div className="text-white font-medium">${position.avgPrice.toFixed(2)}</div>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-2 text-xs mt-2 pt-2 border-t border-white/10">
+              <div>
+                <div className="text-white/60">Current Price</div>
+                <div className="text-white font-medium">${position.currentPrice.toFixed(2)}</div>
+              </div>
+              <div>
+                <div className="text-white/60">Total Value</div>
+                <div className="text-white font-medium">${totalValue.toFixed(2)}</div>
+              </div>
+            </div>
+            <div className="mt-2 pt-2 border-t border-white/10">
+              <div className="flex justify-between items-center text-xs">
+                <span className="text-white/60">P&L</span>
+                <span className={`font-semibold ${pl >= 0 ? 'text-success' : 'text-danger'}`}>
+                  {pl >= 0 ? '+' : ''}${pl.toFixed(2)}
+                </span>
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/finance/components/StockScreener.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { useEffect, useRef, memo } from 'react'
+
+function StockScreener() {
+  const container = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!container.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (container.current.dataset.initialized === 'true') {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    container.current.dataset.initialized = 'true'
+
+    const script = document.createElement('script')
+    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-screener.js'
+    script.type = 'text/javascript'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      market: 'america',
+      showToolbar: true,
+      defaultColumn: 'overview',
+      defaultScreen: 'most_capitalized',
+      isTransparent: false,
+      locale: 'en',
+      colorTheme: 'dark',
+      width: '100%',
+      height: 550,
+    })
+
+    container.current.appendChild(script)
+
+    // Cleanup function
+    return () => {
+      if (container.current) {
+        // Remove initialization flag on unmount
+        delete container.current.dataset.initialized
+        // Remove all scripts
+        const scripts = container.current.querySelectorAll('script')
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [])
+
+  return (
+    <div className="tradingview-widget-container w-full" ref={container}>
+      <div className="tradingview-widget-container__widget"></div>
+    </div>
+  )
+}
+
+export default memo(StockScreener)

package/finance/components/SymbolInfo.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+export interface SymbolInfoProps {
+  symbol?: string
+  width?: string | number
+  locale?: string
+  colorTheme?: 'light' | 'dark'
+  isTransparent?: boolean
+}
+
+export default function SymbolInfo({
+  symbol = 'NASDAQ:AAPL',
+  width = '100%',
+  locale = 'en',
+  colorTheme = 'dark',
+  isTransparent = false
+}: SymbolInfoProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (containerRef.current.dataset.initialized === 'true') {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    containerRef.current.dataset.initialized = 'true'
+
+    const script = document.createElement('script')
+    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-symbol-info.js'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      symbol,
+      width,
+      locale,
+      colorTheme,
+      isTransparent,
+    })
+
+    containerRef.current.appendChild(script)
+
+    return () => {
+      if (containerRef.current) {
+        // Remove initialization flag on unmount
+        delete containerRef.current.dataset.initialized
+        // Remove all scripts
+        const scripts = containerRef.current.querySelectorAll('script')
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [symbol, width, locale, colorTheme, isTransparent])
+
+  return (
+    <div className="tradingview-widget-container" ref={containerRef}>
+      <div className="tradingview-widget-container__widget"></div>
+    </div>
+  )
+}

package/finance/components/TechnicalAnalysis.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+export interface TechnicalAnalysisProps {
+  symbol?: string
+  interval?: '1m' | '5m' | '15m' | '30m' | '1h' | '2h' | '4h' | '1D' | '1W' | '1M'
+  width?: string | number
+  height?: string | number
+  locale?: string
+  colorTheme?: 'light' | 'dark'
+  isTransparent?: boolean
+  showIntervalTabs?: boolean
+  displayMode?: 'single' | 'multiple'
+}
+
+export default function TechnicalAnalysis({
+  symbol = 'NASDAQ:AAPL',
+  interval = '15m',
+  width = '100%',
+  height = '500',
+  locale = 'en',
+  colorTheme = 'dark',
+  isTransparent = false,
+  showIntervalTabs = true,
+  displayMode = 'single'
+}: TechnicalAnalysisProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (containerRef.current.dataset.initialized === 'true') {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    containerRef.current.dataset.initialized = 'true'
+
+    const script = document.createElement('script')
+    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      interval,
+      width,
+      isTransparent,
+      height,
+      symbol,
+      showIntervalTabs,
+      displayMode,
+      locale,
+      colorTheme,
+    })
+
+    containerRef.current.appendChild(script)
+
+    return () => {
+      if (containerRef.current) {
+        // Remove initialization flag on unmount
+        delete containerRef.current.dataset.initialized
+        // Remove all scripts
+        const scripts = containerRef.current.querySelectorAll('script')
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [symbol, interval, width, height, locale, colorTheme, isTransparent, showIntervalTabs, displayMode])
+
+  return (
+    <div className="tradingview-widget-container w-full h-[500px]" ref={containerRef}>
+      <div className="tradingview-widget-container__widget h-full"></div>
+    </div>
+  )
+}

package/finance/components/TickerTape.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { useEffect, useRef, memo } from 'react'
+
+function TickerTape() {
+  const container = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!container.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (container.current.dataset.initialized === 'true') {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    container.current.dataset.initialized = 'true'
+
+    const script = document.createElement('script')
+    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js'
+    script.type = 'text/javascript'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      symbols: [
+        { proName: 'FOREXCOM:SPXUSD', title: 'S&P 500' },
+        { proName: 'FOREXCOM:NSXUSD', title: 'US 100' },
+        { proName: 'FX_IDC:EURUSD', title: 'EUR/USD' },
+        { proName: 'BITSTAMP:BTCUSD', title: 'Bitcoin' },
+        { proName: 'BITSTAMP:ETHUSD', title: 'Ethereum' },
+        { description: 'Tesla', proName: 'NASDAQ:TSLA' },
+        { description: 'Apple', proName: 'NASDAQ:AAPL' },
+        { description: 'Amazon', proName: 'NASDAQ:AMZN' },
+        { description: 'NVIDIA', proName: 'NASDAQ:NVDA' },
+        { description: 'Microsoft', proName: 'NASDAQ:MSFT' },
+        { description: 'Google', proName: 'NASDAQ:GOOGL' },
+        { description: 'Meta', proName: 'NASDAQ:META' },
+      ],
+      showSymbolLogo: true,
+      isTransparent: false,
+      displayMode: 'adaptive',
+      colorTheme: 'dark',
+      locale: 'en',
+    })
+
+    container.current.appendChild(script)
+
+    // Cleanup function
+    return () => {
+      if (container.current) {
+        // Remove initialization flag on unmount
+        delete container.current.dataset.initialized
+        // Remove all scripts
+        const scripts = container.current.querySelectorAll('script')
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [])
+
+  return (
+    <div className="tradingview-widget-container w-full" ref={container}>
+      <div className="tradingview-widget-container__widget"></div>
+    </div>
+  )
+}
+
+export default memo(TickerTape)