@autobusal/admin-api-consumers 1.0.0

package/Browse.tsx

@@ -0,0 +1,93 @@
+import { TFunction } from 'i18next';
+import { useSearchParams } from 'react-router-dom';
+import { Meta, Table, Row } from '@autobusal/common';
+import { usePage, useBreadcrumbs } from '@autobusal/hooks';
+import { DisplayStatus, getParams, success } from '@autobusal/utilities';
+import { useGetApiConsumers, useDeleteApiConsumer } from './services';
+
+interface Props {
+  url: string
+  t: TFunction<'common'>
+}
+
+const Browse = ({ url, t }: Props): JSX.Element => {
+  const [ searchParams ] = useSearchParams();
+
+  usePage('api_consumers');
+
+  useBreadcrumbs(t('admin_api_consumers.browse.title', { ns: 'common' }));
+
+  const { data, isLoading, isFetching, refetch } = useGetApiConsumers(getParams(searchParams, ['page', 'sort', 'order', 'q']));
+
+  const { mutate: Delete } = useDeleteApiConsumer();
+
+  const onDelete = (id: number): void => {
+    Delete(id, {
+      onSuccess: () => {
+        success(t('admin_api_consumers.manage.messages.deleted', { ns: 'common' }));
+
+        refetch();
+      }
+    });
+  };
+
+  const rows = data?.data.map(item => (
+    <Row
+      key={ item.id }
+      id={ item.id }
+      data={ [
+        item.company,
+        item.user.email,
+        item.operators.includes('all') ? t('admin_api_consumers.browse.all_operators', { ns: 'common' }) : String(item.operators.length),
+        item.external_providers.length > 0 ? item.external_providers.join(', ') : '-',
+        DisplayStatus(item.user.status, t)
+      ] }
+    />
+  ));
+
+  return (
+    <Meta title={ t('admin_api_consumers.browse.title', { ns: 'common' }) }>
+      <h1>{ t('admin_api_consumers.browse.title', { ns: 'common' }) }</h1>
+
+      <Table
+        url={ url }
+        columns={ [{
+          name: t('admin_api_consumers.browse.company', { ns: 'common' }),
+          width: 25,
+          slug: 'company',
+          type: 'az'
+        }, {
+          name: t('admin_api_consumers.browse.email', { ns: 'common' }),
+          width: 25
+        }, {
+          name: t('admin_api_consumers.browse.operators', { ns: 'common' }),
+          width: 18
+        }, {
+          name: t('admin_api_consumers.browse.external_providers', { ns: 'common' }),
+          width: 18
+        }, {
+          name: t('admin_api_consumers.browse.status', { ns: 'common' }),
+          width: 14
+        }] }
+        rows={ rows }
+        pages={ data }
+        sorting={ {
+          slug: 'company',
+          order: 'asc'
+        } }
+        search={ searchParams.get('q') }
+        loading={ isLoading }
+        fetching={ isFetching }
+        t={ t }
+        actions={ [
+          'create', 'search', 'view', 'delete'
+        ] }
+        handlers={ {
+          delete: onDelete
+        } }
+      />
+    </Meta>
+  );
+};
+
+export default Browse;

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Changelog
+
+All notable changes to `@autobusal/admin-api-consumers` 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 GUI for third-party API Consumers (agent-type
+  users authenticating with a Sanctum token against `/api/partners/*`),
+  replacing the artisan-only `make:user_api` command (obtapi
+  `App\Http\Controllers\ApiConsumers\AdminController`). Create with
+  one-time token reveal, edit company/status/operators allowlist/external-
+  providers allowlist/commission rates, enable-disable without touching
+  the token, revoke, and regenerate (old token invalidated, new one
+  revealed once). Deliberately relaxed validation vs the regular agents
+  admin - no nipt/license/address/mobile/subscription required, since an
+  API consumer has no storefront presence.

package/Manage.tsx

