// web-screens.jsx — Responsive web + mobile screens, flow: kode karyawan → sukses + zoom link
// ─────────────────────────────────────────────────────────
// Shared: Top bar (responsif)
// ─────────────────────────────────────────────────────────
function TopBar({ mode, onSwitchMode }) {
return (
Sistem Absensi
Meeting Zoom
{['peserta', 'admin'].map(m => (
))}
);
}
// ─────────────────────────────────────────────────────────
// Meeting hero — used on input + success screens
// ─────────────────────────────────────────────────────────
function MeetingHero({ meeting, compact = false }) {
return (
Zoom · {meeting.sessionLabel}
{meeting.title}
{meeting.date}
{meeting.time}
{meeting.host}
);
}
// ─────────────────────────────────────────────────────────
// 1. Input screen — masukkan kode karyawan
// ─────────────────────────────────────────────────────────
// ▼ DIUBAH: tambah prop `sessionId` untuk kirim ke Supabase
function InputScreen({ meeting, sessionId, onSuccess }) {
const [code, setCode] = React.useState('');
const [error, setError] = React.useState(null);
const [loading, setLoading] = React.useState(false);
const [suggest, setSuggest] = React.useState(false);
const inputRef = React.useRef(null);
// Format as user types: dd.dd.dd.dddd
const formatCode = (raw) => {
const digits = raw.replace(/\D/g, '').slice(0, 10);
const parts = [];
if (digits.length > 0) parts.push(digits.slice(0, 2));
if (digits.length > 2) parts.push(digits.slice(2, 4));
if (digits.length > 4) parts.push(digits.slice(4, 6));
if (digits.length > 6) parts.push(digits.slice(6, 10));
return parts.join('.');
};
const onChange = (e) => {
const v = formatCode(e.target.value);
setCode(v);
setError(null);
};
const suggestions = React.useMemo(() => {
if (!code || code.length < 2) return [];
return window.PARTICIPANTS.filter(p => p.empId.startsWith(code)).slice(0, 4);
}, [code]);
// DIUBAH: async — cek kode → simpan ke Supabase → baru pindah screen
const submit = async () => {
setLoading(true);
setError(null);
const user = window.PARTICIPANTS.find(p => p.empId === code);
if (!user) {
setError('Kode karyawan tidak ditemukan. Periksa kembali atau hubungi admin.');
setLoading(false);
return;
}
const now = new Date();
const joinTime = `${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}`;
try {
if (sessionId) await window.DB_checkIn(sessionId, user, joinTime);
onSuccess({ user, joinTime });
} catch (e) {
console.error('Check-in error:', e);
setError('Gagal menyimpan absensi. Periksa koneksi dan coba lagi.');
setLoading(false);
}
};
React.useEffect(() => {
if (inputRef.current) inputRef.current.focus();
}, []);
return (
