intermediate stops

src/components/cables/NewCableForm.tsx

@@ -12,6 +12,7 @@ interface NewCableFormProps {
 export default function NewCableForm({ locations }: NewCableFormProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [stations, setStations] = useState<number[]>([]);
   const [isPending, startTransition] = useTransition();
   const router = useRouter();
 
@@ -145,6 +146,58 @@ export default function NewCableForm({ locations }: NewCableFormProps) {
             </select>
           </div>
 
+          {/* Intermediate stations */}
+          <div className="md:col-span-2">
+            <div className="flex items-center justify-between mb-2">
+              <label className="block text-sm font-medium text-slate-700">
+                Zwischenstationen
+              </label>
+              <button
+                type="button"
+                onClick={() => setStations((prev) => [...prev, 0])}
+                className="text-sm text-blue-600 hover:text-blue-800 transition-colors"
+              >
+                + hinzufügen
+              </button>
+            </div>
+            <div className="space-y-3">
+              {stations.map((stationId, index) => (
+                <div key={index} className="grid grid-cols-[1fr_auto] gap-3 items-center">
+                  <select
+                    name="intermediateLocationIds"
+                    value={stationId}
+                    onChange={(event) => {
+                      const value = Number(event.target.value);
+                      setStations((current) => {
+                        const next = [...current];
+                        next[index] = value;
+                        return next;
+                      });
+                    }}
+                    required
+                    className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  >
+                    <option value={0} disabled>
+                      Ort auswählen…
+                    </option>
+                    {locations.map((loc) => (
+                      <option key={loc.id} value={loc.id}>
+                        {loc.name}
+                      </option>
+                    ))}
+                  </select>
+                  <button
+                    type="button"
+                    onClick={() => setStations((current) => current.filter((_, idx) => idx !== index))}
+                    className="inline-flex items-center justify-center rounded-lg bg-slate-100 px-3 py-2 text-sm text-slate-700 hover:bg-slate-200 transition-colors"
+                  >
+                    Entfernen
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+
           {/* Short description */}
           <div className="md:col-span-2">
             <label