@autobusal/operator-routes 1.3.3 → 1.4.0

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/services.ts

@@ -110,4 +110,73 @@ 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)
+    )
+  })
+);

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.4.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' }),