asdfsafd

frontend/src/pages/Watering/Watering.js

@@ -49,6 +49,9 @@ const Watering = () => {
   const [selectedSprinklerId, setSelectedSprinklerId] = useState('');
   const [selectedPointId, setSelectedPointId] = useState(null);
   const selectedPoint = useMemo(()=> points.find(p=> p.id===selectedPointId), [points, selectedPointId]);
+  const sortedPoints = useMemo(() => {
+    return [...points].sort((a,b) => (Number(a.sequence||0)) - (Number(b.sequence||0)) || (Number(a.id)-Number(b.id)));
+  }, [points]);
   const [editForm, setEditForm] = useState(null);
   const [satellite, setSatellite] = useState(false);
   const [rename, setRename] = useState('');
@@ -332,13 +335,13 @@ const Watering = () => {
           <div className="card">
             <div className="font-medium mb-2">Plan Points</div>
             <ul className="text-sm space-y-1 max-h-64 overflow-auto">
-              {points.map(pt => (
+              {sortedPoints.map((pt, idx) => (
                 <li key={pt.id}
                     className={(pt.id===selectedPointId? 'bg-blue-50 ' : '') + 'rounded px-2 py-1 hover:bg-gray-50 cursor-pointer flex items-center gap-2 justify-between'}
                     onClick={()=> onSelectPoint(pt)}>
                   <span className="flex items-center gap-2">
                     <span style={{backgroundColor: pointColor(pt)}} className="inline-block w-3 h-3 rounded-full"></span>
-                    <span className="font-mono text-xs">#{pt.sequence}</span>
+                    <span className="font-mono text-xs">#{idx+1}</span>
                     <span className="text-xs">{Number(pt.lat).toFixed(5)}, {Number(pt.lng).toFixed(5)}</span>
                   </span>
                   <span className="text-[11px] text-gray-600">