fix: Trading Controls page field mapping for macro/competitive status
The API returns macro_enabled/competitive_enabled but the TypeScript interfaces expected 'enabled'. The toggles always showed disabled. Now handles both field names with fallback.
This commit is contained in:
@@ -596,9 +596,11 @@ export function useCorporateDecisions(ticker: string | undefined) {
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface CompetitiveStatus {
|
||||
enabled: boolean;
|
||||
enabled?: boolean;
|
||||
competitive_enabled?: boolean;
|
||||
toggled_at: string | null;
|
||||
toggled_by: string | null;
|
||||
source?: string;
|
||||
}
|
||||
|
||||
export function useCompetitiveStatus() {
|
||||
@@ -720,9 +722,11 @@ export function useTrendProjection(trendId: string | undefined) {
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface MacroStatus {
|
||||
enabled: boolean;
|
||||
enabled?: boolean;
|
||||
macro_enabled?: boolean;
|
||||
toggled_at: string | null;
|
||||
toggled_by: string | null;
|
||||
source?: string;
|
||||
}
|
||||
|
||||
export function useMacroStatus() {
|
||||
|
||||
@@ -22,6 +22,10 @@ export function TradingPage() {
|
||||
const reviewApproval = useReviewApproval();
|
||||
const toggleMacro = useToggleMacro();
|
||||
const toggleCompetitive = useToggleCompetitive();
|
||||
|
||||
// Normalize API field names (API returns macro_enabled/competitive_enabled, not enabled)
|
||||
const macroEnabled = macroStatus?.enabled ?? macroStatus?.macro_enabled ?? false;
|
||||
const competitiveEnabled = competitiveStatus?.enabled ?? competitiveStatus?.competitive_enabled ?? false;
|
||||
const [confirmMode, setConfirmMode] = useState<string | null>(null);
|
||||
const [confirmMacroToggle, setConfirmMacroToggle] = useState(false);
|
||||
const [confirmCompetitiveToggle, setConfirmCompetitiveToggle] = useState(false);
|
||||
@@ -90,20 +94,20 @@ export function TradingPage() {
|
||||
<button
|
||||
onClick={() => setConfirmMacroToggle(true)}
|
||||
className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:ring-offset-surface-900 ${
|
||||
macroStatus?.enabled ? 'bg-brand-600' : 'bg-surface-700'
|
||||
macroEnabled ? 'bg-brand-600' : 'bg-surface-700'
|
||||
}`}
|
||||
role="switch"
|
||||
aria-checked={macroStatus?.enabled ?? false}
|
||||
aria-checked={macroEnabled ?? false}
|
||||
aria-label="Toggle macro signal layer"
|
||||
>
|
||||
<span
|
||||
className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition-transform ${
|
||||
macroStatus?.enabled ? 'translate-x-5' : 'translate-x-0'
|
||||
macroEnabled ? 'translate-x-5' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<span className="text-sm text-gray-300">
|
||||
{macroStatus?.enabled ? 'Enabled' : 'Disabled'}
|
||||
{macroEnabled ? 'Enabled' : 'Disabled'}
|
||||
</span>
|
||||
{macroStatus?.toggled_at && (
|
||||
<span className="text-xs text-gray-500">
|
||||
@@ -117,15 +121,15 @@ export function TradingPage() {
|
||||
{confirmMacroToggle && (
|
||||
<div className="mt-4 rounded-lg border border-orange-700/50 bg-orange-900/20 p-4">
|
||||
<p className="text-sm text-orange-300">
|
||||
Are you sure you want to {macroStatus?.enabled ? 'disable' : 'enable'} the macro signal layer?
|
||||
{macroStatus?.enabled
|
||||
Are you sure you want to {macroEnabled ? 'disable' : 'enable'} the macro signal layer?
|
||||
{macroEnabled
|
||||
? ' Disabling will exclude macro signals from trend summaries and recommendations.'
|
||||
: ' Enabling will include global event macro signals in trend summaries and recommendations.'}
|
||||
</p>
|
||||
<div className="mt-3 flex gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
toggleMacro.mutate(!macroStatus?.enabled);
|
||||
toggleMacro.mutate(!macroEnabled);
|
||||
setConfirmMacroToggle(false);
|
||||
}}
|
||||
className="rounded-md bg-orange-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-orange-700"
|
||||
@@ -150,20 +154,20 @@ export function TradingPage() {
|
||||
<button
|
||||
onClick={() => setConfirmCompetitiveToggle(true)}
|
||||
className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:ring-offset-surface-900 ${
|
||||
competitiveStatus?.enabled ? 'bg-brand-600' : 'bg-surface-700'
|
||||
competitiveEnabled ? 'bg-brand-600' : 'bg-surface-700'
|
||||
}`}
|
||||
role="switch"
|
||||
aria-checked={competitiveStatus?.enabled ?? false}
|
||||
aria-checked={competitiveEnabled ?? false}
|
||||
aria-label="Toggle competitive signal layer"
|
||||
>
|
||||
<span
|
||||
className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition-transform ${
|
||||
competitiveStatus?.enabled ? 'translate-x-5' : 'translate-x-0'
|
||||
competitiveEnabled ? 'translate-x-5' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<span className="text-sm text-gray-300">
|
||||
{competitiveStatus?.enabled ? 'Enabled' : 'Disabled'}
|
||||
{competitiveEnabled ? 'Enabled' : 'Disabled'}
|
||||
</span>
|
||||
{competitiveStatus?.toggled_at && (
|
||||
<span className="text-xs text-gray-500">
|
||||
@@ -177,15 +181,15 @@ export function TradingPage() {
|
||||
{confirmCompetitiveToggle && (
|
||||
<div className="mt-4 rounded-lg border border-orange-700/50 bg-orange-900/20 p-4">
|
||||
<p className="text-sm text-orange-300">
|
||||
Are you sure you want to {competitiveStatus?.enabled ? 'disable' : 'enable'} the competitive signal layer?
|
||||
{competitiveStatus?.enabled
|
||||
Are you sure you want to {competitiveEnabled ? 'disable' : 'enable'} the competitive signal layer?
|
||||
{competitiveEnabled
|
||||
? ' Disabling will exclude historical pattern and competitive signals from trend summaries and recommendations.'
|
||||
: ' Enabling will include historical pattern and competitive signals in trend summaries and recommendations.'}
|
||||
</p>
|
||||
<div className="mt-3 flex gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
toggleCompetitive.mutate(!competitiveStatus?.enabled);
|
||||
toggleCompetitive.mutate(!competitiveEnabled);
|
||||
setConfirmCompetitiveToggle(false);
|
||||
}}
|
||||
className="rounded-md bg-orange-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-orange-700"
|
||||
|
||||
Reference in New Issue
Block a user