@autobusal/admin-external 1.0.0

package/Browse.tsx

@@ -0,0 +1,107 @@
+import { TFunction } from 'i18next';
+import { Link } from 'react-router-dom';
+import { Meta, Button, Box } from '@autobusal/common';
+import { usePage, useBreadcrumbs } from '@autobusal/hooks';
+import { success } from '@autobusal/utilities';
+import { Table, Actions, SectionTitle, AvailableList, AvailableLink, TopActions } from './styles';
+import { useGetExternalProviders, useDeleteExternalProvider } from './services';
+
+interface Props {
+  url: string
+  t: TFunction<'common'>
+}
+
+const Browse = ({ url, t }: Props): JSX.Element => {
+  usePage('external');
+
+  useBreadcrumbs(t('admin_external.browse.title', { ns: 'common' }));
+
+  const { data, isLoading, refetch } = useGetExternalProviders();
+
+  const { mutate: Delete } = useDeleteExternalProvider();
+
+  const onDelete = (provider: string): void => {
+    if (!window.confirm(t('table.confirm', { ns: 'common' }))) {
+      return;
+    }
+
+    Delete(provider, {
+      onSuccess: () => {
+        success(t('admin_external.manage.messages.deleted', { ns: 'common' }));
+
+        refetch();
+      }
+    });
+  };
+
+  if (isLoading) {
+    return <Box />;
+  }
+
+  return (
+    <Meta title={ t('admin_external.browse.title', { ns: 'common' }) }>
+      <h1>{ t('admin_external.browse.title', { ns: 'common' }) }</h1>
+
+      <TopActions>
+        <Link to={ `${ url }/stats` }>
+          <Button type="button" size="medium" subtype="secondary" text={ t('admin_external.browse.view_stats', { ns: 'common' }) } />
+        </Link>
+      </TopActions>
+
+      <div className="box">
+        <Table>
+          <thead>
+            <tr>
+              <th>{ t('admin_external.browse.provider', { ns: 'common' }) }</th>
+              <th>{ t('admin_external.browse.status', { ns: 'common' }) }</th>
+              <th>{ t('admin_external.browse.mode', { ns: 'common' }) }</th>
+              <th>{ t('admin_external.browse.markup', { ns: 'common' }) }</th>
+              <th>{ t('admin_external.browse.cache_ttl', { ns: 'common' }) }</th>
+              <th />
+            </tr>
+          </thead>
+
+          <tbody>
+            { data?.providers.map(row => (
+              <tr key={ row.provider }>
+                <td>{ row.provider }</td>
+                <td>{ t(`admin_external.status.${ row.status }`, { ns: 'common' }) }</td>
+                <td>{ t(`admin_external.mode.${ row.mode }`, { ns: 'common' }) }</td>
+                <td>{ row.markup_percent }% + { row.markup_fixed }</td>
+                <td>{ row.cache_ttl }s</td>
+                <td>
+                  <Actions>
+                    <Link to={ `${ url }/manage/${ row.provider }` }>{ t('table.actions.view', { ns: 'common' }) }</Link>
+                    <button type="button" onClick={ () => onDelete(row.provider) }>{ t('table.actions.delete', { ns: 'common' }) }</button>
+                  </Actions>
+                </td>
+              </tr>
+            )) }
+
+            { data?.providers.length === 0 && (
+              <tr>
+                <td colSpan={ 6 }>{ t('admin_external.browse.empty', { ns: 'common' }) }</td>
+              </tr>
+            ) }
+          </tbody>
+        </Table>
+      </div>
+
+      { (data?.available.length ?? 0) > 0 && (
+        <>
+          <SectionTitle>{ t('admin_external.browse.available', { ns: 'common' }) }</SectionTitle>
+
+          <AvailableList>
+            { data?.available.map(item => (
+              <AvailableLink key={ item.provider } to={ `${ url }/manage/${ item.provider }` }>
+                { item.name }
+              </AvailableLink>
+            )) }
+          </AvailableList>
+        </>
+      ) }
+    </Meta>
+  );
+};
+
+export default Browse;

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog
+
+All notable changes to `@autobusal/admin-external` are documented here.
+This project adheres to [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
+and [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.0] - 2026-07-27
+
+### Added
+
+- Initial release. Admin config + stats for the external bus-route
+  provider integration (Mode A: search + redirect). `Browse.tsx` lists
+  configured providers plus known providers still available to add;
+  `Manage.tsx` is the per-provider config form (status/mode/credentials/
+  markup/commission/cache_ttl/resellable), keyed by provider slug rather
+  than a numeric id since `external_providers` rows are looked up by
+  `provider`; `Stats.tsx` shows the search->click funnel per provider
+  over a date range. Backed by obtapi's
+  `App\Http\Controllers\External\AdminController`.

package/Manage.tsx

@@ -0,0 +1,144 @@
+import { TFunction } from 'i18next';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Meta, BackWithTitle, Viewer } from '@autobusal/common';
+import { usePage, useBreadcrumbs } from '@autobusal/hooks';
+import { getAllowed, success } from '@autobusal/utilities';
+import { useGetExternalProvider, usePostExternalProvider, useDeleteExternalProvider } from './services';
+
+interface Props {
+  url: string
+  t: TFunction<'common'>
+}
+
+const STATUS_VALUES = (t: TFunction<'common'>) => ([
+  { id: 'disabled', name: t('admin_external.status.disabled', { ns: 'common' }) },
+  { id: 'dedicated', name: t('admin_external.status.dedicated', { ns: 'common' }) },
+  { id: 'main', name: t('admin_external.status.main', { ns: 'common' }) }
+]);
+
+const MODE_VALUES = (t: TFunction<'common'>) => ([
+  { id: 'redirect', name: t('admin_external.mode.redirect', { ns: 'common' }) },
+  { id: 'booking', name: t('admin_external.mode.booking', { ns: 'common' }) }
+]);
+
+const COMMISSION_TYPE_VALUES = (t: TFunction<'common'>) => ([
+  { id: 'percent', name: t('admin_external.manage.commission_percent', { ns: 'common' }) },
+  { id: 'value', name: t('admin_external.manage.commission_value', { ns: 'common' }) }
+]);
+
+const Manage = ({ url, t }: Props): JSX.Element => {
+  const params = useParams();
+
+  const provider = String(params.provider);
+
+  usePage('external');
+
+  const navigate = useNavigate();
+
+  const { data, isFetching } = useGetExternalProvider(provider);
+
+  const title = t('admin_external.manage.title', { provider, ns: 'common' });
+
+  useBreadcrumbs(title, [{ name: t('admin_external.browse.title', { ns: 'common' }), url }]);
+
+  const { mutate: Update, isPending: isPendingSave } = usePostExternalProvider(provider);
+
+  const { mutate: Delete, isPending: isPendingDelete } = useDeleteExternalProvider();
+
+  const onSave = (formData: Record<string, any>): void => {
+    Update(formData, {
+      onSuccess: () => {
+        success(t('admin_external.manage.messages.saved', { ns: 'common' }));
+
+        navigate(url);
+      }
+    });
+  };
+
+  const onDelete = (): void => {
+    Delete(provider, {
+      onSuccess: () => {
+        success(t('admin_external.manage.messages.deleted', { ns: 'common' }));
+
+        navigate(url);
+      }
+    });
+  };
+
+  return (
+    <Meta title={ title }>
+      <BackWithTitle title={ title } to={ url } t={ t } />
+
+      <Viewer
+        id={ data?.id ?? 0 }
+        data={ [{
+          label: t('admin_external.manage.status', { ns: 'common' }),
+          name: 'status',
+          type: 'select',
+          value: data?.status ?? 'disabled',
+          values: STATUS_VALUES(t),
+          rules: 'required'
+        }, {
+          label: t('admin_external.manage.mode', { ns: 'common' }),
+          name: 'mode',
+          type: 'select',
+          value: data?.mode ?? 'redirect',
+          values: MODE_VALUES(t),
+          rules: 'required'
+        }, {}, {
+          label: t('admin_external.manage.credentials', { ns: 'common' }),
+          name: 'credentials',
+          type: 'textarea',
+          notice: data?.has_credentials
+            ? t('admin_external.manage.credentials_notice_set', { ns: 'common' })
+            : t('admin_external.manage.credentials_notice_unset', { ns: 'common' })
+        }, {}, {
+          label: t('admin_external.manage.markup_percent', { ns: 'common' }),
+          name: 'markup_percent',
+          type: 'text',
+          value: data?.markup_percent ?? 0,
+          rules: 'required|numeric'
+        }, {
+          label: t('admin_external.manage.markup_fixed', { ns: 'common' }),
+          name: 'markup_fixed',
+          type: 'text',
+          value: data?.markup_fixed ?? 0,
+          rules: 'required|numeric'
+        }, {}, {
+          label: t('admin_external.manage.our_commission_type', { ns: 'common' }),
+          name: 'our_commission_type',
+          type: 'select',
+          value: data?.our_commission?.type ?? 'percent',
+          values: COMMISSION_TYPE_VALUES(t)
+        }, {
+          label: t('admin_external.manage.our_commission_value', { ns: 'common' }),
+          name: 'our_commission_value',
+          type: 'text',
+          value: data?.our_commission?.value ?? 0
+        }, {}, {
+          label: t('admin_external.manage.cache_ttl', { ns: 'common' }),
+          name: 'cache_ttl',
+          type: 'text',
+          value: data?.cache_ttl ?? 300,
+          rules: 'required|numeric'
+        }, {
+          label: t('admin_external.manage.resellable', { ns: 'common' }),
+          name: 'resellable',
+          type: 'select',
+          value: data?.resellable ? 1 : 0,
+          values: getAllowed(t)
+        }] }
+        fetching={ isFetching }
+        pending={ isPendingSave || isPendingDelete }
+        t={ t }
+        actions={
+          data ? ['save', 'delete'] : ['save']
+        }
+        onSave={ onSave }
+        onDelete={ onDelete }
+      />
+    </Meta>
+  );
+};
+
+export default Manage;

