@autobusal/account-transactions 1.0.0

package/Browse/Admin.tsx

@@ -0,0 +1,95 @@
+import { useSearchParams } from 'react-router-dom';
+import { TFunction } from 'i18next';
+import { Meta, Table, Row } from '@autobusal/common';
+import { usePage } from '@autobusal/hooks';
+import { getParams } from '@autobusal/utilities';
+import Information from '../Information';
+import { GetTransactions } from '../services';
+
+interface Props {
+  url: string
+  t: TFunction<'common'>
+}
+
+const Admin = ({ url, t }: Props): JSX.Element => {
+  const [ searchParams ] = useSearchParams();
+
+  usePage('transactions');
+
+  const { data, isLoading, isFetching } = GetTransactions(getParams(searchParams, ['page', 'sort', 'order', 'q', 'id']));
+
+  const rows = data?.data.map(item => (
+    <Row
+      key={ item.id }
+      id={ item.id }
+      data={ [
+        <Information key={ item.id } item={ item } t={ t } />,
+        item.from?.name ?? t('data.user_types.system', { ns: 'common' }),
+        item.to?.name ?? t('data.user_types.system', { ns: 'common' }),
+        t(`data.transaction_types.${ item.type }`, { ns: 'common' }),
+        item.amount_display,
+        t(`data.transaction_status.${ item.status }`, { ns: 'common' }),
+        item.updated_at
+      ] }
+    />
+  ));
+
+  return (
+    <Meta title={ t('transactions.browse.title', { ns: 'common' }) }>
+      <h1>{ t('transactions.browse.title', { ns: 'common' }) }</h1>
+
+      <Table
+        url={ url }
+        columns={ [{
+          name: t('transactions.browse.information', { ns: 'common' }),
+          width: 21,
+          slug: 'public',
+          type: 'az'
+        }, {
+          name: t('transactions.browse.from', { ns: 'common' }),
+          width: 15,
+          slug: 'from',
+          type: 'az'
+        }, {
+          name: t('transactions.browse.to', { ns: 'common' }),
+          width: 15,
+          slug: 'to',
+          type:'az',
+        }, {
+          name: t('transactions.browse.type', { ns: 'common' }),
+          width: 10,
+          slug: 'type',
+          type: 'az'
+        }, {
+          name: t('transactions.browse.amount', { ns: 'common' }),
+          width: 9,
+          slug: 'amount'
+        }, {
+          name: t('transactions.browse.status', { ns: 'common' }),
+          width: 8,
+          slug: 'status',
+          type: 'az'
+        }, {
+          name: t('transactions.browse.date', { ns: 'common' }),
+          slug: 'updated_at',
+          width: 12
+        }] }
+        rows={ rows }
+        pages={ data }
+        sorting={ {
+          slug: 'updated_at',
+          order: 'desc'
+        } }
+        search={ searchParams.get('q') }
+        loading={ isLoading }
+        fetching={ isFetching }
+        t={ t }
+        actions={ [
+          'search', 'update'
+        ] }
+      />
+    </Meta>
+  );
+};
+
+export default Admin;

package/Browse/Browse.tsx

@@ -0,0 +1,19 @@
+import { TFunction } from 'i18next';
+import Admin from './Admin';
+import Simple from './Simple';
+
+interface Props {
+  type?: string
+  url: string
+  t: TFunction<'common'>
+}
+
+const Browse = ({ type, url, t }: Props): JSX.Element => {
+  if (type === 'admin' || type === 'financer') {
+    return <Admin url={ url } t={ t } />;
+  }
+
+  return <Simple url={ url } t={ t } />;
+};
+
+export default Browse;

package/Browse/Simple.tsx

