feat(cc-052): enhance Intelligence Overview with Market Signals section
This commit is contained in:
parent
c3c0ce85f1
commit
f9ceccdeb3
1 changed files with 138 additions and 44 deletions
|
|
@ -3,50 +3,61 @@
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { useQuery } from '@tanstack/react-query';
|
import { useQuery } from '@tanstack/react-query';
|
||||||
import { apiFetch } from '../../../lib/api';
|
import { apiFetch } from '../../../lib/api';
|
||||||
import type { SavedSegment, ResearchBrief } from '../../../lib/api';
|
import type { SavedSegment, ResearchBrief, FinancialSignal } from '../../../lib/api';
|
||||||
import { useSession } from '../../../components/session-provider';
|
import { useSession } from '../../../components/session-provider';
|
||||||
|
|
||||||
const B = '/dashboard';
|
const B = '/dashboard';
|
||||||
|
|
||||||
interface StatCard { label: string; value: number | string; href: string; sublabel?: string }
|
const SEV_CFG = {
|
||||||
|
critical: { borderClass: 'border-l-signal-danger', badgeClass: 'bg-signal-danger text-white', icon: '!' },
|
||||||
|
warning: { borderClass: 'border-l-signal-warn', badgeClass: 'bg-signal-warn text-white', icon: '⚠' },
|
||||||
|
info: { borderClass: 'border-l-bronze-deep', badgeClass: 'bg-bronze-wash text-bronze-deep', icon: 'i' },
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
const CAT_LABEL: Record<string, string> = {
|
||||||
|
macro: 'Macro', fx: 'Valute', rates: 'Rate', news: 'Știri', commodity: 'Materii prime',
|
||||||
|
};
|
||||||
|
|
||||||
export default function IntelligenceOverviewPage() {
|
export default function IntelligenceOverviewPage() {
|
||||||
const { activeTenant } = useSession();
|
const { activeTenant } = useSession();
|
||||||
const tenantId = activeTenant?.tenantId ?? '';
|
const tenantId = activeTenant?.tenantId ?? '';
|
||||||
|
const opts = { enabled: Boolean(tenantId), staleTime: 60_000 };
|
||||||
|
|
||||||
const { data: segments = [], isLoading: loadingSegs } = useQuery({
|
const { data: segments = [], isLoading: loadingSegs } = useQuery({
|
||||||
queryKey: ['segments-intel', tenantId],
|
queryKey: ['segments-intel', tenantId],
|
||||||
queryFn: () => apiFetch<SavedSegment[]>('/v1/segments', { tenantId }),
|
queryFn: () => apiFetch<SavedSegment[]>('/v1/segments', { tenantId }),
|
||||||
enabled: Boolean(tenantId),
|
...opts,
|
||||||
staleTime: 60_000,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const { data: briefs = [], isLoading: loadingBriefs } = useQuery({
|
const { data: briefs = [], isLoading: loadingBriefs } = useQuery({
|
||||||
queryKey: ['briefs-intel', tenantId],
|
queryKey: ['briefs-intel', tenantId],
|
||||||
queryFn: () => apiFetch<ResearchBrief[]>('/v1/research-briefs', { tenantId }),
|
queryFn: () => apiFetch<ResearchBrief[]>('/v1/research-briefs', { tenantId }),
|
||||||
enabled: Boolean(tenantId),
|
...opts,
|
||||||
staleTime: 60_000,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const isLoading = loadingSegs || loadingBriefs;
|
const { data: signals = [], isLoading: loadingSignals } = useQuery({
|
||||||
|
queryKey: ['financial-signals', tenantId],
|
||||||
|
queryFn: () => apiFetch<FinancialSignal[]>('/v1/financial-intelligence/signals?limit=20', { tenantId }),
|
||||||
|
...opts,
|
||||||
|
staleTime: 300_000,
|
||||||
|
});
|
||||||
|
|
||||||
|
const isLoading = loadingSegs || loadingBriefs || loadingSignals;
|
||||||
|
|
||||||
const recentBriefs = [...briefs].sort(
|
const recentBriefs = [...briefs].sort(
|
||||||
(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
|
(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
|
||||||
).slice(0, 5);
|
).slice(0, 4);
|
||||||
|
|
||||||
const stats: StatCard[] = [
|
const criticalSignals = signals.filter((s) => s.severity === 'critical');
|
||||||
{ label: 'Segmente salvate', value: segments.length, href: `${B}/segments`, sublabel: 'Căutări B2B salvate' },
|
const warningSignals = signals.filter((s) => s.severity === 'warning');
|
||||||
{ label: 'Research Briefs', value: briefs.length, href: `${B}/research`, sublabel: 'Rapoarte de cercetare' },
|
const lastSignalAt = signals[0]?.publishedAt;
|
||||||
{ label: 'Companii B2B', value: '147M+', href: `${B}/companies`, sublabel: 'Apollo/ClickHouse' },
|
|
||||||
{ label: 'Contact match AI', value: 'live', href: `${B}/companies`, sublabel: 'intelligence-api activ' },
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-5xl space-y-6">
|
<div className="max-w-5xl space-y-6">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="font-display text-2xl font-semibold text-ink">Intelligence Overview</h1>
|
<h1 className="font-display text-2xl font-semibold text-ink">Intelligence Overview</h1>
|
||||||
<p className="mt-1 text-sm text-ink-faint">
|
<p className="mt-1 text-sm text-ink-faint">
|
||||||
Motorul de intelligence B2B — companii, segmente, research și insight-uri.
|
Motorul de intelligence B2B + semnale de piață financiară internațională.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -54,26 +65,118 @@ export default function IntelligenceOverviewPage() {
|
||||||
<p className="text-sm text-ink-faint">Se încarcă…</p>
|
<p className="text-sm text-ink-faint">Se încarcă…</p>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
|
{/* ── MARKET SIGNALS ─────────────────────────────────────────── */}
|
||||||
|
<section className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h2 className="text-xs font-semibold uppercase tracking-wider text-ink-faint">
|
||||||
|
Market Intelligence
|
||||||
|
{(criticalSignals.length > 0 || warningSignals.length > 0) && (
|
||||||
|
<span className="ml-2 rounded-full bg-signal-danger px-2 py-0.5 text-[10px] text-white">
|
||||||
|
{criticalSignals.length + warningSignals.length} alerte
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</h2>
|
||||||
|
{lastSignalAt && (
|
||||||
|
<span className="text-[11px] text-ink-line">
|
||||||
|
Actualizat: {new Date(lastSignalAt).toLocaleString('ro-RO', {
|
||||||
|
month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{signals.length === 0 ? (
|
||||||
|
<div className="card p-8 text-center">
|
||||||
|
<p className="text-sm font-medium text-ink">Niciun semnal de piață disponibil</p>
|
||||||
|
<p className="mt-1 text-xs text-ink-faint">
|
||||||
|
Semnalele sunt generate automat de n8n din World Bank, IMF și Eurostat.
|
||||||
|
</p>
|
||||||
|
<p className="mt-2 text-[11px] font-mono text-ink-line">
|
||||||
|
Importați workflow-ul n8n din /dashboard/data sau contactați administratorul.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
|
||||||
|
{signals.slice(0, 8).map((sig) => {
|
||||||
|
const cfg = SEV_CFG[sig.severity as keyof typeof SEV_CFG] ?? SEV_CFG.info;
|
||||||
|
return (
|
||||||
|
<article
|
||||||
|
key={sig.id}
|
||||||
|
className={`card border-l-2 ${cfg.borderClass} px-4 py-3`}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between gap-2">
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<div className="flex flex-wrap items-center gap-1.5">
|
||||||
|
<span className={`rounded px-1.5 py-0.5 text-[10px] font-semibold ${cfg.badgeClass}`}>
|
||||||
|
{cfg.icon}
|
||||||
|
</span>
|
||||||
|
<span className="rounded bg-paper-sunken px-1.5 py-0.5 text-[10px] text-ink-faint capitalize">
|
||||||
|
{CAT_LABEL[sig.category] ?? sig.category}
|
||||||
|
</span>
|
||||||
|
<span className="rounded bg-paper-sunken px-1.5 py-0.5 text-[10px] text-ink-faint uppercase">
|
||||||
|
{sig.region}
|
||||||
|
</span>
|
||||||
|
{sig.niche && (
|
||||||
|
<span className="rounded bg-bronze-wash px-1.5 py-0.5 text-[10px] font-medium text-bronze-deep capitalize">
|
||||||
|
{sig.niche}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="mt-1.5 text-sm font-semibold text-ink leading-snug">
|
||||||
|
{sig.title}
|
||||||
|
</p>
|
||||||
|
{sig.rawValue != null && (
|
||||||
|
<p className="mt-0.5 font-mono text-xs text-ink-faint">
|
||||||
|
{Number(sig.rawValue).toFixed(2)}{sig.unit ? ` ${sig.unit}` : ''}
|
||||||
|
{sig.changePercent != null && (
|
||||||
|
<span className={Number(sig.changePercent) >= 0 ? 'text-signal-ok ml-1' : 'text-signal-danger ml-1'}>
|
||||||
|
({Number(sig.changePercent) >= 0 ? '+' : ''}{Number(sig.changePercent).toFixed(2)}%)
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<p className="mt-1 text-xs text-ink-faint leading-relaxed line-clamp-2">{sig.summary}</p>
|
||||||
|
</div>
|
||||||
|
<div className="shrink-0 text-right">
|
||||||
|
<p className="text-[10px] text-ink-line font-mono uppercase">{sig.source}</p>
|
||||||
|
<p className="text-[10px] text-ink-line">
|
||||||
|
{new Date(sig.publishedAt).toLocaleDateString('ro-RO')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{signals.length > 8 && (
|
||||||
|
<div className="card p-4 text-center text-xs text-ink-faint lg:col-span-2">
|
||||||
|
+{signals.length - 8} semnale suplimentare disponibile
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── B2B INTELLIGENCE STATS ─────────────────────────────────── */}
|
||||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
||||||
{stats.map((s) => (
|
{[
|
||||||
<Link key={s.label} href={s.href} className="card p-5 transition-colors hover:border-bronze-deep">
|
{ label: 'Segmente salvate', value: segments.length, href: `${B}/segments` },
|
||||||
|
{ label: 'Research Briefs', value: briefs.length, href: `${B}/research` },
|
||||||
|
{ label: 'Companii B2B', value: '147M+', href: `${B}/companies` },
|
||||||
|
{ label: 'Semnale piață', value: signals.length, href: '#' },
|
||||||
|
].map((s) => (
|
||||||
|
<Link key={s.label} href={s.href} className="card p-5 hover:border-bronze-deep transition-colors">
|
||||||
<p className="text-xs font-medium uppercase tracking-wider text-ink-faint">{s.label}</p>
|
<p className="text-xs font-medium uppercase tracking-wider text-ink-faint">{s.label}</p>
|
||||||
<p className="mt-1 font-display text-3xl font-semibold text-ink">{s.value}</p>
|
<p className="mt-1 font-display text-3xl font-semibold text-ink">{s.value}</p>
|
||||||
{s.sublabel && <p className="mt-0.5 text-[11px] text-ink-line">{s.sublabel}</p>}
|
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* ── B2B MODULES ────────────────────────────────────────────── */}
|
||||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||||
{/* Recent research briefs */}
|
|
||||||
<section className="card p-5">
|
<section className="card p-5">
|
||||||
<div className="mb-4 flex items-center justify-between">
|
<div className="mb-4 flex items-center justify-between">
|
||||||
<h2 className="text-xs font-semibold uppercase tracking-wider text-ink-faint">
|
<h2 className="text-xs font-semibold uppercase tracking-wider text-ink-faint">Research recente</h2>
|
||||||
Research recente
|
<Link href={`${B}/research`} className="text-xs text-bronze-deep hover:underline">Toate →</Link>
|
||||||
</h2>
|
|
||||||
<Link href={`${B}/research`} className="text-xs text-bronze-deep hover:underline">
|
|
||||||
Vezi toate →
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
{recentBriefs.length === 0 ? (
|
{recentBriefs.length === 0 ? (
|
||||||
<p className="text-sm text-ink-faint">Niciun brief creat.</p>
|
<p className="text-sm text-ink-faint">Niciun brief creat.</p>
|
||||||
|
|
@ -83,12 +186,8 @@ export default function IntelligenceOverviewPage() {
|
||||||
<li key={b.id} className="border-b border-paper-sunken pb-3 last:border-0 last:pb-0">
|
<li key={b.id} className="border-b border-paper-sunken pb-3 last:border-0 last:pb-0">
|
||||||
<p className="text-sm font-medium text-ink">{b.title}</p>
|
<p className="text-sm font-medium text-ink">{b.title}</p>
|
||||||
<div className="mt-1 flex items-center gap-2">
|
<div className="mt-1 flex items-center gap-2">
|
||||||
<span className="rounded bg-paper-sunken px-1.5 py-0.5 text-[10px] font-medium capitalize text-ink-faint">
|
<span className="rounded bg-paper-sunken px-1.5 py-0.5 text-[10px] font-medium capitalize text-ink-faint">{b.status}</span>
|
||||||
{b.status}
|
<span className="text-[11px] text-ink-line">{new Date(b.createdAt).toLocaleDateString('ro-RO')}</span>
|
||||||
</span>
|
|
||||||
<span className="text-[11px] text-ink-line">
|
|
||||||
{new Date(b.createdAt).toLocaleDateString('ro-RO')}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
|
|
@ -96,15 +195,10 @@ export default function IntelligenceOverviewPage() {
|
||||||
)}
|
)}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Active segments */}
|
|
||||||
<section className="card p-5">
|
<section className="card p-5">
|
||||||
<div className="mb-4 flex items-center justify-between">
|
<div className="mb-4 flex items-center justify-between">
|
||||||
<h2 className="text-xs font-semibold uppercase tracking-wider text-ink-faint">
|
<h2 className="text-xs font-semibold uppercase tracking-wider text-ink-faint">Segmente active</h2>
|
||||||
Segmente active
|
<Link href={`${B}/segments`} className="text-xs text-bronze-deep hover:underline">Gestionează →</Link>
|
||||||
</h2>
|
|
||||||
<Link href={`${B}/segments`} className="text-xs text-bronze-deep hover:underline">
|
|
||||||
Gestionează →
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
{segments.length === 0 ? (
|
{segments.length === 0 ? (
|
||||||
<p className="text-sm text-ink-faint">Niciun segment salvat.</p>
|
<p className="text-sm text-ink-faint">Niciun segment salvat.</p>
|
||||||
|
|
@ -128,23 +222,23 @@ export default function IntelligenceOverviewPage() {
|
||||||
{/* Capability map */}
|
{/* Capability map */}
|
||||||
<section className="card p-5 lg:col-span-2">
|
<section className="card p-5 lg:col-span-2">
|
||||||
<h2 className="mb-4 text-xs font-semibold uppercase tracking-wider text-ink-faint">
|
<h2 className="mb-4 text-xs font-semibold uppercase tracking-wider text-ink-faint">
|
||||||
Capabilități platformă Intelligence
|
Capabilități Intelligence
|
||||||
</h2>
|
</h2>
|
||||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||||
{[
|
{[
|
||||||
{ label: 'Company Search', status: 'live', href: `${B}/companies` },
|
{ label: 'Company Search', status: 'live', href: `${B}/companies` },
|
||||||
{ label: 'Saved Segments', status: 'live', href: `${B}/segments` },
|
{ label: 'Saved Segments', status: 'live', href: `${B}/segments` },
|
||||||
{ label: 'Research Briefs', status: 'live', href: `${B}/research` },
|
{ label: 'Research Briefs', status: 'live', href: `${B}/research` },
|
||||||
{ label: 'People Intelligence', status: 'a3', href: `${B}/people-intelligence` },
|
{ label: 'Market Signals', status: signals.length > 0 ? 'live' : 'setup', href: '#' },
|
||||||
|
{ label: 'People Intelligence', status: 'a3', href: '#' },
|
||||||
{ label: 'Market Intelligence', status: 'a4', href: '#' },
|
{ label: 'Market Intelligence', status: 'a4', href: '#' },
|
||||||
{ label: 'Insights Engine', status: 'a3', href: '#' },
|
{ label: 'Insights Engine', status: 'a3', href: '#' },
|
||||||
{ label: 'Trends & Patterns', status: 'a3', href: '#' },
|
|
||||||
{ label: 'Digital Twin', status: 'a4', href: '#' },
|
{ label: 'Digital Twin', status: 'a4', href: '#' },
|
||||||
].map((cap) => (
|
].map((cap) => (
|
||||||
<div key={cap.label} className={`rounded-lg border px-3 py-2 ${cap.status === 'live' ? 'border-signal-ok/30 bg-signal-ok/5' : 'border-paper-sunken bg-paper-sunken/50'}`}>
|
<div key={cap.label} className={`rounded-lg border px-3 py-2 ${cap.status === 'live' ? 'border-signal-ok/30 bg-signal-ok/5' : cap.status === 'setup' ? 'border-signal-warn/30 bg-signal-warn/5' : 'border-paper-sunken bg-paper-sunken/50'}`}>
|
||||||
<p className="text-xs font-medium text-ink">{cap.label}</p>
|
<p className="text-xs font-medium text-ink">{cap.label}</p>
|
||||||
<span className={`mt-0.5 inline-block text-[10px] font-semibold uppercase ${cap.status === 'live' ? 'text-signal-ok' : 'text-ink-line'}`}>
|
<span className={`mt-0.5 inline-block text-[10px] font-semibold uppercase ${cap.status === 'live' ? 'text-signal-ok' : cap.status === 'setup' ? 'text-signal-warn' : 'text-ink-line'}`}>
|
||||||
{cap.status === 'live' ? '● live' : cap.status}
|
{cap.status === 'live' ? '● live' : cap.status === 'setup' ? '○ setup' : cap.status}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue