bytelyst/learning_ai_invt_trdg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): align history filters controls

Browse Source
This commit is contained in:
Saravana Achu Mac 2026-05-09 01:48:16 -07:00
parent e1d8ec8a7b
commit bfd7d3bfec
1 changed files with 50 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
web/src/tabs/HistoryTab.tsx
View File

@ -7,6 +7,7 @@ import {
import { useCanonicalLifecycle } from '../hooks/useCanonicalLifecycle'; import { useCanonicalLifecycle } from '../hooks/useCanonicalLifecycle';
import { fetchTradeHistory } from '../lib/tradeHistoryApi'; import { fetchTradeHistory } from '../lib/tradeHistoryApi';
import { fetchPositionsBootstrap } from '../lib/positionsApi'; import { fetchPositionsBootstrap } from '../lib/positionsApi';
import { Button, Input, Select } from '../components/ui/Primitives';
interface TradeRecord { interface TradeRecord {
@ -411,26 +412,24 @@ export const HistoryTab = ({ botState }: HistoryTabProps) => {
</div> </div>
<div className="flex gap-2 bg-white/5 p-1 rounded-xl shadow-inner border border-white/5"> <div className="flex gap-2 bg-white/5 p-1 rounded-xl shadow-inner border border-white/5">
<button <Button
type="button"
onClick={() => setSelectedProfileId('all')} onClick={() => setSelectedProfileId('all')}
className={`px-6 py-2 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all ${selectedProfileId === 'all' variant={selectedProfileId === 'all' ? 'secondary' : 'ghost'}
? 'bg-[var(--bl-success)] text-black shadow-[0_0_20px_var(--bl-success-muted)]' size="sm"
: 'text-gray-400 hover:text-white hover:bg-white/5'
}`}
> >
Global Global
</button> </Button>
{profiles.map(p => ( {profiles.map(p => (
<button <Button
key={p.id} key={p.id}
type="button"
onClick={() => setSelectedProfileId(p.id)} onClick={() => setSelectedProfileId(p.id)}
className={`px-6 py-2 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all ${selectedProfileId === p.id variant={selectedProfileId === p.id ? 'secondary' : 'ghost'}
? 'bg-[var(--bl-success)] text-black shadow-[0_0_20px_var(--bl-success-muted)]' size="sm"
: 'text-gray-400 hover:text-white hover:bg-white/5'
}`}
> >
{p.name} {p.name}
</button> </Button>
))} ))}
</div> </div>
</div> </div>
@ -504,49 +503,58 @@ export const HistoryTab = ({ botState }: HistoryTabProps) => {
</tr> </tr>
<tr className="bg-white/[0.015] text-left align-top"> <tr className="bg-white/[0.015] text-left align-top">
<th className="px-6 py-2"> <th className="px-6 py-2">
<select <Select
value={selectedProfileId} value={selectedProfileId}
onChange={(e) => setSelectedProfileId(e.target.value)} onChange={(e) => setSelectedProfileId(e.target.value)}
className="w-full bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] font-semibold text-gray-200 focus:outline-none focus:ring-2 focus:ring-[var(--bl-focus-ring-muted)]" controlSize="sm"
> variant="muted"
<option value="all">All Profiles</option> options={[
{profiles.map((profileOption) => ( { value: 'all', label: 'All Profiles' },
<option key={profileOption.id} value={profileOption.id}> ...profiles.map((profileOption) => ({
{profileOption.name} value: profileOption.id,
</option> label: profileOption.name,
))} })),
</select> ]}
/>
</th> </th>
<th className="px-6 py-2"> <th className="px-6 py-2">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<input <Input
type="date" type="date"
value={historyDateFrom} value={historyDateFrom}
onChange={(e) => setHistoryDateFrom(e.target.value)} onChange={(e) => setHistoryDateFrom(e.target.value)}
className="bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] text-gray-200 focus:outline-none focus:ring-2 focus:ring-[var(--bl-focus-ring-muted)]" controlSize="sm"
variant="muted"
/> />
<input <Input
type="date" type="date"
value={historyDateTo} value={historyDateTo}
onChange={(e) => setHistoryDateTo(e.target.value)} onChange={(e) => setHistoryDateTo(e.target.value)}
className="bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] text-gray-200 focus:outline-none focus:ring-2 focus:ring-[var(--bl-focus-ring-muted)]" controlSize="sm"
variant="muted"
/> />
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <Button
type="button"
onClick={() => { onClick={() => {
setHistoryDateFrom(''); setHistoryDateFrom('');
setHistoryDateTo(''); setHistoryDateTo('');
}} }}
className="px-2 py-1 rounded border border-white/10 text-[9px] font-bold uppercase tracking-wider text-gray-300 hover:bg-white/5 transition-colors" variant="ghost"
size="sm"
className="min-h-7 px-2 text-[9px]"
> >
Clear Clear
</button> </Button>
<button <Button
type="button"
onClick={() => setHistorySortDirection((current) => current === 'desc' ? 'asc' : 'desc')} onClick={() => setHistorySortDirection((current) => current === 'desc' ? 'asc' : 'desc')}
className="px-2 py-1 rounded border border-white/10 text-[9px] font-bold uppercase tracking-wider text-gray-300 hover:bg-white/5 transition-colors" variant="ghost"
size="sm"
className="min-h-7 px-2 text-[9px]"
> >
{historySortDirection === 'desc' ? 'Newest' : 'Oldest'} {historySortDirection === 'desc' ? 'Newest' : 'Oldest'}
</button> </Button>
</div> </div>
</div> </div>
</th> </th>
@ -646,23 +654,27 @@ export const HistoryTab = ({ botState }: HistoryTabProps) => {
-{Math.min(historyPage * HISTORY_PAGE_SIZE, sortedHistory.length)} of {sortedHistory.length} -{Math.min(historyPage * HISTORY_PAGE_SIZE, sortedHistory.length)} of {sortedHistory.length}
</span> </span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <Button
type="button"
onClick={() => setHistoryPage((current) => Math.max(1, current - 1))} onClick={() => setHistoryPage((current) => Math.max(1, current - 1))}
disabled={historyPage === 1} disabled={historyPage === 1}
className="px-3 py-1.5 rounded border border-white/10 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-white/5 transition-colors" variant="outline"
size="sm"
> >
Prev Prev
</button> </Button>
<span className="text-[10px] uppercase tracking-widest text-gray-500"> <span className="text-[10px] uppercase tracking-widest text-gray-500">
Page {historyPage} / {historyTotalPages} Page {historyPage} / {historyTotalPages}
</span> </span>
<button <Button
type="button"
onClick={() => setHistoryPage((current) => Math.min(historyTotalPages, current + 1))} onClick={() => setHistoryPage((current) => Math.min(historyTotalPages, current + 1))}
disabled={historyPage >= historyTotalPages} disabled={historyPage >= historyTotalPages}
className="px-3 py-1.5 rounded border border-white/10 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-white/5 transition-colors" variant="outline"
size="sm"
> >
Next Next
</button> </Button>
</div> </div>
</div> </div>
</td> </td>