{validation.matches ? '✅' : '⚠️'} {(window.appT||(s=>s))("Validated:")}{' '}
{(window.appLang&&window.appLang()==='ar')
? `يُظهر سجل التدقيق ${validation.total_events} حدثًا متعلقًا بالمخالفات؛ العدد المحسوب = `
: `audit log shows ${validation.total_events} strike-related event${validation.total_events === 1 ? '' : 's'}; computed count = `}{validation.computed}{(window.appLang&&window.appLang()==='ar') ? `، العدد المُخزَّن = ` : `, stored count = `}{validation.expected}.
{validation.matches
? (window.appT||(s=>s))(' Counts match — bot state machine is consistent with audit history.')
: (window.appT||(s=>s))(' ⚠️ Mismatch — likely an old `force_clear_strikes` event before the audit log was added, or a bot restart lost a transient counter. Use the "Forgive all" or "Downgrade" buttons on the employee card to reconcile.')}
{validation.cleared_at && (
{(window.appLang&&window.appLang()==='ar')
? `آخر مسح في ${validation.cleared_at.replace('T',' ').slice(0,19)} (تُحتسب الأحداث بعد تلك النقطة).`
: `Last cleared at ${validation.cleared_at.replace('T',' ').slice(0,19)} (events after that point counted).`}
)}
)}
{loading &&
{(window.appT||(s=>s))("Loading…")}
}
{!loading && events.length === 0 && (
{(window.appT||(s=>s))("No strike events on record.")} {currentCount > 0
? ((window.appLang&&window.appLang()==='ar')
? `(العدد المُخزَّن هو ${currentCount} — على الأرجح مخالفة سابقة لسجل التدقيق؛ فكِّر في "العفو عن الكل" لإعادة التعيين.)`
: `(Stored count is ${currentCount} — likely a pre-audit-log strike; consider Forgive all to reset.)`)
: ''}
{ev.action_label || (window.humanizeActionType ? window.humanizeActionType(ev.action_type) : ev.action_type)}
{/* Show WHO did this action — API's `actor` field carries
the admin name, bot label, or generic "Admin" for
admin-GUI actions. */}
{ev.actor && (
{(window.appT||(s=>s))("by")} {ev.actor}
)}
{(ev.body || ev.trigger || '').slice(0, 140)}
))}
)}
);
}
/* ──────────────────────────────────────────────────────────────────────────
Q8 — Progress timeline + admin-pickable metrics grid (issue #24)
───────────────────────────────────────────────────────────────────────── */
/* (d) Inline-SVG line chart of per-day progress score with PTO bands,
blocker dots, and strike triangles overlaid. Pure SVG — no chart lib
needed (the codebase intentionally avoids one for bundle size). */
function ProgressTimelineCard({ byDay, ptoHistory, violations, rangeStart, rangeEnd }) {
// Build a date-keyed map of {progress, has_blocker} from by_day
const byDate = useMemo(() => {
const m = {};
(byDay || []).forEach(d => {
m[d.date] = {
score: typeof d.progress_score === 'number' ? d.progress_score : null,
has_blocker: !!(d.blocker && String(d.blocker).trim()),
today: (d.today || '').slice(0, 80),
};
});
return m;
}, [byDay]);
// Compose an ordered date array across the full range so gaps render as gaps
const dates = useMemo(() => {
if (!rangeStart || !rangeEnd) return [];
const start = new Date(rangeStart + 'T00:00:00');
const end = new Date(rangeEnd + 'T00:00:00');
const out = [];
for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
out.push(d.toISOString().slice(0, 10));
}
return out;
}, [rangeStart, rangeEnd]);
// Pre-compute PTO bands as [{start_idx, end_idx, kind}]
const ptoBands = useMemo(() => {
if (!ptoHistory || !dates.length) return [];
const idxOf = d => dates.indexOf(d);
const bands = [];
ptoHistory.forEach(p => {
const sIdx = idxOf(p.start_date);
const eIdx = idxOf(p.end_date);
if (sIdx === -1 && eIdx === -1) return;
bands.push({
start: Math.max(0, sIdx === -1 ? 0 : sIdx),
end: Math.min(dates.length - 1, eIdx === -1 ? dates.length - 1 : eIdx),
kind: p.kind || 'pto',
});
});
return bands;
}, [ptoHistory, dates]);
// Strike marker dates (just keep the calendar date of each event)
const strikeDates = useMemo(() => {
const out = new Set();
(violations || []).forEach(v => {
if (v.occurred_at) out.add(v.occurred_at.slice(0, 10));
});
return out;
}, [violations]);
const W = 720, H = 200, M = { top: 14, right: 14, bottom: 22, left: 28 };
const innerW = W - M.left - M.right;
const innerH = H - M.top - M.bottom;
const n = dates.length;
const xFor = i => M.left + (n <= 1 ? innerW / 2 : (i * innerW) / (n - 1));
const yFor = score => M.top + innerH - (score / 2) * innerH; // score 0..2
// Build line path skipping null days (no score that day)
const linePath = useMemo(() => {
if (!dates.length) return '';
const segs = [];
let started = false;
dates.forEach((d, i) => {
const rec = byDate[d];
if (rec && rec.score != null) {
segs.push((started ? 'L' : 'M') + xFor(i).toFixed(1) + ',' + yFor(rec.score).toFixed(1));
started = true;
} else {
started = false; // gap
}
});
return segs.join(' ');
}, [dates, byDate, n]);
const _ptoColor = (k) => ({
sick: '#ef4444',
vacation: '#3b82f6',
pto: '#3b82f6',
half_day: '#a855f7',
holiday: '#9ca3af',
})[k] || '#3b82f6';
return (
<>
s))("Progress timeline")}
tip={(window.appT||(s=>s))("Per-day progress score (0–2) across the selected period. Light vertical bands = approved PTO (color-coded by kind). Orange dots on the score line = days with a reported blocker. Red ▲ triangles at the top = strike events. Hover any day for details.")}
sub={(window.appLang&&window.appLang()==='ar')
? `${dates.length} يوم · ${ptoBands.length} فترة إجازة · ${strikeDates.size} مخالفة`
: `${dates.length} day${dates.length === 1 ? '' : 's'} · ${ptoBands.length} PTO block${ptoBands.length === 1 ? '' : 's'} · ${strikeDates.size} strike${strikeDates.size === 1 ? '' : 's'}`}
/>