Function SidePanel

src/components/SidePanel.tsx:24–193

({
  allFields,
  selectedFields,
  activeField,
  detailField,
  onFieldClick,
  onFieldDoubleClick,
  onBackFromDetail,
  onUpdateField,
  onDeleteField,
  onEditBoundary,
}: SidePanelProps)

}

const SidePanel = ({
  allFields,
  selectedFields,
  activeField,
  detailField,
  onFieldClick,
  onFieldDoubleClick,
  onBackFromDetail,
  onUpdateField,
  onDeleteField,
  onEditBoundary,
}: SidePanelProps) => {
  const isMobile = useIsMobile();
  const [search, setSearch] = useState("");
  const [sortBy, setSortBy] = useState<"name" | "area" | "ndvi">("name");
  const [filterCrop, setFilterCrop] = useState<string | null>(null);
  const [showFilterMenu, setShowFilterMenu] = useState(false);
  const [editingField, setEditingField] = useState<Field | null>(null);

  if (detailField) {
    return (
      <div className={`${isMobile ? "w-full" : "w-[320px]"} h-full bg-card/95 backdrop-blur-md border-l border-border flex flex-col animate-fade-in`}>
        <FieldDetailView
          field={detailField}
          onBack={onBackFromDetail}
          onEditBoundary={onEditBoundary ? () => onEditBoundary(detailField) : undefined}
        />
      </div>
    );
  }

  const crops = Array.from(new Set(allFields.map(f => f.crop)));

  const filtered = allFields
    .filter(f =>
      (f.name.toLowerCase().includes(search.toLowerCase()) ||
       f.crop.toLowerCase().includes(search.toLowerCase())) &&
      (!filterCrop || f.crop === filterCrop)
    )
    .sort((a, b) => {
      if (sortBy === "area") return b.area - a.area;
      if (sortBy === "ndvi") return (b.ndviChange ?? 0) - (a.ndviChange ?? 0);
      return a.name.localeCompare(b.name);
    });

  const sortLabel = sortBy === "name" ? "Name" : sortBy === "area" ? "Area" : "NDVI";

  return (
    <div className="w-[320px] h-full bg-card/95 backdrop-blur-md border-l border-border flex flex-col">
      <div className="flex items-center justify-between p-4 border-b border-border">
        <h2 className="text-lg font-semibold text-foreground">Region List</h2>
      </div>

      <div className="px-3 pt-3">
        <div className="relative">
          <input
            type="text"
            placeholder="Search regions..."