);
}
function TweakRow({ label, children }) {
return (
{children}
);
}
function SegBtn({ active, onClick, children }) {
return (
);
}
// --- FX 기준 토글 (월평균 / 일일 환율) --------------------------------
// 헤더 우측 세그먼트 버튼. 전환 시 모든 view의 KRW 금액이 해당 기준으로 재계산됨.
function FxBasisToggle({ value, onChange, lang }) {
const tf = TRANS[lang].fxBasis;
const opts = [['monthly', tf.monthly, tf.tipMonthly], ['daily', tf.daily, tf.tipDaily]];
return (
{tf.label}
{opts.map(([k, label, tip], i) => (
))}
);
}
// fallbackMonths(['2026-05', ...])를 사람이 읽는 문자열로. 하드코딩 없이
// 현재 연도면 "5월", 다른 연도면 "2025년 12월". 여러 달이면 ·로 연결.
function formatFxMonths(months, lang) {
if (!months || !months.length) return '';
const cy = new Date().getFullYear();
const MS_EN = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
const parts = months.map(ym => {
const [y, m] = ym.split('-').map(Number);
if (lang === 'en') return y === cy ? MS_EN[m - 1] : `${MS_EN[m - 1]} ${y}`;
return y === cy ? `${m}월` : `${y}년 ${m}월`;
});
return parts.join(lang === 'en' ? ', ' : '·');
}
// 월평균 기준일 때 일부 행이 일일환율로 대체됐으면 안내 배너 표시.
// 일일 기준에서는 누락이 없으므로 배너 없음.
function FxBasisNotice({ lang, fxBasis, dataVersion }) {
const [stats, setStats] = useState(null);
useEffect(() => {
let cancelled = false;
SALES_DB.fetchAllSalesData()
.then(() => { if (!cancelled) setStats(SALES_DB.getFxBasisStats()); })
.catch(() => { /* 데이터 로드 실패 — 배너 생략 */ });
return () => { cancelled = true; };
}, [fxBasis, dataVersion]);
if (fxBasis !== 'monthly' || !stats || !stats.fallbackRows) return null;
const tf = TRANS[lang].fxBasis;
const monthsStr = formatFxMonths(stats.fallbackMonths, lang);
return (
{tf.notice(monthsStr, stats.fallbackRows)}
);
}
// --- App Shell --------------------------------------------------------
function App() {
const [tweaks, setTweaksState] = useState(loadTweaks);
const [view, setView] = useState(() => loadTweaks().defaultView || 'overview');
const [showTweaks, setShowTweaks] = useState(false);
const [showAdmin, setShowAdmin] = useState(false);
// Bumped on manual data refresh — used as a key to remount views and re-fetch.
const [dataVersion, setDataVersion] = useState(0);
const [refreshing, setRefreshing] = useState(false);
// Track which views have ever been opened, so we keep them mounted (display
// toggle) instead of re-mounting on every tab switch. Cuts perceived
// tab-switch latency to near-zero after the first visit.
const [mountedViews, setMountedViews] = useState(() => new Set([loadTweaks().defaultView || 'overview']));
useEffect(() => {
setMountedViews(prev => prev.has(view) ? prev : new Set([...prev, view]));
}, [view]);
const [session, setSession] = useState(null);
// roster는 표시용 메타데이터(이름/role 라벨). 게이트 아님.
// null = 로스터에 없음 (정상 케이스 — 프로필 default로 동작)
const [roster, setRoster] = useState(null);
// dashAccess가 단일 권한 게이트. 3-state — undefined=체크 전(로딩), []=권한 없음, [...]=권한 있음
const [dashAccess, setDashAccess] = useState(undefined);
const [authLoading, setAuthLoading] = useState(true);
const lang = tweaks.lang;
const t = TRANS[lang];
const perms = SALES_AUTH.permissionsFor(roster);
useEffect(() => { applyTweaks(tweaks); saveTweaksLs(tweaks); }, [tweaks]);
const setTweaks = useCallback(patch => {
setTweaksState(prev => ({ ...prev, ...patch }));
}, []);
// 환율 기준 토글 — db 레이어에 반영하고 모든 view를 재계산(dataVersion bump).
// 첫 실행은 localStorage 복원값을 db에 알려주기만 하고 remount는 생략.
const fxFirstRun = useRef(true);
useEffect(() => {
SALES_DB.setFxBasis(tweaks.fxBasis);
if (fxFirstRun.current) { fxFirstRun.current = false; return; }
setDataVersion(v => v + 1);
}, [tweaks.fxBasis]);
// Auth bootstrap
// 권한 게이트는 dashboard_access 단일 — 0007 RLS 통일에 맞춰 프론트도 동일.
// roster는 표시용(이름/role 라벨)이므로 fetch 실패해도 게이트를 막지 않는다 (Promise.allSettled).
// freeze 대응:
// - getSession / dashAccess는 5초 timeout — hang 시 reject로 unblock
// - visibilitychange 핸들러 — 30초+ hidden 후 visible 시 백그라운드 재bootstrap
// - 동시에 두 bootstrap이 돌지 않도록 bootstrapping 플래그
useEffect(() => {
let cancelled = false;
let unsub = null;
let hiddenAt = null;
let bootstrapping = false;
const AUTH_TIMEOUT_MS = 5000;
const VIS_FREEZE_THRESHOLD_MS = 30 * 1000;
function withTimeout(promise, label) {
return Promise.race([
promise,
new Promise((_, reject) => setTimeout(
() => reject(new Error(label + ' timeout after ' + AUTH_TIMEOUT_MS + 'ms')),
AUTH_TIMEOUT_MS
)),
]);
}
// session + dashAccess(게이트) + roster(메타) 를 다시 가져온다.
// roster는 non-blocking — 실패/누락은 정상 케이스이므로 null로 폴백.
async function fetchAuthBundle(s) {
const [rosterRes, daRes] = await Promise.allSettled([
SALES_DB.getRosterEntry(s.user.email),
withTimeout(SALES_DB.getDashboardAccess(s.user.id), 'dashAccess'),
]);
const roster = rosterRes.status === 'fulfilled' ? rosterRes.value : null;
// dashAccess가 실패하면 [] — "권한 없음" 화면으로 빠짐(무한 로딩 X).
const da = daRes.status === 'fulfilled' ? daRes.value : [];
if (rosterRes.status === 'rejected') console.warn('[auth] roster fetch failed (non-blocking)', rosterRes.reason);
if (daRes.status === 'rejected') console.warn('[auth] dashAccess fetch failed', daRes.reason);
return { roster, da };
}
// bootstrap을 함수로 추출 — 첫 mount + visibility 복구 둘 다 사용.
// 두 번째 호출부터는 setAuthLoading(true) 안 함 — 화면 깜빡임 없이 백그라운드 갱신.
async function bootstrap() {
if (cancelled || bootstrapping) return;
bootstrapping = true;
try {
const s = await withTimeout(SALES_DB.getSession(), 'getSession');
if (cancelled) return;
setSession(s);
if (s?.user) {
const { roster, da } = await fetchAuthBundle(s);
if (cancelled) return;
setRoster(roster);
setDashAccess(da);
} else {
setRoster(null);
setDashAccess(null);
}
} catch (e) {
// freeze hang을 timeout으로 푼 케이스 또는 실제 네트워크 에러.
// 화면을 unblock해서 사용자가 ↻로 재시도할 수 있게 함.
console.warn('[auth] bootstrap failed', e);
} finally {
bootstrapping = false;
if (!cancelled) setAuthLoading(false);
}
}
// 첫 bootstrap → 그 후 onAuthChange 등록
(async () => {
await bootstrap();
if (cancelled) return;
const { data } = await SALES_DB.onAuthChange(async (s) => {
if (cancelled) return;
setSession(s);
if (s?.user) {
// sign-in 직후 "접근권한 없음" 깜빡임 방지: dashAccess가 이미 set돼 있으면 그대로 두고
// 새로 fetch가 끝나면 덮어쓴다 (token refresh 케이스). 처음 set이라면 undefined → 로딩 화면.
setDashAccess(prev => prev == null ? undefined : prev);
const { roster, da } = await fetchAuthBundle(s);
if (cancelled) return;
setRoster(roster);
setDashAccess(da);
} else {
setRoster(null);
setDashAccess(null);
}
});
unsub = data?.subscription;
})();
// Visibility 복구 — 30초+ hidden 후 visible 시 백그라운드로 auth re-bootstrap.
// 이미 session 있으면 setSession은 같은 세션으로 갱신만 (no-op 비슷),
// 봉인된 상태에서 깨어났어도 fresh 호출은 정상 응답할 가능성 높음.
const onVis = () => {
if (document.visibilityState === 'hidden') {
hiddenAt = Date.now();
} else if (document.visibilityState === 'visible') {
const wasHiddenMs = hiddenAt ? (Date.now() - hiddenAt) : 0;
hiddenAt = null;
if (wasHiddenMs >= VIS_FREEZE_THRESHOLD_MS) {
console.info('[auth] tab visible after ' + wasHiddenMs + 'ms — refreshing auth');
bootstrap();
}
}
};
document.addEventListener('visibilitychange', onVis);
return () => {
cancelled = true;
document.removeEventListener('visibilitychange', onVis);
if (unsub) unsub.unsubscribe();
};
}, []);
async function handleSignOut() {
setSession(null);
setRoster(null);
setDashAccess(null);
try { await SALES_DB.signOut(); } catch (_) { /* ignore */ }
}
// Clear cached sales rows and force every view to re-fetch.
async function handleDataRefresh() {
if (refreshing) return;
setRefreshing(true);
try {
SALES_DB.invalidateSalesCache();
// Pre-warm so the next view render returns from cache instantly.
await SALES_DB.fetchAllSalesData(true);
} catch (e) {
console.error('[refresh] failed', e);
} finally {
setRefreshing(false);
setDataVersion(v => v + 1);
}
}
if (authLoading) {
return
{t.loading}
;
}
if (!session) {
return setTweaks({ lang: lang === 'ko' ? 'en' : 'ko' })}/>;
}
// dashAccess만 게이트. undefined = 아직 fetch 중 → 로딩.
// (roster는 메타데이터이므로 게이트에서 제외 — DB의 0007 RLS와 일치)
if (dashAccess === undefined) {
return
{t.loading}
;
}
// dashAccess가 비어있거나 sales 권한이 없으면 거부.
// 빈 배열도 거부에 해당 — 무한 로딩에 갇히지 않도록 명시 화면을 띄운다.
if (!Array.isArray(dashAccess) || !SALES_DB.hasDashboardAccess(dashAccess, 'sales')) {
return (
a.dashboard) : []}
onSignOut={handleSignOut}
/>
);
}
return (
{/* Top bar */}
{t.appTitle}
setTweaks({ fxBasis: b })} lang={lang}/>
{perms.isAdmin && (
)}
{/* Main view area — visited views stay mounted (display toggle) so
re-entry is instant. dataVersion in the key forces remount on manual refresh. */}
{mountedViews.has('overview') && (
{lang === 'en' ? 'No access to Sales Dashboard' : 'Sales Dashboard 접근 권한이 없습니다'}
{lang === 'en'
? 'Your account is not registered for the Sales Dashboard. Contact an admin to be added.'
: '이 계정은 Sales Dashboard 접근 권한이 없습니다. 관리자에게 문의하세요.'}
{otherDashboards.length > 0 && (
{lang === 'en' ? 'You have access to:' : '접근 가능한 대시보드:'}
{' '}{otherDashboards.join(', ')}