// vvj-screens.jsx — Verdens Viktigste Jobb (VVJ): hoved-workspace // Tabs: Oversikt, Ansatte, Kontrakter, Timer, NyBy, Lønn & forskudd, Ansattportal // ── helpers ────────────────────────────────────────────────────────────── const vvjFmtKr = (n) => (n || 0).toLocaleString('nb-NO'); const vvjFmtKrShort = (n) => { if (!n) return '0'; if (n >= 1000) return `${(n / 1000).toFixed(1).replace('.', ',')}k`; return n.toLocaleString('nb-NO'); }; const vvjFmtDate = (iso) => { if (!iso) return '—'; const d = new Date(iso); return d.toLocaleDateString('nb-NO', { day: 'numeric', month: 'short' }); }; const vvjFmtDateLong = (iso) => { if (!iso) return '—'; const d = new Date(iso); return d.toLocaleDateString('nb-NO', { day: 'numeric', month: 'long', year: 'numeric' }); }; const vvjDays = (iso) => { const today = new Date(VVJ_TODAY); const d = new Date(iso); return Math.ceil((d - today) / 86400000); }; const vvjUtestaende = (a) => Math.max(0, (a.accruedKr || 0) - (a.paidAdvanceKr || 0)); const vvjAccessPct = (a) => { // Tilgjengelig forskudd: 60% av opptjent − allerede tatt forskudd const cap = Math.round((a.accruedKr || 0) * (VVJ_LONNSPERIODE.forskudd_takPct / 100)); return Math.max(0, cap - (a.paidAdvanceKr || 0)); }; const vvjStatusPill = (status) => { const map = { aktiv: { cls: 'track', label: 'Aktiv' }, onboarding: { cls: 'risk', label: 'Onboarding' }, utkast: { cls: 'draft', label: 'Utkast' }, pause: { cls: 'risk', label: 'I pause' }, sluttet: { cls: 'done', label: 'Sluttet' }, }; return map[status] || { cls: 'draft', label: status }; }; const vvjOnbScore = (o) => { const steps = Object.values(o); const done = steps.filter(s => s === 'done').length; return { done, total: steps.length, pct: Math.round((done / steps.length) * 100) }; }; // VVJ-spesifikke ikoner const VI = { kr: , clock: , nyby: , briefcase: , signature: , export: , link: , arrow: , filter: , pin: , smile: , }; // Aksentfarger for activity-feed const VVJ_ACCENT = { coral: '#f2545c', green: '#08605f', success: '#08654f', warn: '#f2b950', info: '#28589f', }; // ═══════════════════════════════════════════════════════════════════════════ // VVJ WORKSPACE — hovedkomponent // ═══════════════════════════════════════════════════════════════════════════ function VVJWorkspaceMock({ go, deeplink }) { const [tab, setTab] = React.useState(deeplink || 'oversikt'); const [selectedAnsattId, setSelectedAnsattId] = React.useState(null); // KPIs som vises i header const aktive = VVJ_ANSATTE.filter(a => a.status === 'aktiv').length; const onboarding = VVJ_ANSATTE.filter(a => a.status === 'onboarding' || a.status === 'utkast').length; const utlopendeKontrakter = VVJ_KONTRAKTER.filter(k => k.status === 'utløper').length; const ventendeTimer = VVJ_TIMER.filter(t => t.status === 'ventende').length; const ventendeForskudd = VVJ_FORSKUDD.filter(f => f.status === 'ventende').length; const totalAccrued = VVJ_ANSATTE.reduce((s, a) => s + (a.accruedKr || 0), 0); const totalAdvanced = VVJ_ANSATTE.reduce((s, a) => s + (a.paidAdvanceKr || 0), 0); const tabs = [ { id: 'oversikt', label: 'Oversikt' }, { id: 'ansatte', label: `Ansatte (${VVJ_ANSATTE.length})` }, { id: 'kontrakter', label: 'Kontrakter', badge: utlopendeKontrakter }, { id: 'timer', label: 'Timer', badge: ventendeTimer }, { id: 'nyby', label: 'NyBy-oppdrag' }, { id: 'lonn', label: 'Lønn & forskudd', badge: ventendeForskudd }, { id: 'portal', label: 'Ansattportal' }, ]; return (
{/* Header */}
Aktivt prosjekt Gjennomføring · Alle avdelinger · Eier: Hanne Myhre

