// desktop-app.jsx admin app: login · dashboard · planner · team · structure const { useState, useEffect, useRef } = React; // Nextcloud logo glyph function NextcloudGlyph() { return ( ); } function GoogleGlyph() { return ( ); } function TuLogoMark({ size = 28, light = false }) { const fg = light ? '#fff' : 'var(--primary)'; const bg = light ? 'rgba(255,255,255,.18)' : 'var(--primary-soft)'; return (
); } // Desktop App Root function DesktopApp() { const ctx = useTurni(); const [session, setSession] = useState(() => kairosReadDesktopSession()); const [route, setRoute] = useState(() => kairosReadDesktopSession()?.user ? 'dashboard' : 'login'); const user = session?.user || null; useEffect(() => { if (!user) return; if (!KAIROS_API) { ctx.refresh?.(); return; } fetch(KAIROS_API + '/api/auth/session', { headers: kairosAuthHeaders() }) .then(async r => { if (!r.ok) throw new Error('sessione scaduta'); const data = await r.json(); if (data.user) setSession(kairosSetDesktopSession(data.user, kairosDesktopToken())); ctx.refresh?.(); }) .catch(() => handleLogout()); }, [user?.id]); const handleLogin = async (u, token) => { setSession(kairosSetDesktopSession(u, token)); const s = await ctx.refresh?.(); const freshStores = s?.stores || ctx.stores; const freshTeam = s?.team || ctx.team; const allIds = freshStores.map(st => st.id); let vis; if (!u || u.role === 'admin' || u.role === 'super_admin') vis = allIds; else if (u.role === 'capo') vis = freshStores.filter(st => (u.companyIds||[]).includes(st.companyId)).map(st => st.id); else vis = (u.storeIds||[]).filter(id => allIds.includes(id)); const hasTeam = (id) => freshTeam.some(e => e.storeId === id); ctx.setCurrentStoreId(vis.find(id => hasTeam(id)) || vis[0] || null); setRoute('dashboard'); }; const handleLogout = () => { kairosLogoutDesktop(); setSession(null); setRoute('login'); }; if (!user || route === 'login') { return ; } return ( {route === 'dashboard' && setRoute('planner')} goStructure={() => setRoute('structure')} />} {route === 'planner' && } {route === 'team' && } {route === 'structure' && } ); } // MAORI GROUP logo // Usa l'immagine reale /icons/maori-logo.png; se manca, fallback al wordmark disegnato. function MaoriLogo({ width = 200 }) { const [imgOk, setImgOk] = useState(true); if (imgOk) { return ( MAORI GROUP setImgOk(false)} style={{ display: 'block', margin: '0 auto', width, maxWidth: '100%', height: 'auto' }}/> ); } return (
MAORI
GROUP
); } // Login (MAORI GROUP - email + password) function DesktopLogin({ onLogin }) { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [showPw, setShowPw] = useState(false); const [error, setError] = useState(''); const [busy, setBusy] = useState(false); const [providers, setProviders] = useState({ google: false, nextcloud: false }); useEffect(() => { fetch(KAIROS_API + '/api/auth/providers') .then(r => r.json()) .then(setProviders) .catch(() => {}); }, []); useEffect(() => { const hash = new URLSearchParams(location.hash.replace(/^#/, '')); const oauth = hash.get('oauth'); const oauthError = hash.get('oauth_error'); if (!oauth && !oauthError) return; history.replaceState(null, '', location.pathname + location.search); if (oauthError) { setError(oauthError); return; } try { const b64 = oauth.replace(/-/g, '+').replace(/_/g, '/'); const payload = JSON.parse(atob(b64 + '='.repeat((4 - b64.length % 4) % 4))); if (payload?.user) onLogin(payload.user, payload.token); } catch { setError('Risposta OAuth non valida'); } }, []); const canSubmit = email.trim() && password.trim() && !busy; const loginWithEmail = async () => { setError(''); setBusy(true); try { const res = await fetch(KAIROS_API + '/api/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, password }), }); const data = await res.json().catch(() => null); if (!res.ok) throw new Error(data?.error || 'Accesso non riuscito'); onLogin(data.user, data.token); } catch (e) { setError(e.message || 'Accesso non riuscito'); } setBusy(false); }; const submit = () => { if (canSubmit) loginWithEmail(); }; const loginWithProvider = (provider) => { location.href = KAIROS_API + `/api/auth/oauth/${provider}/start?returnTo=desktop`; }; const labelStyle = { display: 'block', fontSize: 13.5, fontWeight: 600, color: 'var(--ink-2)', marginBottom: 8 }; const iconLeft = { position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: 'var(--ink-4)', display: 'flex', pointerEvents: 'none' }; const lockIcon = ; const eyeIcon = ; const eyeOff = ; return (
{/* Email */}
setEmail(e.target.value)} onKeyDown={e => e.key === 'Enter' && submit()} style={{ height: 48, paddingLeft: 42 }}/>
{/* Password */}
{lockIcon} setPassword(e.target.value)} onKeyDown={e => e.key === 'Enter' && submit()} style={{ height: 48, paddingLeft: 42, paddingRight: 46 }}/>
{/* Submit */} {/* Accesso unico tramite Portal SSO (portal.easytlc.it). Il portale rimanda a /desktop.html#oauth= e l'handler oauth qui sopra completa il login. */}
oppure
{error && (
{error}
)} {/* Footer */}
Accesso riservato al personale autorizzato
); } // Pending Approvals Modal (Super Admin only) function PendingApprovalsModal({ onClose }) { const ctx = useTurni(); const [selectedRole, setSelectedRole] = useState({}); const [busy, setBusy] = useState({}); const roles = [ { value: 'admin', label: 'Amministrazione' }, { value: 'capo', label: 'Capocanali' }, { value: 'manager', label: 'Store manager' }, ]; return (
e.stopPropagation()}>
Super Admin · Sicurezza
Richieste di accesso in attesa
{ctx.pendingApprovals.length === 0 && (
Nessuna richiesta in attesa
)} {ctx.pendingApprovals.map(pa => (
{pa.name}
{pa.email}
{pa.provider === 'google' ? 'Google' : 'Nextcloud'} Richiesto: {new Date(pa.requestedAt).toLocaleDateString('it-IT')}
))}
); } // Shell with sidebar function DesktopShell({ route, setRoute, user, onLogout, children }) { const ctx = useTurni(); const isAdmin = ctx.isAdminRole(user); const isSuperAdmin = ctx.isSuperAdminRole(user); const visibleStoreIds = ctx.visibleStoreIds(user); const editableStoreIds = ctx.editableStoreIds(user); const visibleStores = ctx.stores.filter(s => visibleStoreIds.includes(s.id)); const navItems = [ { id: 'dashboard', icon: TuIcon.home, label: 'Dashboard' }, { id: 'planner', icon: TuIcon.cal, label: 'Turni' }, { id: 'team', icon: TuIcon.users, label: 'Personale' }, { id: 'structure', icon: TuIcon.building, label: 'Società & Negozi' }, ].filter(it => it.id !== 'structure' || ctx.canManageStructure(user)); return (
{/* Sidebar */}
{children}
); } // Store Switcher Dropdown function StoreSwitcherDropdown({ onClose, user }) { const ctx = useTurni(); const ref = useRef(null); useEffect(() => { const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); }; document.addEventListener('pointerdown', handler, true); return () => document.removeEventListener('pointerdown', handler, true); }, []); const visible = ctx.visibleStoreIds(user); const editable = ctx.editableStoreIds(user); return (
{ctx.companies.map(co => { const coStores = ctx.stores.filter(s => s.companyId === co.id && visible.includes(s.id)); if (coStores.length === 0) return null; return (
{co.name}
{coStores.map(s => { const readOnly = !editable.includes(s.id); return ( ); })}
); })}
); } // Topbar function DesktopTopbar({ title, subtitle, actions }) { return (
{title}
{subtitle &&
{subtitle}
}
{actions}
); } Object.assign(window, { DesktopApp, DesktopTopbar, TuLogoMark, GoogleGlyph, NextcloudGlyph, PendingApprovalsModal, StoreSwitcherDropdown });