package/Stats.tsx

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { Meta, BackWithTitle, Box } from '@autobusal/common';
+import { usePage, useBreadcrumbs } from '@autobusal/hooks';
+import { Table, Filters } from './styles';
+import { useGetExternalStats } from './services';
+
+interface Props {
+  url: string
+  t: TFunction<'common'>
+}
+
+const Stats = ({ url, t }: Props): JSX.Element => {
+  usePage('external');
+
+  useBreadcrumbs(t('admin_external.stats.title', { ns: 'common' }), [{ name: t('admin_external.browse.title', { ns: 'common' }), url }]);
+
+  const [ from, setFrom ] = useState<string>('');
+  const [ to, setTo ] = useState<string>('');
+
+  const { data, isLoading } = useGetExternalStats({ from: from || undefined, to: to || undefined });
+
+  return (
+    <Meta title={ t('admin_external.stats.title', { ns: 'common' }) }>
+      <BackWithTitle title={ t('admin_external.stats.title', { ns: 'common' }) } to={ url } t={ t } />
+
+      <Filters>
+        <div>
+          <label>{ t('admin_external.stats.from', { ns: 'common' }) }</label>
+          <input type="date" value={ from } onChange={ (e) => setFrom(e.target.value) } />
+        </div>
+
+        <div>
+          <label>{ t('admin_external.stats.to', { ns: 'common' }) }</label>
+          <input type="date" value={ to } onChange={ (e) => setTo(e.target.value) } />
+        </div>
+      </Filters>
+
+      { isLoading ? <Box /> : (
+        <div className="box">
+          <Table>
+            <thead>
+              <tr>
+                <th>{ t('admin_external.stats.provider', { ns: 'common' }) }</th>
+                <th>{ t('admin_external.stats.searches', { ns: 'common' }) }</th>
+                <th>{ t('admin_external.stats.results', { ns: 'common' }) }</th>
+                <th>{ t('admin_external.stats.successes', { ns: 'common' }) }</th>
+                <th>{ t('admin_external.stats.avg_duration_ms', { ns: 'common' }) }</th>
+                <th>{ t('admin_external.stats.clicks', { ns: 'common' }) }</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              { data?.map(row => (
+                <tr key={ row.provider }>
+                  <td>{ row.provider }</td>
+                  <td>{ row.searches }</td>
+                  <td>{ row.results }</td>
+                  <td>{ row.successes }</td>
+                  <td>{ row.avg_duration_ms }ms</td>
+                  <td>{ row.clicks }</td>
+                </tr>
+              )) }
+
+              { data?.length === 0 && (
+                <tr>
+                  <td colSpan={ 6 }>{ t('admin_external.stats.empty', { ns: 'common' }) }</td>
+                </tr>
+              ) }
+            </tbody>
+          </Table>
+        </div>
+      ) }
+    </Meta>
+  );
+};
+
+export default Stats;

