Function GrowthStageSection

src/components/FieldDetailView.tsx:143–201

({ polygon, fieldId }: { polygon: [number, number][]; fieldId: string })

const GROWTH_STAGE_CACHE_KEY = "region-growth-stage-cache";

function GrowthStageSection({ polygon, fieldId }: { polygon: [number, number][]; fieldId: string }) {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const cache = getCache<any>(GROWTH_STAGE_CACHE_KEY);
    const cached = cache[fieldId];
    if (cached && Date.now() - cached.timestamp < 3600000) { setData(cached.data); return; }
    const fetchGrowthStage = async () => {
      setLoading(true);
      try {
        const result = await invokeWithRetry<any>(
          "ndvi-timeseries",
          { polygon },
          { retries: 3, isEmpty: (d: any) => !d?.growth_stage }
        );
        const gs = result?.growth_stage ? {
          stage: result.growth_stage, progress: result.growth_progress,
          current_ndvi: result.latest_ndvi, date_range: result.date_range,
        } : null;
        setData(gs);
        if (gs) setCache(GROWTH_STAGE_CACHE_KEY, fieldId, gs);
      } catch (e) { console.error("Growth stage error:", e); setData(null); }
      finally { setLoading(false); }
    };
    fetchGrowthStage();
  }, [fieldId]);

  return (
    <div>
      <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3 flex items-center gap-1.5">
        <Leaf className="w-3.5 h-3.5" /> Growth Stage
      </h3>
      {loading ? (
        <div className="p-4 rounded-xl border border-border bg-accent/15 flex items-center gap-2 text-sm text-muted-foreground">
          <Loader2 className="w-4 h-4 animate-spin" /> Detecting growth stage…
        </div>
      ) : data ? (
        <div className="p-4 rounded-xl border border-border bg-accent/15 space-y-3">
          <div className="flex items-center justify-between">
            <span className="text-lg font-semibold text-foreground">{data.stage}</span>
            <span className="text-xs text-muted-foreground">NDVI: {data.current_ndvi}</span>
          </div>
          <div className="w-full h-2 rounded-full bg-muted/30 overflow-hidden">
            <div className="h-full rounded-full bg-[#7BC75B] transition-all duration-500" style={{ width: `${data.progress}%` }} />
          </div>
          <div className="flex justify-between text-[10px] text-muted-foreground">
            <span>Germination</span><span>Tillering</span><span>Extension</span><span>Heading</span><span>Grain Fill</span>
          </div>
          <div className="text-[10px] text-muted-foreground">{data.date_range}</div>
        </div>
      ) : (
        <div className="p-4 rounded-xl border border-border bg-accent/10 text-sm text-muted-foreground">
          No satellite data available for this region.
        </div>
      )}
    </div>
  );