@autobusal/operator-routes 1.0.4 → 1.0.6

package/Locations/Add/Add.tsx

@@ -0,0 +1,71 @@
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { FiPlus } from 'react-icons/fi';
+import { Button } from '@autobusal/common';
+import { Validate, Display, success } from '@autobusal/utilities';
+import Loading from './Loading';
+import { getStops } from '../utilities';
+import { Container, Title, ContainerAdd, Choose, Notice } from './styles';
+import { AddForm } from '../types';
+import { GetStops, AddLocation } from '../services';
+
+interface Props {
+  routeId: number
+  t: TFunction<'normal'>
+  onReload: () => void
+}
+
+const Add = ({ routeId, t, onReload }: Props): JSX.Element => {
+  const { register, handleSubmit, formState: { errors } } = useForm<AddForm>();
+
+  const { data, isLoading } = GetStops(routeId);
+
+  const { mutate: Save, isPending } = AddLocation(routeId);
+
+  if (isLoading) {
+    return <Loading t={ t } />;
+  }
+
+  const onSubmit = (data: AddForm): void => {
+    Save(data, {
+      onSuccess: () => {
+        success(t('locations_manage.messages.added', { ns: 'common' }));
+
+        onReload();
+      }
+    });
+  };
+
+  return (
+    <Container className="box">
+      <Title>{ t('locations_manage.add_city.title', { ns: 'common' }) }</Title>
+
+      <form onSubmit={ handleSubmit(onSubmit) }>
+        <ContainerAdd>
+          <Choose>
+            <select { ...register('group_id', Validate('required', t)) }>
+              { getStops(t, data) }
+            </select>
+
+            { Display(errors.group_id) }
+          </Choose>
+
+          <Button
+            loading={ isPending }
+            text={
+              <>
+                <FiPlus />
+                { t('locations_manage.add_city.action', { ns: 'common' }) }
+              </>
+            }
+            noMargin
+          />
+        </ContainerAdd>
+
+        <Notice>{ t('locations_manage.add_city.notice', { ns: 'common' }) }</Notice>
+      </form>
+    </Container>
+  );
+};
+
+export default Add;

package/Locations/Add/Loading.tsx

@@ -0,0 +1,17 @@
+import { TFunction } from 'i18next';
+import { Inline } from '@autobusal/common';
+import { Container, Title } from './styles';
+
+interface Props {
+  t: TFunction<'normal'>
+}
+
+const Loading = ({ t }: Props): JSX.Element => (
+  <Container className="box">
+    <Title>{ t('locations_manage.add_city.title', { ns: 'common' }) }</Title>
+
+    <Inline text={ t('locations_manage.add_city.loading', { ns: 'common' }) } />
+  </Container>
+);
+
+export default Loading;

package/Locations/Add/styles.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin-bottom: 25px;
+`;
+
+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 ContainerAdd = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 20px;
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+  }
+`;
+
+export const Choose = styled.div`
+  flex: 1;
+  width: 100%;
+`;
+
+export const Notice = styled.div`
+  margin-top: 15px;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.info };
+  text-align: center;
+
+  @media (min-width: 640px) {
+    text-align: left;
+  }
+`;

package/Locations/Browse/Actions.tsx