@@ -0,0 +1,178 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Meta, BackWithTitle, Viewer, Box } from '@autobusal/common';
+import { usePage, useBreadcrumbs, useOperators } from '@autobusal/hooks';
+import { GetStatus, getAllowed, success } from '@autobusal/utilities';
+import { useGetApiConsumer, usePostApiConsumer, useDeleteApiConsumer, useGetProviders } from './services';
+import TokenManager from './TokenManager';
+import TokenRevealModal from './TokenRevealModal';
+
+interface Props {
+  url: string
+  t: TFunction<'common'>
+}
+
+const Manage = ({ url, t }: Props): JSX.Element => {
+  const params = useParams();
+
+  const id = Number(params.id);
+
+  usePage('api_consumers');
+
+  const navigate = useNavigate();
+
+  const [ revealToken, setRevealToken ] = useState<string | null>(null);
+
+  const operators = useOperators();
+
+  const { data: providers, isLoading: isLoadingProviders } = useGetProviders();
+
+  const { data, isFetching } = useGetApiConsumer(id);
+
+  const title = id > 0 ? t('admin_api_consumers.manage.title.update', { company: data?.company, ns: 'common' }) : t('admin_api_consumers.manage.title.new', { ns: 'common' });
+
+  useBreadcrumbs(title, [{ name: t('admin_api_consumers.browse.title', { ns: 'common' }), url }]);
+
+  const { mutate: Update, isPending: isPendingSave } = usePostApiConsumer(id);
+
+  const { mutate: Delete, isPending: isPendingDelete } = useDeleteApiConsumer();
+
+  if (isLoadingProviders) {
+    return <Box />;
+  }
+
+  const onSave = (formData: Record<string, any>): void => {
+    Update(formData, {
+      onSuccess: (response) => {
+        success(t('admin_api_consumers.manage.messages.saved', { ns: 'common' }));
+
+        // one-time token reveal on create - hold the navigation until the
+        // admin has seen/copied it, since it can never be shown again
+        if (response.api_token) {
+          setRevealToken(response.api_token);
+
+          return;
+        }
+
+        navigate(url);
+      }
+    });
+  };
+
+  const onDelete = (): void => {
+    Delete(id, {
+      onSuccess: () => {
+        success(t('admin_api_consumers.manage.messages.deleted', { ns: 'common' }));
+
+        navigate(url);
+      }
+    });
+  };
+
+  return (
+    <Meta title={ title }>
+      <BackWithTitle title={ title } to={ url } t={ t } />
+
+      <Viewer
+        id={ id }
+        data={ [{
+          label: t('admin_api_consumers.manage.company', { ns: 'common' }),
+          name: 'company',
+          type: 'text',
+          value: data?.company,
+          rules: 'required|min_length:2|max_length:255'
+        }, {}, {
+          label: t('admin_api_consumers.manage.email', { ns: 'common' }),
+          name: 'email',
+          type: 'email',
+          value: data?.user.email,
+          rules: id === 0 ? 'required' : undefined
+        }, {
+          label: t('admin_api_consumers.manage.password', { ns: 'common' }),
+          name: 'password',
+          type: 'password',
+          rules: id === 0 ? 'required|min_length:6' : undefined
+        }, {}, {
+          label: t('admin_api_consumers.manage.operators', { ns: 'common' }),
+          name: 'operators',
+          type: 'checkbox-list-all',
+          selected: data?.operators,
+          values: operators
+        }, {
+          label: t('admin_api_consumers.manage.external_providers', { ns: 'common' }),
+          name: 'external_providers',
+          type: 'checkbox-list-all',
+          selected: data?.external_providers,
+          values: providers
+        }, {}, {
+          label: t('admin_api_consumers.manage.departure', { ns: 'common' }),
+          name: 'departure',
+          type: 'text',
+          value: data?.user.comissions?.departure_edit
+        }, {
+          label: t('admin_api_consumers.manage.departure_self', { ns: 'common' }),
+          name: 'departure_self',
+          type: 'text',
+          value: data?.user.comissions?.departure_self_edit
+        }, {}, {
+          label: t('admin_api_consumers.manage.return', { ns: 'common' }),
+          name: 'return',
+          type: 'text',
+          value: data?.user.comissions?.return_edit
+        }, {
+          label: t('admin_api_consumers.manage.return_self', { ns: 'common' }),
+          name: 'return_self',
+          type: 'text',
+          value: data?.user.comissions?.return_self_edit
+        }, {}, {
+          label: t('admin_api_consumers.manage.unique', { ns: 'common' }),
+          name: 'unique',
+          type: 'select',
+          value: data?.user.comissions?.unique ?? 0,
+          values: getAllowed(t)
+        }, {
+          label: t('admin_api_consumers.manage.status', { ns: 'common' }),
+          name: 'status',
+          type: 'select',
+          value: data?.user.status ?? 1,
+          values: GetStatus(t)
+        }, {}, ...(id > 0 ? [{
+          label: t('admin_api_consumers.manage.token', { ns: 'common' }),
+          name: 'token_manager',
+          type: 'component' as const,
+          value: (
+            <TokenManager
+              id={ id }
+              hasToken={ data?.user.api?.has_token ?? false }
+              enabled={ data?.user.api?.api ?? 0 }
+              t={ t }
+            />
+          )
+        }] : [])] }
+        fetching={ isFetching }
+        pending={ isPendingSave || isPendingDelete }
+        t={ t }
+        actions={
+          id > 0 ? ['save', 'delete'] : ['save']
+        }
+        onSave={ onSave }
+        onDelete={ onDelete }
+      />
+
+      { revealToken && (
+        <TokenRevealModal
+          token={ revealToken }
+          t={ t }
+          onClose={ () => {
+            setRevealToken(null);
+
+            navigate(url);
+          } }
+        />
+      ) }
+    </Meta>
+  );
+};
+
+export default Manage;