@@ -0,0 +1,89 @@
+import { useSearchParams } from 'react-router-dom';
+import { TFunction } from 'i18next';
+import { Meta, Table, Row } from '@autobusal/common';
+import { usePage } from '@autobusal/hooks';
+import { getParams } from '@autobusal/utilities';
+import Information from '../Information';
+import { GetTransactions } from '../services';
+
+interface Props {
+  url: string
+  t: TFunction<'common'>
+}
+
+const Simple = ({ url, t }: Props): JSX.Element => {
+  const [ searchParams ] = useSearchParams();
+
+  usePage('transactions');
+
+  const { data, isLoading, isFetching } = GetTransactions(getParams(searchParams, ['page', 'sort', 'order', 'q']));
+
+  const rows = data?.data.map(item => (
+    <Row
+      key={ item.id }
+      id={ item.id }
+      data={ [
+        <Information key={ item.id } item={ item } t={ t } />,
+        item.from?.name ?? t('data.user_types.system', { ns: 'common' }),
+        t(`data.transaction_types.${ item.type }`, { ns: 'common' }),
+        item.amount_display,
+        t(`data.transaction_status.${ item.status }`, { ns: 'common' }),
+        item.updated_at
+      ] }
+    />
+  ));
+
+  return (
+    <Meta title={ t('transactions.browse.title', { ns: 'common' }) }>
+      <h1>{ t('transactions.browse.title', { ns: 'common' }) }</h1>
+
+      <Table
+        url={ url }
+        columns={ [{
+          name: t('transactions.browse.information', { ns: 'common' }),
+          width: 30,
+          slug: 'public',
+          type: 'az'
+        }, {
+          name: t('transactions.browse.from', { ns: 'common' }),
+          width: 15,
+          slug: 'from',
+          type: 'az'
+        }, {
+          name: t('transactions.browse.type', { ns: 'common' }),
+          width: 10,
+          slug: 'type',
+          type: 'az'
+        }, {
+          name: t('transactions.browse.amount', { ns: 'common' }),
+          width: 10,
+          slug: 'amount'
+        }, {
+          name: t('transactions.browse.status', { ns: 'common' }),
+          width: 13,
+          slug: 'status',
+          type: 'az'
+        }, {
+          name: t('transactions.browse.date', { ns: 'common' }),
+          slug: 'updated_at',
+          width: 12
+        }] }
+        rows={ rows }
+        pages={ data }
+        sorting={ {
+          slug: 'updated_at',
+          order: 'desc'
+        } }
+        search={ searchParams.get('q') }
+        loading={ isLoading }
+        fetching={ isFetching }
+        t={ t }
+        actions={ [
+          'search', 'view'
+        ] }
+      />
+    </Meta>
+  );
+};
+
+export default Simple;

package/Information.tsx

@@ -0,0 +1,22 @@
+import { TFunction } from 'i18next';
+import { getText } from './utilities';
+import { TransactionData } from '@autobusal/providers/types/account';
+
+interface Props {
+  item: TransactionData
+  t: TFunction<'common'>
+}
+
+const Information = ({ item, t }: Props): JSX.Element => (
+  <>
+    { getText(item.public_display, t) }
+
+    { item.private && (
+      <div className="row-data">
+        <strong>{ t('transactions.browse.private', { ns: 'common' }) }</strong>: { item.private }
+      </div>
+    ) }
+  </>
+);
+
+export default Information;

package/Manage/Admin.tsx

