// ============================================================================
// CALLS — точний відтворення дизайну + реальний Ringostat API
// ============================================================================
if (!window._crmCalls) window._crmCalls = { data: null, ts: 0 };
const CALLS_FE_TTL = 15 * 60 * 1000;
// ── Disposition helpers ────────────────────────────────────────────
const CALL_RESULTS = {
ANSWERED: { label: "Відповіли", color: "#10B981", icon: "check" },
'NO ANSWER':{ label: "Пропущено", color: "#EF4444", icon: "phone-missed" },
MISSED: { label: "Пропущено", color: "#EF4444", icon: "phone-missed" },
BUSY: { label: "Зайнято", color: "#F59E0B", icon: "phone-off" },
FAILED: { label: "Помилка", color: "#EF4444", icon: "phone-off" },
};
const isMissed = (c) => c.disposition === 'NO ANSWER' || c.disposition === 'MISSED';
const isIncoming = (c) => c.call_type === 'in' || c.call_type === 'transitin';
function getDispLabel(c) {
const isOut = !isIncoming(c);
if (isMissed(c) && isOut) return 'Немає відповіді';
return CALL_RESULTS[c.disposition]?.label || c.disposition || '—';
}
function getDispColor(c) { return CALL_RESULTS[c.disposition]?.color || 'var(--fg-muted)'; }
function fmtSec(s) {
const t = Math.floor(s || 0);
return `${String(Math.floor(t / 60)).padStart(2, '0')}:${String(t % 60).padStart(2, '0')}`;
}
function customerPhone(c) { return c.call_type === 'out' ? c.dst : c.caller; }
// ── Date grouping ──────────────────────────────────────────────────
function callDateGroup(calldate) {
if (!calldate) return '—';
const d = new Date(calldate.replace(' ', 'T'));
const now = new Date();
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const yesterday = new Date(today - 86400000);
const cd = new Date(d.getFullYear(), d.getMonth(), d.getDate());
if (cd.getTime() === today.getTime()) return 'Сьогодні';
if (cd.getTime() === yesterday.getTime()) return 'Вчора';
return d.toLocaleDateString('uk-UA', { day: '2-digit', month: 'long' });
}
// ── Pre-baked waveforms ────────────────────────────────────────────
const WAVES = [
[.2,.3,.5,.8,.9,.7,.4,.5,.6,.8,.7,.4,.3,.5,.7,.6,.4,.3,.5,.7,.9,.8,.6,.4,.3,.5,.7,.6,.5,.4,.3,.2],
[.3,.4,.6,.7,.5,.3,.4,.6,.8,.9,.7,.5,.4,.6,.8,.7,.5,.3,.4,.6,.7,.5,.4,.3,.5,.7,.8,.6,.4,.3,.4,.3],
[.4,.5,.7,.8,.6,.4,.5,.7,.9,.8,.6,.4,.5,.7,.6,.4,.3,.5,.7,.8,.6,.5,.7,.8,.7,.5,.4,.6,.7,.5,.3,.4],
[.2,.4,.6,.5,.3,.4,.6,.8,.7,.5,.4,.6,.7,.5,.4,.6,.8,.6,.4,.3,.5,.7,.6,.4,.3,.4,.6,.5,.3,.4,.5,.3],
];
function waveIdx(uid) { return uid ? String(uid).split('').reduce((a, c) => a + c.charCodeAt(0), 0) : 0; }
// ── Waveform component ─────────────────────────────────────────────
function Waveform({ uid, progress, playing, onSeek, noRec }) {
if (noRec) return немає запису;
const ref = useRef(null);
const bars = WAVES[waveIdx(uid) % WAVES.length];
const handleClick = (e) => {
if (!ref.current || !onSeek) return;
const rect = ref.current.getBoundingClientRect();
onSeek(Math.max(0, Math.min(100, (e.clientX - rect.left) / rect.width * 100)));
};
return (
{bars.map((amp, i) => {
const reached = (i + 1) / bars.length * 100 <= progress;
return
;
})}
{cards.map((k, i) => (
{k.label}
{k.value}
{k.sub && {k.sub}}
))}
{items.map(it => {
const on = active === it.key;
return (
);
})}
);
}
// ── Direction icon ─────────────────────────────────────────────────
function DirIcon({ c }) {
const incoming = isIncoming(c);
const missed = isMissed(c);
const color = incoming ? (missed ? '#EF4444' : '#10B981') : (missed ? '#F59E0B' : 'var(--fg-secondary)');
const icon = incoming ? (missed ? 'phone-missed' : 'phone-incoming') : 'phone-outgoing';
return (
);
}
// ── Result chip ────────────────────────────────────────────────────
function ResultChip({ c }) {
const color = getDispColor(c);
return (
{getDispLabel(c)}
);
}
// ── Bottom audio player (desktop) ─────────────────────────────────
function BottomPlayer({ call, playing, progress, currentTime, duration, playbackRate, onToggle, onStop, onRateChange, onSeek }) {
if (!call) return null;
const RATES = [0.75, 1, 1.5, 2];
const miniBtn = { width: 30, height: 30, borderRadius: 6, background: 'var(--bg-base)', border: '1px solid var(--border-subtle)', color: 'var(--fg-secondary)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' };
return (
{call.employee_fio || '—'}
{fmtPhone(customerPhone(call))}
{fmtSec(currentTime)}
{ const a = window._crmAudio; if (a?.duration) { a.currentTime = p / 100 * a.duration; } }}/>
{fmtSec(duration)}
{RATES.map(s => (
))}
);
}
// ── Bottom player mobile ───────────────────────────────────────────
function BottomPlayerMobile({ call, playing, progress, currentTime, duration, playbackRate, onToggle, onStop, onRateChange }) {
if (!call) return null;
const RATES = [0.75, 1, 1.5, 2];
return (
{call.employee_fio || '—'}
{fmtSec(currentTime)} / {fmtSec(duration)}
{RATES.map(r => )}
);
}
// ── Main Calls component ───────────────────────────────────────────
function Calls({ isMobile }) {
const [calls, setCalls] = useState(() => window._crmCalls?.data || []);
const [loading, setLoading] = useState(() => !window._crmCalls?.data);
const [refreshing, setRefreshing] = useState(false);
const [error, setError] = useState(null);
const [playingId, setPlayingId] = useState(null);
const [playingCall, setPlayingCall] = useState(null);
const [progress, setProgress] = useState(0);
const [currentTime, setCurrentTime] = useState(0);
const [duration, setDuration] = useState(0);
const [playbackRate, setPlaybackRate] = useState(1);
const [query, setQuery] = useState('');
const [typeFilter, setTypeFilter] = useState('all');
const [managerFilter,setManagerFilter]= useState(null);
const [dropMgr, setDropMgr] = useState(false);
const audioRef = useRef(null);
const applyAndCache = (data) => { window._crmCalls = { data, ts: Date.now() }; setCalls(data); };
const loadCalls = () => {
setLoading(true); setError(null);
API.getCalls().then(d => { applyAndCache(d.calls || []); setLoading(false); }).catch(e => { setError(e.message); setLoading(false); });
};
const refreshCalls = () => {
setRefreshing(true);
API.getCalls(true).then(d => { applyAndCache(d.calls || []); setRefreshing(false); }).catch(() => setRefreshing(false));
};
useEffect(() => {
const c = window._crmCalls;
if (c?.data) {
setCalls(c.data); setLoading(false);
if (Date.now() - c.ts >= CALLS_FE_TTL) API.getCalls().then(d => applyAndCache(d.calls || [])).catch(() => {});
} else { loadCalls(); }
const t = setInterval(() => API.getCalls().then(d => applyAndCache(d.calls || [])).catch(() => {}), 30 * 60 * 1000);
return () => clearInterval(t);
}, []);
useEffect(() => () => { audioRef.current?.pause(); }, []);
const stopAudio = () => {
if (audioRef.current) { audioRef.current.pause(); audioRef.current.ontimeupdate = null; audioRef.current.onended = null; }
window._crmAudio = null;
setPlayingId(null); setPlayingCall(null); setProgress(0); setCurrentTime(0); setDuration(0);
};
const handleToggle = (call) => {
if (!call.recording) return;
if (playingId === call.uniqueid) { audioRef.current?.pause(); setPlayingId(null); setPlayingCall(null); setProgress(0); setCurrentTime(0); return; }
stopAudio();
const audio = new Audio(call.recording);
audio.playbackRate = playbackRate;
audio.onloadedmetadata = () => setDuration(audio.duration || 0);
audio.ontimeupdate = () => { if (audio.duration) { setProgress(Math.round(audio.currentTime / audio.duration * 100)); setCurrentTime(audio.currentTime); } };
audio.onended = () => { setPlayingId(null); setPlayingCall(null); setProgress(0); setCurrentTime(0); };
audioRef.current = audio;
window._crmAudio = audio;
audio.play().catch(() => { setPlayingId(null); setPlayingCall(null); });
setPlayingId(call.uniqueid); setPlayingCall(call); setProgress(0); setCurrentTime(0); setDuration(0);
};
const handleRateChange = (rate) => { setPlaybackRate(rate); if (audioRef.current) audioRef.current.playbackRate = rate; };
const managers = [...new Set(calls.map(c => c.employee_fio).filter(Boolean))].sort();
const filtered = calls.filter(c => {
if (query && !`${c.caller} ${c.dst} ${c.employee_fio} ${c.connected_with}`.toLowerCase().includes(query.toLowerCase())) return false;
if (managerFilter && c.employee_fio !== managerFilter) return false;
if (typeFilter === 'incoming' && !isIncoming(c)) return false;
if (typeFilter === 'outgoing' && isIncoming(c)) return false;
if (typeFilter === 'missed' && !isMissed(c)) return false;
return true;
});
// Group by date
const groups = filtered.reduce((acc, c) => {
const g = callDateGroup(c.calldate);
(acc[g] = acc[g] || []).push(c);
return acc;
}, {});
const playerProps = { call: playingCall, playing: !!playingId, progress, currentTime, duration, playbackRate, onToggle: () => handleToggle(playingCall), onStop: stopAudio, onRateChange: handleRateChange, onSeek: () => {} };
const refreshBtnEl = (
);
if (loading) return (
Завантаження дзвінків…
);
if (error) return (
Помилка: {error}
);
// ── Mobile ─────────────────────────────────────────────────────
if (isMobile) {
return (
<>
setQuery(e.target.value)} placeholder="Пошук за номером, менеджером…" style={{ width: '100%', height: 32, boxSizing: 'border-box', padding: '0 12px 0 34px', background: 'var(--bg-panel)', color: 'var(--fg-primary)', border: '1px solid var(--border-default)', borderRadius: 6, fontSize: 12, outline: 'none', fontFamily: 'inherit' }}/>
{refreshBtnEl}
{filtered.length === 0 &&
Дзвінків не знайдено
}
{Object.entries(groups).map(([date, items]) => (
{date} · {items.length}
{items.map(c => {
const isPlaying = playingId === c.uniqueid;
const color = getDispColor(c);
return (
{fmtPhone(customerPhone(c))}
{c.employee_fio || '—'}
{c.billsec ? fmtSec(c.billsec) : '—'}
{c.recording && (
)}
);
})}
))}
{/* Toolbar */}
setQuery(e.target.value)} placeholder="Клієнт, номер, менеджер…" style={{ width: '100%', height: 30, boxSizing: 'border-box', padding: '0 12px 0 30px', background: 'var(--bg-raised)', color: 'var(--fg-primary)', border: '1px solid var(--border-default)', borderRadius: 6, fontSize: 12, outline: 'none', fontFamily: 'inherit' }}/>
{/* Manager filter */}
{dropMgr && (<>
setDropMgr(false)} style={{ position: 'fixed', inset: 0, zIndex: 9 }}/>
{dropItem('Усі менеджери', !managerFilter, () => { setManagerFilter(null); setDropMgr(false); })}
{managers.map(m => dropItem(m, managerFilter === m, () => { setManagerFilter(m); setDropMgr(false); }))}
)}
{refreshBtnEl}
{/* Column headers (sticky) */}
ТелефонКлієнтРезультатЗаписТрив.МенеджерЧас
{/* Rows grouped by date */}
{filtered.length === 0 && (
Дзвінків не знайдено
)}
{Object.entries(groups).map(([date, items]) => (
{date}
· {items.length}
{items.map(c => {
const isPlaying = playingId === c.uniqueid;
const hasRec = !!c.recording;
return (
{/* Телефон */}
{fmtPhone(customerPhone(c))}
{/* Клієнт */}
{/* Результат */}
{/* Запис з waveform */}
{ if (!hasRec) return; e.stopPropagation(); handleToggle(c); }} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
{hasRec && (
)}
{ if (!isPlaying) handleToggle(c); if (audioRef.current?.duration) audioRef.current.currentTime = p / 100 * audioRef.current.duration; } : null}/>
{/* Тривалість */}
{(c.billsec || 0) === 0 ? '—' : fmtSec(c.billsec)}
{/* Менеджер */}
{c.employee_fio ? (
<>
{c.employee_fio}
) : (
—
)}
);
})}
))}
);
}
window.Calls = Calls;