package/TokenManager.tsx

@@ -0,0 +1,105 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { FiRefreshCw, FiSlash } from 'react-icons/fi';
+import { Button } from '@autobusal/common';
+import { success } from '@autobusal/utilities';
+import { TokenStatus, TokenActions } from './styles';
+import TokenRevealModal from './TokenRevealModal';
+import { useToggleApiConsumer, useRevokeApiConsumerToken, useRegenerateApiConsumerToken } from './services';
+
+interface Props {
+  id: number
+  hasToken: boolean
+  enabled: number
+  t: TFunction<'common'>
+}
+
+// Edited: Ferjolt Ozuni - Date: 2026-07-27
+// Embedded widget (same convention as ApiDetails/IpLogs in the shared
+// agents-manage form) for the token lifecycle - kept separate from the
+// main Viewer save action since these are immediate, independent
+// operations (toggling/revoking/regenerating shouldn't require also
+// saving the rest of the form).
+const TokenManager = ({ id, hasToken, enabled, t }: Props): JSX.Element => {
+  const [ reveal, setReveal ] = useState<string | null>(null);
+
+  const { mutate: Toggle, isPending: isPendingToggle } = useToggleApiConsumer();
+  const { mutate: Revoke, isPending: isPendingRevoke } = useRevokeApiConsumerToken();
+  const { mutate: Regenerate, isPending: isPendingRegenerate } = useRegenerateApiConsumerToken();
+
+  const onToggle = (): void => {
+    Toggle({ id, api: enabled === 1 ? 0 : 1 }, {
+      onSuccess: () => success(t('admin_api_consumers.token.messages.updated', { ns: 'common' }))
+    });
+  };
+
+  const onRevoke = (): void => {
+    if (!window.confirm(t('admin_api_consumers.token.confirm_revoke', { ns: 'common' }))) {
+      return;
+    }
+
+    Revoke(id, {
+      onSuccess: () => success(t('admin_api_consumers.token.messages.revoked', { ns: 'common' }))
+    });
+  };
+
+  const onRegenerate = (): void => {
+    if (hasToken && !window.confirm(t('admin_api_consumers.token.confirm_regenerate', { ns: 'common' }))) {
+      return;
+    }
+
+    Regenerate(id, {
+      onSuccess: (data) => setReveal(data.api_token)
+    });
+  };
+
+  return (
+    <>
+      <TokenStatus>
+        { hasToken
+          ? t('admin_api_consumers.token.has_token', { ns: 'common' })
+          : t('admin_api_consumers.token.no_token', { ns: 'common' }) }
+
+        <Button
+          type="button"
+          size="small"
+          subtype={ enabled === 1 ? 'delete' : undefined }
+          noMargin
+          loading={ isPendingToggle }
+          text={ t(enabled === 1 ? 'admin_api_consumers.token.disable' : 'admin_api_consumers.token.enable', { ns: 'common' }) }
+          onClick={ onToggle }
+        />
+      </TokenStatus>
+
+      <TokenActions>
+        <Button
+          type="button"
+          size="small"
+          subtype="secondary"
+          noMargin
+          loading={ isPendingRegenerate }
+          text={ <><FiRefreshCw /> { t('admin_api_consumers.token.regenerate', { ns: 'common' }) }</> }
+          onClick={ onRegenerate }
+        />
+
+        { hasToken && (
+          <Button
+            type="button"
+            size="small"
+            subtype="delete"
+            noMargin
+            loading={ isPendingRevoke }
+            text={ <><FiSlash /> { t('admin_api_consumers.token.revoke', { ns: 'common' }) }</> }
+            onClick={ onRevoke }
+          />
+        ) }
+      </TokenActions>
+
+      { reveal && (
+        <TokenRevealModal token={ reveal } t={ t } onClose={ () => setReveal(null) } />
+      ) }
+    </>
+  );
+};
+
+export default TokenManager;

package/TokenRevealModal.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { FiCopy, FiCheck } from 'react-icons/fi';
+import { Modal, Button } from '@autobusal/common';
+import { TokenBox, TokenValue } from './styles';
+
+interface Props {
+  token: string
+  t: TFunction<'common'>
+  onClose: () => void
+}
+
+// Edited: Ferjolt Ozuni - Date: 2026-07-27
+// One-time token reveal - nothing in this codebase re-displays a Sanctum
+// token after creation (obtapi never re-selects `users_api.token`), so
+// this is the ONLY place a consumer's token is ever shown. Closing this
+// modal without copying it means it's gone for good (regenerate is the
+// only recovery).
+const TokenRevealModal = ({ token, t, onClose }: Props): JSX.Element => {
+  const [ copied, setCopied ] = useState<boolean>(false);
+
+  const onCopy = (): void => {
+    navigator.clipboard.writeText(token).then(() => {
+      setCopied(true);
+    });
+  };
+
+  return (
+    <Modal
+      width={ 600 }
+      title={ t('admin_api_consumers.token.reveal.title', { ns: 'common' }) }
+      content={
+        <>
+          <p>{ t('admin_api_consumers.token.reveal.notice', { ns: 'common' }) }</p>
+
+          <TokenBox>
+            <TokenValue>{ token }</TokenValue>
+
+            <Button
+              type="button"
+              size="small"
+              subtype="secondary"
+              noMargin
+              text={
+                <>
+                  { copied ? <FiCheck /> : <FiCopy /> }
+                  { t(copied ? 'admin_api_consumers.token.reveal.copied' : 'admin_api_consumers.token.reveal.copy', { ns: 'common' }) }
+                </>
+              }
+              onClick={ onCopy }
+            />
+          </TokenBox>
+
+          <Button
+            type="button"
+            size="medium"
+            text={ t('admin_api_consumers.token.reveal.done', { ns: 'common' }) }
+            onClick={ onClose }
+          />
+        </>
+      }
+      onClose={ onClose }
+    />
+  );
+};
+
+export default TokenRevealModal;

package/index.ts

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

package/package.json

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

package/services.ts

