@autobusal/operator-routes 1.10.0 → 1.10.2

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.10.1 - 2026-08-30
+
+- Staged dynamic pricing (roadmap P5): a per-route screen for the price rules - the opt-in, the operator's own caps, and the rules as a NUMBERED list read top to bottom, because the first rule whose band matches is the only one that applies. Each row says what it will actually do once the cap has had its say.
+
 ## 1.10.0 (2026-08-29)
 
 - Editors offer Save & Close alongside Save & Stay, so correcting a record no longer bounces you back to its list every time (opt-in per page, editing only).

package/Manage.tsx

@@ -4,7 +4,7 @@ import { TFunction } from 'i18next';
 import { useParams, useNavigate } from 'react-router-dom';
 import { RiMoneyEuroCircleLine } from 'react-icons/ri';
 import { FaMapMarkerAlt } from 'react-icons/fa';
-import { IoCalendarClearOutline } from 'react-icons/io5';
+import { IoCalendarClearOutline, IoPricetagsOutline } from 'react-icons/io5';
 import { Meta, BackWithTitle, Viewer } from '@autobusal/common';
 import { usePage, useBreadcrumbs, useRouteFeatures, useOperatorDrivers } from '@autobusal/hooks';
 import { success } from '@autobusal/utilities';
@@ -136,6 +136,25 @@ const Manage = ({ url, t }: Props): JSX.Element => {
             </>
           ),
           url: `/operator/routes/unavailable/${ id }`