@@ -0,0 +1,90 @@
+import { TFunction } from 'i18next';
+import { FiArrowDownCircle, FiArrowUpCircle } from 'react-icons/fi';
+import { BiEditAlt, BiTrash } from 'react-icons/bi';
+import { Button } from '@autobusal/common';
+import { ContainerActions, Group } from './styles';
+import { LocationData } from '@autobusal/providers/types/locations';
+
+interface Props {
+  item: LocationData
+  loading: boolean
+  t: TFunction<'normal'>
+  onMove: (order: number) => void
+  onDelete: () => void
+}
+
+const Actions = ({ item, loading, t, onMove, onDelete }: Props): JSX.Element => {
+  const onChange = (type: 'up' | 'down'): void => {
+    if (!window.confirm(t('locations_manage.actions.move', { ns: 'common' }))) {
+      return;
+    }
+
+    const order = type === 'up' ? item.order_id - 1 : item.order_id + 1;
+
+    onMove(order);
+  };
+
+  const onAskDelete = (): void => {
+    if (window.confirm(t('locations_manage.actions.delete', { ns: 'common' }))) {
+      onDelete();
+    }
+  };
+
+  return (
+    <ContainerActions>
+      <Group>
+        <Button
+          type="button"
+          loading={ loading }
+          subtype="secondary"
+          size="small"
+          text={ <FiArrowUpCircle /> }
+          noMargin
+          onClick={ () => onChange('up') }
+        />
+
+        <Button
+          type="button"
+          subtype="secondary"
+          loading={ loading }
+          size="small"
+          text={ <FiArrowDownCircle /> }
+          noMargin
+          onClick={ () => onChange('down') }
+        />
+      </Group>
+
+      <Group>
+        <Button
+          type="submit"
+          loading={ loading }
+          size="small"
+          text={
+            <>
+              <BiEditAlt />
+              { t('table.actions.update', { ns: 'common' }) }
+            </>
+          }
+          noMargin
+        />
+
+        <Button
+          type="button"
+          loading={ loading }
+          size="small"
+          subtype="delete"
+          text={
+            <>
+              <BiTrash />
+              { t('table.actions.delete', { ns: 'common' }) }
+            </>
+          }
+          noMargin
+          onClick={ onAskDelete }
+        />
+      </Group>
+    </ContainerActions>
+  );
+};
+
+export default Actions;

package/Locations/Browse/Browse.tsx

@@ -0,0 +1,45 @@
+import { TFunction } from 'i18next';
+import Item from './Item';
+import { Items, NotFound } from './styles';
+import { LocationData } from '@autobusal/providers/types/locations';
+
+interface Props {
+  routeId: number
+  data?: LocationData[]
+  t: TFunction<'normal'>
+  onReload: () => void
+}
+
+const Browse = ({ routeId, data, t, onReload }: Props): JSX.Element => {
+  if (data === undefined || data.length === 0) {
+    return (
+      <NotFound className="box">
+        { t('locations_manage.no_locations', { ns: 'common' }) }
+      </NotFound>
+    );
+  }
+
+  const items = data.map(item => (
+    <Item
+      key={ item.id }
+      item={ item }
+      routeId={ routeId }
+      t={ t }
+      onReload={ onReload }
+      />
+  ));
+
+  return (
+    <>
+      <h2>
+        { t('locations_manage.browse', { ns: 'common' }) }
+      </h2>
+
+      <Items>
+        { items }
+      </Items>
+    </>
+  );
+};
+
+export default Browse;

package/Locations/Browse/Item.tsx

