/* ============================================================
Screen 1 — Bosh sahifa (Executive Overview)
All dynamic data fetched from the Worker via useApi.
============================================================ */
const STATUS_FUNNEL_ORDER = ['new', 'classified', 'routed', 'answered', 'resolved'];
const STATUS_UZ = {
new: 'Qabul qilindi',
classified: 'Tasniflandi',
routed: 'Yoʻnaltirildi',
answered: 'Javob berildi',
resolved: 'Tasdiqlandi',
};
function ScreenOverview() {
const [range, setRange] = useState(30);
// All the panel data
const overview = useApi('/api/stats/overview', { pollMs: 15000 });
const ranking = useApi(`/api/stats/topic-ranking?days=${range}`, { pollMs: 15000 });
const byDay = useApi(`/api/stats/by-day?days=${range}`, { pollMs: 30000 });
const byTopic = useApi('/api/stats/by-topic', { pollMs: 30000 });
const byRegion = useApi('/api/stats/by-region', { pollMs: 30000 });
const funnel = useApi('/api/stats/funnel', { pollMs: 30000 });
const momentum = useApi('/api/stats/momentum', { pollMs: 30000 });
const sentByT = useApi('/api/stats/sentiment-by-topic', { pollMs: 30000 });
const aiMetric = useApi('/api/stats/ai-metrics', { pollMs: 30000 });
const feed = useApi('/api/inquiries/feed?limit=15', { pollMs: 8000 });
const urgent = useApi('/api/inquiries/urgent?limit=5', { pollMs: 15000 });
// KPIs
const o = overview.data || {};
const kpiTiles = [
{ id: 'total', label: 'Jami murojaat', value: fmtNum(o.total), hint: 'kumulyativ' },
{ id: 'classified', label: 'Tasniflandi (AI)', value: fmtNum(o.classified), hint: 'avto-tasniflangan' },
{ id: 'open', label: 'Ochiq', value: fmtNum(o.open), hint: 'hal etilmagan' },
{ id: 'urgent', label: 'Shoshilinch ochiq', value: fmtNum(o.urgent_open), hint: 'eng yuqori prioritet' },
{ id: 'today', label: 'Bugun', value: fmtNum(o.today), hint: 'bugun qabul qilingan' },
{ id: 'farmers', label: 'Fermerlar', value: fmtNum(o.farmers), hint: 'unikal yuboruvchilar' },
{ id: 'latency', label: 'AI tasniflash', value: o.avg_classify_sec != null ? (o.avg_classify_sec).toFixed(1) : '—', unit: 's', hint: 'oʻrtacha kechikish' },
{ id: 'conf', label: 'AI ishonchlilik', value: o.avg_confidence != null ? (o.avg_confidence * 100).toFixed(1) : '—', unit: '%', hint: 'oʻrtacha' },
];
// Topic-ranking items, with per-topic sparkline pulled from byDay
const sparkByTopic = useMemo(() => buildSparklines(byDay.data, range), [byDay.data, range]);
const rankingItems = (ranking.data?.items || []).map((t) => ({
id: t.id,
label: t.uz,
color: t.color,
value: t.total,
delta: t.prev_week > 0 ? ((t.this_week - t.prev_week) / t.prev_week) * 100 : t.this_week > 0 ? 100 : 0,
spark: sparkByTopic[t.id] || [],
}));
// Donut data
const donutData = (byTopic.data?.items || []).map((t) => ({
id: t.id,
label: t.uz,
value: t.total,
color: t.color,
}));
// Map values
const choroValues = useMemo(() => {
const out = {};
(byRegion.data?.items || []).forEach((r) => { out[r.id] = r.total; });
return out;
}, [byRegion.data]);
// Funnel — cumulative top-down
const funnelSteps = useMemo(() => {
const counts = Object.fromEntries((funnel.data?.items || []).map((s) => [s.status, s.n]));
const total = (counts.new || 0) + (counts.classified || 0) + (counts.routed || 0) + (counts.answered || 0) + (counts.resolved || 0);
const past = (set) => set.reduce((s, k) => s + (counts[k] || 0), 0);
return [
{ uz: 'Qabul qilindi', value: total },
{ uz: 'Tasniflandi', value: past(['classified', 'routed', 'answered', 'resolved']) },
{ uz: 'Yoʻnaltirildi', value: past(['routed', 'answered', 'resolved']) },
{ uz: 'Javob berildi', value: past(['answered', 'resolved']) },
{ uz: 'Tasdiqlandi', value: past(['resolved']) },
];
}, [funnel.data]);
// Momentum — sort desc by % delta
const momentumItems = useMemo(() => {
return (momentum.data?.items || [])
.map((t) => {
const tw = t.this_week || 0;
const pw = t.prev_week || 0;
const delta = pw > 0 ? ((tw - pw) / pw) * 100 : tw > 0 ? 100 : 0;
return { id: t.id, label: t.uz, delta };
})
.sort((a, b) => b.delta - a.delta);
}, [momentum.data]);
// Top 6 topics by total for sentiment gauges
const sentTop6 = (sentByT.data?.items || []).slice(0, 6);
const feedItems = feed.data?.items || [];
const urgentItems = urgent.data?.items || [];
return (
Asosiy/Bosh sahifa
Bosh sahifaОбзор · Executive Overview
{/* KPI strip */}
{kpiTiles.map((k) => )}
{/* Row 1: Topic ranking + Donut */}
{/* Row 2: Map + Funnel */}
Yetib borish %
{funnelSteps[0].value > 0
? ((funnelSteps[4].value / funnelSteps[0].value) * 100).toFixed(1) + '%'
: '—'}
Hozir AI ishonchli
{o.avg_confidence ? (o.avg_confidence * 100).toFixed(1) + '%' : '—'}
{/* Row 3: Momentum + Sentiment */}
{sentTop6.map((t) => (
))}
{/* Row 4: Activity feed + Urgent + AI metrics */}
{feedItems.length === 0 && (
Hozircha murojaatlar yoʻq — bot orqali yuborilgach shu yerda paydo boʻladi.
)}
{feedItems.map((inq) => {
const t = inq.topic_id ? TOPIC_BY_ID[inq.topic_id] : null;
const region = inq.region_id ? REGION_BY_ID[inq.region_id] : null;
const ts = new Date(inq.created_at * 1000);
return (
{inq.farmer_name}
{t &&
{t.uz}}
{inq.priority === 'urgent' &&
}
{inq.text}
{inq.id}
{region && <> · {region.uz}}
{inq.confidence != null && <> · AI {(inq.confidence * 100).toFixed(0)}%}
{formatRel(ts)}
);
})}
{urgentItems.length === 0 && (
Shoshilinch murojaatlar yoʻq.
)}
{urgentItems.map((inq, i) => {
const t = inq.topic_id ? TOPIC_BY_ID[inq.topic_id] : null;
const region = inq.region_id ? REGION_BY_ID[inq.region_id] : null;
const ts = new Date(inq.created_at * 1000);
return (
0{i + 1}
{t && }
{t?.uz || '—'}
{inq.sub_topic && · {inq.sub_topic}}
{inq.text}
{inq.farmer_name}
{region && <>·{region.code}}
{formatRel(ts)}
);
})}
);
}
// ============================================================
// Helper components
// ============================================================
function fmtNum(n) {
if (n == null) return '—';
return formatNum(n);
}
// Build per-topic daily sparkline arrays from /api/stats/by-day response
function buildSparklines(byDayData, days) {
if (!byDayData) return {};
const items = byDayData.items || [];
// Generate the last N days as ISO date strings
const dayKeys = [];
const today = new Date();
for (let i = days - 1; i >= 0; i--) {
const d = new Date(today.getTime() - i * 86400000);
dayKeys.push(d.toISOString().slice(0, 10));
}
// Bucket: { topic_id: { day: n } }
const bucket = {};
items.forEach((row) => {
if (!bucket[row.topic_id]) bucket[row.topic_id] = {};
bucket[row.topic_id][row.day] = row.n;
});
// Flatten to arrays in dayKeys order
const out = {};
Object.keys(bucket).forEach((tid) => {
out[tid] = dayKeys.map((d) => bucket[tid][d] || 0);
});
return out;
}
function OverviewKpi({ label, value, unit, hint }) {
return (
{label}
{value}
{unit && {unit}}
{hint}
);
}
function TopicRankingList({ items }) {
const max = Math.max(1, ...items.map((i) => i.value));
if (items.length === 0) {
return (
Mavzu boʻyicha murojaat hali yoʻq.
);
}
return (
№
Mavzu
Ulush
Hajm
Δ
Trend
{items.map((it, i) => {
const pct = it.value / max;
const up = it.delta >= 0;
return (
{String(i + 1).padStart(2, '0')}
{it.label}
{formatNum(it.value)}
{up ? '↑' : '↓'} {Math.abs(it.delta).toFixed(1)}%
{it.spark.length > 1 && (
)}
);
})}
);
}
function AiMetricsLiveGrid({ metrics }) {
const m = metrics || {};
const tiles = [
{ label: 'Ishonchlilik', value: m.confidence_avg != null ? (m.confidence_avg * 100).toFixed(1) : '—', unit: '%', dir: 'up' },
{ label: 'O‘rt. kechikish', value: m.latency_ms_avg != null ? Math.round(m.latency_ms_avg) : '—', unit: 'ms', dir: 'down' },
{ label: 'Til aniqlash', value: m.lang_detect_rate != null ? (m.lang_detect_rate * 100).toFixed(1) : '—', unit: '%', dir: 'up' },
{ label: 'Xatolar', value: m.errors != null ? m.errors : '—', unit: '', dir: 'down' },
];
return (
{tiles.map((t, i) => (
{t.label}
{t.value}{t.unit && {t.unit}}
))}