refactor(ui): migrate positions workflow controls
This commit is contained in:
parent
95c3c5e8bf
commit
d5a8f36b35
@ -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 { useCanonicalLifecycle } from '../hooks/useCanonicalLifecycle';
|
||||
import { fetchPositionsBootstrap } from '../lib/positionsApi';
|
||||
import { Button, Input, Select } from '../components/ui/Primitives';
|
||||
|
||||
interface PositionsTabProps {
|
||||
botState: BotState;
|
||||
@ -1291,26 +1292,32 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 border-b border-white/5 items-end">
|
||||
<button
|
||||
onClick={() => setSelectedProfileId('all')}
|
||||
className={`px-4 py-3 text-sm font-semibold transition-all border-b-2 ${selectedProfileId === 'all'
|
||||
? 'border-[#00ff88] text-[#00ff88]'
|
||||
: 'border-transparent text-gray-500 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Global
|
||||
</button>
|
||||
{profiles.map(p => (
|
||||
<button
|
||||
key={p.id}
|
||||
onClick={() => setSelectedProfileId(p.id)}
|
||||
className={`px-4 py-3 text-sm font-semibold transition-all border-b-2 ${selectedProfileId === p.id
|
||||
? 'border-[#00ff88] text-[#00ff88]'
|
||||
: 'border-transparent text-gray-500 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{p.name}
|
||||
</button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setSelectedProfileId('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-transparent text-gray-500 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Global
|
||||
</Button>
|
||||
{profiles.map(p => (
|
||||
<Button
|
||||
key={p.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedProfileId(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-transparent text-gray-500 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{p.name}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</header>
|
||||
@ -1587,52 +1594,64 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
|
||||
Profile + Date filters
|
||||
</th>
|
||||
<th className="px-4 py-2">
|
||||
<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-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 className="px-4 py-2">
|
||||
<div className="flex flex-col gap-1">
|
||||
<input
|
||||
type="date"
|
||||
value={ordersDateFrom}
|
||||
onChange={(e) => setOrdersDateFrom(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-orange-500/40"
|
||||
/>
|
||||
<input
|
||||
type="date"
|
||||
value={ordersDateTo}
|
||||
onChange={(e) => setOrdersDateTo(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-orange-500/40"
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setOrdersDateFrom('');
|
||||
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"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button
|
||||
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"
|
||||
>
|
||||
{ordersSortDirection === 'desc' ? 'Newest' : 'Oldest'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<Select
|
||||
value={selectedProfileId}
|
||||
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"
|
||||
/>
|
||||
</th>
|
||||
<th className="px-4 py-2">
|
||||
<div className="flex flex-col gap-1">
|
||||
<Input
|
||||
type="date"
|
||||
value={ordersDateFrom}
|
||||
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"
|
||||
/>
|
||||
<Input
|
||||
type="date"
|
||||
value={ordersDateTo}
|
||||
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"
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setOrdersDateFrom('');
|
||||
setOrdersDateTo('');
|
||||
}}
|
||||
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
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setOrdersSortDirection((current) => current === 'desc' ? 'asc' : 'desc')}
|
||||
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'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th colSpan={8} className="px-4 py-2 text-[10px] text-gray-500 font-medium">
|
||||
Sorting is applied by time on this table.
|
||||
</th>
|
||||
@ -1775,23 +1794,29 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
|
||||
-{Math.min(ordersPage * ORDER_ACTIVITY_PAGE_SIZE, sortedOrdersForActivity.length)} of {sortedOrdersForActivity.length}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setOrdersPage((current) => Math.max(1, current - 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"
|
||||
>
|
||||
Prev
|
||||
</button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setOrdersPage((current) => Math.max(1, current - 1))}
|
||||
disabled={ordersPage === 1}
|
||||
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
|
||||
</Button>
|
||||
<span className="text-[10px] uppercase tracking-widest text-gray-500">
|
||||
Page {ordersPage} / {ordersTotalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setOrdersPage((current) => Math.min(ordersTotalPages, current + 1))}
|
||||
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"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setOrdersPage((current) => Math.min(ordersTotalPages, current + 1))}
|
||||
disabled={ordersPage >= ordersTotalPages}
|
||||
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
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
@ -1836,52 +1861,64 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
|
||||
Profile + Date filters
|
||||
</th>
|
||||
<th className="px-4 py-2">
|
||||
<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-cyan-500/40"
|
||||
>
|
||||
<option value="all">All Profiles</option>
|
||||
{profiles.map((profileOption) => (
|
||||
<option key={profileOption.id} value={profileOption.id}>
|
||||
{profileOption.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Select
|
||||
value={selectedProfileId}
|
||||
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"
|
||||
/>
|
||||
</th>
|
||||
<th className="px-4 py-2 text-[10px] text-gray-500 font-medium">
|
||||
Filter in headers
|
||||
</th>
|
||||
<th className="px-4 py-2">
|
||||
<div className="flex flex-col gap-1">
|
||||
<input
|
||||
type="date"
|
||||
value={lifecycleDateFrom}
|
||||
onChange={(e) => setLifecycleDateFrom(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-cyan-500/40"
|
||||
/>
|
||||
<input
|
||||
type="date"
|
||||
value={lifecycleDateTo}
|
||||
onChange={(e) => setLifecycleDateTo(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-cyan-500/40"
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setLifecycleDateFrom('');
|
||||
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"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button
|
||||
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"
|
||||
>
|
||||
{lifecycleSortDirection === 'desc' ? 'Newest' : 'Oldest'}
|
||||
</button>
|
||||
<Input
|
||||
type="date"
|
||||
value={lifecycleDateFrom}
|
||||
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"
|
||||
/>
|
||||
<Input
|
||||
type="date"
|
||||
value={lifecycleDateTo}
|
||||
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"
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setLifecycleDateFrom('');
|
||||
setLifecycleDateTo('');
|
||||
}}
|
||||
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
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setLifecycleSortDirection((current) => current === 'desc' ? 'asc' : 'desc')}
|
||||
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'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
@ -1992,23 +2029,29 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
|
||||
-{Math.min(lifecyclePage * TRACE_PAGE_SIZE, sortedLifecycleTraces.length)} of {sortedLifecycleTraces.length}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setLifecyclePage((current) => Math.max(1, current - 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"
|
||||
>
|
||||
Prev
|
||||
</button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setLifecyclePage((current) => Math.max(1, current - 1))}
|
||||
disabled={lifecyclePage === 1}
|
||||
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
|
||||
</Button>
|
||||
<span className="text-[10px] uppercase tracking-widest text-gray-500">
|
||||
Page {lifecyclePage} / {lifecycleTotalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setLifecyclePage((current) => Math.min(lifecycleTotalPages, current + 1))}
|
||||
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"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setLifecyclePage((current) => Math.min(lifecycleTotalPages, current + 1))}
|
||||
disabled={lifecyclePage >= lifecycleTotalPages}
|
||||
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
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user