update the following code:'use client'

import { useState } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { BarChart2, BookOpen, LogOut, Settings, Layout as LayoutIcon, HomeIcon, ClockIcon, CalendarIcon, Plus, User, CreditCard, Gift, MessageSquare, Phone } from "lucide-react"
import AddTradeModal from '@/components/AddTradeModal'

const tabs = [
  { id: 'overview', label: 'Overview', icon: HomeIcon, path: '/dashboard' },
  { id: 'time-metrics', label: 'Time Metrics', icon: ClockIcon, path: '/dashboard/time-metrics' },
  { id: 'analytics', label: 'Analytics', icon: BarChart2, path: '/dashboard/analytics' },
  { id: 'calendar', label: 'Calendar', icon: CalendarIcon, path: '/dashboard/calendar' }
]

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const pathname = usePathname()
  const [user, setUser] = useState({
    name: 'John Doe',
    email: 'john@example.com'
  })

  const handleLogout = async () => {
    try {
      await fetch('/api/auth/logout', {
        method: 'POST'
      })
      window.location.href = '/login'
    } catch (error) {
      console.error('Logout failed:', error)
    }
  }

  return (
    <div className="min-h-screen flex dark:bg-gray-900">
      {/* Fixed Sidebar */}
      <div className="w-64 fixed inset-y-0 bg-white dark:bg-gray-800 border-r dark:border-gray-700 flex flex-col">
        {/* Logo Section */}
        <div className="p-4 border-b dark:border-gray-700">
          <Link href="/dashboard" className="flex items-center space-x-2">
            <BookOpen className="h-6 w-6" />
            <span className="font-bold text-xl">TradeJournal</span>
          </Link>
        </div>

        {/* Add Trade Button */}
        <div className="p-4 border-b dark:border-gray-700">
          <AddTradeModal />
        </div>

        {/* Main Navigation */}
        <nav className="flex-1 overflow-y-auto p-4">
          <div className="space-y-1">
            <Link 
              href="/dashboard" 
              className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
            >
              <LayoutIcon className="h-5 w-5" />
              <span>Dashboard</span>
            </Link>
            
            <Link 
              href="/dashboard/trades" 
              className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
            >
              <BookOpen className="h-5 w-5" />
              <span>Trades</span>
            </Link>
            
            <Link 
              href="/dashboard/analytics" 
              className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
            >
              <BarChart2 className="h-5 w-5" />
              <span>Analytics</span>
            </Link>
            
            <Link 
              href="/dashboard/settings" 
              className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
            >
              <Settings className="h-5 w-5" />
              <span>Settings</span>
            </Link>
          </div>
        </nav>

        {/* User Profile Section with Dropdown */}
        <div className="border-t dark:border-gray-700">
          <div className="p-4">
            <DropdownMenu>
              <DropdownMenuTrigger className="w-full">
                <div className="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
                  <div className="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
                    {user.name.charAt(0)}
                  </div>
                  <div className="text-left">
                    <p className="font-medium">{user.name}</p>
                    <p className="text-sm text-gray-500 dark:text-gray-400">{user.email}</p>
                  </div>
                </div>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-56" align="end">
                <DropdownMenuLabel>My Account</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <User className="mr-2 h-4 w-4" />
                  <span>Account Info</span>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <CreditCard className="mr-2 h-4 w-4" />
                  <span>Manage Billing</span>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <Gift className="mr-2 h-4 w-4" />
                  <span>Upgrade to Pro</span>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <MessageSquare className="mr-2 h-4 w-4" />
                  <span>Feature Request</span>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <Phone className="mr-2 h-4 w-4" />
                  <span>Get Mobile App</span>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={handleLogout}>
                  <LogOut className="mr-2 h-4 w-4" />
                  <span>Log out</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </div>

      {/* Main Content - With offset for fixed sidebar */}
      <div className="flex-1 ml-64">
        <header className="sticky top-0 z-10 bg-white dark:bg-gray-800 border-b dark:border-gray-700">
          <div className="p-4">
            <h1 className="text-2xl font-bold">Dashboard</h1>
          </div>
          {/* Tab Navigation */}
          <div className="px-4 border-t border-gray-700">
            <div className="flex space-x-4">
              {tabs.map(tab => {
                const IconComponent = tab.icon
                const isActive = pathname === tab.path
                return (
                  <Link
                    key={tab.id}
                    href={tab.path}
                    className={`flex items-center space-x-2 px-4 py-2 text-sm border-b-2 ${
                      isActive 
                        ? 'border-blue-500 text-blue-500' 
                        : 'border-transparent text-gray-400 hover:text-gray-300'
                    }`}
                  >
                    <IconComponent className="h-4 w-4" />
                    <span>{tab.label}</span>
                  </Link>
                )
              })}
            </div>
          </div>
        </header>
        <main className="p-6">
          {children}
        </main>
      </div>
    </div>
  )
}


following these instructions update the previous code:'use client'

import { useState } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { 
  BarChart2, 
  BookOpen, 
  LogOut, 
  Settings, 
  Layout as LayoutIcon, 
  HomeIcon, 
  ClockIcon, 
  CalendarIcon, 
  Plus, 
  User, 
  CreditCard, 
  Gift, 
  MessageSquare, 
  Phone,
  BookText // Add this for Notes icon 
} from "lucide-react"
import AddTradeModal from '@/components/AddTradeModal'

const tabs = [
  { id: 'overview', label: 'Overview', icon: HomeIcon, path: '/dashboard' },
  { id: 'time-metrics', label: 'Time Metrics', icon: ClockIcon, path: '/dashboard/time-metrics' },
  { id: 'analytics', label: 'Analytics', icon: BarChart2, path: '/dashboard/analytics' },
  { id: 'calendar', label: 'Calendar', icon: CalendarIcon, path: '/dashboard/calendar' }
]

// ... rest of your imports

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  // ... existing state and handlers

  return (
    <div className="min-h-screen flex dark:bg-gray-900">
      <div className="w-64 fixed inset-y-0 bg-white dark:bg-gray-800 border-r dark:border-gray-700 flex flex-col">
        {/* ... Logo Section ... */}
        
        {/* ... Add Trade Button ... */}

        {/* Main Navigation */}
        <nav className="flex-1 overflow-y-auto p-4">
          <div className="space-y-1">
            <Link 
              href="/dashboard" 
              className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
            >
              <LayoutIcon className="h-5 w-5" />
              <span>Dashboard</span>
            </Link>
            
            <Link 
              href="/dashboard/trades" 
              className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
            >
              <BookOpen className="h-5 w-5" />
              <span>Trades</span>
            </Link>

            {/* Add Notes/Journal Link */}
            <Link 
              href="/dashboard/journal" 
              className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
            >
              <BookText className="h-5 w-5" />
              <span>Trading Journal</span>
            </Link>
            
            <Link 
              href="/dashboard/analytics" 
              className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
            >
              <BarChart2 className="h-5 w-5" />
              <span>Analytics</span>
            </Link>
            
            <Link 
              href="/dashboard/settings" 
              className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
            >
              <Settings className="h-5 w-5" />
              <span>Settings</span>
            </Link>
          </div>
        </nav>

        {/* ... rest of your layout code ... */}
      </div>
    </div>
  )
}

only return me the new updated full code no comments