setOpen(null)} />
);
};
const MegaPanel = ({ data }) => {
const colsClass =
data.layout === 'platforms' ? 'cols-platforms' :
data.layout === 'cols-2' ? 'cols-2' :
data.layout === 'cols-3' ? 'cols-3' :
data.layout === 'cols-4' ? 'cols-4' : 'cols-3';
// For the platforms layout we render the feature card as the first column.
const renderFeature = (data.layout === 'platforms' || data.feature) && data.feature;
return (
— {data.coord.split(' / ')[0]} / {data.coord.split(' / ').slice(1).join(' / ')}
);
};
const Ticker = () => {
const items = [
{ sym: 'INFRA', v: '225,431', d: 'Accounts Under Management', dir: 'pos' },
{ sym: 'RISK', v: '14.2ms', d: 'Avg Event Latency', dir: 'pos' },
{ sym: 'OPS', v: '$450.8M', d: 'Group Client Revenue Powered', dir: 'pos' },
{ sym: 'NODES', v: '126', d: 'Integrations Live', dir: 'pos' },
{ sym: 'AI', v: '2.1B', d: 'Risk Events Scored / mo', dir: 'pos' },
{ sym: 'UPTIME', v: '99.98%', d: '30-Day Rolling', dir: 'pos' },
{ sym: 'CLIENTS', v: '125+', d: 'Clients Operating', dir: 'pos' },
{ sym: 'GLOBAL', v: '10 / 24', d: 'Locations · Timezone Cover', dir: 'pos' }];
const Track = () =>
{items.map((it, i) =>
{it.sym}
{it.v}
{it.d}
●
)}
;
return
;
};
const Hero = () => {
const gridRef = React.useRef(null);
const metaRef = React.useRef(null);
React.useEffect(() => {
const fit = () => {
const grid = gridRef.current, meta = metaRef.current;
if (!grid || !meta) return;
const top = grid.parentElement.getBoundingClientRect().top;
const mTop = meta.getBoundingClientRect().top;
grid.style.height = Math.max(0, mTop - top - 28) + 'px';
};
fit();
const t1 = setTimeout(fit, 200);
const t2 = setTimeout(fit, 600);
window.addEventListener('resize', fit);
return () => { window.removeEventListener('resize', fit); clearTimeout(t1); clearTimeout(t2); };
}, []);
return (
QTG
Modular Trading Infrastructure
Building the Infrastructure layer for Modern Trading.
Modular infrastructure for prop firms, brokers, and fintech platforms — operations, risk, automation, and AI on one connected core.
Founded2022
Team headcount65+
Clients worldwide125+
End-users served2.6M+
);
};
// HERO DASHBOARD MOCK
const HeroDashboard = () =>
OVERVIEW
RISK
ACCOUNTS
PAYOUTS
SUPPORT
qtg.cloud / yourpropfirm · prod-eu-1
;
// Reduced motion check
const usePrefersReducedMotion = () => {
const [reduced, setReduced] = React.useState(false);
React.useEffect(() => {
const m = window.matchMedia('(prefers-reduced-motion: reduce)');
setReduced(m.matches);
const h = (e) => setReduced(e.matches);
m.addEventListener?.('change', h);
return () => m.removeEventListener?.('change', h);
}, []);
return reduced;
};
// Visibility-aware interval — pauses when tab is hidden.
// (We deliberately do NOT gate this on prefers-reduced-motion: the live data
// IS the content here, while the visual flourishes — pulses, slide-ins,
// transitions — are gated separately via CSS @media rules.)
const useLiveInterval = (fn, ms) => {
React.useEffect(() => {
let id = null;
const start = () => {if (id == null) id = setInterval(fn, ms);};
const stop = () => {if (id != null) {clearInterval(id);id = null;}};
const onVis = () => document.hidden ? stop() : start();
start();
document.addEventListener('visibilitychange', onVis);
return () => {stop();document.removeEventListener('visibilitychange', onVis);};
}, [fn, ms]);
};
const DashSidebar = () => {
// Risk index slowly drifts within the "normal" band (0.39 – 0.47)
const [risk, setRisk] = React.useState(0.42);
const [trader, setTrader] = React.useState(24182);
const [payouts, setPayouts] = React.useState(46);
const [overview, setOverview] = React.useState(12);
const [challenges, setChallenges] = React.useState(3402);
const [accounts, setAccounts] = React.useState(225431);
const [queued, setQueued] = React.useState(1.24);
const [affiliates, setAffiliates] = React.useState(892);
const [support, setSupport] = React.useState(12);
useLiveInterval(React.useCallback(() => {
setRisk((r) => {
const next = r + (Math.random() - 0.5) * 0.022;
return Math.max(0.39, Math.min(0.47, next));
});
setTrader((t) => t + Math.floor(Math.random() * 7 + 1));
if (Math.random() < 0.45) setPayouts((p) => Math.max(40, Math.min(58, p + (Math.random() < 0.55 ? 1 : -1))));
if (Math.random() < 0.55) setOverview((o) => Math.max(8, Math.min(18, o + (Math.random() < 0.5 ? -1 : 1))));
setChallenges((c) => Math.max(3380, Math.min(3445, c + Math.floor((Math.random() - 0.4) * 7))));
setAccounts((a) => a + Math.floor(Math.random() * 22 + 4));
if (Math.random() < 0.45) setQueued((q) => +Math.max(1.10, Math.min(1.38, q + (Math.random() - 0.45) * 0.022)).toFixed(2));
if (Math.random() < 0.30) setAffiliates((a) => a + (Math.random() < 0.7 ? 1 : 0));
if (Math.random() < 0.40) setSupport((s) => Math.max(8, Math.min(18, s + (Math.random() < 0.55 ? -1 : 1))));
}, []), 900);
const riskPct = Math.round((risk - 0.30) / (0.70 - 0.30) * 100);
const status = risk < 0.45 ? 'NORMAL' : risk < 0.55 ? 'ELEVATED' : 'HIGH';
const statusColor = risk < 0.45 ? 'var(--accent)' : risk < 0.55 ? 'var(--warn)' : 'var(--danger)';
const items = [
['Overview', String(overview)],
['Traders', trader.toLocaleString()],
['Challenges', challenges.toLocaleString() + ' active'],
['Accounts', accounts.toLocaleString()],
['Payouts', '$' + queued.toFixed(2) + 'M queued'],
['Risk alerts', payouts + ' / live'],
['Affiliates', affiliates.toLocaleString()],
['Support', support + ' open'],
['Reporting', '—']];
return (
OPERATING SYSTEM
{items.map(([k, v], i) =>
{k}
{v}
)}
QUANTSENTRY · LIVE
{risk.toFixed(2)}
RISK INDEX · {status}
);
};
const buildCandle = (i, prevClose) => {
const base = prevClose != null ? prevClose : 50 + Math.sin(i / 4) * 18 + i * 0.6;
const drift = (Math.random() - 0.48) * 3.2;
const o = base;
const c = base + drift + Math.sin(i * 1.3) * 1.5;
const h = Math.max(o, c) + Math.random() * 4 + 1.5;
const l = Math.min(o, c) - Math.random() * 4 - 1.5;
return { o, c, h, l };
};
const DashMainChart = () => {
// Build initial candle-like series
const initial = React.useMemo(() => {
const arr = [];
let prev = null;
for (let i = 0; i < 48; i++) {
const base = 50 + Math.sin(i / 4) * 18 + i * 0.6;
const o = base + Math.sin(i * 1.7) * 4;
const c = base + Math.cos(i * 1.3) * 5;
const h = Math.max(o, c) + Math.abs(Math.sin(i * 0.9)) * 4 + 2;
const l = Math.min(o, c) - Math.abs(Math.cos(i * 0.7)) * 4 - 2;
arr.push({ o, c, h, l });
prev = c;
}
return arr;
}, []);
const [candles, setCandles] = React.useState(initial);
const [revenue, setRevenue] = React.useState(3.842);
const [pct, setPct] = React.useState(18.4);
const [traders, setTraders] = React.useState(24182);
const [payout, setPayout] = React.useState(2840);
const [tickets, setTickets] = React.useState(98.2);
const idxRef = React.useRef(48);
// Tick the *last* candle every ~900ms (live price action)
useLiveInterval(React.useCallback(() => {
setCandles((prev) => {
const next = prev.slice();
const last = { ...next[next.length - 1] };
last.c += (Math.random() - 0.5) * 1.4;
last.h = Math.max(last.h, last.c + Math.random() * 0.6);
last.l = Math.min(last.l, last.c - Math.random() * 0.6);
next[next.length - 1] = last;
return next;
});
setRevenue((r) => +(r + (Math.random() - 0.45) * 0.004).toFixed(3));
setPct((p) => +(p + (Math.random() - 0.5) * 0.08).toFixed(1));
}, []), 900);
// Append a brand-new candle every ~6s, drop oldest
useLiveInterval(React.useCallback(() => {
setCandles((prev) => {
const last = prev[prev.length - 1];
const fresh = buildCandle(idxRef.current++, last.c);
return [...prev.slice(1), fresh];
});
setTraders((t) => t + Math.floor(Math.random() * 8 + 1));
setPayout((p) => p + Math.floor((Math.random() - 0.4) * 6));
setTickets((tk) => +Math.max(96.5, Math.min(99.5, tk + (Math.random() - 0.5) * 0.2)).toFixed(1));
}, []), 6000);
const max = Math.max(...candles.map((c) => c.h));
const min = Math.min(...candles.map((c) => c.l));
const norm = (v) => 100 - (v - min) / (max - min) * 100;
return (
CLIENT REVENUE POWERED · 30D
${revenue.toFixed(3)}M
= 0 ? 'var(--accent)' : 'var(--danger)', fontVariantNumeric: 'tabular-nums', transition: 'color 0.4s', whiteSpace: 'nowrap' }}>{pct >= 0 ? '+' : ''}{pct.toFixed(1)}%
{['1D', '1W', '1M', '3M', 'YTD', 'ALL'].map((t) =>
{t}
)}
USD
+18.4% MoM
{[
['Active traders', traders.toLocaleString(), '+' + (412 + Math.floor((traders - 24182) / 1)).toLocaleString().slice(0, 4)],
['Avg payout', '$' + payout.toLocaleString(), '+6.2%'],
['Pass rate', '11.4%', '—'],
['Tickets / SLA', tickets.toFixed(1) + '%', tickets >= 98 ? '+1.1%' : '—']].
map(([k, v, d], i) =>
)}
);
};
const EVENT_TEMPLATES = [
{ sev: 'high', tag: 'auto-flag', msg: 'Latency arbitrage pattern · acct {ACCT}' },
{ sev: 'med', tag: 'review', msg: 'Copy-trade cluster · {N} accts linked' },
{ sev: 'low', tag: 'enforced', msg: 'Drawdown breach · acct {ACCT}' },
{ sev: 'med', tag: 'review', msg: 'IP velocity · region {R1} → {R2}' },
{ sev: 'low', tag: 'observed', msg: 'News-tick anomaly · {WIN} window' },
{ sev: 'high', tag: 'auto-flag', msg: 'Martingale escalation · acct {ACCT}' },
{ sev: 'low', tag: 'observed', msg: 'Slippage outlier · venue {V}' },
{ sev: 'med', tag: 'review', msg: 'Hedge-pair detection · {N} accts' },
{ sev: 'high', tag: 'auto-flag', msg: 'Same-IP cluster · {N} accounts' },
{ sev: 'low', tag: 'observed', msg: 'Tick latency spike · venue {V}' },
{ sev: 'med', tag: 'review', msg: 'KYC mismatch · acct {ACCT}' },
{ sev: 'low', tag: 'enforced', msg: 'Daily DD breach · acct {ACCT}' }];
const REGIONS = ['SG', 'AE', 'UK', 'DE', 'US', 'BR', 'HK', 'TR', 'IN', 'ZA'];
const VENUES = ['A', 'B', 'C', 'D', 'E'];
const WINDOWS = ['NFP', 'CPI', 'FOMC', 'ECB', 'OPEC'];
const fillTemplate = (m) => m.
replace('{ACCT}', String(70000 + Math.floor(Math.random() * 15000))).
replace('{N}', String(3 + Math.floor(Math.random() * 9))).
replace('{R1}', REGIONS[Math.floor(Math.random() * REGIONS.length)]).
replace('{R2}', REGIONS[Math.floor(Math.random() * REGIONS.length)]).
replace('{V}', VENUES[Math.floor(Math.random() * VENUES.length)]).
replace('{WIN}', WINDOWS[Math.floor(Math.random() * WINDOWS.length)]);
const fmtTime = (d) => [d.getHours(), d.getMinutes(), d.getSeconds()].map((n) => String(n).padStart(2, '0')).join(':');
let __evCounter = 2034;
const DashRiskFeed = () => {
const initial = React.useMemo(() => [
{ id: 1, t: '14:02:11', sev: 'high', code: 'RX-2034', msg: 'Latency arbitrage pattern · acct 80213', tag: 'auto-flag' },
{ id: 2, t: '14:01:48', sev: 'med', code: 'RX-2033', msg: 'Copy-trade cluster · 6 accts linked', tag: 'review' },
{ id: 3, t: '14:01:12', sev: 'low', code: 'RX-2032', msg: 'Drawdown breach · acct 79114', tag: 'enforced' },
{ id: 4, t: '14:00:55', sev: 'med', code: 'RX-2031', msg: 'IP velocity · region SG → AE', tag: 'review' },
{ id: 5, t: '14:00:21', sev: 'low', code: 'RX-2030', msg: 'News-tick anomaly · NFP window', tag: 'observed' },
{ id: 6, t: '13:59:47', sev: 'high', code: 'RX-2029', msg: 'Martingale escalation · acct 78992', tag: 'auto-flag' },
{ id: 7, t: '13:59:02', sev: 'low', code: 'RX-2028', msg: 'Slippage outlier · venue B', tag: 'observed' }],
[]);
const [events, setEvents] = React.useState(initial);
const idRef = React.useRef(8);
useLiveInterval(React.useCallback(() => {
const tpl = EVENT_TEMPLATES[Math.floor(Math.random() * EVENT_TEMPLATES.length)];
__evCounter += 1;
const id = idRef.current++;
const fresh = {
id, t: fmtTime(new Date()), sev: tpl.sev,
code: 'RX-' + __evCounter,
msg: fillTemplate(tpl.msg),
tag: tpl.tag,
isNew: true
};
setEvents((prev) => [fresh, ...prev].slice(0, 7));
}, []), 3200);
const sevColor = (s) => s === 'high' ? 'var(--danger)' : s === 'med' ? 'var(--warn)' : 'var(--accent)';
return (
QUANTSENTRY · EVENT FEED
LIVE
);
};
const DashBottomStrip = () => {
const [latency, setLatency] = React.useState(83);
const [queue, setQueue] = React.useState(312);
useLiveInterval(React.useCallback(() => {
setLatency((l) => Math.max(72, Math.min(98, l + Math.round((Math.random() - 0.5) * 4))));
setQueue((q) => Math.max(280, Math.min(360, q + Math.round((Math.random() - 0.5) * 8))));
}, []), 2200);
const cells = [
['SYSTEM', 'operational', 'var(--accent)', true],
['SENTRY', 'scoring', 'var(--accent)', true],
['PAYOUTS', 'queued · ' + queue, 'var(--text-2)', false],
['QUEUE', latency + 'ms p95', 'var(--text-2)', false],
['REGION', 'EU-1 · SG-2', 'var(--text-2)', false],
['BUILD', 'v4.18.2', 'var(--text-3)', false]];
return (
{cells.map(([k, v, c, pulse], i) =>
{k}
{pulse && }
{v}
)}
);
};
Object.assign(window, { Nav: Nav, Hero: Hero, Ticker: Ticker });