@@ -0,0 +1,92 @@
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { Validate, Display, success } from '@autobusal/utilities';
+import Actions from './Actions';
+import { getTomorrow } from '../utilities';
+import { Data } from './styles';
+import { LocationForm } from '../types';
+import { LocationData } from '@autobusal/providers/types/locations';
+import { PostMove, DeleteLocation, PostUpdate } from '../services';
+
+interface Props {
+  routeId: number
+  item: LocationData
+  t: TFunction<'normal'>
+  onReload: () => void
+}
+
+const Item = ({ routeId, item, t, onReload }: Props): JSX.Element => {
+  const { register, handleSubmit, formState: { errors } } = useForm<LocationForm>();
+
+  const { mutate: Save, isPending: isPendingUpdate } = PostUpdate(routeId, item.id);
+
+  const { mutate: Move, isPending: isPendingMove } = PostMove(routeId, item.id);
+
+  const { mutate: Delete, isPending: isPendingDelete } = DeleteLocation(routeId, item.id);
+
+  const onSubmit = (data: LocationForm): void => {
+    Save(data);
+  };
+
+  const onMove = (order: number): void => {
+    Move(order, {
+      onSuccess: () => {
+        success(t('locations_manage.messages.moved', { ns: 'common' }));
+
+        onReload();
+      }
+    });
+  };
+
+  const onDelete = (): void => {
+    Delete({}, {
+      onSuccess: () => {
+        success(t('locations_manage.messages.deleted', { ns: 'common' }));
+
+        onReload();
+      }
+    });
+  };
+  
+  return (
+    <div className="box">
+      <h4>{ item.city.country?.name } &rsaquo; { item.city.name } &rsaquo; { item.stop?.name }</h4>
+
+      <form onSubmit={ handleSubmit(onSubmit) }>
+        <Data>
+          <div className="row">
+            { t('locations_manage.city.tomorrow', { ns: 'common' }) }
+
+            <select defaultValue={ item.tomorrow } { ...register('tomorrow') }>
+              { getTomorrow(t) }
+            </select>
+          </div>
+
+          <div className="row">
+            { t('locations_manage.city.departure', { ns: 'common' }) }
+
+            <input type="text" defaultValue={ item.departure } { ...register('departure', Validate('required', t)) } />
+            { Display(errors.departure) }
+          </div>
+
+          <div className="row">
+            { t('locations_manage.city.arrival', { ns: 'common' }) }
+
+            <input type="text" defaultValue={ item.arrival } { ...register('arrival', Validate('required', t)) } />
+            { Display(errors.arrival) }
+          </div>
+        </Data>
+
+        <Actions
+          item={ item }
+          loading={ isPendingMove || isPendingDelete || isPendingUpdate }
+          t={ t }
+          onMove={ onMove }
+          onDelete={ onDelete }
+        />
+      </form>
+    </div>
+  );
+};
+
+export default Item;