package/index.ts

@@ -0,0 +1,9 @@
+import Browse from './Browse';
+import Manage from './Manage';
+import Stats from './Stats';
+
+export {
+  Browse,
+  Manage,
+  Stats
+};

package/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@autobusal/admin-external",
+  "version": "1.0.0",
+  "author": "Ferjolt Ozuni",
+  "type": "module",
+  "main": "index.ts"
+}

package/services.ts

@@ -0,0 +1,114 @@
+import { UseMutationResult, UseQueryResult, UseSuspenseQueryResult, useMutation, useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { DropdownData } from '@autobusal/providers/types/other';
+import { ExternalProviderBrowseData, ExternalProviderData, ExternalStatData } from './types';
+
+export const useGetExternalProviders = (): UseQueryResult<ExternalProviderBrowseData> => (
+  useQuery({
+    queryKey: ['admin-external-browse'],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/external/admin/browse')
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const useGetExternalProvider = (provider: string): UseSuspenseQueryResult<ExternalProviderData | null> => (
+  useSuspenseQuery({
+    queryKey: ['admin-external-manage', { provider }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/external/admin/get', { params: { provider } })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+// every provider slug the app knows how to talk to, for the create form's
+// dropdown when landing on a provider that isn't configured yet
+export const useGetAvailableProviders = (): UseQueryResult<DropdownData[]> => (
+  useQuery({
+    queryKey: ['admin-external-providers'],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/external/admin/providers')
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const usePostExternalProvider = (provider: string): UseMutationResult<void, Error, Record<string, any>, unknown> => (
+  useMutation({
+    mutationKey: ['admin-external-save', { provider }],
+    mutationFn: async (data: Record<string, any>) => {
+      const formData = new FormData();
+
+      formData.append('provider', provider);
+
+      Object.keys(data).map(name => {
+        if (name === 'credentials') {
+          // Edited: Ferjolt Ozuni - Date: 2026-07-27
+          // Sent as a flat JSON string (same convention as operators/
+          // external_providers - see Traits\Arrayable::arraySave()), NOT
+          // bracket-notation fields - those broke going through magus's
+          // BFF proxy, which rebuilds the multipart body from $_POST via
+          // curl's array-based CURLOPT_POSTFIELDS and doesn't flatten
+          // nested arrays back into bracket notation (confirmed live: the
+          // backend received the literal string "Array"). AdminController
+          // json_decode()s this string server-side. Leaving it blank keeps
+          // the existing stored credentials untouched.
+          if (data.credentials) {
+            formData.append('credentials', data.credentials);
+          }
+        } else if (data[name] !== undefined && data[name] !== null) {
+          formData.append(name, String(data[name]));
+        }
+      });
+
+      return await apiClient
+        .post('/api/external/admin/update', formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        })
+        .then(response => (
+          response.data
+        ));
+    }
+  })
+);
+
+export const useDeleteExternalProvider = (): UseMutationResult<void, Error, string, unknown> => (
+  useMutation({
+    mutationKey: ['admin-external-delete'],
+    mutationFn: async (provider: string) => (
+      await apiClient
+        .delete('/api/external/admin/delete', {
+          params: { provider }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const useGetExternalStats = (params: { from?: string, to?: string }): UseQueryResult<ExternalStatData[]> => (
+  useQuery({
+    queryKey: ['admin-external-stats', params],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/external/admin/stats', { params })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/styles.ts

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+export const Table = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+
+  th, td {
+    text-align: left;
+    padding: 10px 12px;
+    border-bottom: 1px solid ${ props => props.theme.primary.neutral };
+  }
+
+  th {
+    font-size: ${ props => props.theme.size.sm };
+    color: ${ props => props.theme.font.faded };
+  }
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  gap: 10px;
+`;
+
+export const SectionTitle = styled.h2`
+  margin: 25px 0 10px;
+`;
+
+export const AvailableList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+export const AvailableLink = styled(Link)`
+  color: ${ props => props.theme.primary.normal };
+`;
+
+export const TopActions = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 15px;
+`;
+
+export const Filters = styled.div`
+  display: flex;
+  gap: 15px;
+  align-items: flex-end;
+  margin-bottom: 20px;
+
+  input {
+    padding: 8px 10px;
+    border-radius: 6px;
+  }
+`;

package/types.ts

@@ -0,0 +1,34 @@
+export interface ExternalProviderData {
+  id: number
+  label_id: number
+  provider: string
+  status: 'disabled' | 'dedicated' | 'main'
+  mode: 'redirect' | 'booking'
+  has_credentials: boolean
+  our_commission?: { type: 'percent' | 'value', value: number }
+  markup_percent: number
+  markup_fixed: number
+  cache_ttl: number
+  resellable: boolean
+  created_at: string
+  updated_at: string
+}
+
+export interface ExternalProviderAvailable {
+  provider: string
+  name: string
+}
+
+export interface ExternalProviderBrowseData {
+  providers: ExternalProviderData[]
+  available: ExternalProviderAvailable[]
+}
+
+export interface ExternalStatData {
+  provider: string
+  searches: number
+  results: number
+  successes: number
+  avg_duration_ms: number
+  clicks: number
+}