@autobusal/operator-routes 1.3.3 → 1.5.0

package/Locations/Browse/Item.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { TFunction } from 'i18next';
 import { useForm } from 'react-hook-form';
 import { Validate, Display, success } from '@autobusal/utilities';
@@ -7,6 +8,7 @@ import { Data } from './styles';
 import { LocationForm } from '../types';
 import { LocationData } from '@autobusal/providers/types/locations';
 import { usePostMove, useDeleteLocation, usePostUpdate } from '../services';
+import Withdraw from '../Withdraw/Withdraw';
 
 interface Props {
   routeId: number
@@ -38,11 +40,33 @@ const Item = ({ routeId, item, t, onReload }: Props): JSX.Element => {
     });
   };
 
+  /*
+   * Edited: Claude - Date: 2026-08-21
+   *
+   * Removing a stop opens the withdrawal panel rather than deleting
+   * outright. obtapi cannot delete a location anything was ever sold
+   * through - an invoice or a refund still has to describe that sale years
+   * later - so it WITHDRAWS instead, and refuses while anybody holds a live
+   * ticket through the stop.
+   *
+   * The panel is where that refusal becomes actionable: it lists who is
+   * affected, offers each of them another stop, and drafts the message.
+   * Going straight to Delete would surface a 409 as a generic failure and
+   * leave the operator with no idea who was in the way.
+   */
+  const [ withdrawing, setWithdrawing ] = useState<boolean>(false);
+
   const onDelete = (): void => {
+    setWithdrawing(true);
+  };
+
+  const onWithdraw = (): void => {
     Delete({}, {
       onSuccess: () => {
         success(t('locations_manage.messages.deleted', { ns: 'common' }));
 
+        setWithdrawing(false);
+
         onReload();
       }
     });
@@ -50,6 +74,17 @@ const Item = ({ routeId, item, t, onReload }: Props): JSX.Element => {
   
   return (
     <div className="box">
+      { withdrawing && (
+        <Withdraw
+          routeId={ routeId }
+          location={ item }
+          t={ t }
+          onClose={ () => setWithdrawing(false) }
+          onWithdraw={ onWithdraw }
+          onReload={ onReload }
+        />
+      ) }
+
       <h4>{ item.city.country?.name } &rsaquo; { item.city.name } &rsaquo; { item.stop?.name }</h4>
 
       <form onSubmit={ handleSubmit(onSubmit) }>

package/Locations/Manage.tsx

@@ -3,8 +3,9 @@ import { useParams } from 'react-router-dom';
 import { Meta, BackWithTitle, Report } from '@autobusal/common';
 import { usePage, useBreadcrumbs } from '@autobusal/hooks';
 import Add from './Add/Add';
+import Propose from './Propose/Propose';
 import Browse from './Browse/Browse';
-import { useGetLocations } from './services';
+import { useGetLocations, useGetStops } from './services';
 
 interface Props {
   url: string
@@ -23,6 +24,10 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   const { data, refetch } = useGetLocations(id);
 
+  /* Claude - 2026-08-21: the same city/stop tree the Add picker uses, reused
+     by Propose so it can offer the city list without a second request. */
+  const { data: locations, refetch: refetchStops } = useGetStops(id);
+
   const title = t('locations_manage.title', { name: data?.name, ns: 'common' });
 
   useBreadcrumbs(title, [{
@@ -35,6 +40,10 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   const onReload = (): void => {
     refetch();
+
+    // a newly proposed stop has to appear in the picker (disabled, marked
+    // pending) without a page reload
+    refetchStops();
   };
 
   return (
@@ -43,6 +52,12 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
       <Add routeId={ id } t={ t } onReload={ onReload } />
 
+      { /* Claude - 2026-08-21: the way out when the station simply is not
+           there. 57 of 101 cities have no stop at all and are therefore
+           invisible in the picker above - before this there was no
+           in-product path to fix that. */ }
+      <Propose countries={ locations } t={ t } onReload={ onReload } />
+
       <Report margin={ 15 } question={ t('locations_manage.report', { ns: 'common' }) } type="location" t={ t } />
 
       <Browse routeId={ id } data={ data?.locations } t={ t } onReload={ onReload } />

package/Locations/Propose/Propose.tsx

@@ -0,0 +1,210 @@
+import { useState, useEffect } from 'react';
+import { TFunction } from 'i18next';
+import { FiPlus, FiSearch, FiAlertTriangle, FiClock } from 'react-icons/fi';
+import { Button } from '@autobusal/common';
+import { success } from '@autobusal/utilities';
+import { CountryData } from '@autobusal/providers/types/locations';
+import {
+  useLookupStations, useProposeStop, StationData, SimilarStop
+} from '../services';
+import {
+  Container, Title, Hint, Field, Results, Result, Chosen,
+  Similar, SimilarList, Pending, Actions
+} from './styles';
+
+interface Props {
+  countries?: CountryData[]
+  t: TFunction<'normal'>
+  onReload: () => void
+}
+
+/**
+ * Propose a station this platform does not have yet.
+ *
+ * Claude - Date: 2026-08-21
+ *
+ * Until now an operator who needed a stop that did not exist had no path at
+ * all: the role is read-only on countries, cities and stops, and the picker
+ * beside this one is a <select> of what already exists. A city with no stop
+ * produces no options and is therefore invisible - 57 of the 101 cities are
+ * in exactly that state. The only recourse was to phone somebody, and
+ * nothing recorded that the request had been made.
+ *
+ * The operator enters it, because they are the one who knows the station.
+ * It is created UNVERIFIED: passengers never see it and the route builder
+ * refuses it until an admin approves, and this says so plainly rather than
+ * letting them find out when the stop will not attach.
+ *
+ * THE DUPLICATE CHECK ASKS, IT DOES NOT REFUSE. Near-identical names and
+ * coordinates a few hundred metres apart are usually one terminal spelled
+ * two ways ("Terminali Lindor" / "Terminali Lindor i Autobuseve") - but
+ * occasionally they really are two stands, and only the operator knows
+ * which. So the server answers with what it found, this shows it, and going
+ * ahead is a second deliberate press.
+ */
+const Propose = ({ countries, t, onReload }: Props): JSX.Element => {
+  const [ cityId, setCityId ] = useState<number>(0);
+  const [ q, setQ ] = useState<string>('');
+  const [ term, setTerm ] = useState<string>('');
+
+  const [ picked, setPicked ] = useState<StationData | null>(null);
+  const [ similar, setSimilar ] = useState<SimilarStop[] | null>(null);
+  const [ pending, setPending ] = useState<string | null>(null);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setTerm(q), 350);
+
+    return () => clearTimeout(timer);
+  }, [ q ]);
+
+  const { data: stations, isFetching } = useLookupStations(cityId, term);
+
+  const { mutate: Propose, isPending } = useProposeStop();
+
+  const reset = (): void => {
+    setPicked(null);
+    setSimilar(null);
+    setQ('');
+    setTerm('');
+  };
+
+  const submit = (confirmed: boolean): void => {
+    if (!picked || cityId === 0) {
+      return;
+    }
+
+    Propose({
+      city_id: cityId,
+      name: picked.name,
+      latitude: picked.latitude,
+      longitude: picked.longitude,
+      confirmed
+    }, {
+      onSuccess: (response) => {
+        // the server found something like it - show what, and let them decide
+        if (response?.status === 'similar') {
+          setSimilar(response.similar ?? []);
+
+          return;
+        }
+
+        success(t('locations_manage.propose.messages.sent', { ns: 'common' }));
+
+        setPending(response?.stop?.name ?? picked.name);
+
+        reset();
+        onReload();
+      }
+    });
+  };
+
+  return (
+    <Container className="box">
+      <Title>{ t('locations_manage.propose.title', { ns: 'common' }) }</Title>
+      <Hint>{ t('locations_manage.propose.hint', { ns: 'common' }) }</Hint>
+
+      <select value={ cityId } onChange={ event => { setCityId(Number(event.target.value)); reset(); } }>
+        <option value={ 0 }>{ t('locations_manage.propose.choose_city', { ns: 'common' }) }</option>
+
+        { countries?.map(country => (
+          <optgroup key={ country.id } label={ country.name }>
+            { country.cities?.map(city => (
+              <option key={ city.id } value={ city.id }>{ city.name }</option>
+            )) }
+          </optgroup>
+        )) }
+      </select>
+
+      { cityId > 0 && (
+        <Field>
+          <FiSearch />
+
+          <input
+            type="text"
+            value={ q }
+            placeholder={ t('locations_manage.propose.placeholder', { ns: 'common' }) }
+            onChange={ event => { setQ(event.target.value); setSimilar(null); } }
+          />
+        </Field>
+      ) }
+
+      { isFetching && <Hint>{ t('locations_manage.propose.searching', { ns: 'common' }) }</Hint> }
+
+      { (!picked && (stations ?? []).length > 0) && (
+        <Results>
+          { (stations ?? []).map((station, index) => (
+            <Result key={ `${ station.name }-${ index }` }>
+              <button type="button" onClick={ () => { setPicked(station); setSimilar(null); } }>
+                <strong>{ station.name }</strong>
+                <span>
+                  { station.description ?? '' }
+                  { station.distance !== null && ` · ${ t('locations_manage.propose.away', { ns: 'common', distance: station.distance }) }` }
+                </span>
+              </button>
+            </Result>
+          )) }
+        </Results>
+      ) }
+
+      { (!isFetching && !picked && term.length > 1 && (stations ?? []).length === 0) && (
+        <Hint>{ t('locations_manage.propose.empty', { ns: 'common' }) }</Hint>
+      ) }
+
+      { picked && (
+        <>
+          <Chosen>
+            <strong>{ picked.name }</strong>
+            <span>{ picked.latitude }, { picked.longitude }</span>
+          </Chosen>
+
+          { similar && (
+            <Similar>
+              <p><FiAlertTriangle />{ t('locations_manage.propose.similar.title', { ns: 'common' }) }</p>
+
+              <SimilarList>
+                { similar.map(stop => (
+                  <li key={ stop.id }>
+                    { stop.name }
+                    { stop.distance !== null && ` · ${ t('locations_manage.propose.away', { ns: 'common', distance: stop.distance }) }` }
+                    { !stop.verified && ` · ${ t('locations_manage.propose.similar.pending', { ns: 'common' }) }` }
+                  </li>
+                )) }
+              </SimilarList>
+
+              <span>{ t('locations_manage.propose.similar.hint', { ns: 'common' }) }</span>
+            </Similar>
+          ) }
+
+          <Actions>
+            <Button
+              loading={ isPending }
+              text={
+                <>
+                  <FiPlus />
+                  { similar
+                    ? t('locations_manage.propose.similar.anyway', { ns: 'common' })
+                    : t('locations_manage.propose.action', { ns: 'common' }) }
+                </>
+              }
+              onClick={ () => submit(similar !== null) }
+              noMargin
+            />
+
+            <button type="button" onClick={ reset }>
+              { t('locations_manage.propose.cancel', { ns: 'common' }) }
+            </button>
+          </Actions>
+        </>
+      ) }
+
+      { pending && (
+        <Pending>
+          <FiClock />
+          { t('locations_manage.propose.pending', { ns: 'common', name: pending }) }
+        </Pending>
+      ) }
+    </Container>
+  );
+};
+
+export default Propose;

package/Locations/Propose/styles.ts

@@ -0,0 +1,155 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin-bottom: 25px;
+
+  select {
+    width: 100%;
+  }
+`;
+
+export const Title = styled.h5`
+  margin-bottom: 10px;
+  padding-bottom: 15px;
+  font-size: ${ props => props.theme.size.m };
+  border-bottom: 1px solid ${ props => props.theme.background.neutral };
+`;
+
+export const Hint = styled.p`
+  margin: 0 0 12px;
+  font-size: ${ props => props.theme.size.xs };
+  opacity: .75;
+`;
+
+export const Field = styled.div`
+  position: relative;
+  margin-top: 15px;
+
+  > svg {
+    position: absolute;
+    top: 50%;
+    left: 10px;
+    transform: translateY(-50%);
+    opacity: .5;
+  }
+
+  input {
+    width: 100%;
+    padding-left: 32px;
+  }
+`;
+
+export const Results = styled.ul`
+  margin: 10px 0 0;
+  padding: 0;
+  list-style: none;
+  max-height: 260px;
+  overflow-y: auto;
+`;
+
+export const Result = styled.li`
+  button {
+    display: block;
+    width: 100%;
+    padding: 8px 10px;
+    text-align: left;
+    background: none;
+    border: 0;
+    border-bottom: 1px solid ${ props => props.theme.background.neutral };
+    cursor: pointer;
+
+    &:hover {
+      background: ${ props => props.theme.background.neutral };
+    }
+  }
+
+  strong {
+    display: block;
+    font-size: ${ props => props.theme.size.s };
+  }
+
+  span {
+    font-size: ${ props => props.theme.size.xs };
+    opacity: .7;
+  }
+`;
+
+export const Chosen = styled.div`
+  margin-top: 15px;
+  padding: 10px 12px;
+  background: ${ props => props.theme.background.neutral };
+  border-radius: 4px;
+
+  strong {
+    display: block;
+    font-size: ${ props => props.theme.size.s };
+  }
+
+  span {
+    font-size: ${ props => props.theme.size.xs };
+    opacity: .7;
+  }
+`;
+
+/*
+ * The duplicate warning. Deliberately not styled as an error - it is a
+ * question, and the operator may well be right that this is a second stand
+ * in the same terminal.
+ */
+export const Similar = styled.div`
+  margin-top: 15px;
+  padding: 12px 14px;
+  border: 1px solid ${ props => props.theme.font.warning ?? '#e0a800' };
+  border-radius: 4px;
+
+  p {
+    margin: 0 0 8px;
+    font-weight: 700;
+
+    svg {
+      margin-right: 6px;
+      vertical-align: -2px;
+    }
+  }
+
+  span {
+    display: block;
+    margin-top: 8px;
+    font-size: ${ props => props.theme.size.xs };
+    opacity: .8;
+  }
+`;
+
+export const SimilarList = styled.ul`
+  margin: 0;
+  padding-left: 18px;
+
+  li {
+    font-size: ${ props => props.theme.size.xs };
+  }
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 15px;
+
+  button[type="button"] {
+    background: none;
+    border: 0;
+    cursor: pointer;
+    font-size: ${ props => props.theme.size.xs };
+    opacity: .7;
+  }
+`;
+
+export const Pending = styled.p`
+  margin-top: 15px;
+  font-size: ${ props => props.theme.size.xs };
+
+  svg {
+    margin-right: 6px;
+    vertical-align: -2px;
+  }
+`;

package/Locations/Withdraw/Withdraw.tsx

@@ -0,0 +1,235 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { FiAlertTriangle, FiCheck, FiCopy, FiUsers } from 'react-icons/fi';
+import { Button } from '@autobusal/common';
+import { success, notify } from '@autobusal/utilities';
+import { LocationData } from '@autobusal/providers/types/locations';
+import { useWithdrawCheck, useMoveOptions, useMovePassenger, AffectedPassenger } from '../services';
+import {
+  Overlay, Panel, Title, Lead, Table, Row, Cell, MoveOptions, Draft, DraftField,
+  Actions, Empty, Close
+} from './styles';
+
+interface Props {
+  routeId: number
+  location: LocationData
+  t: TFunction<'normal'>
+  onClose: () => void
+  onWithdraw: () => void
+  onReload: () => void
+}
+
+/**
+ * Everything that has to happen before a stop can come off a route.
+ *
+ * Claude - Date: 2026-08-21
+ *
+ * obtapi refuses the withdrawal while anybody still holds a paid ticket
+ * through the stop for a journey that has not departed. That refusal is not
+ * a dead end - it comes back with the list, and this is where the operator
+ * works through it: move each passenger to another stop, or cancel them, and
+ * then withdraw.
+ *
+ * THE MESSAGE IS DRAFTED, NOT SENT. The wording is written in the route's
+ * own language and shown here to be read and edited; sending it happens in
+ * the broadcast composer, which the operator opens deliberately. Only they
+ * know what is replacing the stop and whether a given passenger is being
+ * moved or refunded, so a system that mailed people the moment a stop was
+ * withdrawn would be writing an apology in their name.
+ */
+const Withdraw = ({ routeId, location, t, onClose, onWithdraw, onReload }: Props): JSX.Element => {
+  const { data, isLoading, refetch } = useWithdrawCheck(routeId, location.id, true);
+
+  const [ subject, setSubject ] = useState<string | null>(null);
+  const [ message, setMessage ] = useState<string | null>(null);
+
+  const passengers = data?.passengers ?? [];
+  const draft = data?.draft ?? null;
+
+  const copy = (): void => {
+    const text = `${ subject ?? draft?.subject ?? '' }\n\n${ message ?? draft?.message ?? '' }`;
+
+    navigator.clipboard?.writeText(text).then(
+      () => success(t('locations_manage.withdraw.draft.copied', { ns: 'common' })),
+      () => notify(t('locations_manage.withdraw.draft.copy_failed', { ns: 'common' }))
+    );
+  };
+
+  return (
+    <Overlay onClick={ onClose }>
+      <Panel className="box" onClick={ event => event.stopPropagation() }>
+        <Close type="button" onClick={ onClose }>&times;</Close>
+
+        <Title>
+          { t('locations_manage.withdraw.title', {
+            ns: 'common',
+            city: location.city?.name,
+            stop: location.stop?.name ?? ''
+          }) }
+        </Title>
+
+        { isLoading && <Lead>{ t('locations_manage.withdraw.checking', { ns: 'common' }) }</Lead> }
+
+        { (!isLoading && passengers.length === 0) && (
+          <>
+            <Empty>
+              <FiCheck />
+              { t('locations_manage.withdraw.clear', { ns: 'common' }) }
+            </Empty>
+
+            <Actions>
+              <Button text={ t('locations_manage.withdraw.action', { ns: 'common' }) } onClick={ onWithdraw } noMargin />
+            </Actions>
+          </>
+        ) }
+
+        { (!isLoading && passengers.length > 0) && (
+          <>
+            <Lead>
+              <FiAlertTriangle />
+              { t('locations_manage.withdraw.blocked', { ns: 'common', count: passengers.length }) }
+            </Lead>
+
+            <Table>
+              <Row $head>
+                <Cell>{ t('locations_manage.withdraw.columns.booking', { ns: 'common' }) }</Cell>
+                <Cell>{ t('locations_manage.withdraw.columns.passenger', { ns: 'common' }) }</Cell>
+                <Cell>{ t('locations_manage.withdraw.columns.journey', { ns: 'common' }) }</Cell>
+                <Cell>{ t('locations_manage.withdraw.columns.resolve', { ns: 'common' }) }</Cell>
+              </Row>
+
+              { passengers.map(passenger => (
+                <Passenger
+                  key={ passenger.id }
+                  routeId={ routeId }
+                  passenger={ passenger }
+                  t={ t }
+                  onMoved={ () => { refetch(); onReload(); } }
+                />
+              )) }
+            </Table>
+
+            { draft && (
+              <Draft>
+                <h5><FiUsers />{ t('locations_manage.withdraw.draft.title', { ns: 'common' }) }</h5>
+                <p>{ t('locations_manage.withdraw.draft.hint', { ns: 'common' }) }</p>
+
+                <DraftField>
+                  <label>{ t('locations_manage.withdraw.draft.subject', { ns: 'common' }) }</label>
+                  <input
+                    type="text"
+                    value={ subject ?? draft.subject }
+                    onChange={ event => setSubject(event.target.value) }
+                  />
+                </DraftField>
+
+                <DraftField>
+                  <label>{ t('locations_manage.withdraw.draft.message', { ns: 'common' }) }</label>
+                  <textarea
+                    rows={ 8 }
+                    value={ message ?? draft.message }
+                    onChange={ event => setMessage(event.target.value) }
+                  />
+                </DraftField>
+
+                <button type="button" onClick={ copy }>
+                  <FiCopy />
+                  { t('locations_manage.withdraw.draft.copy', { ns: 'common' }) }
+                </button>
+
+                <span>
+                  { t('locations_manage.withdraw.draft.dates', { ns: 'common', dates: draft.dates.join(', ') }) }
+                </span>
+              </Draft>
+            ) }
+          </>
+        ) }
+      </Panel>
+    </Overlay>
+  );
+};
+
+/**
+ * One affected booking, and the stops it could move to instead.
+ *
+ * The options are fetched only when the operator opens this row - a route
+ * with a dozen affected bookings would otherwise fire a dozen requests to
+ * draw a table nobody has looked at yet.
+ */
+const Passenger = ({ routeId, passenger, t, onMoved }: {
+  routeId: number
+  passenger: AffectedPassenger
+  t: TFunction<'normal'>
+  onMoved: () => void
+}): JSX.Element => {
+  const [ open, setOpen ] = useState<boolean>(false);
+
+  const { data: options } = useMoveOptions(routeId, passenger.id, passenger.affects, open);
+
+  const { mutate: Move, isPending } = useMovePassenger(routeId);
+
+  const move = (priceId: number): void => {
+    Move({ order_id: passenger.id, price_id: priceId }, {
+      onSuccess: () => {
+        success(t('locations_manage.withdraw.moved', { ns: 'common' }));
+
+        onMoved();
+      }
+    });
+  };
+
+  return (
+    <Row>
+      <Cell>
+        <strong>{ passenger.order_number }</strong>
+        <span>{ passenger.date_travel }</span>
+      </Cell>
+
+      <Cell>
+        <strong>{ passenger.name ?? '—' }</strong>
+        <span>{ passenger.email ?? passenger.phone ?? '' }</span>
+        { /* an agency booking is a different conversation - the operator
+             talks to the agent, who talks to the traveller */ }
+        { passenger.booked_by && (
+          <span>{ t('locations_manage.withdraw.booked_by', { ns: 'common', who: passenger.booked_by }) }</span>
+        ) }
+      </Cell>
+
+      <Cell>
+        { passenger.from } &rsaquo; { passenger.to }
+        <span>
+          { t(`locations_manage.withdraw.affects.${ passenger.affects }`, { ns: 'common' }) }
+        </span>
+      </Cell>
+
+      <Cell>
+        { !open && (
+          <button type="button" onClick={ () => setOpen(true) }>
+            { t('locations_manage.withdraw.move', { ns: 'common' }) }
+          </button>
+        ) }
+
+        { open && (
+          <MoveOptions>
+            { (options ?? []).length === 0 && (
+              <span>{ t('locations_manage.withdraw.nowhere', { ns: 'common' }) }</span>
+            ) }
+
+            { (options ?? []).map(option => (
+              <button
+                key={ option.price_id }
+                type="button"
+                disabled={ isPending }
+                onClick={ () => move(option.price_id) }
+              >
+                { option.city } { option.time && `· ${ option.time }` }
+              </button>
+            )) }
+          </MoveOptions>
+        ) }
+      </Cell>
+    </Row>
+  );
+};
+
+export default Withdraw;

package/Locations/Withdraw/styles.ts

@@ -0,0 +1,202 @@
+import styled from 'styled-components';
+
+export const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  z-index: 900;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 30px 15px;
+  overflow-y: auto;
+  background: rgba(0, 0, 0, .45);
+`;
+
+export const Panel = styled.div`
+  position: relative;
+  width: 100%;
+  max-width: 880px;
+`;
+
+export const Close = styled.button`
+  position: absolute;
+  top: 10px;
+  right: 14px;
+  background: none;
+  border: 0;
+  font-size: 26px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: .6;
+`;
+
+export const Title = styled.h4`
+  margin-bottom: 10px;
+  padding-right: 30px;
+`;
+
+export const Lead = styled.p`
+  margin-bottom: 15px;
+  font-size: ${ props => props.theme.size.s };
+
+  svg {
+    margin-right: 6px;
+    vertical-align: -2px;
+  }
+`;
+
+export const Empty = styled.p`
+  margin-bottom: 15px;
+  font-size: ${ props => props.theme.size.s };
+
+  svg {
+    margin-right: 6px;
+    vertical-align: -2px;
+  }
+`;
+
+export const Table = styled.div`
+  border: 1px solid ${ props => props.theme.background.neutral };
+  border-radius: 4px;
+  overflow: hidden;
+`;
+
+export const Row = styled.div<{ $head?: boolean }>`
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 4px;
+  padding: 10px 12px;
+  border-bottom: 1px solid ${ props => props.theme.background.neutral };
+  background: ${ props => props.$head ? props.theme.background.neutral : 'transparent' };
+  font-weight: ${ props => props.$head ? 700 : 400 };
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  @media (min-width: 720px) {
+    grid-template-columns: 1.1fr 1.4fr 1.4fr 1.3fr;
+    gap: 12px;
+    align-items: start;
+  }
+`;
+
+export const Cell = styled.div`
+  font-size: ${ props => props.theme.size.xs };
+  min-width: 0;
+
+  strong {
+    display: block;
+  }
+
+  span {
+    display: block;
+    opacity: .7;
+    word-break: break-word;
+  }
+
+  > button {
+    background: none;
+    border: 1px solid ${ props => props.theme.background.neutral };
+    border-radius: 3px;
+    padding: 4px 10px;
+    cursor: pointer;
+    font-size: ${ props => props.theme.size.xs };
+  }
+`;
+
+export const MoveOptions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+
+  button {
+    background: none;
+    border: 1px solid ${ props => props.theme.background.neutral };
+    border-radius: 3px;
+    padding: 4px 8px;
+    cursor: pointer;
+    font-size: ${ props => props.theme.size.xs };
+
+    &:disabled {
+      opacity: .5;
+      cursor: default;
+    }
+  }
+
+  span {
+    font-size: ${ props => props.theme.size.xs };
+    opacity: .7;
+  }
+`;
+
+/*
+ * The message, shown to be read and edited - never sent from here. Styled as
+ * a working document rather than a warning: the operator is meant to rewrite
+ * it, not just approve it.
+ */
+export const Draft = styled.div`
+  margin-top: 20px;
+  padding: 14px 16px;
+  border: 1px solid ${ props => props.theme.background.neutral };
+  border-radius: 4px;
+
+  h5 {
+    margin-bottom: 4px;
+
+    svg {
+      margin-right: 6px;
+      vertical-align: -2px;
+    }
+  }
+
+  > p {
+    margin-bottom: 12px;
+    font-size: ${ props => props.theme.size.xs };
+    opacity: .8;
+  }
+
+  > button {
+    background: none;
+    border: 1px solid ${ props => props.theme.background.neutral };
+    border-radius: 3px;
+    padding: 5px 12px;
+    cursor: pointer;
+    font-size: ${ props => props.theme.size.xs };
+
+    svg {
+      margin-right: 6px;
+      vertical-align: -2px;
+    }
+  }
+
+  > span {
+    display: block;
+    margin-top: 8px;
+    font-size: ${ props => props.theme.size.xs };
+    opacity: .7;
+  }
+`;
+
+export const DraftField = styled.div`
+  margin-bottom: 12px;
+
+  label {
+    display: block;
+    margin-bottom: 4px;
+    font-size: ${ props => props.theme.size.xs };
+    opacity: .8;
+  }
+
+  input,
+  textarea {
+    width: 100%;
+  }
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 15px;
+`;

package/Locations/services.ts

@@ -110,4 +110,161 @@ export const usePostUpdate = (id: number, location_id: number): UseMutationResul
         ))
     )
   })
-);
+);
+/**
+ * A station the geocoder found, and a stop that already exists.
+ *
+ * Claude - Date: 2026-08-21
+ */
+export interface StationData {
+  name: string
+  latitude: string
+  longitude: string
+  description: string | null
+  kind: string | null
+  distance: number | null
+}
+
+export interface SimilarStop {
+  id: number
+  name: string
+  verified: boolean
+  distance: number | null
+}
+
+export interface ProposeForm {
+  city_id: number
+  name: string
+  latitude: string
+  longitude: string
+  confirmed?: boolean
+}
+
+export interface ProposeResponse {
+  /** `similar` means "we found something like this, look before you commit" */
+  status?: 'similar' | 'pending'
+  similar?: SimilarStop[]
+  stop?: { id: number, name: string, verified: boolean }
+}
+
+/**
+ * Candidate stations for the name field, from OpenStreetMap via obtapi.
+ */
+export const useLookupStations = (cityId: number, q: string): UseQueryResult<StationData[]> => (
+  useQuery({
+    queryKey: ['operator-stations-lookup', { cityId, q }],
+    enabled: cityId > 0 && q.trim().length > 1,
+    queryFn: async () => (
+      await apiClient
+        .get('/api/stops/operator/lookup', { params: { q: q.trim(), city_id: cityId } })
+        .then(response => response.data?.results ?? [])
+    )
+  })
+);
+
+/**
+ * Propose a station that does not exist yet.
+ *
+ * Two-step by design: the first call answers `status: 'similar'` when
+ * something close already exists, so the operator can look before adding a
+ * duplicate. Sending `confirmed` goes ahead anyway. Either way the stop is
+ * created UNVERIFIED and cannot be put on a route until an admin approves.
+ */
+export const useProposeStop = (): UseMutationResult<ProposeResponse, Error, ProposeForm, unknown> => (
+  useMutation({
+    mutationKey: ['operator-stop-propose'],
+    mutationFn: async (data) => (
+      await apiClient
+        .post('/api/stops/operator/propose', data)
+        .then(response => response.data)
+    )
+  })
+);
+
+/**
+ * The withdrawal flow.
+ *
+ * Claude - Date: 2026-08-21
+ *
+ * A stop is WITHDRAWN, not deleted - obtapi cannot delete one that anything
+ * was ever sold through, because an invoice or a refund still has to
+ * describe that sale years later. The visible behaviour is the same: it
+ * stops being sold, searched and mapped.
+ */
+export interface AffectedPassenger {
+  id: number
+  order_number: string
+  date_travel: string | null
+  departure: string | null
+  tickets: number
+  name: string | null
+  email: string | null
+  phone: string | null
+  booked_by: string | null
+  from: string | null
+  to: string | null
+  /** which end of THEIR journey this stop is */
+  affects: 'departure' | 'arrival'
+}
+
+export interface WithdrawDraft {
+  subject: string
+  message: string
+  /** travel dates the affected bookings fall on - one broadcast per date */
+  dates: string[]
+  recipients: { order_id: number, order_number: string, name: string | null, email: string | null, phone: string | null, date_travel: string | null }[]
+}
+
+export interface MoveOption {
+  price_id: number
+  location_id: number
+  city: string | null
+  time: string | null
+  fare: string | number
+}
+
+export const useWithdrawCheck = (routeId: number, locationId: number, enabled: boolean): UseQueryResult<{ passengers: AffectedPassenger[], draft: WithdrawDraft | null }> => (
+  useQuery({
+    queryKey: ['operator-location-passengers', { routeId, locationId }],
+    enabled,
+    queryFn: async () => (
+      await apiClient
+        .get('/api/locations/operator/passengers', { params: { id: routeId, location_id: locationId } })
+        .then(response => response.data)
+    )
+  })
+);
+
+export const useMoveOptions = (routeId: number, orderId: number, end: string, enabled: boolean): UseQueryResult<MoveOption[]> => (
+  useQuery({
+    queryKey: ['operator-move-options', { routeId, orderId, end }],
+    enabled,
+    queryFn: async () => (
+      await apiClient
+        .get('/api/locations/operator/move/options', { params: { id: routeId, order_id: orderId, end } })
+        .then(response => response.data?.options ?? [])
+    )
+  })
+);
+
+export const useMovePassenger = (routeId: number): UseMutationResult<void, Error, { order_id: number, price_id: number }, unknown> => (
+  useMutation({
+    mutationKey: ['operator-move-passenger', { routeId }],
+    mutationFn: async (data) => (
+      await apiClient
+        .post('/api/locations/operator/move/passenger', { id: routeId, ...data })
+        .then(response => response.data)
+    )
+  })
+);
+
+export const useRestoreLocation = (routeId: number): UseMutationResult<void, Error, number, unknown> => (
+  useMutation({
+    mutationKey: ['operator-location-restore', { routeId }],
+    mutationFn: async (locationId) => (
+      await apiClient
+        .post('/api/locations/operator/restore', { id: routeId, location_id: locationId })
+        .then(response => response.data)
+    )
+  })
+);

package/Locations/utilities.tsx

@@ -9,7 +9,7 @@ export const getStops = (t: TFunction<'normal'>, countries?: CountryData[]): JSX
   countries?.forEach(country => {
     options.push(
       <optgroup key={ country.id } label={ country.name }>
-        { getOptions(country.cities) }
+        { getOptions(country.cities, t) }
       </optgroup>
     );
   });
@@ -17,15 +17,29 @@ export const getStops = (t: TFunction<'normal'>, countries?: CountryData[]): JSX
   return options;
 };
 
-const getOptions = (cities?: CityData[]): JSX.Element[] => {
+const getOptions = (cities?: CityData[], t?: TFunction<'normal'>): JSX.Element[] => {
   const options: JSX.Element[] = [];
 
   cities?.forEach(city => {
     city.stops?.forEach(stop => {
       const value = `${ city.id }#${ stop.id }`;
 
+      /*
+       * Edited: Claude - Date: 2026-08-21
+       *
+       * A stop an operator proposed is listed but DISABLED until an admin
+       * approves it. Leaving it out entirely would look like the proposal
+       * had been lost - and obtapi refuses it anyway (Locations\
+       * OperatorController::add scopes to verified()), so an enabled option
+       * would just be an error waiting to happen.
+       */
+      const pending = stop.verified === false;
+
       options.push(
-        <option key={ value } value={ value }>{ city.name } &rsaquo; { stop.name }</option>
+        <option key={ value } value={ value } disabled={ pending }>
+          { city.name } &rsaquo; { stop.name }
+          { pending && t ? ` (${ t('locations_manage.add_city.pending', { ns: 'common' }) })` : '' }
+        </option>
       );
     });
   });

package/Manage.tsx

@@ -11,7 +11,7 @@ import { success } from '@autobusal/utilities';
 import Template from './Template';
 import Options from './Options';
 import Seating from './Seating';
-import { getType, getLanguagesExtended, getTemplates, getTransiting } from './utilities';
+import { getType, getLanguagesExtended, getTemplates, getTicketDelivery, getTransiting } from './utilities';
 import { RouteData } from '@autobusal/providers/types/routes';
 import { SeatingOptionsData } from './types';
 import { useGetRoute, usePostRoute, useDeleteRoute } from './services';
@@ -94,6 +94,22 @@ const Manage = ({ url, t }: Props): JSX.Element => {
           type: 'component',
           name: 'seating',
           value: <Seating trip={ data?.trip } t={ t } onUpdated={ onSeatingUpdated } />
+        }, {
+          /*
+           * Edited: Claude (BusMagus mobile app) - Date: 2026-08-10
+           *
+           * Whether this route accepts an e-ticket (the PDF every passenger
+           * already gets, no printing needed) at boarding, or the driver
+           * requires a physical printout. Unset/null means e-ticket accepted
+           * - the behaviour every route already had before this field
+           * existed - so a route saved without ever touching this control
+           * keeps working exactly as before.
+           */
+          label: t('operator_routes.manage.ticket_delivery.title', { ns: 'common', defaultValue: 'Ticket delivery' }),
+          name: 'ticket_delivery',
+          type: 'select',
+          values: getTicketDelivery(t),
+          value: data?.trip?.ticket_delivery ?? 'e_ticket'
         }, {} , {
           label: t('operator_routes.manage.schedule.title', { ns: 'common' }),
           name: 'schedule',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/operator-routes",
-  "version": "1.3.3",
+  "version": "1.5.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"

package/utilities.tsx

@@ -67,6 +67,32 @@ export const getLanguagesExtended = (t: TFunction<'normal'>): DropdownData[] =>
   }))
 );
 