@@ -0,0 +1,113 @@
+import { TFunction } from 'i18next';
+import { useNavigate, useParams, Navigate } from 'react-router-dom';
+import { Meta, BackWithTitle, Viewer } from '@autobusal/common';
+import { usePage } from '@autobusal/hooks';
+import { success } from '@autobusal/utilities';
+import { getText, getStatuses } from '../utilities';
+import { TransactionData } from '@autobusal/providers/types/account';
+import { GetTransaction, PostTransaction } from '../services';
+
+interface Props {
+  url: string
+  t: TFunction<'common'>
+}
+
+const Admin = ({ url, t }: Props): JSX.Element => {
+  const params = useParams();
+
+  const id = Number(params.id);
+
+  usePage('transactions');
+
+  const navigate = useNavigate();
+
+  const { data } = GetTransaction(id);
+
+  const { mutate: Update, isPending } = PostTransaction(id);
+
+  if (id === 0) {
+    return <Navigate to={ url } />;
+  }
+
+  const onSave = (data: TransactionData): void => {
+    Update(data, {
+      onSuccess: () => {
+        success(t('transactions.manage.messages.saved', { ns: 'common' }));
+
+        navigate(url);
+      }
+    });
+  };
+  
+  const title = t('transactions.manage.title', { id: data?.id, ns: 'common' });
+
+  return (
+    <Meta title={ title }>
+      <BackWithTitle title={ title } to={ url } t={ t } />
+
+      <Viewer
+        id={ id }
+        data={ [{
+          label: t('transactions.manage.information', { ns: 'common' }),
+          type: 'display',
+          name: 'public',
+          value: getText((data?.public_display ?? []), t)
+        }, {}, {
+          label: t('transactions.manage.from', { ns: 'common' }),
+          type: 'display',
+          name: 'from',
+          value: data?.from?.name ?? t('data.user_types.system', { ns: 'common' }),
+        }, {
+          label: t('transactions.manage.to', { ns: 'common' }),
+          type: 'display',
+          name: 'to',
+          value: data?.to?.name ?? t('data.user_types.system', { ns: 'common' }),
+        }, {}, {
+          label: t('transactions.manage.amount', { ns: 'common' }),
+          type: 'display',
+          name: 'amount',
+          value: data?.amount_display
+        }, {
+          label: t('transactions.manage.paid', { ns: 'common' }),
+          type: 'display',
+          name: 'paid_date',
+          value: data?.paid_date ?? '-'
+        }, {}, {
+          label: t('transactions.manage.type', { ns: 'common' }),
+          type: 'display',
+          name: 'type',
+          value: t(`data.transaction_types.${ data?.type }`, { ns: 'common' })
+        }, {
+          label: t('transactions.manage.status', { ns: 'common' }),
+          name: 'status',
+          type: 'select',
+          value: data?.status,
+          values: getStatuses(t)
+        }, {
+          label: t('transactions.manage.date', { ns: 'common' }),
+          type: 'display',
+          name: 'updated_at',
+          value: data?.updated_at
+        }, {}, {
+          label: t('transactions.manage.private', { ns: 'common' }),
+          type: 'display',
+          name: 'private',
+          value: data?.private
+        }, {}, {
+          label: t('transactions.manage.comment', { ns: 'common' }),
+          name: 'comment',
+          type: 'textarea',
+          value: data?.comment
+        }] }
+        pending={ isPending }
+        t={ t }
+        actions={ [
+          'update'
+        ]}
+        onSave={ onSave }
+      />
+    </Meta>
+  );
+};
+
+export default Admin;

package/Manage/Manage.tsx

@@ -0,0 +1,19 @@
+import { TFunction } from 'i18next';
+import Admin from './Admin';
+import Simple from './Simple';
+
+interface Props {
+  type?: string
+  url: string
+  t: TFunction<'common'>
+}
+
+const Manage = ({ type, url, t }: Props): JSX.Element => {
+  if (type === 'admin' || type === 'financer') {
+    return <Admin url={ url } t={ t } />;
+  }
+
+  return <Simple url={ url } t={ t } />
+};
+
+export default Manage;

package/Manage/Simple.tsx

