@autobusal/operator-routes 1.10.1 → 1.10.3

package/Locations/Propose/styles.ts

@@ -99,7 +99,16 @@ export const Chosen = styled.div`
 export const Similar = styled.div`
   margin-top: 15px;
   padding: 12px 14px;
-  border: 1px solid ${ props => props.theme.font.warning ?? '#e0a800' };
+  /*
+   * Claude - 2026-08-30: the hardcoded '#e0a800' fallback that stood here was
+   * a workaround for a token nothing defined - theme.font.warning was styled
+   * with in four places and present in no palette, and a missing token
+   * silently drops the whole declaration rather than failing. It exists now
+   * (obtapi's default-settings.json, floored onto every label by
+   * Labels\ThemeColors), so this shows the brand's own amber instead of one
+   * hardcoded here.
+   */
+  border: 1px solid ${ props => props.theme.font.warning };
   border-radius: 4px;
 
   p {

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.warning };
+`;
+
+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.warning };
+`;
+
+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

package/Prices/utilities.ts

@@ -1,5 +1,78 @@
 import { TFunction } from 'i18next';
 import { BreadcrumbData } from '@autobusal/providers/types/pages';
+import { PriceData } from '@autobusal/providers/types/routes';
+import { FareColumn, GroupForm, OriginGroup } from './types';
+
+/**
+ * The six fare columns, in the order the screen reads them.
+ */
+export const COLUMNS: FareColumn[] = [
+  'adult', 'child', 'baby', 'adult_return', 'child_return', 'baby_return'
+];
+
+/**
+ * The route's prices, grouped by where the leg leaves from.
+ *
+ * Claude - 2026-08-30. Keyed on the LOCATION, not the city: a route may call
+ * at the same city twice, and those are two different origins with two
+ * different sets of fares. The API returns the rows already ordered by
+ * `order_id`, which is travel order, so grouping on first appearance leaves
+ * the origins in the order the coach visits them - no sorting needed here,
+ * and none that could disagree with the timetable.
+ */
+export const byOrigin = (prices: PriceData[]): OriginGroup[] => {
+  const groups: OriginGroup[] = [];
+
+  for (const price of prices) {
+    const existing = groups.find(group => group.from.id === price.from.id);
+
+    if (existing) {
+      existing.prices.push(price);
+
+      continue;
+    }
+
+    groups.push({ from: price.from, prices: [ price ] });
+  }
+
+  return groups;
+};
+
+/**
+ * The form field name for one fare.
+ *
+ * FLAT, WITH NO DOTS. react-hook-form parses a dotted name as a path, and a
+ * segment that is a plain integer becomes an ARRAY INDEX - so `327.adult`
+ * would build a 328-long sparse array rather than an entry keyed 327. The
+ * ids here are database ids, so that is not hypothetical.
+ */
+export const field = (id: number, column: FareColumn): string => `p${ id }_${ column }`;
+
+/**
+ * What the group currently holds, as the API's own shape.
+ */
+export const toPrices = (form: GroupForm, prices: PriceData[]) => (
+  prices.map(price => ({
+    price_id: price.id,
+
+    ...Object.fromEntries(COLUMNS.map(column => [
+      column, form[field(price.id, column)]
+    ]))
+  }))
+);
+
+/**
+ * The group's fares as the form should start out holding them.
+ *
+ * Strings, because the inputs hold strings: comparing a typed "45" against a
+ * numeric 45 would leave a row marked as changed after the operator had
+ * typed the value that was already there.
+ */
+export const toForm = (prices: PriceData[]): GroupForm => (
+  Object.fromEntries(prices.flatMap(price => COLUMNS.map(column => [
+    field(price.id, column), String(price[column] ?? 0)
+  ])))
+);
 
 export const getBreadcrumbs = (type: string, baseUrl: string, backUrl: string, t: TFunction<'common'>, name?: string): BreadcrumbData[] => {
   const final: BreadcrumbData[] = [];

package/Pricing/styles.ts

@@ -85,6 +85,8 @@ export const Text = styled.span`
 export const Percent = styled.strong<{ $up: boolean }>`
   flex: 0 0 auto;
   font-size: ${ props => props.theme.size.m };
+  /* amber against the green of a cut - the pairing this always wanted, and
+     could not have while font.warning was a token no palette defined */
   color: ${ props => (props.$up ? props.theme.font.warning : props.theme.font.success) };
 `;
 

package/package.json

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

package/Prices/Browse/Item.tsx

@@ -1,106 +0,0 @@
-import { TFunction } from 'i18next';
-import { useForm } from 'react-hook-form';
-import { BiEditAlt } from 'react-icons/bi';
-import { Button } from '@autobusal/common';
-import { Validate, Display, success } from '@autobusal/utilities';
-import { Prices, Actions } from './styles';
-import { PriceData } from '@autobusal/providers/types/routes';
-import { PriceForm } from '../types';
-import { usePostPrice } from '../services';
-
-interface Props {
-  id: number
-  type: 'normal' | 'alternate'
-  item: PriceData
-  name: string
-  t: TFunction<'normal'>
-}
-
-const Item = ({ id, type, item, name, t }: Props): JSX.Element => {
-  const { register, handleSubmit, formState: { errors } } = useForm<PriceForm>();
-
-  const { mutate: Save, isPending } = usePostPrice(id, item.id, type, name);
-
-  const onSubmit = (data: PriceForm): void => {
-    Save(data, {
-      onSuccess: () => success(t('prices_manage.messages.saved', { ns: 'common' }))
-    });
-  };
-
-  return (
-    <div className="box">
-      <h4>
-        { item.from.city.name } ({ item.from.city.country?.name }) &rsaquo; { item.to.city.name } ({ item.to.city.country?.name })
-      </h4>
-
-      <form onSubmit={ handleSubmit(onSubmit) }>
-        <Prices>
-          <div className="row">
-            { t('prices_manage.prices.adult', { ns: 'common' }) }
-
-            <input type="number" defaultValue={ item.adult } { ...register('adult', Validate('required', t)) } />
-
-            { Display(errors.adult) }
-          </div>
-
-          <div className="row">
-            { t('prices_manage.prices.child', { ns: 'common' }) }
-
-            <input type="number" defaultValue={ item.child } { ...register('child', Validate('required', t)) } />
-
-            { Display(errors.child) }
-          </div>
-
-          <div className="row">
-            { t('prices_manage.prices.baby', { ns: 'common' }) }
-
-            <input type="number" defaultValue={ item.baby } { ...register('baby', Validate('required', t)) } />
-
-            { Display(errors.baby) }
-          </div>
-        </Prices>
-
-        <Prices>
-          <div className="row">
-            { t('prices_manage.prices.adult_return', { ns: 'common' }) }
-
-            <input type="number" defaultValue={ item.adult_return } { ...register('adult_return', Validate('required', t)) } />
-
-            { Display(errors.adult_return) }
-          </div>
-
-          <div className="row">
-            { t('prices_manage.prices.child_return', { ns: 'common' }) }
-
-            <input type="number" defaultValue={ item.child_return } { ...register('child_return', Validate('required', t)) } />
-
-            { Display(errors.child_return) }
-          </div>
-        
-          <div className="row">
-            { t('prices_manage.prices.baby_return', { ns: 'common' }) }
-
-            <input type="number" defaultValue={ item.baby_return } { ...register('baby_return', Validate('required', t)) } />
-
-            { Display(errors.baby_return) }
-          </div>
-        </Prices>
-
-        <Actions>
-          <Button
-            type="submit"
-            loading={ isPending }
-            text={
-              <>
-                <BiEditAlt />
-                { t('table.actions.update', { ns: 'common' }) }
-              </>
-            }
-          />
-        </Actions>
-      </form>
-    </div>
-  );
-};
-
-export default Item;