// invodiff-app.jsx — root app, state, top bar with nav tabs + theme switch.
// ── Auth state hook ──────────────────────────────────────────────────────
function useAuthState() {
const [user, setUser] = React.useState(undefined); // undefined = still checking
React.useEffect(() => {
return fbAuth.onAuthStateChanged((u) => setUser(u ?? null));
}, []);
return user;
}
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "dark",
"density": "comfortable",
"accent": "steel",
"seedHistory": true
}/*EDITMODE-END*/;
const ACCENT_MAP = {
steel: 'oklch(0.72 0.10 240)',
emerald:'oklch(0.74 0.10 165)',
amber: 'oklch(0.80 0.13 75)',
violet: 'oklch(0.72 0.11 300)',
neutral:'oklch(0.86 0.005 240)',
};
// ── Theme switch ────────────────────────────────────────────────────────
function ThemeSwitch({ value, onChange }) {
const isDark = value === 'dark';
return (
);
}
// ── Top bar ─────────────────────────────────────────────────────────────
function TopBar({ view, setView, phase, vendor, theme, setTheme, vendorCount, user }) {
const displayName = user?.displayName || user?.email?.split('@')[0] || '';
return (
KCGMatch
{view === 'compare' && (
<>
Upload
Compare
Decision
)}
{vendor && phase === 'compare' && (
{vendor}
)}
{user && (
{displayName && {displayName}}
)}
);
}
const TopBarStyles = () => (
);
// ── App root ────────────────────────────────────────────────────────────
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const user = useAuthState();
// ── vendorRules — Firebase-backed ─────────────────────────────────────
const [vendorRules, setVendorRulesState] = React.useState({});
const [rulesReady, setRulesReady] = React.useState(false);
const seededRef = React.useRef(false);
const firestoreSnapRef = React.useRef(null); // JSON of last value from Firestore
const saveTimerRef = React.useRef(null);
// Load from Firestore when user signs in; reset when they sign out.
React.useEffect(() => {
if (!user) {
clearTimeout(saveTimerRef.current);
setVendorRulesState({});
setRulesReady(false);
seededRef.current = false;
firestoreSnapRef.current = null;
return;
}
setRulesReady(false);
fbDb.collection('users').doc(user.uid).get().then((doc) => {
const saved = doc.exists ? (doc.data().vendorRules || null) : null;
let initial;
if (saved) {
initial = saved;
seededRef.current = false;
} else if (t.seedHistory) {
initial = { ...SEED_VENDOR_RULES };
seededRef.current = true;
} else {
initial = {};
}
firestoreSnapRef.current = JSON.stringify(initial);
setVendorRulesState(initial);
setRulesReady(true);
}).catch(() => {
const initial = t.seedHistory ? { ...SEED_VENDOR_RULES } : {};
if (t.seedHistory) seededRef.current = true;
firestoreSnapRef.current = JSON.stringify(initial);
setVendorRulesState(initial);
setRulesReady(true);
});
}, [user?.uid]);
// Seed toggle while logged in.
React.useEffect(() => {
if (!rulesReady) return;
if (t.seedHistory && !seededRef.current) {
setVendorRulesState((prev) => ({ ...SEED_VENDOR_RULES, ...prev }));
seededRef.current = true;
} else if (!t.seedHistory && seededRef.current) {
setVendorRulesState({});
seededRef.current = false;
}
}, [t.seedHistory]);
// Wrap setter so the rest of the app keeps using setVendorRules.
const setVendorRules = React.useCallback((updater) => {
setVendorRulesState(updater);
}, []);
// Debounced save — skips on initial Firestore load (value matches snapshot).
React.useEffect(() => {
if (!user || !rulesReady) return;
const current = JSON.stringify(vendorRules);
if (current === firestoreSnapRef.current) return;
clearTimeout(saveTimerRef.current);
saveTimerRef.current = setTimeout(() => {
firestoreSnapRef.current = current;
fbDb.collection('users').doc(user.uid)
.set({ vendorRules }, { merge: true })
.catch(console.error);
}, 1000);
return () => clearTimeout(saveTimerRef.current);
}, [vendorRules, user?.uid, rulesReady]);
// ── UI state ──────────────────────────────────────────────────────────
const [view, setView] = React.useState('compare');
const [phase, setPhase] = React.useState('input');
const [state, setState] = React.useState({ invoiceA: null, invoiceB: null, vendor: '' });
React.useEffect(() => {
document.documentElement.dataset.theme = t.theme;
document.documentElement.dataset.density = t.density;
document.documentElement.style.setProperty('--accent', ACCENT_MAP[t.accent] || ACCENT_MAP.steel);
}, [t.theme, t.density, t.accent]);
const setTheme = (v) => setTweak('theme', v);
const handleCompare = () => { setPhase('compare'); window.scrollTo({ top: 0, behavior: 'smooth' }); };
const handleBack = () => { setPhase('input'); window.scrollTo({ top: 0, behavior: 'smooth' }); };
const startNewComparison = () => {
setState({ invoiceA: null, invoiceB: null, vendor: '' });
setPhase('input'); setView('compare');
window.scrollTo({ top: 0, behavior: 'smooth' });
};
const compareWithVendor = (vendorName) => {
setState({ invoiceA: null, invoiceB: null, vendor: vendorName });
setPhase('input'); setView('compare');
window.scrollTo({ top: 0, behavior: 'smooth' });
};
const vendorCount = Object.keys(vendorRules).filter((v) => (vendorRules[v] || []).length > 0).length;
// ── Auth gate ─────────────────────────────────────────────────────────
if (user === undefined) {
return (
);
}
if (!user) return ;
return (
{view === 'compare' && phase === 'input' && (
)}
{view === 'compare' && phase === 'compare' && state.invoiceA && state.invoiceB && (
{ setView('vendors'); window.scrollTo({ top: 0, behavior: 'smooth' }); }}
/>
)}
{view === 'vendors' && (
)}
setTweak('theme', v)} />
setTweak('density', v)} />
{
const entry = Object.entries(ACCENT_MAP).find(([, v]) => v === hex);
if (entry) setTweak('accent', entry[0]);
}} />
setTweak('seedHistory', v)} />
{
setState({ invoiceA: INVOICE_A, invoiceB: INVOICE_B, vendor: 'Acme Industrial Supply' });
setPhase('input'); setView('compare');
}} />
{
setState({ invoiceA: null, invoiceB: null, vendor: '' });
setPhase('input'); setView('compare');
}} />
);
}
ReactDOM.createRoot(document.getElementById('root')).render();