/* ============================================================
Screen 7 — Tahlilchilar (Analyst Team Performance)
============================================================ */
function ScreenAnalysts() {
const [selected, setSelected] = useState(ANALYSTS[0].id);
const [sort, setSort] = useState({ col: 'resolved', dir: 'desc' });
// Enrich analysts with derived data
const enriched = useMemo(() => {
return ANALYSTS.map(a => {
const assigned = INQUIRIES.filter(i => i.analyst === a.id);
const open = assigned.filter(i => i.status !== 'resolved').length;
const resolvedTotal = assigned.filter(i => i.status === 'resolved').length;
const urgentOpen = assigned.filter(i => i.priority === 'urgent' && i.status !== 'resolved').length;
// response-time distribution (box plot)
const responseTimes = [];
const baseMin = a.avgMin - 8;
for (let i = 0; i < 60; i++) {
responseTimes.push(Math.max(2, Math.round(baseMin + Math.abs(gauss()) * 16)));
}
responseTimes.sort((a, b) => a - b);
const median = responseTimes[30];
const q1 = responseTimes[15];
const q3 = responseTimes[45];
const min = responseTimes[2];
const max = responseTimes[57];
// daily activity heatmap: 14 days × 12 hours (8-20)
const activity = [];
for (let d = 0; d < 14; d++) {
const row = [];
const dow = (d + 5) % 7;
const weekendMult = (dow === 5 || dow === 6) ? 0.3 : 1;
for (let h = 0; h < 12; h++) {
const peakHour = h >= 1 && h <= 4 ? 1.3 : h >= 5 && h <= 8 ? 1.1 : 0.7;
row.push(Math.max(0, Math.round(rand() * 10 * weekendMult * peakHour + (a.resolved / 80))));
}
activity.push(row);
}
return {
...a,
assigned: assigned.length,
open, urgentOpen, resolvedTotal,
boxStats: { min, q1, median, q3, max },
activity,
sat: a.sat ?? Math.round(88 + rand() * 9),
weeklyResolved: a.resolved,
};
});
}, []);
const sorted = useMemo(() => {
const arr = [...enriched];
arr.sort((a, b) => {
let av = a[sort.col], bv = b[sort.col];
if (sort.col === 'name') { av = a.name; bv = b.name; }
if (sort.col === 'median') { av = a.boxStats.median; bv = b.boxStats.median; }
if (av < bv) return sort.dir === 'asc' ? -1 : 1;
if (av > bv) return sort.dir === 'asc' ? 1 : -1;
return 0;
});
return arr;
}, [enriched, sort]);
const sortBy = (col) => setSort(s => ({ col, dir: s.col === col && s.dir === 'desc' ? 'asc' : 'desc' }));
const sortArrow = (col) => sort.col !== col ? '' : (sort.dir === 'asc' ? '↑' : '↓');
const sel = enriched.find(a => a.id === selected);
// Team-wide metrics
const totalAssigned = enriched.reduce((s, a) => s + a.assigned, 0);
const totalResolved = enriched.reduce((s, a) => s + a.weeklyResolved, 0);
const totalOpen = enriched.reduce((s, a) => s + a.open, 0);
const onlineCount = enriched.filter(a => a.online).length;
const avgSat = enriched.reduce((s, a) => s + a.sat, 0) / enriched.length;
const avgRt = enriched.reduce((s, a) => s + a.avgMin, 0) / enriched.length;
return (
Asosiy / Tahlilchilar
TahlilchilarАналитики · Team performance
{/* Team KPI strip */}
{/* Team roster cards */}
{enriched.map(a => (
setSelected(a.id)} />
))}
{/* Leaderboard */}
#
sortBy('name')} style={{ cursor: 'pointer' }}>Tahlilchi {sortArrow('name')}
Boʻlim
sortBy('assigned')} style={{ cursor: 'pointer', width: 130 }}>Topshirilgan {sortArrow('assigned')}
sortBy('weeklyResolved')} style={{ cursor: 'pointer', width: 150 }}>Hal etilgan (hft) {sortArrow('weeklyResolved')}
sortBy('open')} style={{ cursor: 'pointer', width: 110 }}>Ochiq {sortArrow('open')}
sortBy('urgentOpen')} style={{ cursor: 'pointer', width: 90 }}>Shosh. {sortArrow('urgentOpen')}
sortBy('median')} style={{ cursor: 'pointer', width: 130 }}>Med. javob {sortArrow('median')}
sortBy('sat')} style={{ cursor: 'pointer', width: 130 }}>Qoniqish {sortArrow('sat')}
Holat
{sorted.map((a, i) => (
setSelected(a.id)}>
{i + 1}
{a.dept}
x.assigned))} color="var(--accent)" height={5} />
{a.assigned}
x.weeklyResolved))} color="var(--jade)" height={5} />
{a.weeklyResolved}
{a.open}
{a.urgentOpen > 0 && {a.urgentOpen} }
{a.boxStats.median} daq
= 92 ? 'var(--jade)' : a.sat >= 88 ? 'var(--amber)' : 'var(--rose)' }} />
{a.sat}%
{a.online ? 'onlayn' : 'oflayn'}
))}
{/* Charts row 1 */}
);
}
// ============================================================
// Analyst card
// ============================================================
function AnalystCard({ a, selected, onClick }) {
return (
{a.name}
{a.role}
{a.id} · {a.dept}
Topshirilgan
{a.assigned}
Hal etilgan (hft)
{a.weeklyResolved}
O‘rt. javob
{a.avgMin} daq
Qoniqish
= 92 ? 'var(--jade)' : 'var(--ink)' }}>{a.sat}%
{a.urgentOpen > 0 && {a.urgentOpen} shosh. }
{a.open} ochiq
{a.resolvedTotal} hal
);
}
// ============================================================
// Stacked workload bar chart
// ============================================================
function WorkloadStacked({ data }) {
const [ref, size] = useSize();
const w = size.w || 600;
const h = 280;
const padL = 90, padR = 60, padT = 10, padB = 14;
const innerW = w - padL - padR;
const innerH = h - padT - padB;
const barH = innerH / data.length - 4;
const maxTotal = Math.max(...data.map(d => d.assigned));
return (
{size.w > 0 && (
{data.map((d, i) => {
const y = padT + i * (barH + 4) + 2;
const total = d.assigned;
const resolvedW = (d.resolvedTotal / maxTotal) * innerW;
const openW = (d.open / maxTotal) * innerW;
const urgentW = (d.urgentOpen / maxTotal) * innerW;
return (
{d.name.split(' ').map((s, j) => j === 0 ? s[0] + '.' : s).join(' ')}
{total}
);
})}
{/* legend */}
hal etilgan
ochiq
shoshilinch
)}
);
}
// ============================================================
// Box plot
// ============================================================
function BoxPlotChart({ data, highlight }) {
const [ref, size] = useSize();
const w = size.w || 600;
const h = 280;
const padL = 90, padR = 16, padT = 16, padB = 30;
const innerW = w - padL - padR;
const innerH = h - padT - padB;
const all = data.flatMap(d => [d.boxStats.min, d.boxStats.max]);
const xMin = 0;
const xMax = Math.max(...all) * 1.05;
const x = (v) => padL + ((v - xMin) / (xMax - xMin)) * innerW;
const rowH = innerH / data.length;
const boxH = rowH * 0.55;
return (
{size.w > 0 && (
{/* x grid */}
{[0, 10, 20, 30, 40, 50, 60].map(v => v <= xMax && (
{v}
))}
daqiqalarda javob vaqti
{data.map((d, i) => {
const y = padT + i * rowH + (rowH - boxH) / 2;
const b = d.boxStats;
const isSel = d.id === highlight;
return (
{d.name.split(' ').map((s, j) => j === 0 ? s[0] + '.' : s).join(' ')}
{/* whiskers */}
med {b.median}
);
})}
)}
);
}
// ============================================================
// Activity heatmap (per-analyst)
// ============================================================
function ActivityHeatmap({ data }) {
const [ref, size] = useSize();
const w = size.w || 600;
const h = 220;
const padL = 70, padR = 20, padT = 16, padB = 16;
const innerW = w - padL - padR;
const innerH = h - padT - padB;
const cols = data[0].length;
const rows = data.length;
const cellW = innerW / cols;
const cellH = innerH / rows;
const max = Math.max(...data.flat());
const days = ['Du', 'Se', 'Ch', 'Pa', 'Ju', 'Sh', 'Ya'];
// we have 14 days; oldest first
const dayLabels = Array.from({ length: 14 }, (_, i) => {
const d = new Date(NOW);
d.setDate(d.getDate() - (13 - i));
return `${days[(d.getDay() + 6) % 7]} ${String(d.getDate()).padStart(2, '0')}.${String(d.getMonth() + 1).padStart(2, '0')}`;
});
return (
{size.w > 0 && (
{/* hour labels */}
{Array.from({ length: cols }, (_, h) => 8 + h).map((hr, i) => (
{String(hr).padStart(2, '0')}
))}
{/* day labels */}
{dayLabels.map((d, i) => (
{d}
))}
{/* cells */}
{data.map((row, i) =>
row.map((v, j) => {
const t = v / max;
const fill = v === 0 ? 'var(--bg-sunken)' : `oklch(${(0.95 - t * 0.46).toFixed(3)} ${(0.02 + t * 0.10).toFixed(3)} 195)`;
return (
{v}
)}
);
})
)}
)}
);
}
// Gaussian helper
function gauss() {
let u = 0, v = 0;
while (u === 0) u = rand();
while (v === 0) v = rand();
return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);
}
window.ScreenAnalysts = ScreenAnalysts;