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 { fetchTradeHistory } from '../lib/tradeHistoryApi';
import { fetchPositionsBootstrap } from '../lib/positionsApi';
import { Button, Input, Select } from '../components/ui/Primitives';
interface TradeRecord {
@ -411,26 +412,24 @@ export const HistoryTab = ({ botState }: HistoryTabProps) => {
</div>
<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')}
className={`px-6 py-2 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all ${selectedProfileId === 'all'
? 'bg-[var(--bl-success)] text-black shadow-[0_0_20px_var(--bl-success-muted)]'
: 'text-gray-400 hover:text-white hover:bg-white/5'
}`}
variant={selectedProfileId === 'all' ? 'secondary' : 'ghost'}
size="sm"
>
Global
</button>
</Button>
{profiles.map(p => (
<button
<Button
key={p.id}
type="button"
onClick={() => setSelectedProfileId(p.id)}
className={`px-6 py-2 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all ${selectedProfileId === p.id
? 'bg-[var(--bl-success)] text-black shadow-[0_0_20px_var(--bl-success-muted)]'
: 'text-gray-400 hover:text-white hover:bg-white/5'
}`}
variant={selectedProfileId === p.id ? 'secondary' : 'ghost'}
size="sm"
>
{p.name}
</button>
</Button>
))}
</div>
</div>
@ -504,49 +503,58 @@ export const HistoryTab = ({ botState }: HistoryTabProps) => {
</tr>
<tr className="bg-white/[0.015] text-left align-top">
<th className="px-6 py-2">
<select
<Select
value={selectedProfileId}
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)]"
>
<option value="all">All Profiles</option>
{profiles.map((profileOption) => (
<option key={profileOption.id} value={profileOption.id}>
{profileOption.name}
</option>
))}
</select>
controlSize="sm"
variant="muted"
options={[
{ value: 'all', label: 'All Profiles' },
...profiles.map((profileOption) => ({
value: profileOption.id,
label: profileOption.name,
})),
]}
/>
</th>
<th className="px-6 py-2">
<div className="flex flex-col gap-1">
<input
<Input
type="date"
value={historyDateFrom}
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"
value={historyDateTo}
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">
<button
<Button
type="button"
onClick={() => {
setHistoryDateFrom('');
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
</button>
<button
</Button>
<Button
type="button"
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'}
</button>
</Button>
</div>
</div>
</th>
@ -646,23 +654,27 @@ export const HistoryTab = ({ botState }: HistoryTabProps) => {
-{Math.min(historyPage * HISTORY_PAGE_SIZE, sortedHistory.length)} of {sortedHistory.length}
</span>
<div className="flex items-center gap-2">
<button
<Button
type="button"
onClick={() => setHistoryPage((current) => Math.max(1, current - 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
</button>
</Button>
<span className="text-[10px] uppercase tracking-widest text-gray-500">
Page {historyPage} / {historyTotalPages}
</span>
<button
<Button
type="button"
onClick={() => setHistoryPage((current) => Math.min(historyTotalPages, current + 1))}
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
</button>
</Button>
</div>
</div>
</td>