+/**
+ * Edited: Claude (BusMagus mobile app) - Date: 2026-08-10
+ *
+ * Whether the operator accepts an e-ticket (the PDF every passenger
+ * already gets emailed/downloads) at boarding, or requires a physical
+ * printout. NULL/unset = e-ticket accepted, the existing de facto
+ * behaviour on every route today - this field only ever tightens that,
+ * it never changes what a passenger receives.
+ *
+ * Uses `defaultValue` rather than real translation keys for now - this
+ * is a brand-new field, and `public/languages/*\/common.json` (where
+ * this package's own translations live) had unrelated in-progress
+ * changes sitting uncommitted at the time this was built, so adding real
+ * translations for all 15 languages was left for a follow-up rather than
+ * risking a conflict with that other work. English-only until then.
+ */
+export const getTicketDelivery = (t: TFunction<'common'>): DropdownData[] => ([
+  {
+    name: t('operator_routes.manage.ticket_delivery.e_ticket', { ns: 'common', defaultValue: 'e-Ticket accepted' }),
+    id: 'e_ticket'
+  }, {
+    name: t('operator_routes.manage.ticket_delivery.printed_only', { ns: 'common', defaultValue: 'Printed ticket only' }),
+    id: 'printed_only'
+  }
+]);
+
 export const getTemplates = (t: TFunction<'normal'>): DropdownData[] => ([
   {
     name: t('operator_routes.manage.templates.standard', { ns: 'common' }),