507 lines
24 KiB
TypeScript
507 lines
24 KiB
TypeScript
import { useCallback, useEffect, useState, type ReactNode } from "react";
|
|
import { Link, useSearchParams } from "react-router-dom";
|
|
import { PageHeader } from "../components/layout/PageHeader";
|
|
import { OpportunityInboxCard } from "../components/radar/OpportunityInboxCard";
|
|
import { OpportunityDetailDrawer } from "../components/radar/OpportunityDetailDrawer";
|
|
import { SweepFunnelSummary } from "../components/radar/SweepFunnelSummary";
|
|
import { Button, EmptyState, Select } from "../components/ui";
|
|
import { useRepos } from "../data/DataContext";
|
|
import type { Brand, BrandProduct, JobStatus, Opportunity, OpportunityRemovalReason, OpportunityReviewState, OpportunityTimeScope, RadarSweep, RadarToday, RadarWatch } from "../domain/types";
|
|
import { useI18n } from "../i18n/I18nContext";
|
|
import { useFormatApiError } from "../lib/apiErrors";
|
|
import { sanitizeReviewCopy } from "../lib/reviewCopy";
|
|
import { formatLocalDateTime } from "../lib/time";
|
|
import "../styles/radar.css";
|
|
|
|
const PAGE_SIZE = 20;
|
|
|
|
function normalizeSort(value: string | null): string {
|
|
if (value === "posted") return "newest";
|
|
if (value === "score") return "recommended";
|
|
return value || "recommended";
|
|
}
|
|
|
|
export function RadarOpportunitiesPage() {
|
|
const repos = useRepos();
|
|
const { t, locale } = useI18n();
|
|
const formatError = useFormatApiError();
|
|
const [params, setParams] = useSearchParams();
|
|
const [list, setList] = useState<Opportunity[]>([]);
|
|
const [total, setTotal] = useState(0);
|
|
const [page, setPage] = useState(() => Math.max(1, Number(params.get("page")) || 1));
|
|
const [band, setBand] = useState(params.get("band") || "");
|
|
const [state, setState] = useState(params.get("match_state") || "");
|
|
const [brandId, setBrandId] = useState(params.get("brand_id") || "");
|
|
const [productId, setProductId] = useState(params.get("product_id") || "");
|
|
const [sort, setSort] = useState(() => normalizeSort(params.get("sort")));
|
|
const [reviewState, setReviewState] = useState<OpportunityReviewState>((params.get("review_state") as OpportunityReviewState) || "pending");
|
|
const [timeScope, setTimeScope] = useState<OpportunityTimeScope>((params.get("time_scope") as OpportunityTimeScope) || "today");
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState("");
|
|
const [notice, setNotice] = useState<{ text: string; contactId?: string } | null>(null);
|
|
const [brands, setBrands] = useState<Brand[]>([]);
|
|
const [products, setProducts] = useState<BrandProduct[]>([]);
|
|
const [selected, setSelected] = useState<Opportunity | null>(null);
|
|
const [busyId, setBusyId] = useState<string | null>(null);
|
|
const [sweeping, setSweeping] = useState(false);
|
|
const [lastSweep, setLastSweep] = useState<RadarSweep | null>(null);
|
|
const [watches, setWatches] = useState<RadarWatch[]>([]);
|
|
const [activeCount, setActiveCount] = useState(0);
|
|
const [watchTotal, setWatchTotal] = useState(0);
|
|
const [todayMeta, setTodayMeta] = useState<RadarToday | null>(null);
|
|
const [advancedOpen, setAdvancedOpen] = useState(() => Boolean(params.get("band") || params.get("match_state") || params.get("brand_id") || params.get("product_id")));
|
|
const scout = (repos as unknown as { scout?: { listBrands: () => Promise<Brand[]>; listProducts: (id: string) => Promise<BrandProduct[]> } }).scout;
|
|
|
|
useEffect(() => {
|
|
if (scout) void scout.listBrands().then(setBrands).catch(() => setBrands([]));
|
|
}, [scout]);
|
|
|
|
useEffect(() => {
|
|
if (!scout || !brandId) {
|
|
setProducts([]);
|
|
return;
|
|
}
|
|
void scout.listProducts(brandId).then(setProducts).catch(() => setProducts([]));
|
|
}, [scout, brandId]);
|
|
|
|
const loadPatrol = useCallback(async () => {
|
|
const [watchRes, today] = await Promise.all([
|
|
repos.radar.listWatches(1, 50).catch(() => null),
|
|
repos.radar.getToday().catch(() => null),
|
|
]);
|
|
if (watchRes) {
|
|
setWatches(watchRes.list);
|
|
setActiveCount(watchRes.active_count);
|
|
setWatchTotal(watchRes.total);
|
|
}
|
|
setTodayMeta(today);
|
|
if (typeof repos.radar.listSweeps === "function") {
|
|
const sweeps = await repos.radar.listSweeps(1, 1).catch(() => null);
|
|
setLastSweep(sweeps?.list[0] ?? null);
|
|
}
|
|
}, [repos.radar]);
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
const query = (scope: OpportunityTimeScope, review: OpportunityReviewState = reviewState) =>
|
|
repos.radar.listOpportunities({
|
|
page: scope === timeScope ? page : 1,
|
|
pageSize: PAGE_SIZE,
|
|
band: band || undefined,
|
|
match_state: state || undefined,
|
|
brand_id: brandId || undefined,
|
|
product_id: productId || undefined,
|
|
review_state: review,
|
|
time_scope: scope,
|
|
sort,
|
|
});
|
|
try {
|
|
let result = await query(timeScope);
|
|
const canWiden = reviewState === "pending" && timeScope === "today" && !band && !state && !brandId && !productId;
|
|
if (canWiden && result.total === 0) {
|
|
const week = await query("7d");
|
|
if (week.total > 0) {
|
|
setTimeScope("7d");
|
|
setPage(1);
|
|
const next = new URLSearchParams(typeof window === "undefined" ? "" : window.location.search);
|
|
next.set("time_scope", "7d");
|
|
next.delete("page");
|
|
setParams(next, { replace: true });
|
|
result = week;
|
|
setNotice({ text: t("radar.inbox.msg.widened7d", { n: week.total }) });
|
|
} else {
|
|
const all = await query("all");
|
|
if (all.total > 0) {
|
|
setTimeScope("all");
|
|
setPage(1);
|
|
const next = new URLSearchParams(typeof window === "undefined" ? "" : window.location.search);
|
|
next.set("time_scope", "all");
|
|
next.delete("page");
|
|
setParams(next, { replace: true });
|
|
result = all;
|
|
setNotice({ text: t("radar.inbox.msg.widenedAll", { n: all.total }) });
|
|
} else {
|
|
const seen = await query("7d", "completed");
|
|
if (seen.total > 0) {
|
|
setNotice({ text: t("radar.inbox.msg.alreadyReviewed", { n: seen.total }) });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
setList(result.list);
|
|
setTotal(result.total);
|
|
setError("");
|
|
} catch (e) {
|
|
setError(formatError(e));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [repos.radar, page, band, state, brandId, productId, sort, reviewState, timeScope, formatError, setParams, t]);
|
|
|
|
useEffect(() => { void load(); }, [load]);
|
|
useEffect(() => { void loadPatrol(); }, [loadPatrol]);
|
|
|
|
async function updateReviewState(
|
|
opportunity: Opportunity,
|
|
patch: { state: OpportunityReviewState; removal_reason?: OpportunityRemovalReason; removal_note?: string },
|
|
successText: string,
|
|
) {
|
|
setBusyId(opportunity.id);
|
|
setNotice(null);
|
|
try {
|
|
const updated = await repos.radar.updateOpportunityReviewState(opportunity.id, patch);
|
|
setSelected((current) => current?.id === updated.id ? null : current);
|
|
await load();
|
|
setError("");
|
|
setNotice({ text: successText });
|
|
} catch (e) {
|
|
setError(formatError(e));
|
|
} finally {
|
|
setBusyId(null);
|
|
}
|
|
}
|
|
|
|
async function acceptOpportunity(opportunity: Opportunity) {
|
|
setBusyId(opportunity.id);
|
|
setNotice(null);
|
|
try {
|
|
const result = await repos.radar.acceptOpportunity(opportunity.id);
|
|
setSelected((current) => current?.id === opportunity.id ? null : current);
|
|
await load();
|
|
setError("");
|
|
setNotice({
|
|
text: t("radar.inbox.msg.accepted"),
|
|
contactId: result.contact_id,
|
|
});
|
|
} catch (e) {
|
|
setError(formatError(e));
|
|
} finally {
|
|
setBusyId(null);
|
|
}
|
|
}
|
|
|
|
async function waitForJob(jobId: string): Promise<{ status: JobStatus; progress_summary: string; error: string; timedOut: boolean }> {
|
|
const deadline = Date.now() + 120_000;
|
|
let last: { status: JobStatus; progress_summary: string; error: string } = {
|
|
status: "queued",
|
|
progress_summary: t("radar.inbox.msg.waitingWorker"),
|
|
error: "",
|
|
};
|
|
while (Date.now() < deadline) {
|
|
const job = await repos.jobs.get(jobId);
|
|
if (job) {
|
|
last = { status: job.status, progress_summary: job.progress_summary, error: job.error || "" };
|
|
if (job.status === "succeeded" || job.status === "failed" || job.status === "cancelled") {
|
|
return { ...last, timedOut: false };
|
|
}
|
|
}
|
|
await new Promise((resolve) => window.setTimeout(resolve, 1500));
|
|
}
|
|
return { ...last, timedOut: true };
|
|
}
|
|
|
|
async function runNow() {
|
|
const active = watches.filter((watch) => watch.status === "active");
|
|
if (!active.length) {
|
|
setError(t("radar.inbox.err.noActive"));
|
|
return;
|
|
}
|
|
setSweeping(true);
|
|
setError("");
|
|
setNotice(null);
|
|
try {
|
|
const jobIds: string[] = [];
|
|
for (const watch of active) {
|
|
const res = await repos.radar.triggerWatchSweep(watch.id);
|
|
if (res.job_id) jobIds.push(res.job_id);
|
|
}
|
|
if (!jobIds.length) {
|
|
setError(t("radar.inbox.err.noJob"));
|
|
return;
|
|
}
|
|
setNotice({ text: t("radar.inbox.msg.running") });
|
|
// All active watches were queued together, so observe them together too.
|
|
// Waiting serially made the page look frozen for up to 120s per watch.
|
|
const finished = await Promise.all(jobIds.map((id) => waitForJob(id)));
|
|
const failed = finished.find((job) => job.status === "failed");
|
|
const cancelled = finished.find((job) => job.status === "cancelled");
|
|
const running = finished.filter((job) => job.timedOut || job.status === "pending" || job.status === "queued" || job.status === "running" || job.status === "cancel_requested");
|
|
const terminalError = failed
|
|
? failed.progress_summary || failed.error || t("radar.inbox.err.failed")
|
|
: cancelled
|
|
? t("radar.inbox.err.cancelled")
|
|
: "";
|
|
if (typeof repos.radar.listSweeps === "function") {
|
|
const sweeps = await repos.radar.listSweeps(1, 1).catch(() => null);
|
|
setLastSweep(sweeps?.list[0] ?? null);
|
|
}
|
|
await Promise.all([load(), loadPatrol()]);
|
|
const summary = finished.map((job) => job.progress_summary).filter(Boolean).join(" ");
|
|
// load() clears stale list errors on a successful refresh. Re-apply the
|
|
// job outcome afterwards so the actual patrol failure stays visible.
|
|
if (terminalError) {
|
|
setError(terminalError);
|
|
setNotice(null);
|
|
} else if (running.length > 0) {
|
|
setNotice({ text: t("radar.inbox.msg.queuedN", { n: jobIds.length }) });
|
|
} else {
|
|
setNotice({
|
|
text: /新建|created/i.test(summary)
|
|
? t("radar.inbox.msg.doneWithSummary", { summary })
|
|
: t("radar.inbox.msg.done"),
|
|
});
|
|
}
|
|
} catch (e) {
|
|
setError(formatError(e));
|
|
} finally {
|
|
setSweeping(false);
|
|
}
|
|
}
|
|
|
|
function writeParams(changes: Record<string, string>) {
|
|
const next = new URLSearchParams(params);
|
|
for (const [name, value] of Object.entries(changes)) {
|
|
if (value) next.set(name, value);
|
|
else next.delete(name);
|
|
}
|
|
setParams(next, { replace: true });
|
|
}
|
|
|
|
function resetFilters() {
|
|
setBand("");
|
|
setState("");
|
|
setBrandId("");
|
|
setProductId("");
|
|
setSort("recommended");
|
|
setTimeScope("today");
|
|
setAdvancedOpen(false);
|
|
setPage(1);
|
|
const next = new URLSearchParams();
|
|
if (reviewState !== "pending") next.set("review_state", reviewState);
|
|
setParams(next, { replace: true });
|
|
}
|
|
|
|
const lastSweptAt = Math.max(
|
|
todayMeta?.last_swept_at ?? 0,
|
|
...watches.map((watch) => watch.last_swept_at ?? 0),
|
|
);
|
|
const scheduledOn = activeCount > 0;
|
|
const advancedFilterCount = [band, state, brandId, productId].filter(Boolean).length;
|
|
const filtered = Boolean(advancedFilterCount || sort !== "recommended" || timeScope !== "today");
|
|
const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
|
|
|
|
function emptyCopy(): { title: string; description: string; action?: ReactNode } {
|
|
if (filtered) {
|
|
return {
|
|
title: t(
|
|
reviewState === "pending"
|
|
? "radar.inbox.empty.filteredPending"
|
|
: reviewState === "completed"
|
|
? "radar.inbox.empty.filteredCompleted"
|
|
: "radar.inbox.empty.filteredRemoved",
|
|
),
|
|
description: t("radar.inbox.empty.filteredHint"),
|
|
action: <Button type="button" variant="ghost" onClick={resetFilters}>{t("radar.inbox.clearFilters")}</Button>,
|
|
};
|
|
}
|
|
if (reviewState === "completed") {
|
|
return { title: t("radar.inbox.empty.noCompleted"), description: t("radar.inbox.empty.noCompletedHint") };
|
|
}
|
|
if (reviewState === "removed") {
|
|
return { title: t("radar.inbox.empty.noRemoved"), description: t("radar.inbox.empty.noRemovedHint") };
|
|
}
|
|
if (watchTotal === 0) {
|
|
return {
|
|
title: t("radar.inbox.empty.noWatchesTitle"),
|
|
description: t("radar.inbox.empty.noWatchesHint"),
|
|
action: <Link className="hb-btn hb-btn--secondary" to="/app/radar/watches">{t("radar.inbox.setupWatches")}</Link>,
|
|
};
|
|
}
|
|
if (!scheduledOn) {
|
|
return {
|
|
title: t("radar.inbox.empty.pausedTitle"),
|
|
description: t("radar.inbox.empty.pausedHint"),
|
|
action: <Link className="hb-btn hb-btn--secondary" to="/app/radar/watches">{t("radar.inbox.empty.openSchedule")}</Link>,
|
|
};
|
|
}
|
|
if (!lastSweptAt) {
|
|
return {
|
|
title: t("radar.inbox.empty.neverTitle"),
|
|
description: t("radar.inbox.empty.neverHint"),
|
|
action: <Button type="button" onClick={() => void runNow()} disabled={sweeping}>{sweeping ? t("radar.inbox.sweeping") : t("radar.inbox.sweepNow")}</Button>,
|
|
};
|
|
}
|
|
if (todayMeta?.empty_reason === "sweep_failed") {
|
|
const crawlerDead = /crawler session|Chrome crawler|Chrome 登入已過期/i.test(
|
|
`${todayMeta.empty_hint || ""} ${lastSweep?.failed_reason || ""}`,
|
|
);
|
|
return {
|
|
title: t("radar.inbox.empty.failedTitle"),
|
|
description: sanitizeReviewCopy(
|
|
todayMeta.empty_hint || t("radar.empty.sweepFailedHint"),
|
|
locale,
|
|
),
|
|
action: (
|
|
<>
|
|
{crawlerDead ? (
|
|
<Link className="hb-btn hb-btn--secondary" to="/app/settings">
|
|
{t("radar.reconnectSearch")}
|
|
</Link>
|
|
) : null}
|
|
<Button type="button" onClick={() => void runNow()} disabled={sweeping}>{sweeping ? t("radar.inbox.sweeping") : t("radar.inbox.sweepAgain")}</Button>
|
|
</>
|
|
),
|
|
};
|
|
}
|
|
if (lastSweep && lastSweep.hit_count === 0) {
|
|
return {
|
|
title: t("radar.inbox.empty.noHitsTitle"),
|
|
description: t("radar.inbox.empty.noHitsHint"),
|
|
action: <Link className="hb-btn hb-btn--secondary" to="/app/radar/watches">{t("radar.inbox.empty.editTerms")}</Link>,
|
|
};
|
|
}
|
|
return {
|
|
title: t("radar.inbox.empty.noFitTitle"),
|
|
description: lastSweep
|
|
? t("radar.inbox.empty.noFitStats", { hits: lastSweep.hit_count, judged: lastSweep.judged_count, created: lastSweep.created_count })
|
|
: t("radar.inbox.empty.noFitHint"),
|
|
action: <Button type="button" variant="ghost" onClick={() => { setTimeScope("7d"); setPage(1); writeParams({ time_scope: "7d", page: "" }); }}>{t("radar.inbox.see7d")}</Button>,
|
|
};
|
|
}
|
|
|
|
const empty = emptyCopy();
|
|
|
|
return (
|
|
<>
|
|
<PageHeader title={t("radar.inbox.title")} />
|
|
|
|
<section className="hb-radar-patrol" data-testid="radar-patrol-desk" aria-label={t("radar.inbox.patrolAria")}>
|
|
<div className="hb-radar-patrol__status">
|
|
<p>
|
|
<strong>{scheduledOn ? t("radar.inbox.scheduledOn") : t("radar.inbox.scheduledOff")}</strong>
|
|
<span>{t("radar.inbox.scheduleHint")}</span>
|
|
</p>
|
|
<p>
|
|
<strong>{lastSweptAt ? t("radar.inbox.lastSweep", { time: formatLocalDateTime(lastSweptAt) }) : t("radar.inbox.neverSwept")}</strong>
|
|
<span>{scheduledOn ? t("radar.inbox.activeWatches", { n: activeCount }) : watchTotal ? t("radar.inbox.allPaused") : t("radar.inbox.noWatches")}</span>
|
|
</p>
|
|
</div>
|
|
<div className="hb-radar-patrol__actions">
|
|
<Button type="button" onClick={() => void runNow()} disabled={sweeping || !scheduledOn}>
|
|
{sweeping ? t("radar.inbox.sweeping") : t("radar.inbox.sweepNow")}
|
|
</Button>
|
|
<Link className="hb-btn hb-btn--ghost" to="/app/radar/watches">{t("radar.inbox.setupWatches")}</Link>
|
|
<small>{t("radar.patrol.searchFallback")}</small>
|
|
</div>
|
|
</section>
|
|
{lastSweep ? <SweepFunnelSummary sweep={lastSweep} /> : null}
|
|
|
|
<section className="hb-radar-intro">
|
|
<div>
|
|
<strong>{t("radar.inbox.introTitle")}</strong>
|
|
<p>{t("radar.inbox.introBody")}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="hb-radar-filter-panel" aria-label={t("radar.inbox.resultsAria")}>
|
|
<div className="hb-radar-filter-panel__head">
|
|
<div className="hb-radar-inbox-tabs" role="tablist" aria-label={t("radar.inbox.tabsAria")}>
|
|
{(["pending", "completed", "removed"] as OpportunityReviewState[]).map((value) => (
|
|
<Button key={value} type="button" variant={reviewState === value ? "primary" : "ghost"} aria-pressed={reviewState === value} onClick={() => {
|
|
setReviewState(value); setPage(1); writeParams({ review_state: value === "pending" ? "" : value, page: "" });
|
|
}}>
|
|
{t(`radar.inbox.tab.${value}`)}
|
|
</Button>
|
|
))}
|
|
<span>{t("radar.inbox.total", { n: total })}</span>
|
|
</div>
|
|
{filtered ? <Button type="button" variant="ghost" onClick={resetFilters}>{t("radar.inbox.clearFilters")}</Button> : <span>{t("radar.inbox.defaultToday")}</span>}
|
|
</div>
|
|
<div className="hb-radar-inbox-essential-filters">
|
|
<Select name="all-time-scope" label={t("radar.inbox.timeScope")} value={timeScope} onChange={(e) => {
|
|
const value = e.target.value as OpportunityTimeScope;
|
|
setTimeScope(value); setPage(1); writeParams({ time_scope: value === "today" ? "" : value, page: "" });
|
|
}}>
|
|
<option value="today">{t("radar.inbox.time.today")}</option><option value="7d">{t("radar.inbox.time.7d")}</option><option value="all">{t("radar.inbox.time.all")}</option>
|
|
</Select>
|
|
<Select name="all-sort" label={t("radar.inbox.sort")} value={sort} onChange={(e) => {
|
|
setSort(e.target.value); setPage(1); writeParams({ sort: e.target.value === "recommended" ? "" : e.target.value, page: "" });
|
|
}}>
|
|
<option value="recommended">{t("radar.inbox.sort.recommended")}</option><option value="newest">{t("radar.inbox.sort.newest")}</option><option value="oldest">{t("radar.inbox.sort.oldest")}</option><option value="product_fit">{t("radar.inbox.sort.productFit")}</option><option value="demand_intent">{t("radar.inbox.sort.demandIntent")}</option>
|
|
</Select>
|
|
<Button type="button" variant="ghost" aria-expanded={advancedOpen} onClick={() => setAdvancedOpen((value) => !value)}>
|
|
{advancedOpen ? t("radar.inbox.hideFilters") : advancedFilterCount ? t("radar.inbox.moreFiltersN", { n: advancedFilterCount }) : t("radar.inbox.moreFilters")}
|
|
</Button>
|
|
</div>
|
|
{advancedOpen ? <div className="hb-radar-filter-grid hb-radar-filter-grid--all" aria-label={t("radar.inbox.moreFiltersAria")}>
|
|
{brands.length ? (
|
|
<Select name="all-brand" label={t("radar.inbox.brand")} value={brandId} onChange={(e) => {
|
|
const value = e.target.value;
|
|
setBrandId(value); setProductId(""); setPage(1);
|
|
writeParams({ brand_id: value, product_id: "", page: "" });
|
|
}}>
|
|
<option value="">{t("radar.inbox.allBrands")}</option>
|
|
{brands.map((b) => <option key={b.id} value={b.id}>{b.display_name}</option>)}
|
|
</Select>
|
|
) : null}
|
|
{products.length ? (
|
|
<Select name="all-product" label={t("radar.inbox.product")} value={productId} onChange={(e) => {
|
|
setProductId(e.target.value); setPage(1);
|
|
writeParams({ product_id: e.target.value, page: "" });
|
|
}}>
|
|
<option value="">{t("radar.inbox.allProducts")}</option>
|
|
{products.map((p) => <option key={p.id} value={p.id}>{p.label}</option>)}
|
|
</Select>
|
|
) : null}
|
|
<Select name="all-band" label={t("radar.inbox.band")} value={band} onChange={(e) => {
|
|
setBand(e.target.value); setPage(1); writeParams({ band: e.target.value, page: "" });
|
|
}}>
|
|
<option value="">{t("radar.inbox.allBands")}</option><option value="high">{t("radar.inbox.band.high")}</option><option value="mid">{t("radar.inbox.band.mid")}</option><option value="low">{t("radar.inbox.band.low")}</option>
|
|
</Select>
|
|
<Select name="all-state" label={t("radar.inbox.match")} value={state} onChange={(e) => {
|
|
setState(e.target.value); setPage(1); writeParams({ match_state: e.target.value, page: "" });
|
|
}}>
|
|
<option value="">{t("radar.inbox.allStates")}</option><option value="eligible">{t("radar.inbox.state.eligible")}</option><option value="weak">{t("radar.inbox.state.weak")}</option><option value="excluded">{t("radar.inbox.state.excluded")}</option><option value="generic">{t("radar.inbox.state.generic")}</option><option value="stale">{t("radar.inbox.state.stale")}</option>
|
|
</Select>
|
|
</div> : null}
|
|
</section>
|
|
|
|
{error ? <p className="hb-banner-error" role="alert">{error}</p> : null}
|
|
{notice ? <div className="hb-banner-ok" role="status"><span>{notice.text}</span>{notice.contactId ? <Link to={`/app/crm?contact=${encodeURIComponent(notice.contactId)}`}>{t("radar.inbox.goCrm")}</Link> : null}</div> : null}
|
|
{loading ? <p className="hb-radar-section__hint" role="status">{t("radar.inbox.loading")}</p> : null}
|
|
{!loading && !error && !list.length ? (
|
|
<EmptyState title={empty.title} description={empty.description} action={empty.action} />
|
|
) : null}
|
|
|
|
{!error ? (
|
|
<section className="hb-radar-page hb-radar-all-results">
|
|
{list.map((o) => <OpportunityInboxCard
|
|
key={o.id}
|
|
opportunity={o}
|
|
busy={busyId === o.id}
|
|
onOpen={setSelected}
|
|
onAccept={(item) => void acceptOpportunity(item)}
|
|
onComplete={(item) => void updateReviewState(item, { state: "completed" }, t("radar.inbox.msg.kept"))}
|
|
onRemove={(item, input) => void updateReviewState(item, { state: "removed", removal_reason: input.reason, removal_note: input.note }, t("radar.inbox.msg.removed"))}
|
|
onRestore={(item) => void updateReviewState(item, { state: item.previous_review_state === "completed" ? "completed" : "pending" }, t("radar.inbox.msg.restored"))}
|
|
/>)}
|
|
{total > PAGE_SIZE ? (
|
|
<div className="hb-radar-pager">
|
|
<Button variant="ghost" disabled={page <= 1} onClick={() => { const next = page - 1; setPage(next); writeParams({ page: String(next) }); }}>{t("radar.inbox.prevPage")}</Button>
|
|
<span>{t("radar.inbox.pageOf", { page, pages: pageCount })}</span>
|
|
<Button variant="ghost" disabled={page >= pageCount} onClick={() => { const next = page + 1; setPage(next); writeParams({ page: String(next) }); }}>{t("radar.inbox.nextPage")}</Button>
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
) : null}
|
|
{selected ? <OpportunityDetailDrawer
|
|
opportunity={selected}
|
|
busy={busyId === selected.id}
|
|
onClose={() => setSelected(null)}
|
|
onAccept={(item) => void acceptOpportunity(item)}
|
|
onComplete={(item) => void updateReviewState(item, { state: "completed" }, t("radar.inbox.msg.kept"))}
|
|
/> : null}
|
|
</>
|
|
);
|
|
}
|