@autobusal/account-transactions 1.3.0 → 1.3.1

package/Browse/Admin.tsx

@@ -4,6 +4,8 @@ import { Meta, Table, Row } from '@autobusal/common';
 import { usePage, useBreadcrumbs } from '@autobusal/hooks';
 import { getParams } from '@autobusal/utilities';
 import Information from '../Information';
+import { Filters, Filter, Since } from '../styles';
+import { getStatuses, getTypes, fromApiDate, toApiDate } from '../utilities';
 import { useGetTransactions } from '../services';
 
 interface Props {
@@ -12,13 +14,44 @@ interface Props {
 }
 
 const Admin = ({ url, t }: Props): JSX.Element => {
-  const [ searchParams ] = useSearchParams();
+  const [ searchParams, setSearchParams ] = useSearchParams();
 
   usePage('transactions');
 
   useBreadcrumbs(t('transactions.browse.title', { ns: 'common' }));
 
-  const { data, isLoading, isFetching } = useGetTransactions(getParams(searchParams, ['page', 'sort', 'order', 'q', 'id']));
+  const { data, isLoading, isFetching } = useGetTransactions(
+    getParams(searchParams, ['page', 'sort', 'order', 'q', 'id', 'type', 'status', 'from', 'to'])
+  );
+
+  /*
+   * Claude - 2026-08-29 (audit A7-41, low)
+   *
+   * TYPE, STATUS AND A DATE RANGE. The ledger had one search box and a user
+   * filter, so "what did we take in fees last month" meant reading every row
+   * of the period - and `?type=` was already reaching the API and being
+   * ignored there, which is the worse half: the list came back unfiltered
+   * and looked like an answer.
+   *
+   * Written into the query string rather than held in state, so a filtered
+   * view is a URL that can be bookmarked or sent to whoever asked the
+   * question - the same way the search box and the user filter already work.
+   * Any change drops `page`: page 4 of the old filter is rarely page 4 of
+   * the new one and is usually past the end of it.
+   */
+  const onFilter = (name: string, value: string): void => {
+    const next = new URLSearchParams(searchParams);
+
+    if (value) {
+      next.set(name, value);
+    } else {
+      next.delete(name);
+    }
+
+    next.delete('page');
+
+    setSearchParams(next);
+  };
 
   const rows = data?.data.map(item => (
     <Row
@@ -87,8 +120,53 @@ const Admin = ({ url, t }: Props): JSX.Element => {
         fetching={ isFetching }
         t={ t }
         actions={ [
-          'search', 'update'
+          // `extra` is opt-in on this list, like every other action - Top
+          // renders the slot only when it is named (audit A7-41)
+          'extra', 'search', 'update'
         ] }
+        extra={
+          <Filters>
+            <Filter
+              value={ searchParams.get('type') ?? '' }
+              aria-label={ t('transactions.browse.type', { ns: 'common' }) }
+              onChange={ event => onFilter('type', event.target.value) }
+            >
+              <option value="">{ t('transactions.browse.all_types', { ns: 'common' }) }</option>
+
+              { getTypes(t).map(item => (
+                <option key={ item.id } value={ String(item.id) }>{ item.name }</option>
+              )) }
+            </Filter>
+
+            <Filter
+              value={ searchParams.get('status') ?? '' }
+              aria-label={ t('transactions.browse.status', { ns: 'common' }) }
+              onChange={ event => onFilter('status', event.target.value) }
+            >
+              <option value="">{ t('transactions.browse.all_statuses', { ns: 'common' }) }</option>
+
+              { getStatuses(t).map(item => (
+                <option key={ item.id } value={ String(item.id) }>{ item.name }</option>
+              )) }
+            </Filter>
+
+            <Since
+              type="date"
+              value={ fromApiDate(searchParams.get('from')) }
+              aria-label={ t('transactions.browse.from_date', { ns: 'common' }) }
+              title={ t('transactions.browse.from_date', { ns: 'common' }) }
+              onChange={ event => onFilter('from', toApiDate(event.target.value)) }
+            />
+
+            <Since
+              type="date"
+              value={ fromApiDate(searchParams.get('to')) }
+              aria-label={ t('transactions.browse.to_date', { ns: 'common' }) }
+              title={ t('transactions.browse.to_date', { ns: 'common' }) }
+              onChange={ event => onFilter('to', toApiDate(event.target.value)) }
+            />
+          </Filters>
+        }
       />
     </Meta>
   );

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.3.1 - 2026-08-29
+
+- The ledger gains TYPE, STATUS and a from/to DATE RANGE, written into the URL so a filtered view can be bookmarked or sent on (audit A7-41). `?type=` was already being sent by this screen and ignored by the API, which is worse than absent - the list came back unfiltered and looked like an answer.
+
 ## 1.3.0 (2026-08-29)
 
 - Editors offer Save & Close alongside Save & Stay, so correcting a record no longer bounces you back to its list every time (opt-in per page, editing only).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/account-transactions",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"

package/styles.ts

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+/**
+ * The ledger's filter strip.
+ *
+ * Claude - 2026-08-29 (audit A7-41, low). The transactions list had a
+ * free-text box and a user filter and nothing else, so answering "what did
+ * we take in fees last month" meant reading 275 rows - and `?type=` was
+ * already being sent and silently ignored by the API, which is worse than
+ * absent: the list came back unfiltered and looked like an answer.
+ *
+ * Same pill-and-select treatment the review queue's filter row uses, so a
+ * filter row looks like a filter row wherever it is met in the admin. Wraps
+ * on a narrow screen rather than pushing the search box off the end.
+ */
+export const Filters = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+`;
+
+export const Filter = styled.select`
+  padding: 4px 12px;
+  border: none;
+  border-radius: ${ props => props.theme.borderRadius };
+  background: ${ props => props.theme.background.neutral };
+  color: ${ props => props.theme.font.normal };
+  font-size: ${ props => props.theme.size.s };
+  cursor: pointer;
+`;
+
+/**
+ * A date bound. Native `date`, deliberately: it is one field, every browser
+ * and every phone already knows how to present it, and the alternative on a
+ * filter strip is a calendar popover competing with the table underneath.
+ */
+export const Since = styled.input`
+  padding: 3px 10px;
+  border: none;
+  border-radius: ${ props => props.theme.borderRadius };
+  background: ${ props => props.theme.background.neutral };
+  color: ${ props => props.theme.font.normal };
+  font-size: ${ props => props.theme.size.s };
+`;

package/utilities.ts

@@ -17,4 +17,43 @@ export const getStatuses = (t: TFunction<'common'>): DropdownData[] => ([
     name: t('data.transaction_status.credit', { ns: 'common' }),
     id: 'credit'
   }
-]);
+]);
+
+/**
+ * Every kind of movement the ledger records, for the type filter.
+ *
+ * Claude - 2026-08-29 (audit A7-41, low). The same list obtapi validates
+ * against (Transactions\AccountController::TYPES) - written out rather than
+ * fetched, because it is a fixed vocabulary and an endpoint serving ten
+ * constants would be one more thing to keep in step. Ordered by how often
+ * somebody reconciling a period reaches for them, not alphabetically.
+ */
+export const TRANSACTION_TYPES = [
+  'purchase', 'refund', 'fee', 'deposit', 'withdraw',
+  'payout', 'payout_reversal', 'subscription', 'external_sale', 'external_refund'
+];
+
+export const getTypes = (t: TFunction<'common'>): DropdownData[] => (
+  TRANSACTION_TYPES.map(id => ({
+    name: t(`data.transaction_types.${ id }`, { ns: 'common' }),
+    id
+  }))
+);
+
+/**
+ * `d/m/Y` - what this API filters by - from the `Y-m-d` a native date input
+ * gives, and back again. Two formats because the wire format is the one the
+ * rest of the API already speaks and the input's is fixed by the platform.
+ * An empty value stays empty rather than becoming a date.
+ */
+export const toApiDate = (value: string): string => {
+  const parts = value.split('-');
+
+  return parts.length === 3 ? `${ parts[2] }/${ parts[1] }/${ parts[0] }` : '';
+};
+
+export const fromApiDate = (value: string | null): string => {
+  const parts = (value ?? '').split('/');
+
+  return parts.length === 3 ? `${ parts[2] }-${ parts[1] }-${ parts[0] }` : '';
+};