package/Locations/Browse/styles.ts

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+export const Items = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+`;
+
+export const NotFound = styled.div`
+  margin-top: 15px;
+  padding: 30px 0;
+  color: ${ props => props.theme.font.neutral };
+  text-align: center;
+  font-size: ${ props => props.theme.size.xs };
+`;
+
+export const Data = styled.div`
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+
+  @media (min-width: 480px) {
+    flex-direction: row;
+    gap: 15px;
+  }
+`;
+
+export const ContainerActions = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const Group = styled.div`
+  display: flex;
+  gap: 10px;
+`;

package/Locations/Manage.tsx

@@ -0,0 +1,44 @@
+import { TFunction } from 'i18next';
+import { useParams } from 'react-router-dom';
+import { Meta, BackWithTitle, Report } from '@autobusal/common';
+import { usePage } from '@autobusal/hooks';
+import Add from './Add/Add';
+import Browse from './Browse/Browse';
+import { GetLocations } from './services';
+
+interface Props {
+  url: string
+  t: TFunction<'common'>
+}
+
+const Manage = ({ url, t }: Props): JSX.Element => {
+  const params = useParams();
+
+  const id = Number(params.id);
+
+  url = url.replace('[id]', String(id));
+
+  usePage('routes');
+
+  const { data, refetch } = GetLocations(id);
+
+  const onReload = (): void => {
+    refetch();
+  };
+
+  const title = t('locations_manage.title', { name: data?.name, ns: 'common' });
+
+  return (
+    <Meta title={ title }>
+      <BackWithTitle title={ title } to={ url } t={ t } />
+
+      <Add routeId={ id } 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 } />
+    </Meta>
+  );
+};
+
+export default Manage;

package/Locations/services.ts

@@ -0,0 +1,105 @@
+import { UseMutationResult, UseQueryResult, UseSuspenseQueryResult, useMutation, useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { RouteData } from '@autobusal/providers/types/routes';
+import { CountryData } from '@autobusal/providers/types/locations';
+import { AddForm, LocationForm } from './types';
+
+export const GetLocations = (id: number): UseSuspenseQueryResult<RouteData> => (
+  useSuspenseQuery({
+    queryKey: ['operator-locations', { id }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/locations/operator/get', {
+          params: { id }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const GetStops = (routeId: number): UseQueryResult<CountryData[]> => (
+  useQuery({
+    queryKey: ['operator-stops', { routeId }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/stops/operator/browse', {
+          params: {
+            route_id: routeId
+          }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const AddLocation = (id: number): UseMutationResult<void, Error, AddForm, unknown> => (
+  useMutation({
+    mutationKey: ['operator-locations-add', { id }],
+    mutationFn: async (data: AddForm) => {
+      await apiClient
+        .post('/api/locations/operator/add', {
+          ...data,
+          id
+        })
+        .then(response => (
+          response.data
+        ))
+    }
+  })
+);
+
+export const PostMove = (id: number, location_id: number): UseMutationResult<void, Error, number, unknown> => (
+  useMutation({
+    mutationKey: ['operator-locations-move', { id, location_id }],
+    mutationFn: async (order: number) => (
+      await apiClient
+        .post('/api/locations/operator/move', {
+          order,
+          id,
+          location_id
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const DeleteLocation = (id: number, location_id: number): UseMutationResult<void> => (
+  useMutation({
+    mutationKey: ['operator-locations-delete', { id, location_id }],
+    mutationFn: async () => (
+      await apiClient
+        .delete('/api/locations/operator/delete', {
+          params: {
+            id,
+            location_id
+          }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const PostUpdate = (id: number, location_id: number): UseMutationResult<void, Error, LocationForm, unknown> => (
+  useMutation({
+    mutationKey: ['operator-locations-update', { id, location_id }],
+    mutationFn: async (data: LocationForm) => (
+      await apiClient
+        .post('/api/locations/operator/update', {
+          ...data,
+          id,
+          location_id
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/Locations/types.ts

@@ -0,0 +1,9 @@
+export interface AddForm {
+  group_id: string
+}
+
+export interface LocationForm {
+  tomorrow: number
+  departure: string
+  arrival: string
+}

package/Locations/utilities.tsx

@@ -0,0 +1,53 @@
+import { TFunction } from 'i18next';
+import { CityData, CountryData } from '@autobusal/providers/types/locations';
+
+export const getStops = (t: TFunction<'normal'>, countries?: CountryData[]): JSX.Element[] => {
+  const options: JSX.Element[] = [
+    <option key="-none=" value="">{ t('locations_manage.add_city.choose', { ns: 'common' }) }</option>
+  ];
+
+  countries?.forEach(country => {
+    options.push(
+      <optgroup key={ country.id } label={ country.name }>
+        { getOptions(country.cities) }
+      </optgroup>
+    );
+  });
+
+  return options;
+};
+
+const getOptions = (cities?: CityData[]): JSX.Element[] => {
+  const options: JSX.Element[] = [];
+
+  cities?.forEach(city => {
+    city.stops?.forEach(stop => {
+      const value = `${ city.id }#${ stop.id }`;
+
+      options.push(
+        <option key={ value } value={ value }>{ city.name } &rsaquo; { stop.name }</option>
+      );
+    });
+  });
+
+  return options;
+};
+
+export const getTomorrow = (t: TFunction<'normal'>): JSX.Element[] => {
+  const available = [
+    { name: t('locations_manage.tomorrow.same_day', { ns: 'common' }), value: 0 },
+    { name: t('locations_manage.tomorrow.1_day', { ns: 'common' }), value: 1 },
+    { name: t('locations_manage.tomorrow.2_days', { ns: 'common' }), value: 2 },
+    { name: t('locations_manage.tomorrow.3_days', { ns: 'common' }), value: 3 },
+    { name: t('locations_manage.tomorrow.4_days', { ns: 'common' }), value: 4 },
+    { name: t('locations_manage.tomorrow.5_days', { ns: 'common' }), value: 5 },
+    { name: t('locations_manage.tomorrow.6_days', { ns: 'common' }), value: 6 },
+    { name: t('locations_manage.tomorrow.7_days', { ns: 'common' }), value: 7 }
+  ];
+
+  const options = available.map(item => (
+    <option key={ item.value } value={ item.value }>{ item.name }</option>
+  ));
+
+  return options;
+};