+        }, {
+          /*
+           * Claude - 2026-08-30 (roadmap P5): staged dynamic pricing.
+           *
+           * A link, like the schedule and the unavailable dates above it: the
+           * rules are an ordered LIST whose order decides which one sets the
+           * fare, and a list that means something cannot be squeezed into one
+           * row of this form.
+           */
+          label: t('operator_routes.manage.pricing.title', { ns: 'common' }),
+          name: 'pricing',
+          type: 'link',
+          value: (
+            <>
+              <IoPricetagsOutline />
+              { t('operator_routes.manage.pricing.link', { ns: 'common' }) }
+            </>
+          ),
+          url: `/operator/routes/pricing/${ id }`
         }, {}, {
           label: t('operator_routes.manage.features', { ns: 'common' }),
           name: 'features',

package/Prices/Browse/Browse.tsx

@@ -1,7 +1,9 @@
+import { useMemo } from 'react';
 import { TFunction } from 'i18next';
-import Item from './Item';
-import { Items } from './styles';
+import Group from './Group';
+import { Items, Empty } from './styles';
 import { PriceData } from '@autobusal/providers/types/routes';
+import { byOrigin } from '../utilities';
 
 interface Props {
   id: number
@@ -9,25 +11,56 @@ interface Props {
   data?: PriceData[]
   name: string
   t: TFunction<'normal'>
+  onReload: () => void
 }
 
-const Browse = ({ id, type, data, name, t }: Props): JSX.Element | JSX.Element[] | undefined => {
-  const items = data?.map(item => (
-    <Item
-      key={ item.id }
-      id={ id }
-      type={ type }
-      item={ item }
-      name={ name }
-      t={ t }
-    />
-  ));
+/**
+ * A route's fares, one panel per departure point.
+ *
+ * Claude - 2026-08-30. The API sends a flat list ordered by `order_id`, which
+ * is travel order; grouping it here rather than server-side keeps the payload
+ * exactly as it was, so nothing else that reads a route's prices had to
+ * change to get this screen.
+ */
+const Browse = ({ id, type, data, name, t, onReload }: Props): JSX.Element => {
+  /*
+   * MEMOISED, AND NOT AS AN OPTIMISATION. Each group hands its prices to a
+   * form that takes them as its baseline and resets when they change - which
+   * is how a server-side copy shows up without a stale "unsaved" state. Built
+   * fresh on every render, the arrays are new every time, so that reset fired
+   * on every keystroke and wiped what was being typed. Measured, not
+   * theorised: filling a column down put the old values straight back.
+   *
+   * react-query hands back the same `data` until it actually refetches, so
+   * this changes identity exactly when the fares really did.
+   */
+  const groups = useMemo(() => byOrigin(data ?? []), [ data ]);
+
+  if (!groups.length) {
+    return (
+      <Items>
+        <div className="box">
+          <Empty>{ t('prices_manage.empty', { ns: 'common' }) }</Empty>
+        </div>
+      </Items>
+    );
+  }
 
   return (
     <Items>
-      { items }
+      { groups.map(group => (
+        <Group
+          key={ group.from.id }
+          id={ id }
+          type={ type }
+          group={ group }
+          name={ name }
+          t={ t }
+          onReload={ onReload }
+        />
+      )) }
     </Items>
   );
 };
 
-export default Browse;
+export default Browse;

package/Prices/Browse/Group.tsx

@@ -0,0 +1,207 @@
+import { useEffect, useMemo } from 'react';
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { BiEditAlt } from 'react-icons/bi';
+import { IoArrowDown } from 'react-icons/io5';
+import { FaRegCopy } from 'react-icons/fa';
+import { Button } from '@autobusal/common';
+import { Validate, Display, success } from '@autobusal/utilities';
+import { Group as Container, Header, Origin, Country, Tools, Dirty, Copy, Columns, Column, Fill, Row, Destination, Changed } from './styles';
+import { FareColumn, GroupForm, OriginGroup } from '../types';
+import { COLUMNS, field, toForm, toPrices } from '../utilities';
+import { usePostPrices, usePostCopy } from '../services';
+
+interface Props {
+  id: number
+  type: 'normal' | 'alternate'
+  group: OriginGroup
+  name: string
+  t: TFunction<'normal'>
+  onReload: () => void
+}
+
+/**
+ * Everything the route sells leaving ONE stop.
+ *
+ * Claude - 2026-08-30 (ruled by Ferjolt: "the save should be per origin, and
+ * the copy should be based per origin too").
+ *
+ * The group is the unit of work because it is the unit an operator thinks in:
+ * fares are decided per departure point, not per city pair. So the six labels
+ * are said once at the top, each destination is one line, and one Save writes
+ * the lot in a single transaction.
+ *
+ * Save stays disabled until something in THIS group changes, and the rows
+ * that changed carry a dot - on a twelve-destination group, pressing Save
+ * should not be a guess about what you edited near the top.
+ */
+const Group = ({ id, type, group, name, t, onReload }: Props): JSX.Element => {
+  const defaults = useMemo(() => toForm(group.prices), [ group.prices ]);
+
+  const { register, handleSubmit, setValue, getValues, reset, formState: { errors, isDirty, dirtyFields } } = useForm<GroupForm>({
+    defaultValues: defaults
+  });
+
+  /*
+   * The copy below writes on the server and the page refetches, so the form
+   * has to take the new fares as its baseline - otherwise every copied row
+   * stays marked as changed, and Save would write the values back over
+   * themselves.
+   */
+  useEffect(() => {
+    reset(defaults);
+  }, [ defaults, reset ]);
+
+  const { mutate: Save, isPending } = usePostPrices(id, type, name);
+  const { mutate: CopyPrices, isPending: copying } = usePostCopy(id, type, name);
+
+  const city = group.from.city;
+
+  const onSubmit = (data: GroupForm): void => {
+    /*
+     * Nothing changed, nothing to write. The button is dimmed in that state
+     * but the shared Button has no real disabled prop, and pressing Enter in
+     * any input submits the form whatever the button looks like - so the
+     * guard belongs here rather than on the control.
+     */
+    if (!isDirty) {
+      return;
+    }
+
+    Save({
+      location_from: group.from.id,
+      prices: toPrices(data, group.prices)
+    }, {
+      onSuccess: () => {
+        success(t('prices_manage.messages.saved_group', { city: city.name, ns: 'common' }));
+
+        // the values just written are the new baseline, so the group goes
+        // clean without a refetch
+        reset(data);
+      }
+    });
+  };
+
+  const onCopy = (): void => {
+    if (!window.confirm(t('prices_manage.group.copy_ask', { city: city.name, ns: 'common' }))) {
+      return;
+    }
+
+    CopyPrices({ location_from: group.from.id }, {
+      onSuccess: () => {
+        success(t('prices_manage.messages.copied', { ns: 'common' }));
+
+        onReload();
+      }
+    });
+  };
+
+  /**
+   * Fill one column down the group from its first destination.
+   *
+   * Marked dirty rather than written: this fills the boxes and leaves them
+   * unsaved, so getting it wrong costs nothing but not pressing Save.
+   */
+  const onFill = (column: FareColumn): void => {
+    const first = getValues(field(group.prices[0].id, column));
+
+    for (const price of group.prices.slice(1)) {
+      setValue(field(price.id, column), first, { shouldDirty: true });
+    }
+  };
+
+  const alone = group.prices.length < 2;
+
+  return (
+    <Container className="box">
+      <form onSubmit={ handleSubmit(onSubmit) }>
+        <Header>
+          <Origin>
+            { t('prices_manage.group.from', { ns: 'common' }) } { city.name }
+            <Country>{ city.country?.name }</Country>
+          </Origin>
+
+          <Tools>
+            { isDirty && (
+              <Dirty>{ t('prices_manage.group.unsaved', { ns: 'common' }) }</Dirty>
+            ) }
+
+            { !alone && (
+              <Copy
+                type="button"
+                disabled={ copying }
+                onClick={ onCopy }
+                title={ t('prices_manage.group.copy_hint', { ns: 'common' }) }
+              >
+                <FaRegCopy />
+                { t('prices_manage.group.copy', { ns: 'common' }) }
+              </Copy>
+            ) }
+
+            <Button
+              type="submit"
+              active={ isDirty }
+              loading={ isPending }
+              text={
+                <>
+                  <BiEditAlt />
+                  { t('table.actions.update', { ns: 'common' }) }
+                </>
+              }
+            />
+          </Tools>
+        </Header>
+
+        <Columns>
+          <div>{ t('prices_manage.group.to', { ns: 'common' }) }</div>
+
+          { COLUMNS.map(column => (
+            <Column key={ column }>
+              { t(`prices_manage.columns.${ column }`, { ns: 'common' }) }
+
+              { !alone && (
+                <Fill
+                  type="button"
+                  onClick={ () => onFill(column) }
+                  title={ t('prices_manage.group.fill', { ns: 'common' }) }
+                >
+                  <IoArrowDown />
+                </Fill>
+              ) }
+            </Column>
+          )) }
+        </Columns>
+
+        { group.prices.map(price => {
+          const changed = COLUMNS.some(column => dirtyFields[field(price.id, column)]);
+
+          return (
+            <Row key={ price.id } $changed={ changed }>
+              <Destination>
+                { changed && <Changed /> }
+
+                { price.to.city.name }
+                <Country>{ price.to.city.country?.name }</Country>
+              </Destination>
+
+              { COLUMNS.map(column => (
+                <div key={ column }>
+                  <input
+                    type="number"
+                    step="0.01"
+                    title={ t(`prices_manage.prices.${ column }`, { ns: 'common' }) }
+                    { ...register(field(price.id, column), Validate('required', t)) }
+                  />
+
+                  { Display(errors[field(price.id, column)]) }
+                </div>
+              )) }
+            </Row>
+          );
+        }) }
+      </form>
+    </Container>
+  );
+};
+
+export default Group;

package/Prices/Browse/styles.ts

@@ -1,22 +1,250 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
+/**
+ * The route price screen, grouped by where the leg LEAVES FROM.
+ *
+ * Claude - 2026-08-30 (ruled by Ferjolt: save per origin, copy per origin).
+ *
+ * What this replaces: one card per city pair, each with its own six labelled
+ * inputs and its own Save button. A real route runs to about 150 pairs, so
+ * that was 150 cards, 900 inputs, 900 repeated labels and 150 separate saves
+ * - a screen you scrolled rather than read.
+ *
+ * The shape here is a table per origin: the six labels are said ONCE at the
+ * top of the group, and every destination below is a single line of numbers.
+ * That is roughly half the height, and it lets a column be read as a column -
+ * which is how an operator checks their own fares ("is anything out of
+ * Shkoder wrong?"), and what makes the fill-down control legible.
+ */
 export const Items = styled.div`
   display: flex;
   flex-direction: column;
   gap: 15px;
 `;
 
-export const Prices = styled.div`
+export const Group = styled.div`
   display: flex;
   flex-direction: column;
+`;
+
+/**
+ * The origin, its copy action and its Save button.
+ *
+ * Sticky because a group runs to a dozen destinations: the button that
+ * commits what you are typing should not be somewhere above the fold while
+ * you type it.
+ */
+export const Header = styled.div`
+  position: sticky;
+  top: 0;
+  z-index: 2;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+
+  padding: 12px 14px;
+
+  background: ${ props => props.theme.background.neutral };
+  border-bottom: 1px solid ${ props => props.theme.inputs.border };
+`;
+
+export const Origin = styled.h4`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+`;
+
+export const Country = styled.span`
+  font-weight: normal;
+  color: ${ props => props.theme.font.faded };
+`;
 
-  @media (min-width: 540px) {
-    flex-direction: row;
-    gap: 15px;
+export const Tools = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+`;
+
+/**
+ * "This group has unsaved edits", said once where the Save button is.
+ */
+export const Dirty = styled.span`
+  font-size: ${ props => props.theme.size.s };
+  color: ${ props => props.theme.font.info };
+`;
+
+export const Copy = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  padding: 0;
+
+  font-size: ${ props => props.theme.size.s };
+  color: ${ props => props.theme.font.faded };
+
+  background: none;
+  border: 0;
+  cursor: pointer;
+
+  &:hover {
+    color: ${ props => props.theme.font.normal };
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
   }
 `;
 
-export const Actions = styled.div`
+/**
+ * One line per destination, and one line of labels above them all.
+ *
+ * The seventh column is the destination itself; the two groups of three are
+ * the one-way and return fares, separated by a rule rather than by repeating
+ * the word "return" on every input.
+ */
+const grid = css`
+  display: grid;
+  grid-template-columns: minmax(150px, 1.6fr) repeat(6, minmax(64px, 1fr));
+  align-items: center;
+  gap: 8px;
+
+  padding: 8px 14px;
+
+  /* the first return column opens the second half of the row */
+  > *:nth-child(5) {
+    border-left: 1px solid ${ props => props.theme.inputs.border };
+    padding-left: 8px;
+  }
+
+  @media (max-width: 900px) {
+    grid-template-columns: repeat(3, minmax(64px, 1fr));
+
+    > *:nth-child(5) {
+      border-left: 0;
+      padding-left: 0;
+    }
+  }
+`;
+
+export const Columns = styled.div`
+  ${ grid };
+
+  position: sticky;
+  top: 47px;
+  z-index: 1;
+
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+
+  background: ${ props => props.theme.background.box };
+  border-bottom: 1px solid ${ props => props.theme.inputs.border };
+
+  /*
+   * The "To" label takes a line of its own once the six fares fold into two
+   * rows of three - the same line the destination name takes on a row below.
+   * Without it the labels sit one cell to the right of the inputs they name,
+   * which on a price screen is worse than having no labels at all.
+   */
+  @media (max-width: 900px) {
+    > *:first-child {
+      grid-column: 1 / -1;
+    }
+  }
+`;
+
+export const Column = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+`;
+
+/**
+ * Fills a column down every destination in the group, from the first row.
+ *
+ * Client-side on purpose: it fills the boxes and leaves them unsaved, so a
+ * mistake is undone by not pressing Save. The server-side copy in the group
+ * header writes immediately, which is the right tool for "these really are
+ * all the same" and the wrong one for "let me try".
+ */
+export const Fill = styled.button`
+  display: flex;
+  align-items: center;
+
+  padding: 0;
+
+  color: ${ props => props.theme.font.faded };
+
+  background: none;
+  border: 0;
+  cursor: pointer;
+
+  &:hover {
+    color: ${ props => props.theme.primary.normal };
+  }
+`;
+
+export const Row = styled.div<{ $changed: boolean }>`
+  ${ grid };
+
+  border-bottom: 1px solid ${ props => props.theme.inputs.border };
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  ${ props => props.$changed && css`
+    background: ${ props.theme.background.neutral };
+  ` };
+
+  input {
+    text-align: right;
+  }
+`;
+
+/**
+ * The destination cell. On a narrow screen the six fare columns fold into
+ * two rows of three, so this takes a line of its own above them.
+ */
+export const Destination = styled.div`
   display: flex;
-  justify-content: center;
-`;
+  align-items: center;
+  gap: 6px;
+
+  @media (max-width: 900px) {
+    grid-column: 1 / -1;
+  }
+`;
+
+/**
+ * A dot on the rows this group is about to write, so pressing Save is not a
+ * guess about what you changed ten destinations ago.
+ */
+export const Changed = styled.span`
+  flex: 0 0 auto;
+
+  width: 7px;
+  height: 7px;
+
+  border-radius: 50%;
+  background: ${ props => props.theme.font.info };
+`;
+
+export const Small = styled.span`
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Empty = styled.p`
+  margin: 0;
+  padding: 20px;
+  text-align: center;
+  color: ${ props => props.theme.font.faded };
+`;

package/Prices/Manage.tsx

@@ -60,7 +60,7 @@ const Manage = ({ type, url, t }: Props): JSX.Element => {
           />
         ) }
 
-        <Browse id={ id } type={ type } data={ prices } name={ name } t={ t } />
+        <Browse id={ id } type={ type } data={ prices } name={ name } t={ t } onReload={ onReload } />
       </div>
     </Meta>
   );

package/Prices/services.ts

@@ -41,12 +41,51 @@ export const usePostPrice = (id: number, price_id: number, type: ('normal' | 'al
   })
 );
 
-export const usePostCopy = (id: number, type: ('normal' | 'alternate'), name: string): UseMutationResult<void> => (
+/**
+ * Save every fare leaving one origin, in one request.
+ *
+ * Claude - 2026-08-30. `usePostPrice` above is untouched and still posts a
+ * single row - a tab left open on the previous screen keeps working, and the
+ * two endpoints validate identically.
+ *
+ * A whole route saved a row at a time would be about 150 requests, and
+ * `api/prices/` sits in obtapi's 120/min general tier: the save would 429
+ * half way through and leave the operator no way to tell which half had been
+ * written. One request per group is also one TRANSACTION per group, so a
+ * group is saved or it is not.
+ */
+export const usePostPrices = (id: number, type: ('normal' | 'alternate'), name: string): UseMutationResult<void, Error, { location_from: number, prices: unknown[] }, unknown> => (
+  useMutation({
+    mutationKey: ['operator-prices-save-many', { id, type, name }],
+    mutationFn: async (data: { location_from: number, prices: unknown[] }) => (
+      await apiClient
+        .post('/api/prices/operator/update-many', {
+          ...data,
+          id,
+          type,
+          name
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+/**
+ * Copy the first fare over the rest.
+ *
+ * `location_from` narrows that to one origin group, which is the action in
+ * each group header; omitted, this is the route-wide copy that has always
+ * lived in the Options menu.
+ */
+export const usePostCopy = (id: number, type: ('normal' | 'alternate'), name: string): UseMutationResult<void, Error, { location_from?: number } | undefined, unknown> => (
   useMutation({
     mutationKey: ['operator-prices-copy', { id, type, name }],
-    mutationFn: async () => (
+    mutationFn: async (data?: { location_from?: number }) => (
       await apiClient
         .post('/api/prices/operator/copy', {
+          ...data,
           id,
           type,
           name

package/Prices/types.ts

@@ -1,3 +1,26 @@
+import { LocationData } from '@autobusal/providers/types/locations';
+import { PriceData } from '@autobusal/providers/types/routes';
+
+/** the six fare columns a price row carries */
+export type FareColumn = 'adult' | 'child' | 'baby' | 'adult_return' | 'child_return' | 'baby_return';
+
+/**
+ * Everything the route sells LEAVING one stop.
+ *
+ * Claude - 2026-08-30. The unit the screen saves and copies in - see
+ * utilities.byOrigin for why it is keyed on the location and not the city.
+ */
+export interface OriginGroup {
+  from: LocationData
+  prices: PriceData[]
+}
+
+/**
+ * One origin group's form: flat `p{price_id}_{column}` keys holding strings.
+ * See utilities.field for why the names have no dots in them.
+ */
+export type GroupForm = Record<string, string>;
+
 export interface PriceForm {
   adult: number
   child: number