52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useAppContext } from '../context/AppContext';
|
|
import { PositionsTab } from '../tabs/PositionsTab';
|
|
import { HistoryTab } from '../tabs/HistoryTab';
|
|
import { PageHeader } from '../components/ui/page-header';
|
|
import { buildCreateExitPlanUrl, buildPlanDrillInUrl } from './tradePlansRoutes';
|
|
|
|
const TABS = ['Positions & Orders', 'Trade History'] as const;
|
|
type Tab = typeof TABS[number];
|
|
|
|
export function PortfolioView() {
|
|
const { botState } = useAppContext();
|
|
const navigate = useNavigate();
|
|
const [tab, setTab] = useState<Tab>('Positions & Orders');
|
|
|
|
return (
|
|
<div>
|
|
<PageHeader
|
|
title="Portfolio"
|
|
description="Review live positions, order activity, and completed trades in one consistent operational view."
|
|
/>
|
|
|
|
<div className="tab-strip" style={{ marginBottom: 20 }}>
|
|
{TABS.map(t => (
|
|
<button
|
|
key={t}
|
|
onClick={() => setTab(t)}
|
|
className="tab-button"
|
|
data-active={tab === t}
|
|
>
|
|
{t}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{tab === 'Positions & Orders' && (
|
|
<PositionsTab
|
|
botState={botState}
|
|
onManageHolding={(position, action) => {
|
|
const target = action === 'open-plan' && position.planEntryId
|
|
? buildPlanDrillInUrl(position.planEntryId)
|
|
: buildCreateExitPlanUrl(position.symbol, position.tradeId);
|
|
navigate(target);
|
|
}}
|
|
/>
|
|
)}
|
|
{tab === 'Trade History' && <HistoryTab botState={botState} />}
|
|
</div>
|
|
);
|
|
}
|