/* ===================================================================== Incentive Automation — Login (Google sign-in), AppHeader, TeamCard ===================================================================== */ const GOOGLE_CLIENT_ID = '334591605851-5e15787uo5lu6raii82a10n1u2le3jms.apps.googleusercontent.com'; /* ---- Google "G" logo ------------------------------------------------ */ const GoogleG = ({ size = 18 }) => ( ); /* ---- decode a Google credential (JWT) ------------------------------- */ function decodeJwt(token) { try { const base = token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/'); const json = decodeURIComponent(atob(base).split('').map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join('')); return JSON.parse(json); } catch (e) { return null; } } /* ---- Login ---------------------------------------------------------- */ const Login = ({ onLogin }) => { const I = window.INCENTIVE; const [email, setEmail] = React.useState(''); const [err, setErr] = React.useState(''); const [gReady, setGReady] = React.useState(false); const [busy, setBusy] = React.useState(false); const btnRef = React.useRef(null); const tryLogin = (addr) => { const p = I.byEmail[(addr || '').trim().toLowerCase()]; if (!p) { setErr('No incentive record found for ' + addr + '. Try a demo login below.'); return false; } onLogin(p); return true; }; React.useEffect(() => { let cancelled = false; const init = () => { if (cancelled || !window.google || !window.google.accounts) return; try { window.google.accounts.id.initialize({ client_id: GOOGLE_CLIENT_ID, callback: (resp) => { const payload = decodeJwt(resp.credential); const addr = payload && payload.email; if (I.backendUrl) { // Live: backend verifies the token and returns role-filtered data. setErr(''); setBusy(true); I.connectBackend(resp.credential).then((res) => { setBusy(false); if (res.ok && res.viewer) onLogin(res.viewer); else if (res.reason === 'no_record') setErr('Signed in as ' + addr + ', but no incentive record is mapped to it.'); else setErr('Backend error: ' + (res.reason || 'unknown') + '. Check the /exec URL, deployment access, and column config.'); }); } else if (addr) { if (!tryLogin(addr)) setErr('Signed in as ' + addr + ', but no incentive record is mapped to it.'); } else setErr('Could not read Google account email.'); }, }); if (btnRef.current) { window.google.accounts.id.renderButton(btnRef.current, { theme: 'outline', size: 'large', width: 332, text: 'continue_with', shape: 'rectangular' }); } window.google.accounts.id.prompt(); setGReady(true); } catch (e) { setGReady(false); } }; const existing = document.getElementById('gsi-script'); if (existing) { init(); } else { const s = document.createElement('script'); s.src = 'https://accounts.google.com/gsi/client'; s.async = true; s.defer = true; s.id = 'gsi-script'; s.onload = init; s.onerror = () => setGReady(false); document.head.appendChild(s); } return () => { cancelled = true; }; }, []); const personas = [ { p: I.DEMO.admin, role: 'Admin', icon: 'shield-check', desc: 'All teams · data health · PIP' }, { p: I.DEMO.manager, role: 'Manager (GM)', icon: 'users-three', desc: 'Own + team incentives' }, { p: I.DEMO.gc, role: 'Core GC', icon: 'user', desc: 'Personal payout + maths' }, { p: I.DEMO.hypercare, role: 'Hypercare GC', icon: 'first-aid-kit', desc: 'Progressive HIT logic' }, ].filter((d) => d.p); return (
Shopdeck
INCENTIVES
Live incentive tracking · HITS

Every rupee of your payout, fully transparent.

Real-time incentives for every HITS team member — HIT-by-HIT maths, input multipliers, PIP tracking, ad-hoc bonuses, and one-click month-end export to HR.

{[['8', 'Teams tracked'], [String(I.people.length), 'Members live'], ['100%', 'Calc transparency']].map(([n, l]) => (
{n}
{l}
))}
{I.PERIOD} pay period · {I.backendUrl ? 'live data' : 'sample data'}

Sign in

{I.backendUrl ? "Sign in with your company Google account to load your live data. You'll only see what your role allows." : 'Use your company Google account.'}

{/* Connection status banner */} {I.backendUrl ? (
Live backend connected — sign in to fetch from your sheets.
) : (
Live data not connected. Deploy the Apps Script backend and set INCENTIVE_BACKEND_URL in index.html (see backend/SETUP.md). Until then this is sample data.
)} {/* Google sign-in */}
{!gReady ? ( ) : null}
{busy ?
Fetching your data from the sheets…
: null} {err ?
{err}
: null} {/* Sample preview (only when no live backend is configured) */} {!I.backendUrl ? ( <>
or preview (sample)
{ e.preventDefault(); tryLogin(email); }} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}> { setEmail(e.target.value); setErr(''); }} /> ) : null}
); }; /* ---- App header (period switch · data sources · PIP badge) --------- */ const AppHeader = ({ user, onHome, onLogout, activeKey, onPeriodChange, onOpenSources }) => { const I = window.INCENTIVE; const roleLabel = user.portal ? 'All teams' : { admin: 'Admin', manager: 'Manager (GM)', gc: user.logic === 'hypercare' ? 'Hypercare GC' : 'Core GC' }[user.role]; return (
{user.pip && user.pip.flagged ? ( PIP flagged ) : null}
{user.name}
{roleLabel}
{onLogout ? : null}
); }; /* ---- Data sources panel (fetch status) ----------------------------- */ const DataSourcesPanel = () => { const I = window.INCENTIVE; const live = I.DATA_LIVE; return (
This is a self-contained build — no backend / Apps Script. All incentive logic runs in the browser on data bundled with the site. To load real figures, paste each sheet’s rows into data.js. The sheets below are the source definitions the logic mirrors.
{I.DATA_SOURCES.map((s) => (
{s.name} · {s.tab}
{s.desc}
{s.fileId}
Source
))}
App-Script-free: the portal needs no server. Sign in with any company email and everyone can view all teams. Incentive maths is fully transparent — click any number to see the rows behind it.
); }; /* ---- Team card ------------------------------------------------------ */ const TeamCard = ({ summary, index, onOpen }) => { const I = window.INCENTIVE; const [hover, setHover] = React.useState(false); let seed = 1; for (const c of summary.key) seed += c.charCodeAt(0); return ( ); }; /* ---- Admin card (9th) ----------------------------------------------- */ const AdminCard = ({ index, onOpen, flaggedCount, pipCount }) => { const [hover, setHover] = React.useState(false); return ( ); }; Object.assign(window, { Login, AppHeader, TeamCard, AdminCard, GoogleG, DataSourcesPanel });