/* eslint-disable */ // RScan Client Portal — App v3 // React + Babel-standalone, single-file mobile UI. Implements the design // handoff (rc-client-portal) wired to the real Workers API. The chrome // (login + change-pw) is rebuilt here so the whole experience lives inside // one React tree. const { useState, useEffect, useRef, useCallback, useMemo } = React; // ───────────────────────── Design tokens ───────────────────────── const TOKENS = { brand: '#0B66D6', brandSoft: '#E8F0FB', brandInk: '#063975', ink: '#0E1726', body: '#1F2A3A', muted: '#5B6878', mutedSoft: '#8C97A6', hairline: '#E5E8EE', hairlineSoft: '#EFF1F5', surface: '#FFFFFF', bg: '#F5F6F8', bgDeep: '#EEF0F4', success: '#1B9C6B', successSoft: '#E1F4EB', warn: '#C77B17', warnSoft: '#FBEFD9', danger: '#D14343', dangerSoft: '#FBE4E4', fontMono: '"SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace', }; // ───────────────────────── Doc-type catalog ───────────────────────── // Design has 4 types. Backend now accepts all 4 (plus legacy bank_statement // kept for old records — normalized to bankbook on display). const DOC_TYPES = { receipt: { key: 'receipt', labels: { ja: '領収書', zh: '收据', en: 'Receipt' }, accent: '#0B66D6', bg: '#E8F0FB' }, bankbook: { key: 'bankbook', labels: { ja: '通帳', zh: '存折', en: 'Bankbook' }, accent: '#1B9C6B', bg: '#E1F4EB' }, invoice: { key: 'invoice', labels: { ja: '請求書', zh: '发票', en: 'Invoice' }, accent: '#7A4ED6', bg: '#EEE7FB' }, card: { key: 'card', labels: { ja: 'カード', zh: '信用卡账单', en: 'Card statement' }, accent: '#C77B17', bg: '#FBEFD9' }, }; // Normalize legacy backend values onto the design's 4 keys. function normalizeCategory(cat) { if (cat === 'bank_statement') return 'bankbook'; if (DOC_TYPES[cat]) return cat; return 'receipt'; } // ───────────────────────── i18n strings ───────────────────────── const STR = { ja: { upload: 'アップロード', history: '履歴', settings: '設定', done: '完了', camera: '写真またはビデオを撮る', gallery: 'フォトライブラリ', files: 'ファイルを選択', selectType: '書類の種類', supports: 'JPEG / PNG / PDF / HEIC', synced: '同期済み', uploading: 'アップロード中', failed: '失敗', queued: '待機中', retry: '再試行', rejected: '却下済み', approved: '受理済み', rejectReason: '却下理由', rejectedAt: '却下日時', resubmit: '再アップロード', resubmitHint: '修正した書類を選択してください。', today: '今日', yesterday: '昨日', thisMonth: '今月', files_n: '件', recent: '最近', total: '合計', account: 'アカウント', changePassword: 'パスワード変更', logout: 'ログアウト', language: '言語', search: '検索', cancel: 'キャンセル', uploadTo: 'アップロード先', login: 'ログイン', email: 'ユーザーID', password: 'パスワード', loginErr: 'ユーザーIDまたはパスワードが正しくありません', pwCurrent: '現在のパスワード', pwNew: '新しいパスワード', pwConfirm: '確認', pwHint: '8文字以上、英数字混在を推奨', pwMismatch: 'パスワードが一致しません', pwShort: '8文字以上で入力してください', update: '更新', loggedOut: 'ログアウトしました', noDocs: '該当する書類がありません', cpaNote: '書類は会計士から自動で配信されます。', annual: '年次決算書', yearend: '年末調整', annualSub: '担当会計士から送付', yearendSub: '源泉徴収票・申告書類', inProgress: '進行中', readyState: '受領可能', closedState: '確定済み', select: '選択', delete: '削除', uploadHistory: 'アップロード履歴', histAllDocs: '過去のすべての書類', annualHint: '会計年度ごとの決算書', yearendBadge: '受領済', emptyTitle: 'まだアップロードはありません', emptyHint: '右の領域をタップして、書類を選んでください。', receivedYou: '保存しました', cameraOnPhone: 'モバイルで開いてください', }, zh: { upload: '上传', history: '历史', settings: '设置', done: '完成', camera: '拍照', gallery: '照片图库', files: '选取文件', selectType: '文档类型', supports: '支持 JPEG / PNG / PDF / HEIC', synced: '已同步', uploading: '上传中', failed: '失败', queued: '等待中', retry: '重试', rejected: '已拒绝', approved: '已受理', rejectReason: '拒绝原因', rejectedAt: '拒绝时间', resubmit: '重新上传', resubmitHint: '请选择修正后的文件。', today: '今天', yesterday: '昨天', thisMonth: '本月', files_n: '件', recent: '最近', total: '合计', account: '账号', changePassword: '修改密码', logout: '退出登录', language: '语言', search: '搜索', cancel: '取消', uploadTo: '上传到', login: '登录', email: '用户名', password: '密码', loginErr: '用户名或密码错误', pwCurrent: '当前密码', pwNew: '新密码', pwConfirm: '确认', pwHint: '建议至少 8 位，含字母和数字', pwMismatch: '密码不一致', pwShort: '密码至少 8 个字符', update: '更新', loggedOut: '已退出登录', noDocs: '没有匹配的文件', cpaNote: '文档由会计师自动推送。', annual: '年报', yearend: '年末调整', annualSub: '由会计师交付', yearendSub: '扣缴凭单与申报材料', inProgress: '进行中', readyState: '可领取', closedState: '已确定', select: '选择', delete: '删除', uploadHistory: '上传记录', histAllDocs: '查看所有已上传文件', annualHint: '按年度查看决算', yearendBadge: '已收到', emptyTitle: '暂无上传', emptyHint: '点按右侧卡片选择文件开始上传。', receivedYou: '已保存', cameraOnPhone: '请在手机上打开', }, en: { upload: 'Upload', history: 'History', settings: 'Settings', done: 'Done', camera: 'Take Photo', gallery: 'Photo Library', files: 'Choose Files', selectType: 'Document type', supports: 'JPEG / PNG / PDF / HEIC', synced: 'Synced', uploading: 'Uploading', failed: 'Failed', queued: 'Queued', retry: 'Retry', rejected: 'Rejected', approved: 'Accepted', rejectReason: 'Reject reason', rejectedAt: 'Rejected at', resubmit: 'Resubmit', resubmitHint: 'Choose the corrected document.', today: 'Today', yesterday: 'Yesterday', thisMonth: 'This month', files_n: 'files', recent: 'Recent', total: 'Total', account: 'Account', changePassword: 'Change password', logout: 'Sign out', language: 'Language', search: 'Search', cancel: 'Cancel', uploadTo: 'Upload to', login: 'Sign In', email: 'User ID', password: 'Password', loginErr: 'Invalid user ID or password', pwCurrent: 'Current', pwNew: 'New', pwConfirm: 'Confirm', pwHint: 'At least 8 chars, mix letters & numbers', pwMismatch: 'Passwords do not match', pwShort: 'Must be at least 8 characters', update: 'Update', loggedOut: 'Signed out', noDocs: 'No documents match', cpaNote: 'Documents are pushed by your CPA.', annual: 'Annual report', yearend: 'Year-end adjustment', annualSub: 'Delivered by your CPA', yearendSub: 'Withholding & filing docs', inProgress: 'In progress', readyState: 'Ready', closedState: 'Closed', select: 'Select', delete: 'Delete', uploadHistory: 'Upload history', histAllDocs: 'All uploaded documents', annualHint: 'Statements by fiscal year', yearendBadge: 'Ready', emptyTitle: 'Nothing uploaded yet', emptyHint: 'Tap a card on the right to add a document.', receivedYou: 'Saved', cameraOnPhone: 'Open this on your phone', }, }; // ───────────────────────── Icons (inline SVG) ───────────────────────── const I = { camera: (s=22)=> , gallery:(s=22)=> , files: (s=22)=> , check: (s=14)=> , chevron:(s=14)=> , search: (s=18)=> , close: (s=18)=> , plus: (s=18)=> , cloud: (s=16)=> , spinner:(s=16)=> , warn: (s=16)=> , back: (s=22)=> , doc: (s=22)=> , bankbook:(s=22)=> , cardIcon:(s=22)=> , logo: (s=28)=> , }; function docTypeIcon(type, size=22) { if (type === 'bankbook') return I.bankbook(size); if (type === 'card') return I.cardIcon(size); return I.doc(size); } // ───────────────────────── Helpers ───────────────────────── function formatDateHeader(iso, lang) { const d = new Date(iso); const y = d.getFullYear(), m = d.getMonth()+1, day = d.getDate(); if (lang === 'en') { const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; return `${months[m-1]} ${day}, ${y}`; } return `${y}年${m}月${day}日`; } function groupByDate(items) { const map = new Map(); for (const it of items) { if (!map.has(it.date)) map.set(it.date, []); map.get(it.date).push(it); } return Array.from(map.entries()).sort((a, b) => b[0].localeCompare(a[0])); } function statusStyle(status) { switch (status) { case 'synced': return { bg: TOKENS.successSoft, fg: TOKENS.success }; case 'approved': return { bg: TOKENS.successSoft, fg: TOKENS.success }; case 'rejected': return { bg: TOKENS.dangerSoft, fg: TOKENS.danger }; case 'uploading': return { bg: TOKENS.brandSoft, fg: TOKENS.brand }; case 'queued': return { bg: TOKENS.hairlineSoft, fg: TOKENS.muted }; case 'failed': return { bg: TOKENS.dangerSoft, fg: TOKENS.danger }; default: return { bg: TOKENS.hairlineSoft, fg: TOKENS.muted }; } } function formatFileSize(bytes) { if (!bytes) return '—'; if (bytes < 1024) return bytes + ' B'; if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + ' KB'; return (bytes / 1024 / 1024).toFixed(1) + ' MB'; } function effectiveStatus(row) { if (row.review_status === 'rejected') return 'rejected'; if (row.review_status === 'approved') return 'approved'; return row.status || 'queued'; } function statusLabel(status, t) { if (status === 'rejected') return t.rejected; if (status === 'approved') return t.approved; if (status === 'synced') return t.synced; if (status === 'failed') return t.failed; if (status === 'uploading') return t.uploading; return t.queued; } // Coerce an API history row into the design's item shape. function adaptHistoryItem(row) { const uploadedAt = new Date(row.uploaded_at); const status = effectiveStatus(row); return { id: row.id, name: row.file_name, type: normalizeCategory(row.category), size: formatFileSize(row.file_size), date: row.uploaded_at.slice(0, 10), time: uploadedAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), status, reviewStatus: row.review_status || null, rejectReason: row.reject_reason || null, rejectedAt: row.rejected_at || null, replacesInboxItemId: row.replaces_inbox_item_id || null, raw: row, }; } // Pick the camera/gallery/files accept attribute for a source. function inputAttrsForSource(src) { if (src === 'camera') return { accept: 'image/*', capture: 'environment' }; if (src === 'gallery') return { accept: 'image/*', multiple: true }; return { accept: 'image/*,application/pdf,.pdf,.heic,.heif', multiple: true }; } // ───────────────────────── Toast ───────────────────────── function Toast({ msg, type='success' }) { if (!msg) return null; const colors = type === 'success' ? { bg: TOKENS.ink, fg: '#fff', icon: TOKENS.success } : { bg: TOKENS.danger, fg: '#fff', icon: '#fff' }; return (
{type === 'success' ? I.check(14) : I.warn(14)} {msg}
); } // ───────────────────────── Login screen ───────────────────────── function LoginScreen({ lang, onSuccess }) { const t = STR[lang]; const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [err, setErr] = useState(''); const [busy, setBusy] = useState(false); async function submit(e) { e.preventDefault(); setErr(''); setBusy(true); try { const data = await api.login(email.trim(), password); api.setToken(data.token); localStorage.setItem('token', data.token); localStorage.setItem('user', JSON.stringify(data.user)); onSuccess(data.user); } catch (e) { setErr(t.loginErr); } finally { setBusy(false); } } return (
{I.logo(26)}
RScan Portal
{t.login}
setEmail(e.target.value)} placeholder={t.email} autoComplete="email" required style={{ padding:'14px 14px', borderRadius:12, border:'1px solid '+TOKENS.hairline, background:TOKENS.bg, fontSize:15, color:TOKENS.ink, outline:'none', }} /> setPassword(e.target.value)} placeholder={t.password} autoComplete="current-password" required style={{ padding:'14px 14px', borderRadius:12, border:'1px solid '+TOKENS.hairline, background:TOKENS.bg, fontSize:15, color:TOKENS.ink, outline:'none', }} />
{err &&
{I.warn(14)} {err}
}
); } // ───────────────────────── First-login change-pw screen ───────────────────────── function ChangePwScreen({ lang, onSuccess, onCancel }) { const t = STR[lang]; const [cur, setCur] = useState(''); const [nw, setNw] = useState(''); const [cnf, setCnf] = useState(''); const [err, setErr] = useState(''); const [busy, setBusy] = useState(false); async function submit(e) { e.preventDefault(); setErr(''); if (nw.length < 8) { setErr(t.pwShort); return; } if (nw !== cnf) { setErr(t.pwMismatch); return; } setBusy(true); try { await api.changePassword(cur, nw); const user = JSON.parse(localStorage.getItem('user') || '{}'); user.must_change_pw = false; localStorage.setItem('user', JSON.stringify(user)); onSuccess(user); } catch (e) { setErr(e.message || 'error'); } finally { setBusy(false); } } return (
RScan
{t.changePassword}
{[ { v: cur, set: setCur, label: t.pwCurrent, ac: 'current-password' }, { v: nw, set: setNw, label: t.pwNew, ac: 'new-password' }, { v: cnf, set: setCnf, label: t.pwConfirm, ac: 'new-password' }, ].map((f, i) => (
{f.label} f.set(e.target.value)} autoComplete={f.ac} required placeholder="••••••••" style={{marginTop:4, fontSize:15, color:TOKENS.ink, border:'none', outline:'none', background:'transparent', padding:0, fontFamily:TOKENS.fontMono}} />
))}
{I.warn(14)} {t.pwHint}
{err &&
{err}
} {onCancel && ( )}
); } // ───────────────────────── Upload home (the primary screen) ───────────────────────── function UploadHome({ lang, t, user, history, monthCounts, totalMonth, queue, onOpenMenu, onPickType, onRetry, onClearDone, onOpenDetail, onGoHistory }) { const types = ['receipt', 'bankbook', 'invoice', 'card']; const recent = history.slice(0, 4); const stats = types.map(type => ({ type, n: history.filter(it => it.type === type).length })); const total = stats.reduce((s, x) => s + x.n, 0); const now = new Date(); const periodLabel = lang === 'ja' ? `${now.getFullYear()}年${now.getMonth()+1}月` : lang === 'zh' ? `${now.getFullYear()}年${now.getMonth()+1}月` : `${now.toLocaleString('en', { month: 'short' })} ${now.getFullYear()}`; const companyLabel = (user?.company_id || 'rscan').toLowerCase(); return (
{/* Header */}
{companyLabel} · {periodLabel}
{t.upload}
{/* Section label */}
{t.selectType} {t.supports}
{/* 2×2 doc-type grid */}
{types.map(k => { const dt = DOC_TYPES[k]; return ( ); })}
{/* Upload queue */} {queue.length > 0 && } {/* Month stats */}
{t.thisMonth} {totalMonth} {t.files_n}
{types.map(k => monthCounts[k] > 0 && (
))}
{types.map(k => { const dt = DOC_TYPES[k]; return (
{monthCounts[k] || 0}
{dt.labels[lang]}
); })}
{/* Recent */}
{t.recent}
{recent.length === 0 && (
{t.emptyTitle}
)} {recent.map((it, i) => { const dt = DOC_TYPES[it.type]; return ( ); })}
); } function UploadQueue({ queue, t, lang, onRetry, onClearDone }) { const active = queue.filter(q => q.status !== 'synced' && q.status !== 'failed').length; const done = queue.filter(q => q.status === 'synced').length; return (
{active ? I.spinner(12) : I.cloud(12)} {active ? `${t.uploading} · ${active}` : `${t.synced} · ${done}`}
{done > 0 && active === 0 && ( )}
{queue.map(q => { const dt = DOC_TYPES[q.type]; const sty = statusStyle(q.status); return (
{docTypeIcon(q.type, 14)}
{q.name}
{q.status === 'uploading' ? (
) : (
{q.status === 'synced' ? t.synced : q.status === 'failed' ? (q.error || t.failed) : t.queued}
)}
{q.status === 'failed' ? ( ) : q.status === 'uploading' ? ( {q.progress}% ) : q.status === 'synced' ? ( {I.check(14)} ) : ( {I.spinner(12)} )}
); })}
); } function StatusPill({ item, t }) { const sty = statusStyle(item.status); const rejected = item.status === 'rejected'; return ( {rejected ? t.rejected : I.check(14)} ); } // ───────────────────────── Source picker sheet ───────────────────────── function SourceSheet({ t, lang, type, onClose, onPick }) { const dt = type ? DOC_TYPES[type] : null; const opts = [ { k:'camera', label:t.camera, icon:I.camera(22) }, { k:'gallery', label:t.gallery, icon:I.gallery(22) }, { k:'files', label:t.files, icon:I.files(22) }, ]; return (
{dt && (
{t.uploadTo}
{docTypeIcon(type, 16)} {dt.labels[lang]}
)} {opts.map((o, i) => ( ))}
); } // ───────────────────────── Menu sheet (kebab) ───────────────────────── function MenuSheet({ lang, t, user, onClose, onNavigate, onSetLang }) { const items = [ { k:'history', icon:, label:t.uploadHistory, hint:t.histAllDocs, }, { k:'annual', icon:, label:t.annual, hint:t.annualHint, }, { k:'yearend', icon:, label:t.yearend, hint:lang === 'ja' ? '令和7年度' : lang === 'zh' ? '2025 年度' : 'FY 2025', badge:t.yearendBadge, }, { k:'changepw', icon:, label:t.changePassword, }, { k:'logout', danger:true, icon:, label:t.logout, }, ]; const userInitial = (user?.name || user?.email || 'U').charAt(0).toUpperCase(); const userEmail = user?.email || ''; const userCompany = user?.company_id || ''; return (
{/* User card */}
{userInitial}
{userEmail}
{userCompany}
{/* Nav list */}
{items.map((it, i) => ( ))}
{/* Language picker */}
{t.language}
{[{k:'ja', label:'日本語'},{k:'zh', label:'中文'},{k:'en', label:'EN'}].map(o => { const active = lang === o.k; return ( ); })}
v 3.0.0
); } // ───────────────────────── Change-password bottom sheet ───────────────────────── function ChangePwSheet({ lang, t, onClose, onDone }) { const [cur, setCur] = useState(''); const [nw, setNw] = useState(''); const [cnf, setCnf] = useState(''); const [err, setErr] = useState(''); const [busy, setBusy] = useState(false); async function submit(e) { e.preventDefault(); setErr(''); if (nw.length < 8) { setErr(t.pwShort); return; } if (nw !== cnf) { setErr(t.pwMismatch); return; } setBusy(true); try { await api.changePassword(cur, nw); onDone(); } catch (e) { setErr(e.message || 'error'); } finally { setBusy(false); } } return (
{t.changePassword}
{[ { v: cur, set: setCur, label: t.pwCurrent, ac:'current-password' }, { v: nw, set: setNw, label: t.pwNew, ac:'new-password' }, { v: cnf, set: setCnf, label: t.pwConfirm, ac:'new-password' }, ].map((f, i) => (
{f.label} f.set(e.target.value)} autoComplete={f.ac} required placeholder="••••••••" style={{marginTop:4, fontSize:15, color:TOKENS.ink, border:'none', outline:'none', background:'transparent', padding:0, fontFamily:TOKENS.fontMono}} />
))}
{I.warn(14)} {t.pwHint}
{err &&
{err}
}
); } // ───────────────────────── History screen ───────────────────────── function HistoryScreen({ lang, t, history, onBack, onOpenDetail }) { const [filter, setFilter] = useState('all'); const [query, setQuery] = useState(''); const filterPills = [ { key:'all', label: lang === 'ja' ? 'すべて' : lang === 'zh' ? '全部' : 'All' }, ...Object.values(DOC_TYPES).map(d => ({ key:d.key, label:d.labels[lang] })), ]; const items = history.filter(i => { if (filter !== 'all' && i.type !== filter) return false; if (query && !i.name.toLowerCase().includes(query.toLowerCase())) return false; return true; }); const groups = groupByDate(items); return (
{history.length} {t.files_n}
{t.history}
{I.search(16)} setQuery(e.target.value)} placeholder={t.search + '…'} style={{flex:1, fontSize:14, color:TOKENS.ink, border:'none', outline:'none', background:'transparent', minWidth:0}}/> {query && }
{filterPills.map(p => { const active = filter === p.key; const dt = DOC_TYPES[p.key]; const accent = dt ? dt.accent : TOKENS.brand; const count = p.key === 'all' ? history.length : history.filter(i => i.type === p.key).length; return ( ); })}
{groups.length === 0 && (
{t.noDocs}
)} {groups.map(([date, list]) => (
{formatDateHeader(date, lang)} {list.length}
{list.map((it, i) => { const dt = DOC_TYPES[it.type]; return ( ); })}
))}
); } // ───────────────────────── Detail sheet ───────────────────────── function DetailSheet({ item, lang, t, onClose, onResubmit }) { if (!item) return null; const dt = DOC_TYPES[item.type]; const status = statusLabel(item.status, t); const statusColors = statusStyle(item.status); const rejectedAt = item.rejectedAt ? new Date(item.rejectedAt) : null; return (
{dt.labels[lang]}
{item.name}
{dt.labels[lang]}
{docTypeIcon(item.type, 60)}
{[ { k: lang === 'ja' ? '日付' : lang === 'zh' ? '日期' : 'Date', v: formatDateHeader(item.date, lang) + ' ' + item.time }, { k: lang === 'ja' ? 'サイズ' : lang === 'zh' ? '大小' : 'Size', v: item.size }, { k: lang === 'ja' ? '状態' : lang === 'zh' ? '状态' : 'Status', v: status, color: statusColors.fg }, ...(rejectedAt ? [{ k: t.rejectedAt, v: rejectedAt.toLocaleString() }] : []), ].map((row, i) => (
{row.k} {row.v}
))}
{item.status === 'rejected' && ( <>
{I.warn(15)} {t.rejectReason}
{item.rejectReason || '—'}
{t.resubmitHint}
)}
); } // ───────────────────────── Docs by year (annual / yearend) ───────────────────────── function DocsByYearScreen({ lang, t, kind, onBack }) { // Backend doesn't (yet) push CPA-delivered docs to clients via this portal, // so render the screen layout with an empty-state message. When the API is // added, swap in a real fetch + the design's grouped list. const title = kind === 'annual' ? t.annual : t.yearend; const subtitle = kind === 'annual' ? t.annualSub : t.yearendSub; return (
{subtitle}
{title}
{I.cloud(28)}
{lang === 'ja' ? '配信予定' : lang === 'zh' ? '待发布' : 'Coming soon'}
{t.cpaNote}
); } // ───────────────────────── Main app shell ───────────────────────── function MainApp({ user: initialUser, lang, setLang, onLogout }) { const [user, setUser] = useState(initialUser); const t = STR[lang]; // Pushed screens (overlays on top of upload root). const [screen, setScreen] = useState(null); // null | 'history' | 'annual' | 'yearend' // Sheets layered on top of everything. const [sheet, setSheet] = useState(null); // null | 'menu' | 'source' | 'changepw' const [pendingType, setPendingType] = useState(null); const [pendingReplacement, setPendingReplacement] = useState(null); const [detail, setDetail] = useState(null); const [toast, setToast] = useState(null); const [history, setHistory] = useState([]); const [queue, setQueue] = useState([]); const fileInputRef = useRef(null); const fileInputAttrs = useRef({ accept: '', capture: '', multiple: false }); function showToast(msg, type='success') { setToast({ msg, type, key: Date.now() }); setTimeout(() => setToast(null), 2400); } const setLangPersist = setLang; // persistence happens in App via effect // Load history once on mount; refresh when an upload completes. const reloadHistory = useCallback(async () => { try { const data = await api.history(50, 0, ''); const adapted = (data.items || []).map(adaptHistoryItem); setHistory(adapted); } catch (e) { // Silent failure on initial load; the user can retry by navigating. } }, []); useEffect(() => { reloadHistory(); }, [reloadHistory]); // Per-type counts for the current month, used for the home cards + stats. const monthCounts = useMemo(() => { const now = new Date(); const ym = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`; const counts = { receipt: 0, bankbook: 0, invoice: 0, card: 0 }; for (const it of history) { if (it.date.startsWith(ym) && counts[it.type] !== undefined) counts[it.type]++; } return counts; }, [history]); const totalMonth = monthCounts.receipt + monthCounts.bankbook + monthCounts.invoice + monthCounts.card; // ── Upload flow: source picker triggers a hidden ; the chosen // files are pushed into the upload queue and POST'd serially. const onPickType = (type) => { setPendingType(type); setPendingReplacement(null); setSheet('source'); }; const onPickSource = (src) => { const type = pendingType; const replacement = pendingReplacement; setSheet(null); if (!type) return; // Stage the input attributes then trigger click on a fresh input. fileInputAttrs.current = { ...inputAttrsForSource(src), type, replacesInboxItemId: replacement?.id || '' }; setTimeout(() => fileInputRef.current && fileInputRef.current.click(), 50); }; const onFilesChosen = async (e) => { const files = Array.from(e.target.files || []); const type = fileInputAttrs.current.type || 'receipt'; const replacesInboxItemId = fileInputAttrs.current.replacesInboxItemId || ''; e.target.value = ''; // allow re-pick of the same file later setPendingType(null); setPendingReplacement(null); for (const file of files) { await uploadOne(file, type, replacesInboxItemId); } }; async function uploadOne(file, type, replacesInboxItemId = '') { const id = 'q' + Date.now() + Math.random().toString(36).slice(2, 5); const item = { id, name: file.name, type, status: 'uploading', progress: 0, file, replacesInboxItemId }; setQueue(q => [...q, item]); // Fake-progress tick while the real upload happens. The server response // either flips the queue item to synced or failed. const tickId = setInterval(() => { setQueue(q => q.map(x => x.id === id && x.status === 'uploading' ? { ...x, progress: Math.min(95, x.progress + Math.round(6 + Math.random() * 9)) } : x)); }, 380); try { const resp = await api.upload(file, type, replacesInboxItemId); setQueue(q => q.map(x => x.id === id ? { ...x, status: 'synced', progress: 100 } : x)); showToast(t.synced + ' · ' + file.name); reloadHistory(); } catch (err) { setQueue(q => q.map(x => x.id === id ? { ...x, status: 'failed', error: err.message } : x)); showToast(err.message || t.failed, 'error'); } finally { clearInterval(tickId); } } const onRetry = async (id) => { const target = queue.find(x => x.id === id); if (!target || !target.file) { // We didn't keep the File reference; remove and let user re-pick. setQueue(q => q.filter(x => x.id !== id)); showToast(t.failed + ' · retry by re-uploading', 'error'); return; } setQueue(q => q.map(x => x.id === id ? { ...x, status: 'uploading', progress: 0 } : x)); try { await api.upload(target.file, target.type, target.replacesInboxItemId || ''); setQueue(q => q.map(x => x.id === id ? { ...x, status: 'synced', progress: 100 } : x)); reloadHistory(); } catch (err) { setQueue(q => q.map(x => x.id === id ? { ...x, status: 'failed', error: err.message } : x)); } }; const onClearDone = () => setQueue(q => q.filter(x => x.status !== 'synced')); const onResubmit = (item) => { setDetail(null); setPendingType(item.type); setPendingReplacement(item); setSheet('source'); }; const onMenuNavigate = (k) => { setSheet(null); if (k === 'logout') { setTimeout(() => { localStorage.removeItem('token'); localStorage.removeItem('user'); api.setToken(null); onLogout(); }, 100); return; } if (k === 'changepw') { setTimeout(() => setSheet('changepw'), 200); return; } setScreen(k); }; return (
{/* Upload root */} setSheet('menu')} onPickType={onPickType} onRetry={onRetry} onClearDone={onClearDone} onOpenDetail={setDetail} onGoHistory={() => setScreen('history')} /> {/* Hidden file input. Re-rendered each pick via key to apply fresh attrs. */} {/* Pushed screens */} {screen === 'history' && ( setScreen(null)} onOpenDetail={setDetail}/> )} {(screen === 'annual' || screen === 'yearend') && ( setScreen(null)}/> )} {/* Sheets */} {sheet === 'menu' && ( setSheet(null)} onNavigate={onMenuNavigate} onSetLang={setLangPersist}/> )} {sheet === 'source' && ( { setSheet(null); setPendingType(null); }} onPick={onPickSource}/> )} {sheet === 'changepw' && ( setSheet(null)} onDone={() => { setSheet(null); showToast(t.update + ' ✓'); }} /> )} {detail && setDetail(null)} onResubmit={onResubmit}/>}
); } // ───────────────────────── Root app: auth gate ───────────────────────── function App() { const [lang, setLang] = useState(() => localStorage.getItem('rscan_lang') || ( (navigator.language || '').toLowerCase().startsWith('zh') ? 'zh' : (navigator.language || '').toLowerCase().startsWith('en') ? 'en' : 'ja' )); const [phase, setPhase] = useState('boot'); // 'boot' | 'login' | 'changepw' | 'app' const [user, setUser] = useState(null); // Persist any lang change to localStorage so subsequent renders/screens // pick it up. useEffect(() => { localStorage.setItem('rscan_lang', lang); document.documentElement.lang = lang; }, [lang]); useEffect(() => { const token = localStorage.getItem('token'); const userStr = localStorage.getItem('user'); if (!token || !userStr) { setPhase('login'); return; } try { const u = JSON.parse(userStr); api.setToken(token); setUser(u); setPhase(u.must_change_pw ? 'changepw' : 'app'); } catch { setPhase('login'); } }, []); if (phase === 'boot') return
{I.spinner(20)}
; if (phase === 'login') return { setUser(u); setPhase(u.must_change_pw ? 'changepw' : 'app'); }}/>; if (phase === 'changepw') return { setUser(u); setPhase('app'); }}/>; return { setUser(null); setPhase('login'); }}/>; } ReactDOM.createRoot(document.getElementById('root')).render();