Function CustomTooltipContent

src/components/CropPlanningSection.tsx:1593–1605

({ active, payload }: any)

}

const formatter = new Intl.NumberFormat();

const CustomTooltipContent = ({ active, payload }: any) => {
  if (!active || !payload?.length) return null;
  const data = payload[0].payload;

  return (
    <div className="rounded-lg px-3 py-2 shadow-xl border border-border/50" style={{ background: "hsl(150, 18%, 12%)" }}>
      <div className="text-xs font-semibold text-foreground">{data.name || data.crop}</div>
      <div className="text-sm font-bold" style={{ color: data.color }}>
        {data.value || data.area_pct}%
      </div>
    </div>
  );
};