you have this code:// src/components/AddTradeModal.tsx
import { useState } from 'react'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/components/ui/use-toast"
import { Plus } from "lucide-react"
import { Trade } from '@/types/trade'

interface TradeFormData {
  symbol: string
  type: 'LONG' | 'SHORT'
  entry_price: string
  exit_price: string
  quantity: string
  entry_date: string
  exit_date: string
  notes: string
}

interface AddTradeModalProps {
  onTradeAdded: (newTrade: Trade) => void;
}

export default function AddTradeModal({ onTradeAdded }: AddTradeModalProps) {
  const { toast } = useToast()
  const [loading, setLoading] = useState(false)
  const [open, setOpen] = useState(false)

  const [tradeData, setTradeData] = useState<TradeFormData>({
    symbol: '',
    type: 'LONG',
    entry_price: '',
    exit_price: '',
    quantity: '',
    entry_date: '',
    exit_date: '',
    notes: ''
  })

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setLoading(true)

    try {
      const payload = {
        ...tradeData,
        entry_price: parseFloat(tradeData.entry_price),
        exit_price: parseFloat(tradeData.exit_price),
        quantity: parseFloat(tradeData.quantity),
      }

      const res = await fetch('/api/trades', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
      })

      if (!res.ok) {
        const error = await res.json()
        throw new Error(error.message || 'Failed to add trade')
      }

      const newTrade: Trade = await res.json()
      
      // Call the callback with the new trade
      onTradeAdded(newTrade)

      toast({
        title: "Success",
        description: "Trade added successfully"
      })

      setOpen(false) // Close the modal
      // Optionally reset the form
      setTradeData({
        symbol: '',
        type: 'LONG',
        entry_price: '',
        exit_price: '',
        quantity: '',
        entry_date: '',
        exit_date: '',
        notes: ''
      })
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to add trade",
        variant: "destructive"
      })
    } finally {
      setLoading(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button className="w-full bg-blue-500 hover:bg-blue-600 text-white">
          <Plus className="mr-2 h-4 w-4" />
          Add Trade
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle>Add New Trade</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="symbol">Symbol</Label>
              <Input
                id="symbol"
                value={tradeData.symbol}
                onChange={(e) => setTradeData({ ...tradeData, symbol: e.target.value.toUpperCase() })}
                placeholder="AAPL"
                required
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="type">Type</Label>
              <Select
                value={tradeData.type}
                onValueChange={(value: 'LONG' | 'SHORT') => setTradeData({ ...tradeData, type: value })}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="LONG">Long</SelectItem>
                  <SelectItem value="SHORT">Short</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label htmlFor="entry_price">Entry Price</Label>
              <Input
                id="entry_price"
                type="number"
                step="0.01"
                value={tradeData.entry_price}
                onChange={(e) => setTradeData({ ...tradeData, entry_price: e.target.value })}
                placeholder="100.00"
                required
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="exit_price">Exit Price</Label>
              <Input
                id="exit_price"
                type="number"
                step="0.01"
                value={tradeData.exit_price}
                onChange={(e) => setTradeData({ ...tradeData, exit_price: e.target.value })}
                placeholder="110.00"
                required
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="quantity">Quantity</Label>
              <Input
                id="quantity"
                type="number"
                step="0.01"
                value={tradeData.quantity}
                onChange={(e) => setTradeData({ ...tradeData, quantity: e.target.value })}
                placeholder="100"
                required
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="entry_date">Entry Date</Label>
              <Input
                id="entry_date"
                type="datetime-local"
                value={tradeData.entry_date}
                onChange={(e) => setTradeData({ ...tradeData, entry_date: e.target.value })}
                required
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="exit_date">Exit Date</Label>
              <Input
                id="exit_date"
                type="datetime-local"
                value={tradeData.exit_date}
                onChange={(e) => setTradeData({ ...tradeData, exit_date: e.target.value })}
                required
              />
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="notes">Notes</Label>
            <Textarea
              id="notes"
              value={tradeData.notes}
              onChange={(e) => setTradeData({ ...tradeData, notes: e.target.value })}
              placeholder="Add your trade notes here..."
              className="min-h-[100px]"
            />
          </div>

          <div className="flex justify-end space-x-4">
            <Button
              type="button"
              variant="outline"
              onClick={() => setOpen(false)}
              disabled={loading}
            >
              Cancel
            </Button>
            <Button type="submit" disabled={loading}>
              {loading ? 'Adding...' : 'Add Trade'}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}

update with:import { useState } from 'react'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/components/ui/use-toast"
import { Plus } from "lucide-react"
import { Trade } from '@/types/trade'

interface AddTradeModalProps {
  onNewTrade?: (trade: Trade) => void;  // Make it optional so other places still work
}

export default function AddTradeModal({ onNewTrade }: AddTradeModalProps) {
  const { toast } = useToast()
  const [loading, setLoading] = useState(false)
  const [open, setOpen] = useState(false)

  // ... rest of your states and code stay exactly the same ...

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setLoading(true)

    try {
      const payload = {
        ...tradeData,
        entry_price: parseFloat(tradeData.entry_price),
        exit_price: parseFloat(tradeData.exit_price),
        quantity: parseFloat(tradeData.quantity),
      }

      const res = await fetch('/api/trades', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
      })

      if (!res.ok) {
        const error = await res.json()
        throw new Error(error.message || 'Failed to add trade')
      }

      const newTrade = await res.json()
      
      // Call onNewTrade if it exists
      if (onNewTrade) {
        onNewTrade(newTrade)
      }

      toast({
        title: "Success",
        description: "Trade added successfully"
      })

      setOpen(false)
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to add trade",
        variant: "destructive"
      })
    } finally {
      setLoading(false)
    }
  }

  // Rest of your component stays exactly the same...
}