@autobusal/operator-routes 1.0.8 → 1.0.10

package/Alternates/Browse.tsx

@@ -4,7 +4,7 @@ import { BsPlusCircleFill } from 'react-icons/bs';
 import { Meta, BackWithTitle, Button, Table, Row } from '@autobusal/common';
 import { usePage } from '@autobusal/hooks';
 import { success } from '@autobusal/utilities';
-import { GetAlternates, PostAdd, DeleteAlternate } from './services';
+import { useGetAlternates, usePostAdd, useDeleteAlternate } from './services';
 
 interface Props {
   url: string
@@ -24,11 +24,11 @@ const Browse = ({ url, backUrl, t }: Props): JSX.Element => {
 
   usePage('routes');
 
-  const { data, isLoading, isFetching, refetch } = GetAlternates(id);
+  const { data, isLoading, isFetching, refetch } = useGetAlternates(id);
 
-  const { mutate: Add, isPending } = PostAdd(id);
+  const { mutate: Add, isPending } = usePostAdd(id);
 
-  const { mutate: Delete } = DeleteAlternate(id);
+  const { mutate: Delete } = useDeleteAlternate(id);
 
   if (id === 0) {
     return <Navigate to={ backUrl } />;

package/Alternates/services.ts

@@ -3,7 +3,7 @@ import { apiClient } from '@autobusal/providers';
 import { RouteData, AlternateData } from '@autobusal/providers/types/routes';
 import { ScheduleForm } from '../Prices/types';
 
-export const GetAlternates = (id: number): UseQueryResult<RouteData> => (
+export const useGetAlternates = (id: number): UseQueryResult<RouteData> => (
   useQuery({
     queryKey: ['operator-alternates', { id }],
     queryFn: async () => (
@@ -18,7 +18,7 @@ export const GetAlternates = (id: number): UseQueryResult<RouteData> => (
   })
 );
 
-export const PostAdd = (id: number): UseMutationResult<AlternateData> => (
+export const usePostAdd = (id: number): UseMutationResult<AlternateData> => (
   useMutation({
     mutationKey: ['operator-alternates-add', { id }],
     mutationFn: async () => (
@@ -31,7 +31,7 @@ export const PostAdd = (id: number): UseMutationResult<AlternateData> => (
   })
 );
 
-export const PostSchedule = (id: number, name: string): UseMutationResult<void, Error, ScheduleForm, unknown> => (
+export const usePostSchedule = (id: number, name: string): UseMutationResult<void, Error, ScheduleForm, unknown> => (
   useMutation({
     mutationKey: ['operator-alternates-schedule', { id, name }],
     mutationFn: async (data: ScheduleForm) => (
@@ -48,7 +48,7 @@ export const PostSchedule = (id: number, name: string): UseMutationResult<void,
   })
 );
 
-export const DeleteAlternate = (id: number): UseMutationResult<void, Error, number, unknown> => (
+export const useDeleteAlternate = (id: number): UseMutationResult<void, Error, number, unknown> => (
   useMutation({
     mutationKey: ['operator-alternates-delete'],
     mutationFn: async (name: number) => (

package/Browse.tsx

@@ -4,7 +4,7 @@ import { Meta, Table, Row } from '@autobusal/common';
 import { usePage } from '@autobusal/hooks';
 import { getParams } from '@autobusal/utilities';
 import { Bags, Dates } from './Information';
-import { GetRoutes } from './services';
+import { useGetRoutes } from './services';
 
 interface Props {
   url: string
@@ -16,7 +16,7 @@ const Browse = ({ url, t }: Props): JSX.Element => {
 
   usePage('routes');
 
-  const { data, isLoading, isFetching } = GetRoutes(getParams(searchParams, ['page', 'sort', 'order', 'q']));
+  const { data, isLoading, isFetching } = useGetRoutes(getParams(searchParams, ['page', 'sort', 'order', 'q']));
 
   const rows = data?.data.map(item => (
     <Row

package/Locations/Add/Add.tsx

@@ -7,7 +7,7 @@ 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';
+import { useGetStops, useAddLocation } from '../services';
 
 interface Props {
   routeId: number
@@ -18,9 +18,9 @@ interface Props {
 const Add = ({ routeId, t, onReload }: Props): JSX.Element => {
   const { register, handleSubmit, formState: { errors } } = useForm<AddForm>();
 
-  const { data, isLoading } = GetStops(routeId);
+  const { data, isLoading } = useGetStops(routeId);
 
-  const { mutate: Save, isPending } = AddLocation(routeId);
+  const { mutate: Save, isPending } = useAddLocation(routeId);
 
   if (isLoading) {
     return <Loading t={ t } />;

package/Locations/Browse/Item.tsx

@@ -6,7 +6,7 @@ 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';
+import { usePostMove, useDeleteLocation, usePostUpdate } from '../services';
 
 interface Props {
   routeId: number
@@ -18,11 +18,11 @@ interface Props {
 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: Save, isPending: isPendingUpdate } = usePostUpdate(routeId, item.id);
 
-  const { mutate: Move, isPending: isPendingMove } = PostMove(routeId, item.id);
+  const { mutate: Move, isPending: isPendingMove } = usePostMove(routeId, item.id);
 
-  const { mutate: Delete, isPending: isPendingDelete } = DeleteLocation(routeId, item.id);
+  const { mutate: Delete, isPending: isPendingDelete } = useDeleteLocation(routeId, item.id);
 
   const onSubmit = (data: LocationForm): void => {
     Save(data);

package/Locations/Manage.tsx

@@ -4,7 +4,7 @@ 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';
+import { useGetLocations } from './services';
 
 interface Props {
   url: string
@@ -20,7 +20,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   usePage('routes');
 
-  const { data, refetch } = GetLocations(id);
+  const { data, refetch } = useGetLocations(id);
 
   const onReload = (): void => {
     refetch();

package/Locations/services.ts

@@ -4,7 +4,7 @@ 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> => (
+export const useGetLocations = (id: number): UseSuspenseQueryResult<RouteData> => (
   useSuspenseQuery({
     queryKey: ['operator-locations', { id }],
     queryFn: async () => (
@@ -19,7 +19,7 @@ export const GetLocations = (id: number): UseSuspenseQueryResult<RouteData> => (
   })
 );
 
-export const GetStops = (routeId: number): UseQueryResult<CountryData[]> => (
+export const useGetStops = (routeId: number): UseQueryResult<CountryData[]> => (
   useQuery({
     queryKey: ['operator-stops', { routeId }],
     queryFn: async () => (
@@ -36,7 +36,7 @@ export const GetStops = (routeId: number): UseQueryResult<CountryData[]> => (
   })
 );
 
-export const AddLocation = (id: number): UseMutationResult<void, Error, AddForm, unknown> => (
+export const useAddLocation = (id: number): UseMutationResult<void, Error, AddForm, unknown> => (
   useMutation({
     mutationKey: ['operator-locations-add', { id }],
     mutationFn: async (data: AddForm) => {
@@ -52,7 +52,7 @@ export const AddLocation = (id: number): UseMutationResult<void, Error, AddForm,
   })
 );
 
-export const PostMove = (id: number, location_id: number): UseMutationResult<void, Error, number, unknown> => (
+export const usePostMove = (id: number, location_id: number): UseMutationResult<void, Error, number, unknown> => (
   useMutation({
     mutationKey: ['operator-locations-move', { id, location_id }],
     mutationFn: async (order: number) => (
@@ -69,7 +69,7 @@ export const PostMove = (id: number, location_id: number): UseMutationResult<voi
   })
 );
 
-export const DeleteLocation = (id: number, location_id: number): UseMutationResult<void> => (
+export const useDeleteLocation = (id: number, location_id: number): UseMutationResult<void> => (
   useMutation({
     mutationKey: ['operator-locations-delete', { id, location_id }],
     mutationFn: async () => (
@@ -87,7 +87,7 @@ export const DeleteLocation = (id: number, location_id: number): UseMutationResu
   })
 );
 
-export const PostUpdate = (id: number, location_id: number): UseMutationResult<void, Error, LocationForm, unknown> => (
+export const usePostUpdate = (id: number, location_id: number): UseMutationResult<void, Error, LocationForm, unknown> => (
   useMutation({
     mutationKey: ['operator-locations-update', { id, location_id }],
     mutationFn: async (data: LocationForm) => (

package/Manage.tsx

@@ -5,14 +5,15 @@ import { RiMoneyEuroCircleLine } from 'react-icons/ri';
 import { FaMapMarkerAlt } from 'react-icons/fa';
 import { IoCalendarClearOutline } from 'react-icons/io5';
 import { Meta, BackWithTitle, Viewer } from '@autobusal/common';
-import { usePage, useBuses, useRouteFeatures, useOperatorDrivers } from '@autobusal/hooks';
+import { usePage, useRouteFeatures, useOperatorDrivers } from '@autobusal/hooks';
 import { success } from '@autobusal/utilities';
 import Template from './Template';
 import Options from './Options';
 import Seating from './Seating';
-import { getType, getLanguagesExtended, getTemplates, getBusType, getSeatingType, getTransiting } from './utilities';
+import { getType, getLanguagesExtended, getTemplates, getTransiting } from './utilities';
 import { RouteData } from '@autobusal/providers/types/routes';
-import { GetRoute, PostRoute, DeleteRoute } from './services';
+import { SeatingOptionsData } from './types';
+import { useGetRoute, usePostRoute, useDeleteRoute } from './services';
 
 interface Props {
   url: string
@@ -20,7 +21,7 @@ interface Props {
 }
 
 const Manage = ({ url, t }: Props): JSX.Element => {
-  const [ seating, setSeating ] = useState<string>('');
+  const [ seating, setSeating ] = useState<SeatingOptionsData | undefined>(undefined);
 
   const params = useParams();
 
@@ -30,26 +31,16 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   const navigate = useNavigate();
 
-  const { data } = GetRoute(id);
+  const { data, isFetching } = useGetRoute(id);
 
-  const { mutate: Update, isPending: isPendingSave } = PostRoute(id, seating);
+  const { mutate: Update, isPending: isPendingSave } = usePostRoute(id, seating);
 
-  const { mutate: Delete, isPending: isPendingDelete } = DeleteRoute();
-
-  const buses = useBuses();
+  const { mutate: Delete, isPending: isPendingDelete } = useDeleteRoute();
 
   const features = useRouteFeatures();
 
   const drivers = useOperatorDrivers('id');
 
-  useEffect(() => {
-    setSeating(data?.trip.seating ?? 'free');
-  }, [data]);
-
-  const onSeating = (id: string): void => {
-    setSeating(id);
-  };
-
   const onSave = (data: RouteData): void => {
     Update(data, {
       onSuccess: () => {
@@ -69,7 +60,11 @@ const Manage = ({ url, t }: Props): JSX.Element => {
       }
     });
   };
-  
+
+  const onSeatingUpdated = (options: SeatingOptionsData): void => {
+    setSeating(options);
+  };
+
   const title = id > 0 ? t('operator_routes.manage.title.update', { name: data?.name, ns: 'common' }) : t('operator_routes.manage.title.new', { ns: 'common' });
 
   return (
@@ -95,12 +90,8 @@ const Manage = ({ url, t }: Props): JSX.Element => {
           label: t('operator_routes.manage.seat_reservation', { ns: 'common' }),
           type: 'component',
           name: 'seating',
-          value: <Seating value={ seating } t={ t } onChange={ onSeating } />
-        }, {}, (
-          getBusType(buses, seating, t, data?.trip.bus?.id)
-        ) , (
-          getSeatingType(seating, t, data?.trip)
-        ), {} , {
+          value: <Seating trip={ data?.trip } t={ t } onUpdated={ onSeatingUpdated } />
+        }, {} , {
           label: t('operator_routes.manage.schedule.title', { ns: 'common' }),
           name: 'schedule',
           type: 'link',
@@ -223,6 +214,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
             <Options id={ id } t={ t } />
           )
         }] }
+        fetching={ isFetching }
         pending={ isPendingSave || isPendingDelete }
         t={ t }
         actions={ [

package/Options.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { AiOutlineCopy, AiOutlineReload } from 'react-icons/ai';
 import { Button } from '@autobusal/common';
 import { success } from '@autobusal/utilities';
-import { PostCopy } from './services';
+import { usePostCopy } from './services';
 
 interface Props {
   id: number
@@ -14,9 +14,9 @@ interface Props {
 const Options = ({ id, t }: Props): JSX.Element => {
   const navigate = useNavigate();
 
-  const { mutate: Copy, isPending: isPendingCopy } = PostCopy(id);
+  const { mutate: Copy, isPending: isPendingCopy } = usePostCopy(id);
 
-  const { mutate: Reverse, isPending: isPendingReverse } = PostCopy(id, true);
+  const { mutate: Reverse, isPending: isPendingReverse } = usePostCopy(id, true);
 
   const onCopy = (): void => {
     if (!window.confirm(t('operator_routes.manage.options.confirm', { ns: 'common' }))) {

package/Prices/Browse/Item.tsx

@@ -6,7 +6,7 @@ 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';
+import { usePostPrice } from '../services';
 
 interface Props {
   id: number
@@ -19,7 +19,7 @@ interface Props {
 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 { mutate: Save, isPending } = usePostPrice(id, item.id, type, name);
 
   const onSubmit = (data: PriceForm): void => {
     Save(data, {

package/Prices/Manage.tsx

@@ -5,7 +5,7 @@ import { usePage } from '@autobusal/hooks';
 import Options from './Options/Options';
 import Schedule from './Schedule/Schedule';
 import Browse from './Browse/Browse';
-import { GetPrices } from './services';
+import { useGetPrices } from './services';
 
 interface Props {
   type: 'normal' | 'alternate'
@@ -23,7 +23,7 @@ const Manage = ({ type, url, t }: Props): JSX.Element => {
   
   usePage('routes');
 
-  const { data, refetch } = GetPrices(id, type, name);
+  const { data, refetch } = useGetPrices(id, type, name);
 
   const onReload = () => {
     refetch();

package/Prices/Options/Options.tsx

@@ -5,7 +5,7 @@ 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';
+import { usePostCopy } from '../services';
 
 interface Props {
   id: number
@@ -20,7 +20,7 @@ const Options = ({ id, type, name, t, onReload }: Props): JSX.Element => {
 
   const ref = useRef(null);
 
-  const { mutate: Copy, isPending } = PostCopy(id, type, name);
+  const { mutate: Copy, isPending } = usePostCopy(id, type, name);
 
   useOutside(ref, () => setShow(false));
 

package/Prices/Schedule/Schedule.tsx

@@ -5,7 +5,7 @@ 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 '../../Alternates/services';
+import { usePostSchedule } from '../../Alternates/services';
 import { ScheduleForm } from '../types';
 
 interface Props {
@@ -21,7 +21,7 @@ const Schedule = ({ id, data, name, t }: Props): JSX.Element => {
   // we get the 1st value, as they're identical
   const details = data !== undefined ? data[0] : undefined;
 
-  const { mutate: Save, isPending } = PostSchedule(id, name);
+  const { mutate: Save, isPending } = usePostSchedule(id, name);
 
   const onSubmit = (data: ScheduleForm): void => {
     Save(data, {

package/Prices/services.ts

@@ -3,7 +3,7 @@ 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> => (
+export const useGetPrices = (id: number, type: string, name: string): UseSuspenseQueryResult<RouteData> => (
   useSuspenseQuery({
     queryKey: [`operator-prices-${ type }`, { id, type, name }],
     queryFn: async () => (
@@ -22,7 +22,7 @@ export const GetPrices = (id: number, type: string, name: string): UseSuspenseQu
   })
 );
 
-export const PostPrice = (id: number, price_id: number, type: ('normal' | 'alternate'), name: string): UseMutationResult<void, Error, PriceForm, unknown> => (
+export const usePostPrice = (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) => (
@@ -41,7 +41,7 @@ export const PostPrice = (id: number, price_id: number, type: ('normal' | 'alter
   })
 );
 
-export const PostCopy = (id: number, type: ('normal' | 'alternate'), name: string): UseMutationResult<void> => (
+export const usePostCopy = (id: number, type: ('normal' | 'alternate'), name: string): UseMutationResult<void> => (
   useMutation({
     mutationKey: ['operator-prices-copy', { id, type, name }],
     mutationFn: async () => (

package/Schedule/Manage.tsx

@@ -5,7 +5,7 @@ import { usePage } from '@autobusal/hooks';
 import { success } from '@autobusal/utilities';
 import { getSchedules } from './utilities';
 import { AvailableData } from '@autobusal/providers/types/routes';
-import { GetSchedule, PostSchedule } from './services';
+import { useGetSchedule, usePostSchedule } from './services';
 
 interface Props {
   url: string
@@ -23,9 +23,9 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   const navigate = useNavigate();
 
-  const { data } = GetSchedule(id);
+  const { data, isFetching } = useGetSchedule(id);
 
-  const { mutate: Update, isPending } = PostSchedule(id);
+  const { mutate: Update, isPending } = usePostSchedule(id);
 
   if (id === 0) {
     return <Navigate to={ url } />;
@@ -34,7 +34,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
   const onSave = (data: AvailableData): void => {
     Update(data, {
       onSuccess: () => {
-        success(t('schedules_manage.message.saved', { ns: 'common' }));
+        success(t('schedules_manage.messages.saved', { ns: 'common' }));
 
         navigate(url);
       }
@@ -42,7 +42,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
   };
 
   const title = t('schedules_manage.title', { name: data?.name, ns: 'common' });
-  
+
   return (
     <Meta title={ title }>
       <BackWithTitle title={ title } to={ url } t={ t } />
@@ -68,6 +68,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
           values: getSchedules(t),
           selected: data?.available.schedule ?? []
         }] }
+        fetching={ isFetching }
         pending={ isPending }
         t={ t }
         actions={ [

package/Schedule/services.ts

@@ -2,7 +2,7 @@ import { UseMutationResult, UseSuspenseQueryResult, useMutation, useSuspenseQuer
 import { apiClient } from '@autobusal/providers';
 import { RouteData, AvailableData } from '@autobusal/providers/types/routes';
 
-export const GetSchedule = (id: number): UseSuspenseQueryResult<RouteData> => (
+export const useGetSchedule = (id: number): UseSuspenseQueryResult<RouteData> => (
   useSuspenseQuery({
     queryKey: ['operator-schedule-manage', { id }],
     queryFn: async () => {
@@ -21,7 +21,7 @@ export const GetSchedule = (id: number): UseSuspenseQueryResult<RouteData> => (
   })
 );
 
-export const PostSchedule = (id: number): UseMutationResult<void, Error, AvailableData, unknown> => (
+export const usePostSchedule = (id: number): UseMutationResult<void, Error, AvailableData, unknown> => (
   useMutation({
     mutationKey: ['operator-schedule-save', { id }],
     mutationFn: async (data: AvailableData) => (

package/Seating.tsx

@@ -1,29 +1,154 @@
+import { useState, useEffect, ChangeEvent } from 'react';
 import { TFunction } from 'i18next';
+import { useBuses } from '@autobusal/hooks';
+import { Display } from '@autobusal/common/Viewer/styles';
 import styled from 'styled-components';
+import { TripData } from '@autobusal/providers/types/routes';
+import { SeatingOptionsData } from './types';
 
 interface Props {
-  value?: string
+  trip?: TripData
   t: TFunction<'normal'>
-  onChange: (id: string) => void
+  onUpdated: (options: SeatingOptionsData) => void
 }
 
-const Seating = ({ value, t, onChange }: Props): JSX.Element => (
-  <Container>
-    <label>
-      <input checked={ value === 'free' } type="radio" name="seating" onChange={ () => onChange('free') } />
-      { t('operator_routes.manage.seating.free', { ns: 'common' }) }
-    </label>
+const Seating = ({ trip, t, onUpdated }: Props): JSX.Element => {
+  const [ data, setData ] = useState<SeatingOptionsData>({
+    seating: trip?.seating ?? 'free',
+    bus_id: trip?.bus?.id,
+    blocked_seats: Number(trip?.blocked_seats),
+    available_seats: Number(trip?.available_seats)
+  });
+  const [ type, setType ] = useState<string>(data.seating);
 
-    <label>
-      <input checked={ value === 'reservation' } type="radio" name="seating" onChange={ () => onChange('reservation') } />
-      { t('operator_routes.manage.seating.reservation', { ns: 'common' }) }
-    </label>
-  </Container>
-);
+  const buses = useBuses();
+
+  useEffect(() => {
+    onUpdated(data);
+  }, [data]);
+
+  const onSeatingChange = (type: string): void => {
+    const newData = { ...data };
+
+    newData.seating = type;
+
+    if (type === 'free') {
+      newData.bus_id = undefined;
+      newData.blocked_seats = 0;
+    } else {
+      newData.bus_id = Number(buses[0].id);
+      newData.available_seats = 0;
+    }
+
+    setType(type);
+    setData(newData);
+  };
+
+  const onBusChange = (event: ChangeEvent<HTMLSelectElement>): void => {
+    setData({
+      ...data,
+      bus_id: Number(event.target.value)
+    });
+  };
+
+  const onSeatsChange = (event: ChangeEvent<HTMLInputElement>, type: string): void => {
+    const seatsNo = Number(event.target.value);
+
+    if (type === 'blocked_seats') {
+      setData({
+        ...data,
+        blocked_seats: seatsNo
+      });
+    }
+
+    if (type === 'available_seats') {
+      setData({
+        ...data,
+        available_seats: seatsNo
+      });
+    }
+  };
+
+  const busOptions = buses.map(bus => (
+    <option key={ bus.id } value={ bus.id }>
+      { bus.name }
+    </option>
+  ));
+
+  return (
+    <>
+      <div className="row">
+        <Container>
+          <label>
+            <input checked={ type === 'free' } type="radio" name="seating" onChange={ () => onSeatingChange('free') } />
+            { t('operator_routes.manage.seating.free', { ns: 'common' }) }
+          </label>
+
+          <label>
+            <input checked={ type === 'reservation' } type="radio" name="seating" onChange={ () => onSeatingChange('reservation') } />
+            { t('operator_routes.manage.seating.reservation', { ns: 'common' }) }
+          </label>
+        </Container>
+      </div>
+
+      <Column className="column">
+        <div className="row">
+          { type === 'reservation' && (
+            <>
+              { t('operator_routes.manage.bus.reservation', { ns: 'common' }) }
+
+              <select defaultValue={ trip?.bus?.id } onChange={ onBusChange }>
+                { busOptions }
+              </select>
+            </>
+          ) }
+
+          { type === 'free' && (
+            <>
+              { t('operator_routes.manage.bus.title', { ns: 'common' }) }
+
+              <Display className="row-data">{ t('operator_routes.manage.bus.free', { ns: 'common' }) }</Display>
+            </>
+          ) }
+        </div>
+
+        <div className="row row-nomargin">
+          { type === 'reservation' && (
+            <>
+              { t('operator_routes.manage.seats.blocked', { ns: 'common' }) }
+
+              <input type="number" name="blocked_seats" defaultValue={ data.blocked_seats } onChange={ (event) => onSeatsChange(event, 'blocked_seats') } />
+            </>
+          ) }
+
+          { type === 'free' && (
+            <>
+              { t('operator_routes.manage.seats.available', { ns: 'common' }) }
+
+              <input type="number" name="available_seats" defaultValue={ data.available_seats } onChange={ (event) => onSeatsChange(event, 'available_seats') } />
+            </>
+          ) }
+        </div>
+      </Column>
+    </>
+  );
+};
 
 const Container = styled.div`
   display: flex;
   gap: 15px;
 `;
 
+const Column = styled.div`
+  & > div:first-of-type {
+    margin-bottom: 15px;
+  }
+
+  @media (min-width: 540px) {
+    & > div:first-of-type {
+      margin-bottom: 0;
+    }
+  }
+`;
+
 export default Seating;

package/Template.tsx

@@ -3,7 +3,7 @@ import { TFunction } from 'i18next';
 import styled from 'styled-components';
 import { RiEyeFill } from 'react-icons/ri';
 import { Button, Modal } from '@autobusal/common';
-import { GetSettings } from '@autobusal/providers/services';
+import { useGetSettings } from '@autobusal/providers/services';
 
 interface Props {
   type?: string
@@ -13,7 +13,7 @@ interface Props {
 const Template = ({ type, t }: Props): JSX.Element => {
   const [ show, setShow ] = useState<boolean>(false);
 
-  const { data } = GetSettings();
+  const { data } = useGetSettings();
 
   if (!type) {
     return (

package/Transiting/Manage.tsx

@@ -6,7 +6,7 @@ import { success } from '@autobusal/utilities';
 import Countries from './Countries';
 import { filterCountries } from './utilities';
 import { TransitingData } from '@autobusal/providers/types/routes';
-import { GetTransiting, PostTransiting, DeleteTransiting } from './services';
+import { useGetTransiting, usePostTransiting, useDeleteTransiting } from './services';
 
 interface Props {
   url: string
@@ -24,11 +24,11 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   const { data: CountriesData, isLoading } = useCountries('available');
 
-  const { data, refetch } = GetTransiting(id);
+  const { data, isFetching, refetch } = useGetTransiting(id);
 
-  const { mutate: Update, isPending: isPendingSave } = PostTransiting(id);
+  const { mutate: Update, isPending: isPendingSave } = usePostTransiting(id);
 
-  const { mutate: Delete, isPending: isPendingDelete } = DeleteTransiting(id);
+  const { mutate: Delete, isPending: isPendingDelete } = useDeleteTransiting(id);
 
   if (id === 0) {
     return <Navigate to={ url } />;
@@ -79,6 +79,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
           value: 0,
           rules: 'required|min:1'
         }] }
+        fetching={ isFetching }
         pending={ isPendingSave || isPendingDelete }
         t={ t }
         actions={ [

package/Transiting/services.ts

@@ -2,7 +2,7 @@ import { UseMutationResult, UseSuspenseQueryResult, useMutation, useSuspenseQuer
 import { apiClient } from '@autobusal/providers';
 import { RouteData, TransitingData } from '@autobusal/providers/types/routes';
 
-export const GetTransiting = (id: number): UseSuspenseQueryResult<RouteData> => (
+export const useGetTransiting = (id: number): UseSuspenseQueryResult<RouteData> => (
   useSuspenseQuery({
     queryKey: ['operator-transiting', { id }],
     queryFn: async () => (
@@ -17,7 +17,7 @@ export const GetTransiting = (id: number): UseSuspenseQueryResult<RouteData> =>
   })
 );
 
-export const PostTransiting = (id: number): UseMutationResult<void, Error, TransitingData, unknown> => (
+export const usePostTransiting = (id: number): UseMutationResult<void, Error, TransitingData, unknown> => (
   useMutation({
     mutationKey: ['operator-transiting-save', { id }],
     mutationFn: async (data: TransitingData) => (
@@ -33,7 +33,7 @@ export const PostTransiting = (id: number): UseMutationResult<void, Error, Trans
   })
 );
 
-export const DeleteTransiting = (id: number): UseMutationResult<void, Error, number, unknown> => (
+export const useDeleteTransiting = (id: number): UseMutationResult<void, Error, number, unknown> => (
   useMutation({
     mutationKey: ['operator-transiting-delete'],
     mutationFn: async (countryId: number) => (

package/Unavailable/Browse.tsx

@@ -2,7 +2,7 @@ import { TFunction } from 'i18next';
 import { useParams, Navigate } from 'react-router-dom';
 import { Meta, BackWithTitle, Table, Row } from '@autobusal/common';
 import { usePage } from '@autobusal/hooks';
-import { GetUnavailableDates, DeleteUnavailable } from './services';
+import { useGetUnavailableDates, useDeleteUnavailable } from './services';
 
 interface Props {
   url: string
@@ -18,9 +18,9 @@ const Browse = ({ url, t }: Props): JSX.Element => {
 
   usePage('routes');
 
-  const { data, isLoading, isFetching, refetch } = GetUnavailableDates(id);
+  const { data, isLoading, isFetching, refetch } = useGetUnavailableDates(id);
 
-  const { mutate: Delete } = DeleteUnavailable(id);
+  const { mutate: Delete } = useDeleteUnavailable(id);
 
   if (id === 0) {
     return <Navigate to={ url } />;

package/Unavailable/Manage.tsx

@@ -4,7 +4,7 @@ import { Meta, BackWithTitle, Viewer } from '@autobusal/common';
 import { usePage } from '@autobusal/hooks';
 import { success } from '@autobusal/utilities';
 import { UnavailableData } from '@autobusal/providers/types/routes';
-import { GetUnavailable, PostUnavailable, DeleteUnavailable } from './services';
+import { useGetUnavailable, usePostUnavailable, useDeleteUnavailable } from './services';
 
 interface Props {
   url: string
@@ -23,11 +23,11 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   const navigate = useNavigate();
 
-  const { data } = GetUnavailable(routeId, id);
+  const { data, isFetching } = useGetUnavailable(routeId, id);
 
-  const { mutate: Update, isPending: isPendingSave } = PostUnavailable(routeId, id);
+  const { mutate: Update, isPending: isPendingSave } = usePostUnavailable(routeId, id);
 
-  const { mutate: Delete, isPending: isPendingDelete } = DeleteUnavailable(routeId);
+  const { mutate: Delete, isPending: isPendingDelete } = useDeleteUnavailable(routeId);
 
   if (routeId === 0) {
     return <Navigate to={ url } />;
@@ -76,6 +76,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
           value: unavailable?.end_inactive,
           rules: 'required'
         }] }
+        fetching={ isFetching }
         pending={ isPendingSave || isPendingDelete }
         t={ t }
         actions={ [

package/Unavailable/services.ts

@@ -3,7 +3,7 @@ import { apiClient } from '@autobusal/providers';
 import { RouteData } from '@autobusal/providers/types/routes';
 import { UnavailableData } from '@autobusal/providers/types/routes';
 
-export const GetUnavailableDates = (id: number): UseQueryResult<RouteData> => (
+export const useGetUnavailableDates = (id: number): UseQueryResult<RouteData> => (
   useQuery({
     queryKey: ['operators-unavailable', { id }],
     queryFn: async () => (
@@ -18,7 +18,7 @@ export const GetUnavailableDates = (id: number): UseQueryResult<RouteData> => (
   })
 );
 
-export const GetUnavailable = (routeId: number, id: number): UseSuspenseQueryResult<RouteData> => (
+export const useGetUnavailable = (routeId: number, id: number): UseSuspenseQueryResult<RouteData> => (
   useSuspenseQuery({
     queryKey: ['operator-unavailable-manage', { routeId, id }],
     queryFn: async () => (
@@ -36,7 +36,7 @@ export const GetUnavailable = (routeId: number, id: number): UseSuspenseQueryRes
   })
 );
 
-export const PostUnavailable = (routeId: number, id: number): UseMutationResult<void, Error, UnavailableData, unknown> => (
+export const usePostUnavailable = (routeId: number, id: number): UseMutationResult<void, Error, UnavailableData, unknown> => (
   useMutation({
     mutationKey: ['unavailable-operator-save', { routeId, id }],
     mutationFn: async (data: UnavailableData) => (
@@ -53,7 +53,7 @@ export const PostUnavailable = (routeId: number, id: number): UseMutationResult<
   })
 );
 
-export const DeleteUnavailable = (routeId: number): UseMutationResult<void, Error, number, unknown> => (
+export const useDeleteUnavailable = (routeId: number): UseMutationResult<void, Error, number, unknown> => (
   useMutation({
     mutationKey: ['unavailable-operator-delete', { routeId }],
     mutationFn: async (id: number) => (

package/package.json

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

package/services.ts

@@ -3,8 +3,9 @@ import { apiClient } from '@autobusal/providers';
 import { PaginationData } from '@autobusal/providers/types/pagination';
 import { RouteData } from '@autobusal/providers/types/routes';
 import { TableParamsData } from '@autobusal/providers/types/other';
+import { SeatingOptionsData } from './types';
 
-export const GetRoutes = (params: TableParamsData): UseQueryResult<PaginationData<RouteData>> => (
+export const useGetRoutes = (params: TableParamsData): UseQueryResult<PaginationData<RouteData>> => (
   useQuery({
     queryKey: ['operator-routes', params],
     queryFn: async () => (
@@ -17,7 +18,7 @@ export const GetRoutes = (params: TableParamsData): UseQueryResult<PaginationDat
   })
 );
 
-export const GetRoute = (id: number): UseSuspenseQueryResult<RouteData> => (
+export const useGetRoute = (id: number): UseSuspenseQueryResult<RouteData> => (
   useSuspenseQuery({
     queryKey: ['operator-routes-manage', { id }],
     queryFn: async () => {
@@ -36,7 +37,7 @@ export const GetRoute = (id: number): UseSuspenseQueryResult<RouteData> => (
   })
 );
 
-export const PostRoute = (id: number, seating: string): UseMutationResult<void, Error, RouteData, unknown> => (
+export const usePostRoute = (id: number, seating?: SeatingOptionsData): UseMutationResult<void, Error, RouteData, unknown> => (
   useMutation({
     mutationKey: ['operator-routes-save', { id, seating }],
     mutationFn: async (data: RouteData) => (
@@ -44,7 +45,7 @@ export const PostRoute = (id: number, seating: string): UseMutationResult<void,
         .post('/api/routes/operator/update', {
           ...data,
           id,
-          seating,
+          ...seating,
           features: JSON.stringify(data.features),
           drivers: JSON.stringify(data.drivers)
         })
@@ -55,7 +56,7 @@ export const PostRoute = (id: number, seating: string): UseMutationResult<void,
   })
 );
 
-export const DeleteRoute = (): UseMutationResult<void, Error, number, unknown> => (
+export const useDeleteRoute = (): UseMutationResult<void, Error, number, unknown> => (
   useMutation({
     mutationKey: ['operator-routes-delete'],
     mutationFn: async (id: number) => (
@@ -70,7 +71,7 @@ export const DeleteRoute = (): UseMutationResult<void, Error, number, unknown> =
   })
 );
 
-export const PostCopy = (id: number, reverse?: boolean): UseMutationResult<RouteData> => (
+export const usePostCopy = (id: number, reverse?: boolean): UseMutationResult<RouteData> => (
   useMutation({
     mutationKey: [`operator-routes-copy${ reverse && '-reverse' }`, { id }],
     mutationFn: async () => (

package/types.ts

@@ -0,0 +1,6 @@
+export interface SeatingOptionsData {
+  seating: string
+  bus_id?: number
+  blocked_seats?: number
+  available_seats?: number
+}

package/utilities.tsx

@@ -2,7 +2,6 @@ import { TFunction } from 'i18next';
 import { IoGlobeOutline } from 'react-icons/io5';
 import { getLanguages } from '@autobusal/utilities';
 import { DropdownData } from '@autobusal/providers/types/other';
-import { TripData } from '@autobusal/providers/types/routes';
 import { ViewData } from '@autobusal/common/Viewer/types';
 
 export const getType = (id: number, value: string, t: TFunction<'normal'>): ViewData => {
@@ -53,45 +52,6 @@ export const getTemplates = (t: TFunction<'normal'>): DropdownData[] => ([
   }
 ]);
 
-export const getBusType = (buses: DropdownData[], seating: string, t: TFunction<'normal'>, value?: number): ViewData => {
-  if (seating === 'free') {
-    return {
-      label: t('operator_routes.manage.bus.reservation', { ns: 'common' }),
-      name: 'bus_id',
-      type: 'display',
-      value: t('operator_routes.manage.bus.free', { ns: 'common' })
-    };
-  }
-
-  return {
-    label: t('operator_routes.manage.bus.title', { ns: 'common' }),
-    name: 'bus_id',
-    type: 'select',
-    values: buses,
-    value,
-    rules: 'required|min:1'
-  };
-};
-
-export const getSeatingType = (seating: string, t: TFunction<'normal'>, trip?: TripData): ViewData => {
-  if (seating === 'free') {
-    return {
-      label: t('operator_routes.manage.seats.available', { ns: 'common' }),
-      name: 'available_seats',
-      type: 'number',
-      value: trip?.available_seats,
-      rules: 'required|min:1'
-    };
-  }
-
-  return {
-    label: t('operator_routes.manage.seats.blocked', { ns: 'common' }),
-    name: 'blocked_seats',
-    type: 'number',
-    value: trip?.blocked_seats
-  };
-};
-
 export const getTransiting = (id: number, t: TFunction<'normal'>, type?: string): ViewData => {
   if (type == 'national') {
     return {