package/Prices/Browse/Browse.tsx

@@ -0,0 +1,33 @@
+import { TFunction } from 'i18next';
+import Item from './Item';
+import { Items } from './styles';
+import { PriceData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  id: number
+  type: 'normal' | 'alternate'
+  data?: PriceData[]
+  name: string
+  t: TFunction<'normal'>
+}
+
+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 }
+    />
+  ));
+
+  return (
+    <Items>
+      { items }
+    </Items>
+  );
+};
+
+export default Browse;

package/Prices/Browse/Item.tsx

@@ -0,0 +1,106 @@
+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 { PostPrice } 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 } = PostPrice(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;

package/Prices/Browse/styles.ts

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const Items = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+`;
+
+export const Prices = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 540px) {
+    flex-direction: row;
+    gap: 15px;
+  }
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  justify-content: center;
+`;

package/Prices/Manage.tsx

@@ -0,0 +1,65 @@
+import { TFunction } from 'i18next';
+import { useParams } from 'react-router-dom';
+import { Meta, BackWithTitle } from '@autobusal/common';
+import { usePage } from '@autobusal/hooks';
+import Options from './Options/Options';
+import Schedule from './Schedule/Schedule';
+import Browse from './Browse/Browse';
+import { GetPrices } from './services';
+
+interface Props {
+  type: 'normal' | 'alternate'
+  url: string
+  t: TFunction<'common'>
+}
+
+const Manage = ({ type, url, t }: Props): JSX.Element => {
+  const params = useParams();
+
+  const id = Number(params.id);
+  const name = String(params.name ?? '');
+
+  url = url.replace('[id]', String(id));
+  
+  usePage('routes');
+
+  const { data, refetch } = GetPrices(id, type, name);
+
+  const onReload = () => {
+    refetch();
+  };
+
+  const title = t(`prices_manage.title.${ type }`, { name: data?.name, ns: 'common' });
+
+  // get the correct column
+  const prices = type === 'alternate' ? data?.alternates : data?.prices;
+
+  return (
+    <Meta title={ title }>
+      <BackWithTitle title={ title } to={ url } t={ t } />
+
+      <div className="route-prices">
+        <Options
+          id={ id }
+          type={ type }
+          name={ name }
+          t={ t }
+          onReload={ onReload }
+        />
+
+        { type === 'alternate' && (
+          <Schedule
+            id={ id }
+            data={ data?.alternates }
+            name={ name }
+            t={ t }
+          />
+        ) }
+
+        <Browse id={ id } type={ type } data={ prices } name={ name } t={ t } />
+      </div>
+    </Meta>
+  );
+};
+
+export default Manage;

package/Prices/Options/Options.tsx

@@ -0,0 +1,63 @@
+import { useState, useRef } from 'react';
+import { TFunction } from 'i18next';
+import { FaCaretDown } from 'react-icons/fa';
+import { Inline } from '@autobusal/common';
+import { useOutside } from '@autobusal/hooks';
+import { success } from '@autobusal/utilities';
+import { Container, ButtonMore, Submenu, ButtonOption, Loading } from './styles';
+import { PostCopy } from '../services';
+
+interface Props {
+  id: number
+  type: 'normal' | 'alternate'
+  name: string
+  t: TFunction<'normal'>
+  onReload: () => void
+}
+
+const Options = ({ id, type, name, t, onReload }: Props): JSX.Element => {
+  const [ show, setShow ] = useState<boolean>(false);
+
+  const ref = useRef(null);
+
+  const { mutate: Copy, isPending } = PostCopy(id, type, name);
+
+  useOutside(ref, () => setShow(false));
+
+  const onCopy = (): void => {
+    if (window.confirm(t('prices_manage.options.copy.ask', { ns: 'common' }))) {
+      Copy({}, {
+        onSuccess: () => {
+          success(t('prices_manage.messages.copied', { ns: 'common' }));
+
+          onReload();
+        }
+      });
+    }
+  };
+
+  if (isPending) {
+    return (
+      <Loading>
+        <Inline text={ t('prices_manage.options.copy.loading', { ns: 'common' }) } />
+      </Loading>
+    );
+  }
+
+  return (
+    <Container ref={ ref }>
+      <ButtonMore onClick={ () => setShow(true) }>
+        { t('prices_manage.options.more', { ns: 'common' }) }
+        <FaCaretDown />
+      </ButtonMore>
+
+      { show && (
+        <Submenu>
+          <ButtonOption onClick={ onCopy }>{ t('prices_manage.options.copy.text', { ns: 'common' }) }</ButtonOption>
+        </Submenu>
+      ) }
+    </Container>
+  );
+};
+
+export default Options;

package/Prices/Options/styles.ts

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  position: relative;
+  display: flex;
+  margin-bottom: 10px;
+`;
+
+export const ButtonMore = styled.button`
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  color: ${ props => props.theme.font.info };
+  font-size: ${ props => props.theme.size.xs };
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export const Submenu = styled.div`
+  position: absolute;
+  top: 25px;
+  right: 0;
+  width: 200px;
+  padding: 5px;
+  background: ${ props => props.theme.submenu.transparent };
+  border-radius: ${ props => props.theme.borderRadius };
+  box-shadow: ${ props => props.theme.boxShadow };
+  backdrop-filter: blur(15px);
+  -webkit-backdrop-filter: blur(15px);
+`;
+
+export const ButtonOption = styled.button`
+  display: block;
+  width: 100%;
+  padding: 5px 10px;
+  font-size: ${ props => props.theme.size.s };
+  color: ${ props => props.theme.submenu.font };
+  border-radius: ${ props => props.theme.borderRadius };
+
+  &:hover {
+    background: ${ props => props.theme.submenu.hover };
+  }
+`;
+
+export const Loading = styled.div`
+  display: flex;
+  justify-content: center;
+  padding: 25px 0;
+`;

package/Prices/Schedule/Schedule.tsx

@@ -0,0 +1,93 @@
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { BiEditAlt } from 'react-icons/bi';
+import { Calendar, Button } from '@autobusal/common';
+import { Display, success } from '@autobusal/utilities';
+import { Container, Dates } from './styles';
+import { AlternateData } from '@autobusal/providers/types/routes';
+import { PostSchedule } from '@pages/Operator/Alternates/services';
+import { ScheduleForm } from '../types';
+
+interface Props {
+  id: number
+  data?: AlternateData[]
+  name: string
+  t: TFunction<'normal'>
+}
+
+const Schedule = ({ id, data, name, t }: Props): JSX.Element => {
+  const { register, handleSubmit, formState: { errors }, setValue } = useForm<ScheduleForm>();
+
+  // we get the 1st value, as they're identical
+  const details = data !== undefined ? data[0] : undefined;
+
+  const { mutate: Save, isPending } = PostSchedule(id, name);
+
+  const onSubmit = (data: ScheduleForm): void => {
+    Save(data, {
+      onSuccess: () => success(t('alternates_manage.messages.saved', { ns: 'common' }))
+    });
+  };
+
+  return (
+    <Container className="box">
+      <h2>{ t('alternates_manage.title', { ns: 'common' }) }</h2>
+
+      <form onSubmit={ handleSubmit(onSubmit) }>
+        <Dates>
+          <div className="row">
+            { t('alternates_manage.from', { ns: 'common' }) }
+
+            <Calendar
+              type="picker"
+              name="date_from"
+              defaultValue={ details?.date_from }
+              t={ t }
+              validation="required"
+              refs={ register }
+              onUpdate={ setValue }
+            />
+
+            { Display(errors.date_from) }
+          </div>
+
+          <div className="row">
+            { t('alternates_manage.to', { ns: 'common' }) }
+
+            <Calendar
+              type="picker"
+              name="date_to"
+              defaultValue={ details?.date_to }
+              t={ t }
+              validation="required"
+              refs={ register }
+              onUpdate={ setValue }
+            />
+
+            { Display(errors.date_to) }
+          </div>
+        </Dates>
+
+        <div className="row">
+          <label>
+            <input type="checkbox" value="1" defaultChecked={ details?.offer } { ...register('offer') } />&nbsp;
+            { t('alternates_manage.offer', { ns: 'common' }) }
+          </label>
+        </div>
+
+        <Button
+          type="submit"
+          loading={ isPending }
+          text={
+            <>
+              <BiEditAlt />
+              { t('table.actions.update', { ns: 'common' }) }
+            </>
+          }
+        />
+      </form>
+    </Container>
+  );
+};
+
+export default Schedule;

package/Prices/Schedule/styles.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin-bottom: 50px;
+`;
+
+export const Dates = styled.div`
+  display: flex;
+  gap: 15px;
+`;

package/Prices/services.ts

@@ -0,0 +1,59 @@
+import { UseMutationResult, UseSuspenseQueryResult, useMutation, useSuspenseQuery } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { RouteData } from '@autobusal/providers/types/routes';
+import { PriceForm } from './types';
+
+export const GetPrices = (id: number, type: string, name: string): UseSuspenseQueryResult<RouteData> => (
+  useSuspenseQuery({
+    queryKey: [`operator-prices-${ type }`, { id, type, name }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/prices/operator/get', {
+          params: {
+            id,
+            type,
+            name
+          }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const PostPrice = (id: number, price_id: number, type: ('normal' | 'alternate'), name: string): UseMutationResult<void, Error, PriceForm, unknown> => (
+  useMutation({
+    mutationKey: ['operator-prices-save', { id, price_id, type, name }],
+    mutationFn: async (data: PriceForm) => (
+      await apiClient
+        .post('/api/prices/operator/update', {
+          ...data,
+          id,
+          price_id,
+          type,
+          name
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const PostCopy = (id: number, type: ('normal' | 'alternate'), name: string): UseMutationResult<void> => (
+  useMutation({
+    mutationKey: ['operator-prices-copy', { id, type, name }],
+    mutationFn: async () => (
+      await apiClient
+        .post('/api/prices/operator/copy', {
+          id,
+          type,
+          name
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/Prices/types.ts

@@ -0,0 +1,14 @@
+export interface PriceForm {
+  adult: number
+  child: number
+  baby: number
+  adult_return: number
+  child_return: number
+  baby_return: number
+}
+
+export interface ScheduleForm {
+  date_from: string
+  date_to: string
+  offer: number
+}

package/Transiting/Countries.tsx

@@ -17,7 +17,7 @@ const Countries = ({ transiting, t, onDelete }: Props): JSX.Element => {
   }
 
   const onDeleteConfirm = (id: number): void => {
-    if (window.confirm(t('private.transiting_manage.confirm'))) {
+    if (window.confirm(t('transiting_manage.confirm', { ns: 'confirm' }))) {
       onDelete(id);
     }
   };

package/index.ts

@@ -1,5 +1,7 @@
 import Browse from './Browse';
 import Manage from './Manage';
+import LocationsManage from './Locations/Manage';
+import PricesManage from './Prices/Manage';
 import SchedulesManage from './Schedule/Manage';
 import TransitingManage from './Transiting/Manage';
 import UnavailableBrowse from './Unavailable/Browse';
@@ -8,6 +10,8 @@ import UnavailableManage from './Unavailable/Manage';
 export {
   Browse,
   Manage,
+  LocationsManage,
+  PricesManage,
   SchedulesManage,
   TransitingManage,
   UnavailableBrowse,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/operator-routes",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "main": "index.ts"
 }