252 lines
13 KiB
TypeScript
252 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { apiFetch } from '../../../lib/api';
|
|
import type { SavedSegment, ResearchBrief, FinancialSignal } from '../../../lib/api';
|
|
import { useSession } from '../../../components/session-provider';
|
|
|
|
const B = '/dashboard';
|
|
|
|
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() {
|
|
const { activeTenant } = useSession();
|
|
const tenantId = activeTenant?.tenantId ?? '';
|
|
const opts = { enabled: Boolean(tenantId), staleTime: 60_000 };
|
|
|
|
const { data: segments = [], isLoading: loadingSegs } = useQuery({
|
|
queryKey: ['segments-intel', tenantId],
|
|
queryFn: () => apiFetch<SavedSegment[]>('/v1/segments', { tenantId }),
|
|
...opts,
|
|
});
|
|
|
|
const { data: briefs = [], isLoading: loadingBriefs } = useQuery({
|
|
queryKey: ['briefs-intel', tenantId],
|
|
queryFn: () => apiFetch<ResearchBrief[]>('/v1/research-briefs', { tenantId }),
|
|
...opts,
|
|
});
|
|
|
|
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(
|
|
(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
|
|
).slice(0, 4);
|
|
|
|
const criticalSignals = signals.filter((s) => s.severity === 'critical');
|
|
const warningSignals = signals.filter((s) => s.severity === 'warning');
|
|
const lastSignalAt = signals[0]?.publishedAt;
|
|
|
|
return (
|
|
<div className="max-w-5xl space-y-6">
|
|
<div>
|
|
<h1 className="font-display text-2xl font-semibold text-ink">Intelligence Overview</h1>
|
|
<p className="mt-1 text-sm text-ink-faint">
|
|
Motorul de intelligence B2B + semnale de piață financiară internațională.
|
|
</p>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<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">
|
|
{[
|
|
{ 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="mt-1 font-display text-3xl font-semibold text-ink">{s.value}</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* ── B2B MODULES ────────────────────────────────────────────── */}
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
|
<section className="card p-5">
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<h2 className="text-xs font-semibold uppercase tracking-wider text-ink-faint">Research recente</h2>
|
|
<Link href={`${B}/research`} className="text-xs text-bronze-deep hover:underline">Toate →</Link>
|
|
</div>
|
|
{recentBriefs.length === 0 ? (
|
|
<p className="text-sm text-ink-faint">Niciun brief creat.</p>
|
|
) : (
|
|
<ul className="space-y-3">
|
|
{recentBriefs.map((b) => (
|
|
<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>
|
|
<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">{b.status}</span>
|
|
<span className="text-[11px] text-ink-line">{new Date(b.createdAt).toLocaleDateString('ro-RO')}</span>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
|
|
<section className="card p-5">
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<h2 className="text-xs font-semibold uppercase tracking-wider text-ink-faint">Segmente active</h2>
|
|
<Link href={`${B}/segments`} className="text-xs text-bronze-deep hover:underline">Gestionează →</Link>
|
|
</div>
|
|
{segments.length === 0 ? (
|
|
<p className="text-sm text-ink-faint">Niciun segment salvat.</p>
|
|
) : (
|
|
<ul className="space-y-2">
|
|
{segments.slice(0, 6).map((s) => (
|
|
<li key={s.id} className="flex items-center justify-between">
|
|
<p className="min-w-0 truncate text-sm text-ink">{s.name}</p>
|
|
<span className="ml-2 shrink-0 rounded-full bg-paper-sunken px-2 py-0.5 font-mono text-[10px] text-ink-faint">
|
|
limit {s.resultLimit}
|
|
</span>
|
|
</li>
|
|
))}
|
|
{segments.length > 6 && (
|
|
<li className="text-xs text-ink-faint">+{segments.length - 6} mai multe</li>
|
|
)}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
|
|
{/* Capability map */}
|
|
<section className="card p-5 lg:col-span-2">
|
|
<h2 className="mb-4 text-xs font-semibold uppercase tracking-wider text-ink-faint">
|
|
Capabilități Intelligence
|
|
</h2>
|
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
|
{[
|
|
{ label: 'Company Search', status: 'live', href: `${B}/companies` },
|
|
{ label: 'Saved Segments', status: 'live', href: `${B}/segments` },
|
|
{ label: 'Research Briefs', status: 'live', href: `${B}/research` },
|
|
{ label: 'Market Signals', status: signals.length > 0 ? 'live' : 'setup', href: '#' },
|
|
{ label: 'People Intelligence', status: 'a3', href: '#' },
|
|
{ label: 'Market Intelligence', status: 'a4', href: '#' },
|
|
{ label: 'Insights Engine', status: 'a3', href: '#' },
|
|
{ label: 'Digital Twin', status: 'a4', href: '#' },
|
|
].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' : 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>
|
|
<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 === 'setup' ? '○ setup' : cap.status}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|