@@ -0,0 +1,90 @@
+import { TFunction } from 'i18next';
+import { useNavigate, useParams, Navigate } from 'react-router-dom';
+import { Meta, BackWithTitle, Viewer } from '@autobusal/common';
+import { usePage } from '@autobusal/hooks';
+import { success } from '@autobusal/utilities';
+import { getText } from '../utilities';
+import { TransactionData } from '@autobusal/providers/types/account';
+import { GetTransaction, PostTransaction } from '../services';
+
+interface Props {
+  url: string
+  t: TFunction<'common'>
+}
+
+const Simple = ({ url, t }: Props): JSX.Element => {
+  const params = useParams();
+
+  const id = Number(params.id);
+
+  usePage('transactions');
+
+  const navigate = useNavigate();
+
+  const { data } = GetTransaction(id);
+
+  const { mutate: Update, isPending } = PostTransaction(id);
+
+  if (id === 0) {
+    return <Navigate to={ url } />;
+  }
+
+  const onSave = (data: TransactionData): void => {
+    Update(data, {
+      onSuccess: () => {
+        success(t('transactions.manage.messages.saved', { ns: 'common' }));
+
+        navigate(url);
+      }
+    });
+  };
+  
+  const title = t('transactions.manage.title', { id: data?.id, ns: 'common' });
+
+  return (
+    <Meta title={ title }>
+      <BackWithTitle title={ title } to={ url } t={ t } />
+
+      <Viewer
+        id={ id }
+        data={ [{
+          label: t('transactions.manage.information', { ns: 'common' }),
+          type: 'display',
+          name: 'public',
+          value: getText((data?.public_display ?? []), t)
+        }, {
+          label: t('transactions.manage.from', { ns: 'common' }),
+          type: 'display',
+          name: 'from',
+          value: data?.from?.name ?? t('data.user_types.system', { ns: 'common' }),
+        }, {}, {
+          label: t('transactions.manage.amount', { ns: 'common' }),
+          type: 'display',
+          name: 'amount',
+          value: data?.amount_display
+        }, {
+          label: t('transactions.manage.paid', { ns: 'common' }),
+          type: 'display',
+          name: 'paid_date',
+          value: data?.paid_date ?? '-'
+        }, {}, {
+          label: t('transactions.manage.type', { ns: 'common' }),
+          type: 'display',
+          name: 'type',
+          value: t(`data.transaction_types.${ data?.type }`)
+        }, {
+          label: t('transactions.manage.status', { ns: 'common' }),
+          name: 'status',
+          type: 'display',
+          value: t(`data.transaction_status.${ data?.status }`)
+        }] }
+        pending={ isPending }
+        t={ t }
+        actions={ [] }
+        onSave={ onSave }
+      />
+    </Meta>
+  );
+};
+
+export default Simple;

package/index.ts

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

package/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@autobusal/account-transactions",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.ts"
+}

package/services.ts

@@ -0,0 +1,49 @@
+import { UseMutationResult, UseQueryResult, UseSuspenseQueryResult, useMutation, useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { PaginationData } from '@autobusal/providers/types/pagination';
+import { TransactionData } from '@autobusal/providers/types/account';
+import { TableParamsData } from '@autobusal/providers/types/other';
+
+export const GetTransactions = (params: TableParamsData): UseQueryResult<PaginationData<TransactionData>> => (
+  useQuery({
+    queryKey: ['account-transactions', params],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/transactions/account/browse', { params })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const GetTransaction = (id: number): UseSuspenseQueryResult<TransactionData> => (
+  useSuspenseQuery({
+    queryKey: ['account-transactions-manage', { id }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/transactions/account/get', {
+          params: { id }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const PostTransaction = (id: number): UseMutationResult<void, Error, TransactionData, unknown> => (
+  useMutation({
+    mutationKey: ['account-transactions-save', { id }],
+    mutationFn: async (data: TransactionData) => (
+      await apiClient
+        .post('/api/transactions/account/update', {
+          ...data,
+          id
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/utilities.ts

@@ -0,0 +1,20 @@
+import { TFunction } from 'i18next';
+import { DropdownData } from '@autobusal/providers/types/other';
+
+export const getText = (information: string[], t: TFunction<'common'>): string => {
+  if (information.length > 1) {
+    return t(`data.transactions.${ information[0] }`, { id: information[1], ns: 'common' });
+  }
+
+  return information[0];
+};
+
+export const getStatuses = (t: TFunction<'common'>): DropdownData[] => ([
+  {
+    name: t('data.transaction_status.paid', { ns: 'common' }),
+    id: 'paid'
+  }, {
+    name: t('data.transaction_status.credit', { ns: 'common' }),
+    id: 'credit'
+  }
+]);