this is my 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
  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; // Add 10% padding
  const yMin = minY - padding;
  const yMax = maxY + padding;

  // Calculate gradient stops based on data range
  const zeroY = 0;
  const negativeGradientStops = [
    { offset: '0%', stopColor: 'rgb(239, 68, 68)', stopOpacity: 1 },
    { offset: `${(zeroY - yMin) / (yMax - yMin) * 100}%`, stopColor: 'rgb(239, 68, 68)', stopOpacity: 0 }
  ];
  const positiveGradientStops = [
    { offset: `${(zeroY - yMin) / (yMax - yMin) * 100}%`, stopColor: 'rgb(34, 197, 94)', stopOpacity: 0 },
    { offset: '100%', stopColor: 'rgb(34, 197, 94)', stopOpacity: 1 }
  ];

  // Find crossing points where cumulative PnL crosses 0
  const crossingPoints: string[] = [];
  for (let i = 1; i < chartData.length; i++) {
    const prev = chartData[i - 1].value;
    const current = chartData[i].value;
    if ((prev < 0 && current >= 0) || (prev > 0 && current <= 0)) {
      crossingPoints.push(chartData[i].name);
    }
  }

  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 />} />
                <ReferenceLine y={0} stroke="#e5e7eb" strokeWidth={1} />

                {/* ReferenceLines for Zero Crossings */}
                {crossingPoints.map((tradeName, index) => (
                  <ReferenceLine
                    key={`crossing-${index}`}
                    x={tradeName}
                    stroke="#000"
                    strokeDasharray="3 3"
                    strokeWidth={1}
                  />
                ))}

                <Area
                  type="monotone"
                  dataKey="value"
                  stroke="#000"
                  fill="url(#splitColor)"
                  fillOpacity={1}
                  isAnimationActive={false}
                  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>
  );
};


and these are the instructions to update it:
'use client';

// ... (previous imports remain the same)

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

  // ... (previous sorting and data building logic remains the same)

  // Calculate min and max for y-axis
  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;

  // Calculate normalized zero position
  const zeroPosition = (0 - yMin) / (yMax - yMin);
  
  // Create separate gradients for positive and negative values
  const gradientStops = {
    negative: [
      { offset: '0%', color: 'rgb(239, 68, 68)', opacity: 1 },    // Full red at bottom
      { offset: `${zeroPosition * 90}%`, color: 'rgb(239, 68, 68)', opacity: 0.1 },  // Very transparent red near zero
      { offset: `${zeroPosition * 100}%`, color: 'rgb(239, 68, 68)', opacity: 0 }    // Fully transparent at zero
    ],
    positive: [
      { offset: `${zeroPosition * 100}%`, color: 'rgb(34, 197, 94)', opacity: 0 },   // Fully transparent at zero
      { offset: `${zeroPosition * 110}%`, color: 'rgb(34, 197, 94)', opacity: 0.1 }, // Very transparent green near zero
      { offset: '100%', color: 'rgb(34, 197, 94)', opacity: 1 }    // Full green at top
    ]
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[800px]">
        {/* ... (previous header and stats cards remain the same) */}

        <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="negativeGradient" x1="0" y1="1" x2="0" y2="0">
                  {gradientStops.negative.map((stop, index) => (
                    <stop
                      key={`negative-${index}`}
                      offset={stop.offset}
                      stopColor={stop.color}
                      stopOpacity={stop.opacity}
                    />
                  ))}
                </linearGradient>
                <linearGradient id="positiveGradient" x1="0" y1="1" x2="0" y2="0">
                  {gradientStops.positive.map((stop, index) => (
                    <stop
                      key={`positive-${index}`}
                      offset={stop.offset}
                      stopColor={stop.color}
                      stopOpacity={stop.opacity}
                    />
                  ))}
                </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 with increased prominence */}
              <ReferenceLine y={0} stroke="#666" strokeWidth={1} />

              {/* Separate Areas for positive and negative values */}
              <Area
                type="monotone"
                dataKey="value"
                stroke="#000"
                fill="url(#negativeGradient)"
                fillOpacity={1}
                isAnimationActive={false}
                baseValue={0}
                stackId="1"
                {...(maxY <= 0 ? { dot: false } : {})}
              />
              <Area
                type="monotone"
                dataKey="value"
                stroke="#000"
                fill="url(#positiveGradient)"
                fillOpacity={1}
                isAnimationActive={false}
                baseValue={0}
                stackId="1"
                {...(minY >= 0 ? { dot: false } : {})}
              />

              {/* Single line for the path */}
              <Area
                type="monotone"
                dataKey="value"
                stroke="#000"
                fill="none"
                isAnimationActive={false}
                dot={{
                  r: 4,
                  fill: "#93c5fd",
                  strokeWidth: 2,
                  stroke: "#fff",
                }}
              />
            </AreaChart>
          </ResponsiveContainer>
        </div>

        {/* ... (previous table section remains the same) */}
      </DialogContent>
    </Dialog>
  );
};

just return me the updated code no comments.