update this code:'use client';

import React from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  ReferenceLine,
} from 'recharts';
import { Trade, DayStats } from '@/types/trade';

interface ChartDataPoint {
  name: string;
  value: number;
}

const CustomTooltip = ({ active, payload }: any) => {
  if (active && payload && payload.length) {
    const isNegative = payload[0].value < 0;
    return (
      <div className="bg-white dark:bg-gray-800 p-2 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg">
        <p className="text-sm font-medium">{payload[0].payload.name}</p>
        <p className={`text-sm font-semibold ${isNegative ? 'text-red-600' : 'text-green-600'}`}>
          ${payload[0].value.toFixed(2)}
        </p>
      </div>
    );
  }
  return null;
};

interface DayTradesModalProps {
  isOpen: boolean;
  onClose: () => void;
  selectedDay: {
    day: number;
    trades: Trade[];
    stats: DayStats | null;
  } | null;
  currentDate: Date;
}

export const DayTradesModal: React.FC<DayTradesModalProps> = ({
  isOpen,
  onClose,
  selectedDay,
  currentDate,
}) => {
  if (!selectedDay) return null;

  // Sort trades by exit_date ascending
  const sortedTrades = [...selectedDay.trades].sort(
    (a, b) => new Date(a.exit_date).getTime() - new Date(b.exit_date).getTime()
  );

  // Build cumulative PnL data
  const chartData: ChartDataPoint[] = [{ name: 'Start', value: 0 }];
  let runningTotal = 0;
  sortedTrades.forEach((trade, index) => {
    runningTotal += trade.pnl;
    chartData.push({
      name: `Trade ${index + 1}`,
      value: runningTotal,
    });
  });

  // Calculate min and max for y-axis with padding
  const values = chartData.map((point) => point.value);
  const minY = Math.min(...values);
  const maxY = Math.max(...values);
  const padding = Math.abs(maxY - minY) * 0.1;
  const yMin = minY - padding;
  const yMax = maxY + padding;
  const zeroY = 0;
  // Calculate the normalized position for gradient split
const totalRange = yMax - yMin;
const zeroPosition = (0 - yMin) / totalRange;

const splitPoint = ((zeroY - yMin) / (yMax - yMin) * 100);
// Calculate the exact y1 position for zero line
const y1 = yMax / (yMax - yMin);

  // Adjust gradient stops to ensure complete fill
  const negativeGradientStops = [
    { offset: '0%', stopColor: 'rgb(239, 68, 68)', stopOpacity: 1 },
    { offset: `${splitPoint}%`, stopColor: 'rgb(239, 68, 68)', stopOpacity: 1 }
  ];

  const positiveGradientStops = [
    { offset: `${splitPoint}%`, stopColor: 'rgb(34, 197, 94)', stopOpacity: 1 },
    { offset: '100%', stopColor: 'rgb(34, 197, 94)', stopOpacity: 1 }
  ];

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[800px]">
        <DialogHeader>
          <DialogTitle>Trading Activity</DialogTitle>
          <DialogDescription>
            Summary for {currentDate.toLocaleDateString()}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-6">
          {/* Stats Cards */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
              <p className="text-sm text-gray-500">Net P&L</p>
              <p className={`text-2xl font-bold ${selectedDay.stats?.pnl !== undefined && selectedDay.stats.pnl >= 0 ? 'text-green-600' : 'text-red-600'}`}>
                ${selectedDay.stats?.pnl.toFixed(2)}
              </p>
            </div>
            <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
              <p className="text-sm text-gray-500">Win Rate</p>
              <p className="text-2xl font-bold">{selectedDay.stats?.winRatePercent.toFixed(1)}%</p>
            </div>
            <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
              <p className="text-sm text-gray-500">Total Trades</p>
              <p className="text-2xl font-bold">{selectedDay.trades.length}</p>
            </div>
          </div>

          {/* Chart */}
          <div className="w-full h-[300px] border border-blue-400 rounded-lg p-4 bg-white dark:bg-gray-900">
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart
                data={chartData}
                margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
              >
                <defs>
  <linearGradient id="splitColor" x1="0" y1="1" x2="0" y2="0">
    {negativeGradientStops.map((stop, index) => (
      <stop
        key={`negative-${index}`}
        offset={stop.offset}
        stopColor={stop.stopColor}
        stopOpacity={stop.stopOpacity}
      />
    ))}
    {positiveGradientStops.map((stop, index) => (
      <stop
        key={`positive-${index}`}
        offset={stop.offset}
        stopColor={stop.stopColor}
        stopOpacity={stop.stopOpacity}
      />
    ))}
  </linearGradient>
</defs>

                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e5e7eb" />
                <XAxis
                  dataKey="name"
                  axisLine={false}
                  tickLine={false}
                  tick={{ fill: '#6b7280', fontSize: 12 }}
                />
                <YAxis
                  domain={[yMin, yMax]}
                  axisLine={false}
                  tickLine={false}
                  tick={{ fill: '#6b7280', fontSize: 12 }}
                  tickFormatter={(value) => `$${value}`}
                />
                <Tooltip content={<CustomTooltip />} />

                {/* Zero line */}
                <ReferenceLine y={0} stroke="#666" strokeWidth={1} />

                <Area
                  type="monotone"
                  dataKey="value"
                  stroke="#000"
                  strokeWidth={2}
                  fill="url(#splitColor)"
                  fillOpacity={1}
                  isAnimationActive={false}
                  baseValue={0}
                  dot={{
                    r: 4,
                    fill: "#93c5fd",
                    strokeWidth: 2,
                    stroke: "#fff",
                  }}
                />
              </AreaChart>
            </ResponsiveContainer>
          </div>

          {/* Trades Table */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Trades</h3>
            <table className="w-full">
              <thead>
                <tr>
                  <th className="text-left">Time</th>
                  <th className="text-left">Symbol</th>
                  <th className="text-left">Type</th>
                  <th className="text-right">Entry</th>
                  <th className="text-right">Exit</th>
                  <th className="text-right">Quantity</th>
                  <th className="text-right">P&L</th>
                </tr>
              </thead>
              <tbody>
                {sortedTrades.map((trade) => (
                  <tr key={trade.id}>
                    <td>{new Date(trade.exit_date).toLocaleTimeString()}</td>
                    <td>{trade.symbol}</td>
                    <td>{trade.type}</td>
                    <td className="text-right">${trade.entry_price.toFixed(2)}</td>
                    <td className="text-right">${trade.exit_price.toFixed(2)}</td>
                    <td className="text-right">{trade.quantity}</td>
                    <td className={`text-right ${trade.pnl >= 0 ? 'text-green-600' : 'text-red-600'}`}>
                      ${trade.pnl.toFixed(2)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};


following these instructions:'use client';

// ... (previous imports remain the same)
import { useEffect, useRef } from 'react';

export const DayTradesModal: React.FC<DayTradesModalProps> = ({
  isOpen,
  onClose,
  selectedDay,
  currentDate,
}) => {
  if (!selectedDay) return null;

  const chartRef = useRef(null);
  const [zeroLineY, setZeroLineY] = useState(1);

  // ... (previous data preparation logic)

  const handleChartLoad = () => {
    // Try to get the zero line position after chart loads
    if (chartRef.current) {
      const zeroLine = chartRef.current.querySelector('.recharts-reference-line line');
      if (zeroLine) {
        const y = parseFloat(zeroLine.getAttribute('y1'));
        const containerHeight = chartRef.current.getBoundingClientRect().height;
        setZeroLineY(y / containerHeight);
      }
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[800px]">
        <div className="w-full h-[300px] border border-blue-400 rounded-lg p-4 bg-white dark:bg-gray-900">
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart
              ref={chartRef}
              data={chartData}
              margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
              onLoad={handleChartLoad}
            >
              <defs>
                <linearGradient id="splitColor" x1="0" y1={zeroLineY} x2="0" y2="0">
                  {/* ... (gradient stops remain the same) */}
                </linearGradient>
              </defs>

              {/* ... (other chart components remain the same) */}
              
              <ReferenceLine 
                y={0} 
                stroke="#666" 
                strokeWidth={1}
                onLoad={(e) => {
                  if (e?.current) {
                    const y = parseFloat(e.current.getAttribute('y1'));
                    const containerHeight = chartRef.current?.getBoundingClientRect().height || 1;
                    setZeroLineY(y / containerHeight);
                  }
                }}
              />

              <Area
                type="monotone"
                dataKey="value"
                stroke="#000"
                strokeWidth={2}
                fill="url(#splitColor)"
                fillOpacity={1}
                isAnimationActive={false}
                dot={{
                  r: 4,
                  fill: "#93c5fd",
                  strokeWidth: 2,
                  stroke: "#fff",
                }}
              />
            </AreaChart>
          </ResponsiveContainer>
        </div>
      </DialogContent>
    </Dialog>
  );
};


only return my the updated code