Verdens Viktigste Jobb VVJ-26

Helhetlig oppfølging av midlertidige ansatte — fra kontraktsgenerering og onboarding til timeføring, NyBy-oppdrag og daglig forskudd på opptjent lønn.
{/* Tabs */} {tab === 'oversikt' && } {tab === 'ansatte' && } {tab === 'kontrakter' && } {tab === 'timer' && } {tab === 'nyby' && } {tab === 'lonn' && } {tab === 'portal' && }
); } // ── Custom Tabs med badges ─────────────────────────────────────────────── function VVJTabs({ tabs, value, onChange }) { return (
{tabs.map(t => ( ))}
); } // ═══════════════════════════════════════════════════════════════════════════ // OVERSIKT // ═══════════════════════════════════════════════════════════════════════════ function VVJOversikt({ go, setTab, setSelectedAnsattId, kpis }) { const aktiveAnsatte = VVJ_ANSATTE.filter(a => a.status === 'aktiv'); const ukentligeTimer = VVJ_TIMER.filter(t => t.date >= '2026-05-18' && t.date <= '2026-05-21').reduce((s, t) => s + t.hours, 0); const nybyDenneUka = VVJ_NYBY_OPPDRAG.filter(o => o.status === 'fullført' || o.status === 'påtatt').length; const top5OutstandingAnsatte = [...VVJ_ANSATTE] .filter(a => a.status === 'aktiv') .sort((b, a) => vvjUtestaende(a) - vvjUtestaende(b)) .slice(0, 5); return (
{/* KPI strip */}
6} /> 0} /> o.status==='tilgjengelig').length} tilgjengelige nå`} />
{/* Aktive ansatte — utestående */} setTab('ansatte')}> Alle ansatte {I.chevron} } > {top5OutstandingAnsatte.map(a => { const ut = vvjUtestaende(a); const pct = a.accruedKr > 0 ? Math.round((a.paidAdvanceKr / a.accruedKr) * 100) : 0; return ( { setSelectedAnsattId(a.id); setTab('ansatte'); }}> ); })}
Ansatt Opptjent Forskudd Utestående
{a.name}
{a.role} · {a.avd}
 {vvjFmtKr(a.accruedKr)} kr {vvjFmtKr(a.paidAdvanceKr)} kr
70 ? 'risk' : 'track'} />
{vvjFmtKr(ut)} kr
{/* Aktivitetsfeed */} siste 48 t}>
{VVJ_ACTIVITY.slice(0, 8).map((l, i) => (
{l.ikon === 'kr' ? VI.kr : l.ikon === 'nyby' ? VI.nyby : l.ikon === 'clock' ? VI.clock : l.ikon === 'doc' ? I.doc : l.ikon === 'check' ? I.check : VI.export}
{l.tekst}
{l.tid} · {l.avsender}
))}
{/* Integrasjoner */}
{[ { name: 'NyBy', desc: 'Ekstrajobber for ansatte', status: 'tilkoblet', last: 'Sist sync: i dag 09:14', count: '6 nye oppdrag', dot: SK.success }, { name: 'Visma Lønn', desc: 'Lønnseksport · forskuddsregistrering', status: 'tilkoblet', last: 'Sist eksport: 8. mai (april-kjøring)', count: 'Klar for mai-eksport 1/6', dot: SK.success }, { name: 'BankID-signering', desc: 'Digital kontraktssignering', status: 'tilkoblet', last: 'Sist signert: i går 16:45', count: '2 venter på signering', dot: SK.warn }, { name: 'Skatteetaten', desc: 'Skattekort-oppslag', status: 'tilkoblet', last: 'Sist sync: i morges 06:00', count: 'Alle aktive ansatte verifisert', dot: SK.success }, { name: 'Altinn A-melding', desc: 'Månedlig rapportering', status: 'tilkoblet', last: 'Sist sendt: 5. mai', count: 'Neste: 5. juni', dot: SK.success }, { name: 'OK:bistro/sykkel/data', desc: 'Vaktplan & oppdragsregister', status: 'tilkoblet', last: 'Live-kobling', count: '4 avdelinger', dot: SK.success }, ].map((x, i) => (
= 3 ? '1px solid rgba(17,24,61,.06)' : 'none', }}>
{x.name}
{x.desc}
{x.count}
{x.last}
))}
); } // ═══════════════════════════════════════════════════════════════════════════ // ANSATTE — liste + detalj (onboarding-checklist) // ═══════════════════════════════════════════════════════════════════════════ function VVJAnsatte({ go, setTab, selectedAnsattId, setSelectedAnsattId }) { const [statusFilter, setStatusFilter] = React.useState('all'); const [avdFilter, setAvdFilter] = React.useState('all'); const [search, setSearch] = React.useState(''); const avds = ['all', ...new Set(VVJ_ANSATTE.map(a => a.avd))]; const liste = VVJ_ANSATTE.filter(a => { if (statusFilter !== 'all' && a.status !== statusFilter) return false; if (avdFilter !== 'all' && a.avd !== avdFilter) return false; if (search && !a.name.toLowerCase().includes(search.toLowerCase()) && !a.role.toLowerCase().includes(search.toLowerCase())) return false; return true; }); // Hvis valgt ansatt — vis detalj const selected = VVJ_ANSATTE.find(a => a.id === selectedAnsattId); if (selected) { return setSelectedAnsattId(null)} setTab={setTab} />; } return (
setSearch(e.target.value)} style={{ maxWidth: 240 }} />
{[ ['all', 'Alle'], ['aktiv', 'Aktive'], ['onboarding', 'Onboarding'], ['utkast', 'Utkast'], ['pause', 'I pause'], ['sluttet', 'Sluttet'], ].map(([k, l]) => ( ))}
{liste.map(a => { const onb = vvjOnbScore(a.onboarding); const pill = vvjStatusPill(a.status); const days = vvjDays(a.contractEnd); const utest = vvjUtestaende(a); return ( setSelectedAnsattId(a.id)}> ); })}
Ansatt Avdeling Kontrakt Onboarding Status Uke 21 Utestående
{a.name}
{a.role}
 {a.avd}
{a.contractType.split('·')[0].trim()}
= 0 ? SK.coral : SK.soft, marginTop: 1 }}> til {vvjFmtDate(a.contractEnd)} {days >= 0 && days < 60 ? `· ${days}d igjen` : ''}
{onb.done}/{onb.total}
{pill.label}
{a.weekHours}t
av {a.weeklyHours}t
 0 ? SK.ink : SK.soft }}> {utest > 0 ? `${vvjFmtKr(utest)} kr` : '—'} {I.chevron}
); } // ── Ansatt-detalj (drawer-stil, ekspandert kort) ───────────────────────── function VVJAnsattDetalj({ ansatt, onBack, setTab }) { const a = ansatt; const onb = vvjOnbScore(a.onboarding); const pill = vvjStatusPill(a.status); const days = vvjDays(a.contractEnd); const utest = vvjUtestaende(a); const tilgjengelig = vvjAccessPct(a); const onbSteg = [ { key: 'kontrakt', label: 'Kontrakt opprettet og signert (BankID)' }, { key: 'skattekort', label: 'Skattekort hentet fra Skatteetaten' }, { key: 'bankkonto', label: 'Bankkonto registrert og verifisert' }, { key: 'it', label: 'IT-konto opprettet (AD + M365)' }, { key: 'hms', label: 'HMS-gjennomgang og signert egenerklæring' }, { key: 'opplaring', label: 'Opplæringsplan gjennomført' }, { key: 'oppfolging', label: 'Første oppfølgingsmøte med veileder' }, ]; const ansatteTimer = VVJ_TIMER.filter(t => t.ansattId === a.id).slice(-5); const ansatteForskudd = VVJ_FORSKUDD.filter(f => f.ansattId === a.id); const ansatteNyBy = VVJ_NYBY_OPPDRAG.filter(o => o.ansattId === a.id); return (
{/* Ansatt-header */}
{pill.label} {a.contractType}

{a.name}

{a.role} · {a.avd} · Veileder: {TEAM[a.veileder]?.n || a.veileder}
{/* Venstre */}
{/* Onboarding checklist */} {onb.pct}%} >
{onbSteg.map((s, i) => { const stegStatus = a.onboarding[s.key]; return (
{stegStatus === 'done' ? : null} {stegStatus === 'in_progress' ? : null} {s.label} {stegStatus === 'done' ? 'Fullført' : stegStatus === 'in_progress' ? 'Pågår' : 'Åpen'}
); })}
{/* Siste timer */} setTab('timer')}>Se alle {I.chevron}} > {ansatteTimer.length === 0 ? ( ) : ansatteTimer.map(t => ( ))}
Ingen timer registrert ennå
{vvjFmtDate(t.date)} {t.kontext} {t.kilde === 'NyBy-API' ? NYBY : null} {t.hours} t {t.status === 'godkjent' ? 'Godkjent' : t.status === 'ventende' ? 'Venter' : 'Avvist'}
{/* Høyre — utestående + kontrakt + NyBy */}
{/* Utestående lønn */}
Utestående siden 1. mai
{vvjFmtKr(utest)} kr
0 ? Math.round((a.paidAdvanceKr / a.accruedKr) * 100) : 0} status={a.paidAdvanceKr / Math.max(1, a.accruedKr) > 0.7 ? 'risk' : 'track'} />
Opptjent: {vvjFmtKr(a.accruedKr)} kr Forskudd: {vvjFmtKr(a.paidAdvanceKr)} kr
Tilgjengelig for forskudd nå: {vvjFmtKr(tilgjengelig)} kr
(60% av opptjent − allerede tatt)
 {/* Kontrakt */}
{a.contractType} {vvjFmtDate(a.contractStart)} – {vvjFmtDate(a.contractEnd)} {vvjFmtKr(a.hourRate)} kr/t inntil {a.weeklyHours} t/uke = 0 ? SK.coral : SK.ink, fontWeight: 600 }}> {days < 0 ? `${Math.abs(days)}d forsinket` : `om ${days} dgr`}
{/* NyBy */} {ansatteNyBy.length} totalt} > {ansatteNyBy.length === 0 ? (
Ingen NyBy-oppdrag registrert ennå.
) : (
{ansatteNyBy.slice(0, 3).map((o, i) => (
{VI.nyby}
{o.tittel}
{vvjFmtDate(o.dato)} · {o.timer}t · {vvjFmtKr(o.sats)} kr/t
{o.status === 'fullført' ? 'Fullført' : o.status === 'påtatt' ? 'Påtatt' : 'Tilgj.'}
))}
)}
); } // Liten label-row helper function RowLabel({ l, children }) { return (
{l} {children}
); } Object.assign(window, { VVJWorkspaceMock, VVJOversikt, VVJAnsatte, VVJAnsattDetalj, vvjFmtKr, vvjFmtKrShort, vvjFmtDate, vvjFmtDateLong, vvjDays, vvjUtestaende, vvjAccessPct, vvjStatusPill, vvjOnbScore, VI, VVJ_ACCENT });