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

refactor(ui): migrate positions workflow controls

Browse Source
This commit is contained in:
Saravana Achu Mac 2026-05-06 14:04:24 -07:00
parent 95c3c5e8bf
commit d5a8f36b35
1 changed files with 177 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
web/src/tabs/PositionsTab.tsx
View File

@ -7,6 +7,7 @@ import { createRequestId } from '../../../shared/request-id.js';
import { Layers, ListFilter, Link2, GitBranch, AlertTriangle, Lock, RefreshCw, CheckCircle, XCircle } from 'lucide-react'; import { Layers, ListFilter, Link2, GitBranch, AlertTriangle, Lock, RefreshCw, CheckCircle, XCircle } from 'lucide-react';
import { useCanonicalLifecycle } from '../hooks/useCanonicalLifecycle'; import { useCanonicalLifecycle } from '../hooks/useCanonicalLifecycle';
import { fetchPositionsBootstrap } from '../lib/positionsApi'; import { fetchPositionsBootstrap } from '../lib/positionsApi';
import { Button, Input, Select } from '../components/ui/Primitives';
interface PositionsTabProps { interface PositionsTabProps {
botState: BotState; botState: BotState;
@ -1291,26 +1292,32 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
</div> </div>
<div className="flex gap-2 border-b border-white/5 items-end"> <div className="flex gap-2 border-b border-white/5 items-end">
<button <Button
type="button"
onClick={() => setSelectedProfileId('all')} onClick={() => setSelectedProfileId('all')}
className={`px-4 py-3 text-sm font-semibold transition-all border-b-2 ${selectedProfileId === 'all' variant="ghost"
size="sm"
className={`h-auto rounded-none px-4 py-3 text-sm font-semibold transition-all border-b-2 ${selectedProfileId === 'all'
? 'border-[#00ff88] text-[#00ff88]' ? 'border-[#00ff88] text-[#00ff88]'
: 'border-transparent text-gray-500 hover:text-white' : 'border-transparent text-gray-500 hover:text-white'
}`} }`}
> >
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-4 py-3 text-sm font-semibold transition-all border-b-2 ${selectedProfileId === p.id variant="ghost"
size="sm"
className={`h-auto rounded-none px-4 py-3 text-sm font-semibold transition-all border-b-2 ${selectedProfileId === p.id
? 'border-[#00ff88] text-[#00ff88]' ? 'border-[#00ff88] text-[#00ff88]'
: 'border-transparent text-gray-500 hover:text-white' : 'border-transparent text-gray-500 hover:text-white'
}`} }`}
> >
{p.name} {p.name}
</button> </Button>
))} ))}
</div> </div>
</header> </header>
@ -1587,49 +1594,61 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
Profile + Date filters Profile + Date filters
</th> </th>
<th className="px-4 py-2"> <th className="px-4 py-2">
<select <Select
value={selectedProfileId} value={selectedProfileId}
onChange={(e) => setSelectedProfileId(e.target.value)} onChange={(e) => setSelectedProfileId(e.target.value)}
options={[
{ value: 'all', label: 'All Profiles' },
...profiles.map((profileOption) => ({
value: profileOption.id,
label: profileOption.name,
})),
]}
controlSize="sm"
variant="muted"
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-orange-500/40" 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-orange-500/40"
> />
<option value="all">All Profiles</option>
{profiles.map((profileOption) => (
<option key={profileOption.id} value={profileOption.id}>
{profileOption.name}
</option>
))}
</select>
</th> </th>
<th className="px-4 py-2"> <th className="px-4 py-2">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<input <Input
type="date" type="date"
value={ordersDateFrom} value={ordersDateFrom}
onChange={(e) => setOrdersDateFrom(e.target.value)} onChange={(e) => setOrdersDateFrom(e.target.value)}
controlSize="sm"
variant="muted"
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-orange-500/40" 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-orange-500/40"
/> />
<input <Input
type="date" type="date"
value={ordersDateTo} value={ordersDateTo}
onChange={(e) => setOrdersDateTo(e.target.value)} onChange={(e) => setOrdersDateTo(e.target.value)}
controlSize="sm"
variant="muted"
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-orange-500/40" 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-orange-500/40"
/> />
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <Button
type="button"
onClick={() => { onClick={() => {
setOrdersDateFrom(''); setOrdersDateFrom('');
setOrdersDateTo(''); setOrdersDateTo('');
}} }}
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="outline"
size="sm"
className="h-auto 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"
> >
Clear Clear
</button> </Button>
<button <Button
type="button"
onClick={() => setOrdersSortDirection((current) => current === 'desc' ? 'asc' : 'desc')} onClick={() => setOrdersSortDirection((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="outline"
size="sm"
className="h-auto 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"
> >
{ordersSortDirection === 'desc' ? 'Newest' : 'Oldest'} {ordersSortDirection === 'desc' ? 'Newest' : 'Oldest'}
</button> </Button>
</div> </div>
</div> </div>
</th> </th>
@ -1775,23 +1794,29 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
-{Math.min(ordersPage * ORDER_ACTIVITY_PAGE_SIZE, sortedOrdersForActivity.length)} of {sortedOrdersForActivity.length} -{Math.min(ordersPage * ORDER_ACTIVITY_PAGE_SIZE, sortedOrdersForActivity.length)} of {sortedOrdersForActivity.length}
</span> </span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <Button
type="button"
onClick={() => setOrdersPage((current) => Math.max(1, current - 1))} onClick={() => setOrdersPage((current) => Math.max(1, current - 1))}
disabled={ordersPage === 1} disabled={ordersPage === 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"
className="h-auto px-3 py-1.5 rounded border border-white/10 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-white/5 transition-colors"
> >
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 {ordersPage} / {ordersTotalPages} Page {ordersPage} / {ordersTotalPages}
</span> </span>
<button <Button
type="button"
onClick={() => setOrdersPage((current) => Math.min(ordersTotalPages, current + 1))} onClick={() => setOrdersPage((current) => Math.min(ordersTotalPages, current + 1))}
disabled={ordersPage >= ordersTotalPages} disabled={ordersPage >= ordersTotalPages}
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"
className="h-auto px-3 py-1.5 rounded border border-white/10 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-white/5 transition-colors"
> >
Next Next
</button> </Button>
</div> </div>
</div> </div>
</td> </td>
@ -1836,52 +1861,64 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
Profile + Date filters Profile + Date filters
</th> </th>
<th className="px-4 py-2"> <th className="px-4 py-2">
<select <Select
value={selectedProfileId} value={selectedProfileId}
onChange={(e) => setSelectedProfileId(e.target.value)} onChange={(e) => setSelectedProfileId(e.target.value)}
options={[
{ value: 'all', label: 'All Profiles' },
...profiles.map((profileOption) => ({
value: profileOption.id,
label: profileOption.name,
})),
]}
controlSize="sm"
variant="muted"
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-cyan-500/40" 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-cyan-500/40"
> />
<option value="all">All Profiles</option>
{profiles.map((profileOption) => (
<option key={profileOption.id} value={profileOption.id}>
{profileOption.name}
</option>
))}
</select>
</th> </th>
<th className="px-4 py-2 text-[10px] text-gray-500 font-medium"> <th className="px-4 py-2 text-[10px] text-gray-500 font-medium">
Filter in headers Filter in headers
</th> </th>
<th className="px-4 py-2"> <th className="px-4 py-2">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<input <Input
type="date" type="date"
value={lifecycleDateFrom} value={lifecycleDateFrom}
onChange={(e) => setLifecycleDateFrom(e.target.value)} onChange={(e) => setLifecycleDateFrom(e.target.value)}
controlSize="sm"
variant="muted"
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-cyan-500/40" 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-cyan-500/40"
/> />
<input <Input
type="date" type="date"
value={lifecycleDateTo} value={lifecycleDateTo}
onChange={(e) => setLifecycleDateTo(e.target.value)} onChange={(e) => setLifecycleDateTo(e.target.value)}
controlSize="sm"
variant="muted"
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-cyan-500/40" 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-cyan-500/40"
/> />
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <Button
type="button"
onClick={() => { onClick={() => {
setLifecycleDateFrom(''); setLifecycleDateFrom('');
setLifecycleDateTo(''); setLifecycleDateTo('');
}} }}
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="outline"
size="sm"
className="h-auto 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"
> >
Clear Clear
</button> </Button>
<button <Button
type="button"
onClick={() => setLifecycleSortDirection((current) => current === 'desc' ? 'asc' : 'desc')} onClick={() => setLifecycleSortDirection((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="outline"
size="sm"
className="h-auto 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"
> >
{lifecycleSortDirection === 'desc' ? 'Newest' : 'Oldest'} {lifecycleSortDirection === 'desc' ? 'Newest' : 'Oldest'}
</button> </Button>
</div> </div>
</div> </div>
</th> </th>
@ -1992,23 +2029,29 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
-{Math.min(lifecyclePage * TRACE_PAGE_SIZE, sortedLifecycleTraces.length)} of {sortedLifecycleTraces.length} -{Math.min(lifecyclePage * TRACE_PAGE_SIZE, sortedLifecycleTraces.length)} of {sortedLifecycleTraces.length}
</span> </span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <Button
type="button"
onClick={() => setLifecyclePage((current) => Math.max(1, current - 1))} onClick={() => setLifecyclePage((current) => Math.max(1, current - 1))}
disabled={lifecyclePage === 1} disabled={lifecyclePage === 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"
className="h-auto px-3 py-1.5 rounded border border-white/10 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-white/5 transition-colors"
> >
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 {lifecyclePage} / {lifecycleTotalPages} Page {lifecyclePage} / {lifecycleTotalPages}
</span> </span>
<button <Button
type="button"
onClick={() => setLifecyclePage((current) => Math.min(lifecycleTotalPages, current + 1))} onClick={() => setLifecyclePage((current) => Math.min(lifecycleTotalPages, current + 1))}
disabled={lifecyclePage >= lifecycleTotalPages} disabled={lifecyclePage >= lifecycleTotalPages}
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"
className="h-auto px-3 py-1.5 rounded border border-white/10 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-white/5 transition-colors"
> >
Next Next
</button> </Button>
</div> </div>
</div> </div>
</td> </td>