feat(ui): split client into Live and Strategy pages and wire new routes
Rebuilds the client into Live (watchlist with charts, fundamentals, news, quant analysis) and Strategy (backtest runner / precomputed results) pages, adds the corresponding /api/stocks/:symbol/chart|fundamentals|related|quant and /api/strategies endpoints, and updates project tooling. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
606
web/src/client/LivePage.tsx
Normal file
606
web/src/client/LivePage.tsx
Normal file
@@ -0,0 +1,606 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
ColorType,
|
||||
CrosshairMode,
|
||||
LineSeries,
|
||||
createChart,
|
||||
type IChartApi,
|
||||
type LineData,
|
||||
type Time,
|
||||
} from "lightweight-charts";
|
||||
import { ArrowDownRight, ArrowUpRight, RefreshCw, Wallet } from "lucide-react";
|
||||
import type {
|
||||
LiveStrategyState,
|
||||
StrategyMarket,
|
||||
TradeLogEntry,
|
||||
} from "../shared/strategyTypes";
|
||||
|
||||
async function api<T>(path: string, init?: RequestInit): Promise<T> {
|
||||
const response = await fetch(path, {
|
||||
...init,
|
||||
headers: { "Content-Type": "application/json", ...(init?.headers ?? {}) },
|
||||
});
|
||||
if (!response.ok) {
|
||||
const body = (await response.json().catch(() => undefined)) as { error?: string } | undefined;
|
||||
throw new Error(body?.error ?? `Request failed: ${response.status}`);
|
||||
}
|
||||
return (await response.json()) as T;
|
||||
}
|
||||
|
||||
type SortKey = "currentValue" | "unrealizedPnlPct" | "name" | "lastUpdated";
|
||||
|
||||
export function LivePage() {
|
||||
const [market, setMarket] = useState<StrategyMarket>("us");
|
||||
const [strategies, setStrategies] = useState<LiveStrategyState[]>([]);
|
||||
const [selectedName, setSelectedName] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [sortKey, setSortKey] = useState<SortKey>("unrealizedPnlPct");
|
||||
const [filterText, setFilterText] = useState("");
|
||||
|
||||
const refresh = (mk: StrategyMarket = market) => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
api<LiveStrategyState[]>(`/api/strategies/live?market=${mk}`)
|
||||
.then((res) => {
|
||||
setStrategies(res);
|
||||
if (res.length > 0) {
|
||||
setSelectedName((prev) =>
|
||||
prev && res.some((s) => s.name === prev) ? prev : res[0].name,
|
||||
);
|
||||
} else {
|
||||
setSelectedName(null);
|
||||
}
|
||||
})
|
||||
.catch((err) => setError(err instanceof Error ? err.message : "加载失败"))
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
refresh(market);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [market]);
|
||||
|
||||
const sorted = useMemo(() => {
|
||||
const list = [...strategies];
|
||||
const ft = filterText.trim().toLowerCase();
|
||||
const filtered = ft
|
||||
? list.filter(
|
||||
(s) =>
|
||||
s.name.toLowerCase().includes(ft) ||
|
||||
s.label.toLowerCase().includes(ft),
|
||||
)
|
||||
: list;
|
||||
filtered.sort((a, b) => {
|
||||
switch (sortKey) {
|
||||
case "currentValue":
|
||||
return (b.currentValue ?? 0) - (a.currentValue ?? 0);
|
||||
case "unrealizedPnlPct":
|
||||
return (b.unrealizedPnlPct ?? 0) - (a.unrealizedPnlPct ?? 0);
|
||||
case "name":
|
||||
return a.label.localeCompare(b.label);
|
||||
case "lastUpdated":
|
||||
return (b.lastUpdated ?? "").localeCompare(a.lastUpdated ?? "");
|
||||
}
|
||||
});
|
||||
return filtered;
|
||||
}, [strategies, sortKey, filterText]);
|
||||
|
||||
const focused = useMemo(
|
||||
() => sorted.find((s) => s.name === selectedName) ?? sorted[0],
|
||||
[sorted, selectedName],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="livePage">
|
||||
{error && <div className="alert">{error}</div>}
|
||||
|
||||
<div className="liveTopbar">
|
||||
<div className="segmented small">
|
||||
<button className={market === "us" ? "active" : ""} onClick={() => setMarket("us")}>美股</button>
|
||||
<button className={market === "cn" ? "active" : ""} onClick={() => setMarket("cn")}>A股</button>
|
||||
</div>
|
||||
<input
|
||||
className="ghostInput"
|
||||
placeholder="筛选策略..."
|
||||
value={filterText}
|
||||
onChange={(e) => setFilterText(e.target.value)}
|
||||
/>
|
||||
<label className="ghostSelectLabel">
|
||||
<span>排序</span>
|
||||
<select
|
||||
className="ghostSelect"
|
||||
value={sortKey}
|
||||
onChange={(e) => setSortKey(e.target.value as SortKey)}
|
||||
>
|
||||
<option value="unrealizedPnlPct">盈亏%</option>
|
||||
<option value="currentValue">总资产</option>
|
||||
<option value="name">名称</option>
|
||||
<option value="lastUpdated">更新时间</option>
|
||||
</select>
|
||||
</label>
|
||||
<button
|
||||
className={`ghostButton ${loading ? "loading" : ""}`}
|
||||
onClick={() => refresh()}
|
||||
disabled={loading}
|
||||
title="重新拉取最新行情和持仓"
|
||||
type="button"
|
||||
>
|
||||
<RefreshCw size={14} />
|
||||
{loading ? "加载中" : "刷新"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="liveLayout">
|
||||
<aside className="panel liveSidebar">
|
||||
<div className="panelHeader">
|
||||
<h2>策略列表</h2>
|
||||
<span>{sorted.length} / {strategies.length}</span>
|
||||
</div>
|
||||
{loading && sorted.length === 0 ? (
|
||||
<p className="hint">加载中...</p>
|
||||
) : sorted.length === 0 ? (
|
||||
<p className="hint">暂无在线策略。运行 quant 的 trader.py auto 后再刷新。</p>
|
||||
) : (
|
||||
<div className="liveList">
|
||||
{sorted.map((s) => (
|
||||
<button
|
||||
key={s.name}
|
||||
className={`liveListItem ${focused?.name === s.name ? "selected" : ""}`}
|
||||
onClick={() => setSelectedName(s.name)}
|
||||
title={`${s.label} (${s.name})`}
|
||||
type="button"
|
||||
>
|
||||
<div className="liveListTitle">
|
||||
<strong>{s.label}</strong>
|
||||
<span className="liveListName">{s.name}</span>
|
||||
</div>
|
||||
<div className="liveListBody">
|
||||
<span className="liveListValue">{money(s.currentValue)}</span>
|
||||
<span
|
||||
className={`liveListPnl ${s.unrealizedPnl >= 0 ? "positive" : "negative"}`}
|
||||
>
|
||||
{s.unrealizedPnl >= 0 ? <ArrowUpRight size={11} /> : <ArrowDownRight size={11} />}
|
||||
{pct(s.unrealizedPnlPct)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="liveListMeta">
|
||||
<span>持仓 {Object.keys(s.holdings).length}</span>
|
||||
<span>{s.lastUpdated ?? "-"}</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
|
||||
<section className="liveDetail">
|
||||
{focused ? (
|
||||
<LiveStrategyDetail strategy={focused} />
|
||||
) : (
|
||||
<div className="panel emptyState">
|
||||
<Wallet size={40} />
|
||||
<p>未选择策略</p>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LiveStrategyDetail({ strategy }: { strategy: LiveStrategyState }) {
|
||||
const m = strategy;
|
||||
return (
|
||||
<>
|
||||
<div className="panel liveSummary">
|
||||
<div className="liveSummaryHead">
|
||||
<div>
|
||||
<p className="eyebrow">{m.name}</p>
|
||||
<h2>{m.label}</h2>
|
||||
<p className="hint">
|
||||
{m.market.toUpperCase()} · 初始 {money(m.initialCapital)} · 更新于 {m.lastUpdated ?? "-"}
|
||||
{m.priceAsOf && m.priceAsOf !== m.lastUpdated ? ` · 价格 ${m.priceAsOf}` : ""}
|
||||
</p>
|
||||
</div>
|
||||
<div className={`liveTotalPnl ${m.unrealizedPnl >= 0 ? "positive" : "negative"}`}>
|
||||
<strong>{money(m.currentValue)}</strong>
|
||||
<span>
|
||||
{m.unrealizedPnl >= 0 ? "+" : ""}
|
||||
{money(m.unrealizedPnl)} ({pct(m.unrealizedPnlPct)})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="liveSummaryGrid">
|
||||
<SummaryCell label="现金" value={money(m.cash)} />
|
||||
<SummaryCell label="持仓市值" value={money(m.marketValue)} />
|
||||
<SummaryCell label="总资产" value={money(m.currentValue)} />
|
||||
<SummaryCell label="持仓数" value={`${Object.keys(m.holdings).length}`} />
|
||||
<SummaryCell label="累计交易" value={`${m.tradeLog.length}`} />
|
||||
{m.metrics && <SummaryCell label="Sharpe" value={m.metrics.sharpeRatio.toFixed(2)} />}
|
||||
{m.metrics && <SummaryCell label="最大回撤" value={pct(m.metrics.maxDrawdown)} negative />}
|
||||
{m.metrics && <SummaryCell label="日胜率" value={pct(m.metrics.winRate)} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LiveEquityChart equityCurve={m.equityCurve} initialCapital={m.initialCapital} />
|
||||
|
||||
<HoldingsPanel
|
||||
holdings={m.holdingsDetail}
|
||||
cash={m.cash}
|
||||
currentValue={m.currentValue}
|
||||
/>
|
||||
|
||||
<TradeLogPanel log={m.tradeLog} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function SummaryCell({
|
||||
label,
|
||||
value,
|
||||
positive,
|
||||
negative,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
positive?: boolean;
|
||||
negative?: boolean;
|
||||
}) {
|
||||
const cls = positive ? "positive" : negative ? "negative" : "";
|
||||
return (
|
||||
<div className={`summaryCell ${cls}`}>
|
||||
<span className="summaryValue">{value}</span>
|
||||
<span className="summaryLabel">{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LiveEquityChart({
|
||||
equityCurve,
|
||||
initialCapital,
|
||||
}: {
|
||||
equityCurve: { date: string; value: number }[];
|
||||
initialCapital: number;
|
||||
}) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const chartRef = useRef<IChartApi | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
const chart = createChart(containerRef.current, {
|
||||
width: containerRef.current.clientWidth,
|
||||
height: 280,
|
||||
layout: {
|
||||
background: { type: ColorType.Solid, color: "#0d1219" },
|
||||
textColor: "#b0b0b0",
|
||||
attributionLogo: false,
|
||||
},
|
||||
grid: {
|
||||
vertLines: { color: "#1a2030" },
|
||||
horzLines: { color: "#1a2030" },
|
||||
},
|
||||
crosshair: { mode: CrosshairMode.Normal },
|
||||
timeScale: { borderColor: "#1d2530", timeVisible: false },
|
||||
rightPriceScale: { borderColor: "#1d2530" },
|
||||
});
|
||||
chartRef.current = chart;
|
||||
|
||||
const eqSeries = chart.addSeries(LineSeries, {
|
||||
color: "#4db6ff",
|
||||
lineWidth: 2,
|
||||
priceLineVisible: false,
|
||||
});
|
||||
const data: LineData<Time>[] = equityCurve.map((p) => ({
|
||||
time: p.date as Time,
|
||||
value: p.value,
|
||||
}));
|
||||
eqSeries.setData(data);
|
||||
|
||||
if (initialCapital && equityCurve.length > 0) {
|
||||
eqSeries.createPriceLine({
|
||||
price: initialCapital,
|
||||
color: "#5e6a78",
|
||||
lineWidth: 1,
|
||||
lineStyle: 2,
|
||||
axisLabelVisible: true,
|
||||
title: "初始",
|
||||
});
|
||||
}
|
||||
|
||||
chart.timeScale().fitContent();
|
||||
|
||||
const ro = new ResizeObserver((entries) => {
|
||||
const w = entries[0]?.contentRect.width;
|
||||
if (w) chart.applyOptions({ width: w });
|
||||
});
|
||||
ro.observe(containerRef.current);
|
||||
|
||||
return () => {
|
||||
ro.disconnect();
|
||||
chart.remove();
|
||||
chartRef.current = null;
|
||||
};
|
||||
}, [equityCurve, initialCapital]);
|
||||
|
||||
return (
|
||||
<div className="panel chartPanel">
|
||||
<div className="panelHeader">
|
||||
<div>
|
||||
<p className="eyebrow">Live Equity</p>
|
||||
<h2>资产曲线</h2>
|
||||
<p className="hint">
|
||||
{equityCurve.length} 天数据
|
||||
{equityCurve.length > 0
|
||||
? ` · ${equityCurve[0].date} → ${equityCurve[equityCurve.length - 1].date}`
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div ref={containerRef} className="liveEquityChart" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const DEFAULT_PAGE_SIZE = 30;
|
||||
const PAGE_SIZE_OPTIONS = [30, 50, 100];
|
||||
|
||||
type PaginationState = { page: number; pageSize: number };
|
||||
|
||||
function usePagination(total: number, deps: unknown[] = []): [
|
||||
PaginationState,
|
||||
React.Dispatch<React.SetStateAction<PaginationState>>,
|
||||
{ totalPages: number; sliceStart: number; sliceEnd: number },
|
||||
] {
|
||||
const [state, setState] = useState<PaginationState>({
|
||||
page: 1,
|
||||
pageSize: DEFAULT_PAGE_SIZE,
|
||||
});
|
||||
|
||||
// Reset to page 1 whenever the underlying data identity changes.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
useEffect(() => setState((s) => ({ ...s, page: 1 })), deps);
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(total / state.pageSize));
|
||||
const safePage = Math.min(state.page, totalPages);
|
||||
const sliceStart = (safePage - 1) * state.pageSize;
|
||||
const sliceEnd = Math.min(total, sliceStart + state.pageSize);
|
||||
return [
|
||||
{ ...state, page: safePage },
|
||||
setState,
|
||||
{ totalPages, sliceStart, sliceEnd },
|
||||
];
|
||||
}
|
||||
|
||||
function PaginationBar({
|
||||
page,
|
||||
pageSize,
|
||||
totalPages,
|
||||
total,
|
||||
sliceStart,
|
||||
sliceEnd,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
}: {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
totalPages: number;
|
||||
total: number;
|
||||
sliceStart: number;
|
||||
sliceEnd: number;
|
||||
onPageChange: (page: number) => void;
|
||||
onPageSizeChange: (size: number) => void;
|
||||
}) {
|
||||
if (total === 0) return null;
|
||||
return (
|
||||
<div className="paginationBar">
|
||||
<span className="paginationRange">
|
||||
{sliceStart + 1}–{sliceEnd} / {total}
|
||||
</span>
|
||||
<div className="paginationControls">
|
||||
<button
|
||||
className="paginationButton"
|
||||
onClick={() => onPageChange(1)}
|
||||
disabled={page <= 1}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
<button
|
||||
className="paginationButton"
|
||||
onClick={() => onPageChange(page - 1)}
|
||||
disabled={page <= 1}
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<span className="paginationPage">
|
||||
{page} / {totalPages}
|
||||
</span>
|
||||
<button
|
||||
className="paginationButton"
|
||||
onClick={() => onPageChange(page + 1)}
|
||||
disabled={page >= totalPages}
|
||||
>
|
||||
›
|
||||
</button>
|
||||
<button
|
||||
className="paginationButton"
|
||||
onClick={() => onPageChange(totalPages)}
|
||||
disabled={page >= totalPages}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
<select
|
||||
className="ghostSelect ghostSelectCompact"
|
||||
value={pageSize}
|
||||
onChange={(e) => onPageSizeChange(Number(e.target.value))}
|
||||
>
|
||||
{PAGE_SIZE_OPTIONS.map((sz) => (
|
||||
<option key={sz} value={sz}>
|
||||
{sz} / 页
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function HoldingsPanel({
|
||||
holdings,
|
||||
cash,
|
||||
currentValue,
|
||||
}: {
|
||||
holdings: LiveStrategyState["holdingsDetail"];
|
||||
cash: number;
|
||||
currentValue: number;
|
||||
}) {
|
||||
const [{ page, pageSize }, setPage, { totalPages, sliceStart, sliceEnd }] =
|
||||
usePagination(holdings.length, [holdings]);
|
||||
const visible = holdings.slice(sliceStart, sliceEnd);
|
||||
const cashWeight = currentValue ? cash / currentValue : 0;
|
||||
|
||||
return (
|
||||
<div className="panel holdingsPanel">
|
||||
<div className="panelHeader">
|
||||
<h2>当前持仓</h2>
|
||||
<span>{holdings.length} 只</span>
|
||||
</div>
|
||||
{holdings.length === 0 ? (
|
||||
<p className="hint">当前空仓，全部为现金。</p>
|
||||
) : (
|
||||
<>
|
||||
<table className="holdingsTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>标的</th>
|
||||
<th>持股</th>
|
||||
<th>最新价</th>
|
||||
<th>市值</th>
|
||||
<th>占组合</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{visible.map((h) => {
|
||||
const weight = currentValue ? (h.marketValue ?? 0) / currentValue : 0;
|
||||
return (
|
||||
<tr key={h.ticker}>
|
||||
<td>
|
||||
<strong>{h.ticker}</strong>
|
||||
</td>
|
||||
<td>{h.shares.toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
|
||||
<td>{h.lastPrice !== null ? `$${h.lastPrice.toFixed(2)}` : "-"}</td>
|
||||
<td>{h.marketValue !== null ? money(h.marketValue) : "-"}</td>
|
||||
<td>{pct(weight)}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className="holdingsCashRow">
|
||||
<td>
|
||||
<strong>现金</strong>
|
||||
</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>{money(cash)}</td>
|
||||
<td>{pct(cashWeight)}</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<PaginationBar
|
||||
page={page}
|
||||
pageSize={pageSize}
|
||||
totalPages={totalPages}
|
||||
total={holdings.length}
|
||||
sliceStart={sliceStart}
|
||||
sliceEnd={sliceEnd}
|
||||
onPageChange={(p) => setPage((s) => ({ ...s, page: p }))}
|
||||
onPageSizeChange={(sz) => setPage(() => ({ page: 1, pageSize: sz }))}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TradeLogPanel({ log }: { log: TradeLogEntry[] }) {
|
||||
// Render newest-first; the trader logs trades chronologically.
|
||||
const reversed = useMemo(() => [...log].reverse(), [log]);
|
||||
const [{ page, pageSize }, setPage, { totalPages, sliceStart, sliceEnd }] =
|
||||
usePagination(reversed.length, [log]);
|
||||
const visible = reversed.slice(sliceStart, sliceEnd);
|
||||
|
||||
return (
|
||||
<div className="panel tradeLogPanel">
|
||||
<div className="panelHeader">
|
||||
<h2>交易历史</h2>
|
||||
<span>{log.length} 笔</span>
|
||||
</div>
|
||||
{log.length === 0 ? (
|
||||
<p className="hint">尚无交易记录。</p>
|
||||
) : (
|
||||
<>
|
||||
<table className="tradeLogTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>日期</th>
|
||||
<th>方向</th>
|
||||
<th>标的</th>
|
||||
<th>股数</th>
|
||||
<th>成交价</th>
|
||||
<th>金额</th>
|
||||
<th>手续费</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{visible.map((t, i) => (
|
||||
<tr
|
||||
key={`${t.date}-${t.ticker}-${sliceStart + i}`}
|
||||
className={t.action === "BUY" ? "buy" : "sell"}
|
||||
>
|
||||
<td>{t.date}</td>
|
||||
<td>
|
||||
<span className={`tradeAction ${t.action.toLowerCase()}`}>
|
||||
{t.action === "BUY" ? "买入" : "卖出"}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<strong>{t.ticker}</strong>
|
||||
</td>
|
||||
<td>{t.shares.toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
|
||||
<td>${t.price.toFixed(2)}</td>
|
||||
<td>{money(t.value)}</td>
|
||||
<td>{money(t.commission)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<PaginationBar
|
||||
page={page}
|
||||
pageSize={pageSize}
|
||||
totalPages={totalPages}
|
||||
total={log.length}
|
||||
sliceStart={sliceStart}
|
||||
sliceEnd={sliceEnd}
|
||||
onPageChange={(p) => setPage((s) => ({ ...s, page: p }))}
|
||||
onPageSizeChange={(sz) => setPage(() => ({ page: 1, pageSize: sz }))}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function money(v: number): string {
|
||||
if (typeof v !== "number" || !Number.isFinite(v)) return "-";
|
||||
return v.toLocaleString(undefined, {
|
||||
maximumFractionDigits: 0,
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
});
|
||||
}
|
||||
|
||||
function pct(v: number): string {
|
||||
if (typeof v !== "number" || !Number.isFinite(v)) return "-";
|
||||
return `${(v * 100).toFixed(1)}%`;
|
||||
}
|
||||
Reference in New Issue
Block a user