cameleer-server/ui/src/pages/executions/ExecutionExplorer.tsx

import { useSearchExecutions, useExecutionStats } from '../../api/queries/executions';
import { useExecutionSearch } from './use-execution-search';
import { StatCard } from '../../components/shared/StatCard';
import { Pagination } from '../../components/shared/Pagination';
import { SearchFilters } from './SearchFilters';
import { ResultsTable } from './ResultsTable';
import styles from './ExecutionExplorer.module.css';

export function ExecutionExplorer() {
  const { toSearchRequest, offset, limit, setOffset } = useExecutionSearch();
  const searchRequest = toSearchRequest();
  const { data, isLoading, isFetching } = useSearchExecutions(searchRequest);
  const { data: stats } = useExecutionStats();

  const total = data?.total ?? 0;
  const results = data?.data ?? [];

  // Derive stats from current search results
  const failedCount = results.filter((r) => r.status === 'FAILED').length;
  const avgDuration = results.length > 0
    ? Math.round(results.reduce((sum, r) => sum + r.durationMs, 0) / results.length)
    : 0;

  const showFrom = total > 0 ? offset + 1 : 0;
  const showTo = Math.min(offset + limit, total);

  return (
    <>
      {/* Page Header */}
      <div className={`${styles.pageHeader} animate-in`}>
        <div>
          <h1>Transaction Explorer</h1>
          <div className={styles.subtitle}>Search and analyze route executions</div>
        </div>
        <div className={styles.liveIndicator}>
          <span className={styles.liveDot} />
          LIVE
        </div>
      </div>

      {/* Stats Bar */}
      <div className={styles.statsBar}>
        <StatCard label="Total Matches" value={total.toLocaleString()} accent="amber" change={`from current search`} />
        <StatCard label="Avg Duration" value={`${avgDuration}ms`} accent="cyan" />
        <StatCard label="Failed (page)" value={failedCount.toString()} accent="rose" />
        <StatCard label="P99 Latency" value={stats ? `${stats.p99LatencyMs}ms` : '--'} accent="green" change="last hour" />
        <StatCard label="Active Now" value={stats ? stats.activeCount.toString() : '--'} accent="blue" change="running executions" />
      </div>

      {/* Filters */}
      <SearchFilters />

      {/* Results Header */}
      <div className={`${styles.resultsHeader} animate-in delay-4`}>
        <span className={styles.resultsCount}>
          Showing <strong>{showFrom}–{showTo}</strong> of <strong>{total.toLocaleString()}</strong> results
          {isFetching && !isLoading && ' · updating...'}
        </span>
      </div>

      {/* Results Table */}
      <ResultsTable results={results} loading={isLoading} />

      {/* Pagination */}
      <Pagination total={total} offset={offset} limit={limit} onChange={setOffset} />
    </>
  );
}