Spaces:
Running
Running
| // Tab "Quản lý thời lượng" — người dùng nào, dùng tool gì, mất bao lâu, | |
| // làm ra sản phẩm gì. Mọi con số tính từ bảng log thô `raw_events` ở backend. | |
| // | |
| // Bố cục dựng theo hai file mẫu đã chốt form: | |
| // dashboard_mau -> phần đầu: tiêu đề, thanh lọc, ba nhóm ô chỉ số. | |
| // dashboard_full -> phần sau: các card nội dung (hoạt động ngày, tool, bảng). | |
| // | |
| // Mã chỉ số ghi kèm nhãn (A1..B4) để đối chiếu với User_Flow_and_Tracking_Spec. | |
| import { useCallback, useEffect, useMemo, useState } from "react"; | |
| import { jget } from "../../api"; | |
| import { | |
| BarChart, LineChart, StepBar, | |
| fmtDur, fmtNum, fmtPct, fmtShort, fmtTime, | |
| } from "./UsageCharts"; | |
| const isoDay = (d) => { | |
| const p = (n) => String(n).padStart(2, "0"); | |
| return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`; | |
| }; | |
| const shift = (n) => { | |
| const d = new Date(); | |
| d.setDate(d.getDate() + n); | |
| return d; | |
| }; | |
| const daysAgo = (n) => isoDay(shift(-n)); | |
| // Tuần bắt đầu từ THỨ HAI (lịch VN), không phải Chủ nhật kiểu Mỹ. | |
| const weekRange = (offset) => { | |
| const d = new Date(); | |
| const dow = (d.getDay() + 6) % 7; // T2=0 … CN=6 | |
| const mon = new Date(d); | |
| mon.setDate(d.getDate() - dow + offset * 7); | |
| const sun = new Date(mon); | |
| sun.setDate(mon.getDate() + 6); | |
| return [isoDay(mon), isoDay(sun > d && offset === 0 ? d : sun)]; | |
| }; | |
| const monthRange = (offset) => { | |
| const now = new Date(); | |
| const first = new Date(now.getFullYear(), now.getMonth() + offset, 1); | |
| const last = new Date(now.getFullYear(), now.getMonth() + offset + 1, 0); | |
| return [isoDay(first), isoDay(last > now && offset === 0 ? now : last)]; | |
| }; | |
| // Một ô chọn ngày duy nhất thay cho cặp "Từ ngày / Đến ngày" — quản trị hầu hết | |
| // chỉ muốn "7 ngày qua" chứ không muốn gõ hai cái ngày. Chọn "Tùy chọn khoảng | |
| // ngày" mới mở lịch ra cho ai cần mốc chính xác. | |
| // Không có lựa chọn TƯƠNG LAI (ngày mai, 7 ngày tới…): đây là báo cáo đọc log | |
| // đã ghi, khoảng tương lai lúc nào cũng rỗng. | |
| const DATE_PRESETS = [ | |
| { id: "today", label: "Hôm nay", range: () => [isoDay(new Date()), isoDay(new Date())] }, | |
| { id: "yesterday", label: "Hôm qua", range: () => [daysAgo(1), daysAgo(1)] }, | |
| { id: "7d", label: "7 ngày qua", range: () => [daysAgo(6), isoDay(new Date())] }, | |
| { id: "30d", label: "30 ngày qua", range: () => [daysAgo(29), isoDay(new Date())] }, | |
| { id: "90d", label: "90 ngày qua", range: () => [daysAgo(89), isoDay(new Date())] }, | |
| { id: "week", label: "Tuần này", range: () => weekRange(0) }, | |
| { id: "lastweek", label: "Tuần trước", range: () => weekRange(-1) }, | |
| { id: "month", label: "Tháng này", range: () => monthRange(0) }, | |
| { id: "lastmonth", label: "Tháng trước", range: () => monthRange(-1) }, | |
| { id: "custom", label: "Tùy chọn khoảng ngày…" }, | |
| ]; | |
| const DEFAULT_PRESET = "30d"; | |
| // Tên đăng nhập nội bộ viết kiểu "họ tên - team - bu" -> tách ra 3 cột cho | |
| // bảng nhân sự. Không đúng khuôn thì để nguyên tên, hai cột kia bỏ trống. | |
| function splitName(full) { | |
| const parts = String(full || "").split(" - ").map((x) => x.trim()).filter(Boolean); | |
| return { name: parts[0] || full || "", team: parts[1] || "", bu: parts[2] || "" }; | |
| } | |
| export default function UsageDashboard({ token }) { | |
| const [preset, setPreset] = useState(DEFAULT_PRESET); | |
| const [from, setFrom] = useState(() => daysAgo(29)); | |
| const [to, setTo] = useState(() => isoDay(new Date())); | |
| const [feature, setFeature] = useState(""); | |
| const [userId, setUserId] = useState(""); | |
| const [data, setData] = useState(null); | |
| const [busy, setBusy] = useState(false); | |
| const [err, setErr] = useState(""); | |
| const [openUser, setOpenUser] = useState(""); | |
| const [detail, setDetail] = useState(null); | |
| const [rawOpen, setRawOpen] = useState(false); | |
| const [raw, setRaw] = useState([]); | |
| const qs = useCallback((extra = {}) => { | |
| const p = new URLSearchParams({ token, date_from: from, date_to: to, ...extra }); | |
| if (feature) p.set("feature", feature); | |
| if (userId && extra.user_id === undefined) p.set("user_id", userId); | |
| return p.toString(); | |
| }, [token, from, to, feature, userId]); | |
| const load = useCallback(async () => { | |
| setBusy(true); setErr(""); | |
| try { | |
| const d = await jget(`/api/analytics/admin/summary?${qs()}`); | |
| if (!d.ok) throw new Error(d.detail || "Không đọc được số liệu"); | |
| setData(d); | |
| setRaw([]); // đổi bộ lọc -> nhật ký cũ không còn đúng | |
| } catch (e) { setErr(e.message); } | |
| finally { setBusy(false); } | |
| }, [qs]); | |
| useEffect(() => { load(); }, [load]); | |
| // Chọn mốc dựng sẵn -> tự tính từ/đến. Riêng "Tùy chọn khoảng ngày" thì giữ | |
| // nguyên hai mốc đang có làm điểm khởi đầu cho người dùng chỉnh tay. | |
| const pickPreset = (id) => { | |
| setPreset(id); | |
| const p = DATE_PRESETS.find((x) => x.id === id); | |
| if (p?.range) { | |
| const [f, t] = p.range(); | |
| setFrom(f); setTo(t); | |
| } | |
| }; | |
| const reset = () => { | |
| pickPreset(DEFAULT_PRESET); | |
| setFeature(""); setUserId(""); | |
| }; | |
| const openDetail = async (uid) => { | |
| if (openUser === uid) { setOpenUser(""); setDetail(null); return; } | |
| setOpenUser(uid); setDetail(null); | |
| try { | |
| const d = await jget(`/api/analytics/admin/user?${qs({ user_id: uid })}`); | |
| if (d.ok) setDetail(d); | |
| } catch { /* im lặng, panel sẽ hiện "đang tải" */ } | |
| }; | |
| const loadRaw = async () => { | |
| setRawOpen((v) => !v); | |
| if (raw.length) return; | |
| try { | |
| const d = await jget(`/api/analytics/admin/events?${qs({ limit: "300" })}`); | |
| if (d.ok) setRaw(d.events); | |
| } catch { /* bỏ qua */ } | |
| }; | |
| const o = data?.overall; | |
| const ts = data?.timeseries || []; | |
| const names = data?.user_names || {}; | |
| // Tool đóng góp nhiều / ít nhất — cùng bảng xếp hạng với card 🏆 bên dưới, | |
| // kéo lên đây thành hai ô để nhìn phát thấy ngay, khỏi cuộn xuống tìm. | |
| const ranked = useMemo(() => { | |
| const rows = (data?.features || []).filter((f) => f.tasks) | |
| .slice().sort((a, b) => (b.score_total ?? 0) - (a.score_total ?? 0)); | |
| return { best: rows[0] || null, worst: rows.length > 1 ? rows[rows.length - 1] : null }; | |
| }, [data?.features]); | |
| // Danh sách người cho ô lọc: mọi mã được cấp + ai từng xuất hiện trong log. | |
| // Giữ nguyên khi đang lọc một người, kẻo chọn xong thì danh sách rụng còn 1. | |
| const userOptions = useMemo(() => { | |
| const m = new Map(); | |
| Object.entries(names).forEach(([id, nm]) => m.set(id, nm || id)); | |
| (data?.users || []).forEach((u) => { if (!m.has(u.user_id)) m.set(u.user_id, u.user_id); }); | |
| if (userId && !m.has(userId)) m.set(userId, userId); | |
| return [...m.entries()].sort((a, b) => a[1].localeCompare(b[1], "vi")); | |
| }, [names, data?.users, userId]); | |
| return ( | |
| <div className="stack" style={{ gap: 18 }}> | |
| {/* KHÔNG in lại tiêu đề "Quản trị thời lượng" ở đây: trang AdminUsers đã | |
| có sẵn tiêu đề + câu mô tả đổi theo tab, in thêm là lặp hai lần. */} | |
| {/* Thanh lọc */} | |
| <div className="card rep-filters"> | |
| <label className="field"> | |
| <span>Người dùng</span> | |
| <select value={userId} onChange={(e) => setUserId(e.target.value)}> | |
| <option value="">Tất cả người dùng</option> | |
| {userOptions.map(([id, nm]) => ( | |
| <option key={id} value={id}>{nm}</option> | |
| ))} | |
| </select> | |
| </label> | |
| <label className="field"> | |
| <span>Công cụ</span> | |
| <select value={feature} onChange={(e) => setFeature(e.target.value)}> | |
| <option value="">Tất cả công cụ</option> | |
| {(data?.features || []).map((f) => ( | |
| <option key={f.feature} value={f.feature}>{f.label}</option> | |
| ))} | |
| </select> | |
| </label> | |
| <label className="field"> | |
| <span>Ngày</span> | |
| <select value={preset} onChange={(e) => pickPreset(e.target.value)}> | |
| {DATE_PRESETS.map((p) => ( | |
| <option key={p.id} value={p.id}>{p.label}</option> | |
| ))} | |
| </select> | |
| </label> | |
| {preset === "custom" && ( | |
| <> | |
| <label className="field"> | |
| <span>Từ ngày</span> | |
| <input type="date" value={from} max={to} onChange={(e) => setFrom(e.target.value)} /> | |
| </label> | |
| <label className="field"> | |
| <span>Đến ngày</span> | |
| <input type="date" value={to} min={from} onChange={(e) => setTo(e.target.value)} /> | |
| </label> | |
| </> | |
| )} | |
| <button className="btn primary" onClick={load} disabled={busy}> | |
| {busy ? "Đang tải…" : "Áp dụng"} | |
| </button> | |
| <button className="btn" onClick={reset}>Đặt lại</button> | |
| <div style={{ flex: 1 }} /> | |
| <a className="btn" href={`/api/analytics/admin/export.csv?${qs()}`} | |
| title="File CSV tiếng Việt: tên người, tên tool, tên bước, chi tiết đã dịch"> | |
| ⬇ Tải báo cáo (CSV) | |
| </a> | |
| <a className="btn ghost" href={`/api/analytics/admin/export.csv?${qs({ raw: "1" })}`} | |
| title="Bản 11 cột đúng schema gốc, cho bên kỹ thuật nạp vào công cụ khác"> | |
| ⬇ Log gốc | |
| </a> | |
| </div> | |
| <div className="rep-note"> | |
| Đang xem <b>{userId ? (names[userId] || userId) : "tất cả người dùng"}</b> | |
| {feature ? <> · công cụ <b>{(data?.features || []).find((f) => f.feature === feature)?.label || feature}</b></> : null} | |
| {" · "}từ <b>{from}</b> đến <b>{to}</b> | |
| {o ? <> · <b>{fmtNum(o.events)}</b> sự kiện trong <b>{o.days_in_range}</b> ngày có hoạt động</> : null} | |
| {data?.storage ? ( | |
| <span className="rep-badge" style={{ marginLeft: 10 }}> | |
| {data.storage.backend === "pg" ? "PostgreSQL" : "SQLite"} · {fmtNum(data.storage.rows)} dòng log | |
| </span> | |
| ) : null} | |
| </div> | |
| {err && ( | |
| <div style={{ padding: "10px 14px", background: "var(--red-soft)", borderRadius: "var(--radius-sm)", fontSize: 13, fontWeight: 600 }}> | |
| Lỗi: {err} | |
| </div> | |
| )} | |
| {!data ? ( | |
| <p className="small muted">Đang tải số liệu…</p> | |
| ) : o.events === 0 ? ( | |
| <div className="card"> | |
| <div className="sec-title"><span className="em">📭</span> Chưa có dữ liệu</div> | |
| <p className="small muted" style={{ margin: 0 }}> | |
| Không có thao tác nào trong khoảng đã chọn. Thử nới rộng ngày hoặc bỏ bớt bộ lọc. | |
| </p> | |
| </div> | |
| ) : ( | |
| <> | |
| {/* ── NHÓM CHỈ SỐ ────────────────────────────────────── */} | |
| <Group title="👥 Tình trạng người dùng" | |
| hint="Ai được cấp quyền và mức độ quay lại sử dụng app"> | |
| <Metric label="Số tài khoản được cấp" value={fmtNum(data.granted_accounts)} | |
| sub="từ danh sách đăng nhập" tone="muted" /> | |
| <Metric label="User đã sử dụng" value={fmtNum(o.used_users)} | |
| sub="có thao tác thật, không chỉ ngó qua" /> | |
| <Metric label="Dùng hàng tuần" value={fmtNum(o.weekly_users)} | |
| sub="trong 7 ngày cuối của khoảng lọc" /> | |
| <Metric label="Dùng hàng ngày" value={fmtNum(o.daily_users)} | |
| sub="trong 24 giờ cuối của khoảng lọc" /> | |
| <Metric label="Có quay lại (A5)" value={fmtNum(o.returning_users)} | |
| sub={`trên ${o.users} người có hoạt động`} /> | |
| </Group> | |
| <Group title="⚡ Năng suất" | |
| hint="Làm được bao nhiêu việc, ra sản phẩm gì, có ưng không"> | |
| <Metric label="Phiên làm việc" value={fmtNum(o.sessions)} | |
| sub={`trung vị ${fmtShort(o.session_median_ms)} · dài nhất ${fmtShort(o.session_max_ms)}`} /> | |
| <Metric label="Số việc (task)" value={fmtNum(o.tasks)} | |
| sub={`${o.tasks_per_day.toFixed(1)} việc/ngày · ${o.tasks_done} có sản phẩm`} /> | |
| <Metric label="Số lần bấm chạy (A4)" | |
| value={o.attempts_avg == null ? "—" : o.attempts_avg.toFixed(1)} | |
| sub="mỗi việc · bấm lại nhiều = khó ưng" /> | |
| <Metric label="Tỷ lệ hoàn thành (A3)" value={fmtPct(o.completion_rate)} | |
| tone={o.completion_rate >= 0.7 ? "green" : "orange"} | |
| sub={`${o.abandoned} việc bỏ dở`} warn={o.completion_rate < 0.7} /> | |
| <Metric label="Sản phẩm làm ra (B1)" value={fmtNum(o.produced_total)} | |
| sub="file người dùng thật sự lấy về" /> | |
| <Satisfaction up={o.thumbs_up} down={o.thumbs_down} rate={o.thumbs_rate} /> | |
| <TopTool label="Tool đóng góp nhiều nhất" f={ranked.best} tone="green" /> | |
| <TopTool label="Tool đóng góp ít nhất" f={ranked.worst} tone="orange" | |
| empty="cần ít nhất 2 tool có việc để so" /> | |
| </Group> | |
| <Group title="⏱️ Thời gian" hint="Tổng thời lượng và tốc độ hoàn thành"> | |
| <Metric label="Tổng thời lượng dùng" value={fmtDur(o.active_ms)} | |
| sub="đã trừ lúc bỏ máy > 30′" /> | |
| <Metric label="Xong 1 việc mất (A1)" value={fmtDur(o.duration_median_ms)} | |
| sub={`chậm nhất 10%: ${fmtShort(o.duration_p90_ms)}`} /> | |
| <Metric label="Thời gian AI xử lý (B4)" value={fmtDur(o.machine_total_ms)} | |
| sub={`chờ tới lượt ${fmtShort(o.wait_total_ms)}`} /> | |
| <Metric label="Máy chạy mỗi việc" value={fmtShort(o.machine_median_ms)} | |
| sub="trung vị, đã trừ thời gian chờ" /> | |
| </Group> | |
| <Formulas /> | |
| {/* ── 1. HOẠT ĐỘNG HÀNG NGÀY ─────────────────────────── */} | |
| <div className="card"> | |
| <div className="sec-title"><span className="em">📈</span> Báo cáo hoạt động hàng ngày</div> | |
| <LineChart | |
| labels={ts.map((d) => d.date)} | |
| series={[ | |
| { key: "users", label: "Người dùng", color: "var(--orange)", values: ts.map((d) => d.users) }, | |
| { key: "tasks", label: "Số việc", color: "#3b82f6", values: ts.map((d) => d.tasks) }, | |
| { key: "done", label: "Việc có sản phẩm", color: "var(--green)", values: ts.map((d) => d.tasks_done) }, | |
| ]} | |
| /> | |
| <div style={{ fontSize: 14, fontWeight: 700, color: "var(--ink-2)", margin: "22px 0 10px" }}> | |
| Thời lượng dùng mỗi ngày | |
| </div> | |
| <BarChart data={ts.slice(-14).map((d) => ({ | |
| label: d.date.slice(5), value: d.active_ms, text: fmtDur(d.active_ms), | |
| sub: `${d.users} người`, | |
| }))} /> | |
| </div> | |
| {/* ── 2. TOOL & SẢN PHẨM ─────────────────────────────── */} | |
| <div className="card"> | |
| <div className="sec-title"><span className="em">💼</span> Công cụ được sử dụng nhiều nhất</div> | |
| <BarChart data={(data.features || []).map((f) => ({ | |
| label: f.label, value: f.tasks, text: `${f.tasks} việc`, | |
| sub: `${f.users} người`, | |
| }))} /> | |
| </div> | |
| <div className="card"> | |
| <div className="sec-title"><span className="em">🧊</span> Sản phẩm làm ra</div> | |
| <BarChart color="green" data={(data.products || []).slice(0, 10).map((p) => ({ | |
| label: `${p.label} · ${p.kind}`, value: p.count, text: fmtNum(p.count), | |
| }))} empty="Chưa có sản phẩm nào được tải về." /> | |
| </div> | |
| <ContribRanking features={data.features || []} weights={data.contrib_weights} /> | |
| {/* ── 3. CHI TIẾT THEO TOOL ──────────────────────────── */} | |
| <div className="card"> | |
| <div className="sec-title"><span className="em">🧪</span> Chi tiết theo tool</div> | |
| <div className="tablewrap"> | |
| <table className="list rep"> | |
| <thead> | |
| <tr> | |
| <th>Tên công cụ</th> | |
| <th className="mid">Số người</th> | |
| <th className="mid">Số task</th> | |
| <th className="mid">Việc<br />xong</th> | |
| <th className="mid">Sản phẩm<br />đầu ra</th> | |
| <th className="mid">Tỷ lệ<br />hoàn thành</th> | |
| <th className="mid">Thời gian<br />hoàn thành</th> | |
| <th className="mid">Số lần bấm<br />chạy / task</th> | |
| <th className="mid">Thời gian<br />AI xử lý</th> | |
| <th className="mid">Hài lòng</th> | |
| <th>Điểm dừng / bỏ dở</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {(data.features || []).map((f) => ( | |
| <tr key={f.feature}> | |
| <td className="name">{f.label}</td> | |
| <td className="mid">{f.users}</td> | |
| <td className="mid">{f.tasks}</td> | |
| <td className="mid big">{f.tasks_done}</td> | |
| <td className="mid big">{f.produced_total}</td> | |
| <td className="mid" style={{ color: f.completion_rate >= 0.7 ? "var(--green)" : "var(--orange)", fontWeight: 700 }}> | |
| {fmtPct(f.completion_rate)} | |
| </td> | |
| {/* Tool mở ra rồi bỏ dở thì mấy cột dưới KHÔNG có số thật | |
| để in. Trước đây in trơ dấu "—", nhìn cứ như báo cáo | |
| hỏng; nay rê chuột vào là biết vì sao trống. */} | |
| <td className="mid"> | |
| <Blank value={f.duration_median_ms} render={fmtShort} | |
| why="chưa việc nào chạy tới lúc có sản phẩm nên chưa đo được" /> | |
| </td> | |
| <td className="mid">{f.attempts_avg == null ? "—" : f.attempts_avg.toFixed(1)}</td> | |
| <td className="mid"> | |
| <Blank value={f.machine_median_ms} render={fmtShort} | |
| why="chưa ai bấm chạy nên máy chưa xử lý lần nào" /> | |
| </td> | |
| <td className="mid"> | |
| <Blank value={f.thumbs_up + f.thumbs_down ? f.thumbs_rate : null} | |
| render={fmtPct} why="chưa ai chấm 👍/👎 cho kết quả của tool này" | |
| title={`${f.thumbs_up} 👍 / ${f.thumbs_down} 👎`} /> | |
| </td> | |
| <td style={{ minWidth: 165 }}><StepBar counts={f.abandon_by_step} /></td> | |
| </tr> | |
| ))} | |
| </tbody> | |
| </table> | |
| </div> | |
| <p className="small muted" style={{ margin: "14px 0 0", fontStyle: "italic" }}> | |
| “Thời gian hoàn thành” là trung vị từ lúc mở tool tới lúc có sản phẩm đầu tiên — gồm cả thời gian | |
| người ngồi chỉnh lẫn thời gian AI xử lý. Cột “Thời gian AI xử lý” chỉ tính lúc máy chạy thật, | |
| đã trừ thời gian chờ tới lượt. Dấu <b>—</b> nghĩa là tool có người mở nhưng chưa việc nào chạy | |
| tới bước đó (xem cột “Việc xong” và phễu “Điểm dừng / bỏ dở”), <b>không phải</b> mất số liệu — | |
| rê chuột vào dấu — để xem lý do. | |
| </p> | |
| </div> | |
| {/* ── 4. THEO NHÂN SỰ ────────────────────────────────── */} | |
| <div className="card"> | |
| <div className="sec-title"> | |
| <span className="em">👥</span> Báo cáo chi tiết theo nhân sự ({(data.users || []).length}) | |
| </div> | |
| <div className="tablewrap"> | |
| <table className="list rep"> | |
| <thead> | |
| <tr> | |
| <th>Người dùng</th><th>Team</th><th>BU</th> | |
| <th>Hoạt động<br />lần cuối</th> | |
| <th className="mid">Số<br />ngày</th> | |
| <th className="mid">Số phiên<br />dùng</th> | |
| <th className="num">Tổng<br />thời lượng</th> | |
| <th className="mid">Số<br />task</th> | |
| <th className="mid">Xong</th> | |
| <th className="mid">Sản phẩm<br />đầu ra</th> | |
| <th className="num">Thời gian<br />AI xử lý</th> | |
| <th>Công cụ hay dùng</th> | |
| <th /> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {(data.users || []).map((u) => { | |
| const who = splitName(names[u.user_id] || u.user_id); | |
| return ( | |
| <tr key={u.user_id}> | |
| <td className="name"> | |
| {who.name} | |
| <span className="idchip">{u.user_id.toUpperCase()}</span> | |
| {u.returning && <span title="Có quay lại dùng (A5)" style={{ marginLeft: 6 }}>🔁</span>} | |
| </td> | |
| <td className="small">{who.team || <span className="muted">—</span>}</td> | |
| <td className="small">{who.bu || <span className="muted">—</span>}</td> | |
| <td className="small muted" style={{ whiteSpace: "nowrap" }}>{fmtTime(u.last_seen)}</td> | |
| <td className="mid">{u.days_active}</td> | |
| <td className="mid">{u.sessions}</td> | |
| <td className="num big" style={{ whiteSpace: "nowrap" }}>{fmtDur(u.active_ms)}</td> | |
| <td className="mid">{u.tasks}</td> | |
| {/* Chỉ SỐ việc xong — bỏ phần trăm đi kèm: cột này đứng | |
| cạnh cột "Số task" nên tỷ lệ tự đọc ra được, in thêm | |
| % chỉ làm ô chật và rối. */} | |
| <td className="mid big">{u.tasks_done}</td> | |
| <td className="mid">{fmtNum(u.produced_total)}</td> | |
| <td className="num">{fmtShort(u.machine_total_ms)}</td> | |
| <td style={{ maxWidth: 250 }}> | |
| {(u.top_features || []).length | |
| ? u.top_features.map((f) => ( | |
| <span key={f.feature || f.label} className="usechip">{f.label} · {f.tasks}</span> | |
| )) | |
| : <span className="muted">—</span>} | |
| </td> | |
| <td> | |
| <button className="btn sm" onClick={() => openDetail(u.user_id)}> | |
| {openUser === u.user_id ? "Đóng" : "Xem phiên"} | |
| </button> | |
| </td> | |
| </tr> | |
| ); | |
| })} | |
| </tbody> | |
| </table> | |
| </div> | |
| {openUser && ( | |
| <div style={{ marginTop: 16, borderTop: "1px solid var(--line)", paddingTop: 14 }}> | |
| <div style={{ fontWeight: 800, marginBottom: 10 }}> | |
| Nhật ký làm việc của{" "} | |
| <span style={{ color: "var(--orange)" }}>{names[openUser] || openUser}</span> | |
| <span className="small muted" style={{ marginLeft: 8 }}>{openUser.toUpperCase()}</span> | |
| </div> | |
| {!detail ? <p className="small muted">Đang tải…</p> : <UserSessions detail={detail} />} | |
| </div> | |
| )} | |
| </div> | |
| {/* ── 5. TỐC ĐỘ MÁY MỖI BƯỚC (B2) ────────────────────── */} | |
| <div className="card"> | |
| <div className="sec-title"><span className="em">⚙️</span> Tốc độ máy mỗi bước (B2)</div> | |
| {(data.jobs || []).length ? ( | |
| <div className="tablewrap"> | |
| <table className="list rep"> | |
| <thead> | |
| <tr> | |
| <th>Tool</th><th>Bước máy</th> | |
| <th className="mid">Số lần chạy</th> | |
| <th className="mid">TB lần bấm<br />chạy lại</th> | |
| <th className="num">Trung vị</th> | |
| <th className="num">Chậm nhất 10%</th> | |
| <th className="num">Tổng</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {(data.jobs || []).map((j, i) => ( | |
| <tr key={j.feature + j.phase + i}> | |
| <td className="name">{j.label || "—"}</td> | |
| <td>{j.phase_label || j.phase}</td> | |
| <td className="mid">{j.runs}</td> | |
| <td className="mid">{j.attempt_avg == null ? "—" : j.attempt_avg.toFixed(1)}</td> | |
| <td className="num big">{fmtShort(j.median_ms)}</td> | |
| <td className="num">{fmtShort(j.p90_ms)}</td> | |
| <td className="num small muted">{fmtDur(j.total_ms)}</td> | |
| </tr> | |
| ))} | |
| </tbody> | |
| </table> | |
| </div> | |
| ) : ( | |
| <p className="small muted" style={{ margin: 0, fontStyle: "italic" }}> | |
| Chưa có lần chạy máy nào trong khoảng đã chọn. | |
| </p> | |
| )} | |
| </div> | |
| {/* ── 6. NHẬT KÝ CHI TIẾT ────────────────────────────── */} | |
| {/* Bản tiếng Việt do backend dịch sẵn (`vi_*`) — frontend không giữ | |
| bảng dịch riêng để khỏi lệch với file CSV tải về. */} | |
| <div className="card"> | |
| <div className="sec-title"> | |
| <span className="em">🧾</span> Nhật ký chi tiết | |
| <button className="btn sm" onClick={loadRaw}> | |
| {rawOpen ? "Ẩn" : "Xem 300 dòng gần nhất"} | |
| </button> | |
| </div> | |
| {rawOpen && ( | |
| <div className="tablewrap" style={{ maxHeight: 460, overflowY: "auto" }}> | |
| <table className="list rep"> | |
| <thead> | |
| <tr> | |
| <th>Thời gian</th><th>Người dùng</th><th>Tool</th><th>Bước</th> | |
| <th>Hành động</th><th>Giá trị</th><th className="num">Máy chạy</th><th>Chi tiết</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {raw.map((e) => ( | |
| <tr key={e.event_id}> | |
| <td className="small muted" style={{ whiteSpace: "nowrap" }}>{fmtTime(e.event_ts)}</td> | |
| <td className="small">{e.vi_user || e.user_id}</td> | |
| <td className="small">{e.vi_feature || e.feature || "—"}</td> | |
| <td className="small muted" style={{ whiteSpace: "nowrap" }}>{e.vi_step || e.step || "—"}</td> | |
| <td className="small" style={{ fontWeight: 700, whiteSpace: "nowrap" }}>{e.vi_event || e.event_name}</td> | |
| <td className="small">{e.vi_value || e.event_value || "—"}</td> | |
| <td className="small num" style={{ whiteSpace: "nowrap" }}>{e.vi_latency || ""}</td> | |
| <td className="small muted" style={{ maxWidth: 340 }} title={e.vi_detail || ""}> | |
| {e.vi_detail || "—"} | |
| </td> | |
| </tr> | |
| ))} | |
| </tbody> | |
| </table> | |
| </div> | |
| )} | |
| <p className="small muted" style={{ margin: "12px 0 0" }}> | |
| Lưu tại <b>{data.storage?.backend === "pg" ? "PostgreSQL" : "SQLite (máy chủ)"}</b> · | |
| {" "}{fmtNum(data.storage?.rows)} dòng · giữ {data.storage?.retention_days} ngày rồi tự dọn. | |
| </p> | |
| </div> | |
| </> | |
| )} | |
| </div> | |
| ); | |
| } | |
| // ── Khối chỉ số ──────────────────────────────────────────────── | |
| function Group({ title, hint, children }) { | |
| return ( | |
| <div className="grp"> | |
| <div className="grp-title">{title}</div> | |
| <div className="grp-hint">{hint}</div> | |
| <div className="grp-rule" /> | |
| <div className="rep-kpis">{children}</div> | |
| </div> | |
| ); | |
| } | |
| // Ô số có thể RỖNG THẬT. "Không có số" khác hẳn "số bằng 0": tool mở ra rồi bỏ | |
| // dở thì không có thời gian hoàn thành nào để in — dấu — kèm lý do, đừng để | |
| // người đọc tưởng báo cáo mất dữ liệu. | |
| function Blank({ value, render, why, title = "" }) { | |
| if (value == null || Number.isNaN(value)) { | |
| return <span className="muted" title={why} style={{ cursor: "help" }}>—</span>; | |
| } | |
| return <span title={title || undefined}>{render(value)}</span>; | |
| } | |
| function Metric({ label, value, sub, tone = "", warn = false }) { | |
| return ( | |
| <div className="metric"> | |
| <div className="lbl">{label}</div> | |
| <div className={"val" + (tone ? " " + tone : "")}>{value}</div> | |
| {sub && <div className={"sub" + (warn ? " warn" : "")}>{sub}</div>} | |
| </div> | |
| ); | |
| } | |
| // Ô "Hài lòng (B3)": quy tỷ lệ 👍 về thang 5 sao rồi đặt chấm trên dải màu. | |
| // Chưa ai chấm thì nói thẳng "chưa có phiếu", KHÔNG vẽ chấm ở mốc 0 — 0 điểm | |
| // và "chưa có dữ liệu" là hai chuyện hoàn toàn khác nhau. | |
| function Satisfaction({ up, down, rate }) { | |
| const votes = (up || 0) + (down || 0); | |
| if (!votes) { | |
| return ( | |
| <div className="metric"> | |
| <div className="lbl">Hài lòng (B3)</div> | |
| <div className="val muted">—</div> | |
| <div className="sub">chưa ai chấm 👍/👎 cho kết quả</div> | |
| </div> | |
| ); | |
| } | |
| const score = (rate || 0) * 5; | |
| return ( | |
| <div className="metric"> | |
| <div className="lbl">Hài lòng (B3)</div> | |
| <div className="sat"> | |
| <span className="sat-val">{score.toFixed(1)}<i>/5</i></span> | |
| <div className="sat-track"> | |
| <div className="sat-dot" style={{ left: `${Math.max(0, Math.min(100, (rate || 0) * 100))}%` }} /> | |
| </div> | |
| </div> | |
| <div className="sub">{up} 👍 / {down} 👎 trên {votes} phiếu</div> | |
| </div> | |
| ); | |
| } | |
| // Ô "tool đóng góp nhiều / ít nhất". Giá trị là TÊN TOOL nên phải dùng cỡ chữ | |
| // nhỏ hơn ô số (.val.text), kẻo "Chèn chữ vào video" tràn khỏi thẻ. | |
| function TopTool({ label, f, tone, empty = "chưa có tool nào chạy việc" }) { | |
| if (!f) { | |
| return ( | |
| <div className="metric"> | |
| <div className="lbl">{label}</div> | |
| <div className="val muted text">—</div> | |
| <div className="sub">{empty}</div> | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div className="metric"> | |
| <div className="lbl">{label}</div> | |
| <div className={"val text " + tone}>{f.label}</div> | |
| <div className="sub"> | |
| {(f.score_total ?? 0).toFixed(1)} điểm · {f.tasks} việc · {fmtNum(f.produced_total)} sản phẩm | |
| </div> | |
| </div> | |
| ); | |
| } | |
| function Formulas() { | |
| return ( | |
| <details className="formula"> | |
| <summary>Cách tính các chỉ số (mở ra khi cần đối chiếu con số)</summary> | |
| <ul> | |
| <li><b>Số tài khoản được cấp</b>: đếm tài khoản đã được duyệt trong tab “Quản lý người dùng”, kể cả người chưa từng đăng nhập; không suy từ log.</li> | |
| <li><b>User đã sử dụng</b>: có ít nhất một thao tác thật — <code>feature_open</code>, <code>run_click</code>, | |
| dán link hoặc tải file lên. Chỉ mở trang xem thì không tính.</li> | |
| <li><b>Dùng hàng tuần / hàng ngày</b>: có thao tác trong 7 ngày / 24 giờ cuối của khoảng đang lọc | |
| (không phải so với hôm nay, để xem lại báo cáo cũ vẫn đúng).</li> | |
| <li><b>Phiên làm việc</b>: gom theo <code>session_id</code>; im lặng quá 30′ thì cắt sang phiên mới.</li> | |
| <li><b>Số việc (task)</b>: đếm <code>task_id</code> — mỗi lần làm ra một sản phẩm là một việc. | |
| <b> Tỷ lệ hoàn thành (A3)</b> = việc có đầu ra ÷ tổng việc.</li> | |
| <li><b>Số lần bấm chạy (A4)</b> = số lần máy chạy xong ÷ số việc. <b>Sản phẩm (B1)</b> = số file | |
| người dùng thật sự tải về hoặc chuyển tiếp sang tool khác.</li> | |
| <li><b>Hài lòng (B3)</b> = tỷ lệ 👍 trên tổng phiếu 👍/👎 người dùng bấm ở màn kết quả.</li> | |
| <li><b>Xong 1 việc mất (A1)</b> = trung vị từ lúc mở tool tới lúc có sản phẩm đầu tiên. | |
| <b> Thời gian AI xử lý (B4)</b> = tổng <code>latency_ms</code> của job, đã trừ thời gian chờ tới lượt.</li> | |
| </ul> | |
| </details> | |
| ); | |
| } | |
| // ── Tool đóng góp nhiều / ít nhất ────────────────────────────── | |
| // Điểm tổng hợp do backend chấm (etl.score_contribution): | |
| // 40% nhu cầu người dùng (số việc) + 20% ít phải bấm chạy lại (A4 nghịch đảo) | |
| // + 40% sản phẩm đầu ra (B1). Mỗi phần quy về thang 100 theo tool cao nhất | |
| // TRONG KỲ ĐANG LỌC -> chỉ so giữa các tool cùng khoảng, không so giữa 2 khoảng. | |
| // Thanh trong bảng vẽ theo ĐÚNG CON SỐ hiện bên cạnh (so với tool cao nhất | |
| // cùng cột), KHÔNG vẽ theo điểm quy đổi. Vẽ theo điểm thì cột "ít chạy lại" | |
| // nhìn ngược đời: 0.5 lần/việc thanh DÀI hơn 0.8 lần/việc (vì ít bấm = điểm | |
| // cao). Số to = thanh dài, không ngoại lệ — cột nào "ít càng tốt" thì ghi rõ | |
| // ở tiêu đề. Điểm quy đổi vẫn xem được ở tooltip khi rê chuột. | |
| // `none` = chưa có số để vẽ (tool mở ra chưa bấm chạy) -> thanh gạch mờ, để | |
| // không bị đọc nhầm thành "0 lần bấm = giỏi nhất". | |
| function ScoreBar({ ratio, score, text, unit, color = "var(--orange)", none = false }) { | |
| const pct = Math.max(0, Math.min(100, (ratio || 0) * 100)); | |
| return ( | |
| <div style={{ display: "flex", alignItems: "center", gap: 8 }} | |
| title={`${(score ?? 0).toFixed(1)} điểm quy đổi (thang 100)`}> | |
| <div style={{ | |
| flex: 1, minWidth: 40, height: 8, borderRadius: 99, overflow: "hidden", | |
| background: none | |
| ? "repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 8px)" | |
| : "var(--orange-soft)", | |
| }}> | |
| {!none && <div style={{ width: `${pct}%`, height: "100%", background: color, borderRadius: 99 }} />} | |
| </div> | |
| <span className="small" style={{ width: 86, textAlign: "right", whiteSpace: "nowrap" }}> | |
| <b>{text}</b>{unit ? <span className="muted"> {unit}</span> : null} | |
| </span> | |
| </div> | |
| ); | |
| } | |
| function ContribRanking({ features, weights }) { | |
| const rows = (features || []).filter((f) => f.tasks) | |
| .slice().sort((a, b) => (b.score_total ?? 0) - (a.score_total ?? 0)); | |
| const w = weights || { demand: 0.4, rerun: 0.2, output: 0.4 }; | |
| // Mốc vẽ thanh: tool cao nhất của TỪNG CỘT (min 1 để khỏi chia 0). | |
| const maxTasks = Math.max(1, ...rows.map((f) => f.tasks || 0)); | |
| const maxProd = Math.max(1, ...rows.map((f) => f.produced_total || 0)); | |
| const maxAtt = Math.max(0.1, ...rows.map((f) => f.attempts_avg || 0)); | |
| const pct = (x) => `${Math.round((x || 0) * 100)}%`; | |
| if (!rows.length) { | |
| return ( | |
| <div className="card"> | |
| <div className="sec-title"><span className="em">🏆</span> Tool đóng góp nhiều nhất / ít nhất</div> | |
| <p className="small muted" style={{ margin: 0 }}>Chưa có tool nào chạy việc trong khoảng đã chọn.</p> | |
| </div> | |
| ); | |
| } | |
| const best = rows[0]; | |
| const worst = rows[rows.length - 1]; | |
| const card = (title, f, tone) => ( | |
| <div style={{ | |
| flex: "1 1 220px", padding: "13px 15px", borderRadius: "var(--radius-sm)", | |
| background: tone === "good" ? "var(--green-soft)" : "var(--red-soft)", | |
| border: `1px solid ${tone === "good" ? "var(--green)" : "var(--red)"}`, | |
| }}> | |
| <div className="small" style={{ fontWeight: 700, color: tone === "good" ? "var(--green)" : "var(--red)" }}>{title}</div> | |
| <div style={{ fontSize: 20, fontWeight: 800, margin: "2px 0" }}>{f.label}</div> | |
| <div className="small muted"> | |
| {(f.score_total ?? 0).toFixed(1)} điểm · {f.tasks} việc · {fmtNum(f.produced_total)} sản phẩm · | |
| {" "}{f.attempts_avg ? `${f.attempts_avg.toFixed(1)} lần bấm/việc` : "chưa bấm chạy lần nào"} | |
| </div> | |
| </div> | |
| ); | |
| return ( | |
| <div className="card"> | |
| <div className="sec-title"><span className="em">🏆</span> Tool đóng góp nhiều nhất / ít nhất</div> | |
| <p className="small muted" style={{ marginTop: -10 }}> | |
| Điểm = <b>{pct(w.demand)}</b> nhu cầu người dùng (số việc) + <b>{pct(w.rerun)}</b> ít phải bấm chạy lại | |
| (A4 càng thấp điểm càng cao) + <b>{pct(w.output)}</b> số sản phẩm đầu ra (B1). | |
| Mỗi phần quy về thang 100 theo tool cao nhất trong khoảng đang lọc — chỉ dùng để so các tool với nhau. | |
| Bảng dưới hiện <b>số thật</b>, thanh vẽ theo đúng con số đó (so với tool cao nhất cùng cột) — riêng cột | |
| lần bấm/việc thì <b>ít càng tốt</b>, thanh ngắn là hay. Rê chuột vào thanh để xem điểm quy đổi. | |
| Tool mở ra mà chưa bấm chạy lần nào thì cột đó tính 0 điểm (chưa chạy thì chưa đóng góp), không phải 100. | |
| </p> | |
| {rows.length > 1 && ( | |
| <div style={{ display: "flex", gap: 12, flexWrap: "wrap", margin: "12px 0" }}> | |
| {card("Đóng góp nhiều nhất", best, "good")} | |
| {card("Đóng góp ít nhất", worst, "warn")} | |
| </div> | |
| )} | |
| <div className="tablewrap"> | |
| <table className="list rep"> | |
| <thead> | |
| <tr> | |
| <th>#</th><th>Tool</th> | |
| <th>Nhu cầu · số việc ({pct(w.demand)})</th> | |
| <th>Lần bấm/việc ({pct(w.rerun)})</th> | |
| <th>Sản phẩm đầu ra ({pct(w.output)})</th> | |
| <th className="num">Tổng điểm</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {rows.map((f, i) => ( | |
| <tr key={f.feature}> | |
| <td className="small muted">{i + 1}</td> | |
| <td className="name">{f.label}</td> | |
| <td style={{ minWidth: 160 }}> | |
| <ScoreBar ratio={f.tasks / maxTasks} score={f.score_demand} | |
| text={fmtNum(f.tasks)} unit="việc" /> | |
| </td> | |
| <td style={{ minWidth: 170 }}> | |
| <ScoreBar ratio={(f.attempts_avg || 0) / maxAtt} score={f.score_rerun} | |
| color="#3b82f6" none={!f.attempts_avg} | |
| text={f.attempts_avg ? f.attempts_avg.toFixed(1) : "—"} | |
| unit={f.attempts_avg ? "lần/việc" : "chưa chạy"} /> | |
| </td> | |
| <td style={{ minWidth: 160 }}> | |
| <ScoreBar ratio={f.produced_total / maxProd} score={f.score_output} | |
| color="var(--green)" | |
| text={fmtNum(f.produced_total)} unit="sản phẩm" /> | |
| </td> | |
| <td className="num" style={{ fontWeight: 800 }}>{(f.score_total ?? 0).toFixed(1)}</td> | |
| </tr> | |
| ))} | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| // ── Nhật ký từng phiên của một người ─────────────────────────── | |
| function UserSessions({ detail }) { | |
| const sessions = detail.sessions || []; | |
| if (!sessions.length) return <p className="small muted">Không có phiên nào trong khoảng đã chọn.</p>; | |
| return ( | |
| <div className="stack" style={{ gap: 12 }}> | |
| {sessions.map((s) => ( | |
| <div key={s.session_id} style={{ | |
| border: "1px solid var(--line)", borderRadius: "var(--radius-sm)", | |
| padding: "10px 12px", background: "var(--cream)", | |
| }}> | |
| <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "baseline", marginBottom: 8 }}> | |
| <b style={{ fontSize: 13 }}>{fmtTime(s.start_ts)}</b> | |
| <span className="small muted"> | |
| dùng {fmtDur(s.active_ms)} · {s.n_tasks} việc · {s.n_events} thao tác | |
| </span> | |
| <span className="small muted" style={{ marginLeft: "auto" }}>{s.session_id}</span> | |
| </div> | |
| {(s.tasks || []).map((t) => ( | |
| <div key={t.task_id} style={{ | |
| borderTop: "1px dashed var(--line)", paddingTop: 8, marginTop: 8, | |
| }}> | |
| <div style={{ display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }}> | |
| <span style={{ fontWeight: 700, fontSize: 13 }}>{t.label}</span> | |
| {t.has_output ? ( | |
| <span style={{ fontSize: 11.5, fontWeight: 700, color: "var(--green)", background: "var(--green-soft)", padding: "2px 8px", borderRadius: 99 }}> | |
| ✓ {t.success_type === "forward" ? "chuyển tiếp" : "tải về"} · {t.produced} sản phẩm | |
| </span> | |
| ) : t.abandoned ? ( | |
| <span style={{ fontSize: 11.5, fontWeight: 700, color: "var(--red)", background: "var(--red-soft)", padding: "2px 8px", borderRadius: 99 }}> | |
| ✕ bỏ dở ở “{t.last_step || "?"}”{t.abandon_reason ? ` · ${t.abandon_reason}` : ""} | |
| </span> | |
| ) : ( | |
| <span className="small muted">đang làm dở</span> | |
| )} | |
| <span className="small muted"> | |
| {t.has_output ? `xong sau ${fmtDur(t.duration_ms)}` : `kéo dài ${fmtDur(t.span_ms)}`} | |
| {" · "}máy {fmtShort(t.machine_ms)} | |
| {t.wait_ms ? ` (chờ ${fmtShort(t.wait_ms)})` : ""} | |
| {t.attempts ? ` · bấm chạy ${t.attempts} lần` : ""} | |
| {t.thumbs_up ? " · 👍" : ""}{t.thumbs_down ? " · 👎" : ""} | |
| </span> | |
| </div> | |
| {!!(t.steps || []).length && ( | |
| <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 6 }}> | |
| {t.steps.map((st, i) => ( | |
| <span key={i} style={{ | |
| fontSize: 11, color: "var(--ink-2)", background: "var(--white)", | |
| border: "1px solid var(--line)", borderRadius: 99, padding: "2px 8px", | |
| }}> | |
| {st.step} {fmtShort(st.ms)} | |
| </span> | |
| ))} | |
| </div> | |
| )} | |
| </div> | |
| ))} | |
| </div> | |
| ))} | |
| </div> | |
| ); | |
| } | |