diff --git a/dashboard/src/components/EventFiltersBar.tsx b/dashboard/src/components/EventFiltersBar.tsx index a598cf6..8d6f91a 100644 --- a/dashboard/src/components/EventFiltersBar.tsx +++ b/dashboard/src/components/EventFiltersBar.tsx @@ -2,6 +2,14 @@ import { memo } from 'react'; import { useEventStore } from '../store/eventStore'; import { useEventCount, useEventFilters, useFilterOptions } from '../hooks/useEventSelectors'; import { SearchAutocomplete } from './SearchAutocomplete'; +import type { NotificationSortOption } from '../types/event'; + +const SORT_OPTIONS: { value: NotificationSortOption; label: string }[] = [ + { value: 'newest', label: 'Newest first' }, + { value: 'oldest', label: 'Oldest first' }, + { value: 'priority', label: 'Priority (on-chain order)' }, + { value: 'delivery_status', label: 'Delivery status' }, +]; export const EventFiltersBar = memo(function EventFiltersBar() { const filters = useEventFilters(); @@ -10,6 +18,7 @@ export const EventFiltersBar = memo(function EventFiltersBar() { const setSearch = useEventStore((state) => state.setSearch); const setContractFilter = useEventStore((state) => state.setContractFilter); const setEventTypeFilter = useEventStore((state) => state.setEventTypeFilter); + const setSortBy = useEventStore((state) => state.setSortBy); return (
@@ -53,6 +62,21 @@ export const EventFiltersBar = memo(function EventFiltersBar() { + {/* Sort control (#495) */} +
+ + +
+

{totalCount.toLocaleString()} events loaded

diff --git a/dashboard/src/hooks/useEventSelectors.ts b/dashboard/src/hooks/useEventSelectors.ts index ba53e31..bac4ed5 100644 --- a/dashboard/src/hooks/useEventSelectors.ts +++ b/dashboard/src/hooks/useEventSelectors.ts @@ -16,7 +16,9 @@ export function useFilteredEvents() { filters.eventType, filters.status, filters.dateFrom, - filters.dateTo + filters.dateTo, + filters.txHash, + filters.sortBy ?? 'newest', ), [events, filters] ); diff --git a/dashboard/src/pages/NotificationSearchPage.tsx b/dashboard/src/pages/NotificationSearchPage.tsx index 606fb06..6b36113 100644 --- a/dashboard/src/pages/NotificationSearchPage.tsx +++ b/dashboard/src/pages/NotificationSearchPage.tsx @@ -50,6 +50,7 @@ export function NotificationSearchPage() { const [dateFrom, setDateFrom] = useState(''); const [dateTo, setDateTo] = useState(''); const [page, setPage] = useState(1); + const [sortBy, setSortBy] = useState<'newest' | 'oldest' | 'status'>('newest'); const [response, setResponse] = useState(null); const [loading, setLoading] = useState(false); @@ -86,6 +87,7 @@ export function NotificationSearchPage() { type: type || undefined, startDate: dateFrom || undefined, endDate: dateTo || undefined, + sortBy, }; }, [ debouncedQuery, @@ -96,6 +98,7 @@ export function NotificationSearchPage() { type, dateFrom, dateTo, + sortBy, ]); const runSearch = useCallback(async () => { @@ -127,7 +130,7 @@ export function NotificationSearchPage() { }, [currentFilters, page, hasParams]); // Re-run search whenever debounced params change; reset page when filters change - const filtersKey = `${debouncedQuery}|${debouncedSender}|${debouncedTxHash}|${debouncedEventId}|${status}|${type}|${dateFrom}|${dateTo}`; + const filtersKey = `${debouncedQuery}|${debouncedSender}|${debouncedTxHash}|${debouncedEventId}|${status}|${type}|${dateFrom}|${dateTo}|${sortBy}`; const prevFiltersRef = useRef(filtersKey); useEffect(() => { if (filtersKey !== prevFiltersRef.current) { @@ -149,6 +152,7 @@ export function NotificationSearchPage() { setType(''); setDateFrom(''); setDateTo(''); + setSortBy('newest'); setPage(1); setResponse(null); setError(null); @@ -274,6 +278,22 @@ export function NotificationSearchPage() { + {/* Sort control (#495) */} +
+ + +
+