@@ -0,0 +1,146 @@
+import { UseMutationResult, UseQueryResult, UseSuspenseQueryResult, useMutation, useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { PaginationData } from '@autobusal/providers/types/pagination';
+import { TableParamsData } from '@autobusal/providers/types/other';
+import { DropdownData } from '@autobusal/providers/types/other';
+import { ApiConsumerData } from './types';
+
+export const useGetApiConsumers = (params: TableParamsData): UseQueryResult<PaginationData<ApiConsumerData>> => (
+  useQuery({
+    queryKey: ['admin-api-consumers', params],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/api_consumers/admin/browse', { params })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const useGetApiConsumer = (id: number): UseSuspenseQueryResult<ApiConsumerData | null> => (
+  useSuspenseQuery({
+    queryKey: ['admin-api-consumers-manage', { id }],
+    queryFn: async () => {
+      if (id === 0) {
+        return null;
+      }
+
+      return await apiClient
+        .get('/api/api_consumers/admin/get', {
+          params: { id }
+        })
+        .then(response => (
+          response.data
+        ));
+    }
+  })
+);
+
+// the source for the external_providers allowlist checkbox list - every
+// provider slug the app knows how to talk to (Libraries\External\Registry::available())
+export const useGetProviders = (): UseQueryResult<DropdownData[]> => (
+  useQuery({
+    queryKey: ['admin-api-consumers-providers'],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/external/admin/providers')
+        .then(response => (
+          response.data.map((item: { id: string, name: string }) => ({ id: item.id, name: item.name }))
+        ))
+    )
+  })
+);
+
+// Edited: Ferjolt Ozuni - Date: 2026-07-27
+// The backend returns `api_token`, not `token` - magus's BFF proxy
+// (public/bff/index.php) treats ANY top-level `token` key on a
+// /bff/api/... response as a fresh session auth token to store server-side
+// and strip from the response, with no notion of whose token it is. A
+// plain `token` here would silently hijack the ADMIN'S OWN session onto
+// the newly-created API consumer's identity (confirmed live during
+// testing). Do not rename this back to `token` without fixing the BFF.
+export const usePostApiConsumer = (id: number): UseMutationResult<{ api_token: string | null }, Error, Record<string, any>, unknown> => (
+  useMutation({
+    mutationKey: ['admin-api-consumers-save', { id }],
+    mutationFn: async (data: Record<string, any>) => {
+      const formData = new FormData();
+
+      if (id > 0) {
+        formData.append('id', String(id));
+      }
+
+      Object.keys(data).map(name => {
+        if (name === 'operators' || name === 'external_providers') {
+          formData.append(name, JSON.stringify(data[name]));
+        } else if (data[name] !== undefined && data[name] !== null) {
+          formData.append(name, String(data[name]));
+        }
+      });
+
+      return await apiClient
+        .post('/api/api_consumers/admin/update', formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        })
+        .then(response => (
+          response.data
+        ));
+    }
+  })
+);
+
+export const useDeleteApiConsumer = (): UseMutationResult<void, Error, number, unknown> => (
+  useMutation({
+    mutationKey: ['admin-api-consumers-delete'],
+    mutationFn: async (id: number) => (
+      await apiClient
+        .delete('/api/api_consumers/admin/delete', {
+          params: { id }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const useToggleApiConsumer = (): UseMutationResult<void, Error, { id: number, api: number }, unknown> => (
+  useMutation({
+    mutationKey: ['admin-api-consumers-toggle'],
+    mutationFn: async ({ id, api }: { id: number, api: number }) => (
+      await apiClient
+        .post('/api/api_consumers/admin/toggle', { id, api })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const useRevokeApiConsumerToken = (): UseMutationResult<void, Error, number, unknown> => (
+  useMutation({
+    mutationKey: ['admin-api-consumers-revoke'],
+    mutationFn: async (id: number) => (
+      await apiClient
+        .post('/api/api_consumers/admin/revoke', { id })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const useRegenerateApiConsumerToken = (): UseMutationResult<{ api_token: string }, Error, number, unknown> => (
+  useMutation({
+    mutationKey: ['admin-api-consumers-regenerate'],
+    mutationFn: async (id: number) => (
+      await apiClient
+        .post('/api/api_consumers/admin/regenerate', { id })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/styles.ts

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+export const TokenBox = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 15px 0;
+  padding: 12px 15px;
+  background: ${ props => props.theme.primary.neutral };
+  border-radius: 8px;
+`;
+
+export const TokenValue = styled.code`
+  flex: 1;
+  font-family: monospace;
+  font-size: ${ props => props.theme.size.sm };
+  word-break: break-all;
+  color: ${ props => props.theme.font.normal };
+`;
+
+export const TokenStatus = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+`;
+
+export const TokenActions = styled.div`
+  display: flex;
+  gap: 10px;
+`;

package/types.ts

@@ -0,0 +1,19 @@
+import { ComissionData } from '@autobusal/providers/types/users';
+
+export interface ApiConsumerData {
+  id: number
+  company: string
+  operators: (number | string)[]
+  external_providers: (number | string)[]
+  is_api_consumer: boolean
+  user: {
+    id: number
+    email: string
+    status: number
+    comissions?: ComissionData
+    api?: {
+      api: number
+      has_token: boolean
+    }
+  }
+}