// New HR screens: Programs list, Catalog, Company context, User sessions drill-down // ---------------- Programs List (entry point) ---------------- const HR_VIEW_KEY = "hr-programs-view"; const HR_SORT_KEY = "hr-programs-sort"; const HrProgramsList = ({setRoute, setActiveProgram}) => { const [filter, setFilter] = React.useState("all"); const [view, setView] = React.useState(()=> localStorage.getItem(HR_VIEW_KEY) || "cards"); const [sortRaw, setSortRaw] = React.useState(()=> localStorage.getItem(HR_SORT_KEY) || "modified:desc"); const [sortField, sortDir] = sortRaw.split(":"); React.useEffect(()=>{ localStorage.setItem(HR_VIEW_KEY, view); },[view]); React.useEffect(()=>{ localStorage.setItem(HR_SORT_KEY, sortRaw); },[sortRaw]); const ctxEmpty = !HR_CONTEXT.industry && !HR_CONTEXT.culture && !HR_CONTEXT.situations; const filtered = HR_PROGRAMS.filter(p => filter==="all" ? true : p.status===filter); // Sort const sortKeys = { "modified": p => p.modifiedAt ?? 0, "created": p => p.createdTs ?? 0, "deadline": p => p.deadlineTs ?? Infinity, "assigned": p => p.assigned ?? 0, "score": p => p.avgScore ?? -1, }; const getter = sortKeys[sortField] || sortKeys["modified"]; const programs = [...filtered].sort((a,b) => { const av = getter(a), bv = getter(b); if (av === bv) return 0; return (av < bv ? -1 : 1) * (sortDir==="asc" ? 1 : -1); }); const counts = { all: HR_PROGRAMS.length, live: HR_PROGRAMS.filter(p=>p.status==="live").length, draft: HR_PROGRAMS.filter(p=>p.status==="draft").length, done: HR_PROGRAMS.filter(p=>p.status==="done").length, }; const filters = [ {id:"all", label:"Wszystkie"}, {id:"live", label:"Live"}, {id:"draft", label:"Draft"}, {id:"done", label:"Zakończone"}, ]; const openProgram = (id) => { setActiveProgram(id); setRoute("hr-dashboard"); }; const toggleSortDir = () => setSortRaw(`${sortField}:${sortDir==="asc"?"desc":"asc"}`); return (
{/* Context banner — only when empty */} {ctxEmpty && (
Kontekst firmy nie jest uzupełniony
AI użyje domyślnego profilu. Uzupełnij, żeby rozmowy lepiej pasowały do waszej rzeczywistości.
)}

Programy rozwojowe

Stwórz program, przypisz zespołom, śledź postępy. Każdy program = zestaw scenariuszy z deadlinem i kryterium ukończenia.
{/* Toolbar: filters + sort + view toggle */}
{filters.map(f => ( ))}
Sortuj
{programs.length===0 ? ( ) : view==="cards" ? (
{programs.map(p => openProgram(p.id)}/>)}
) : ( )}
); }; const ProgramCard = ({p, onClick}) => { const isDraft = p.status==="draft"; const isDone = p.status==="done"; const isLive = p.status==="live"; return (
{/* Status stripe */}
{isLive && LIVE} {isDraft && DRAFT} {isDone && ZAKOŃCZONY} {p.mode==="suggested" && SUGEROWANY} {p.mode==="required" && isLive && OBOWIĄZKOWY}
{p.name}
{p.skills} umiejętności · {p.scenarios} scenariuszy · {p.deadlineShort}
{/* KPI inline */} {!isDraft ? (
{p.assigned}
przypisanych
{p.active}
aktywnych
0?"var(--bad)":"var(--fg)"}}>{p.overdue}
{p.overdue>0?"przeterm.":"po term."}
{p.avgScore !== null && ( <>
=70?"var(--ok)":"var(--warn)"}}>{p.avgScore}%
śr. wynik
)}
) : (
Jeszcze nie opublikowany. Kliknij aby dokończyć konfigurację.
)} {/* Score-band breakdown — 3 koszyki: poniżej progu / w progu / wysoki */} {p.histo && (()=>{ // histogram ma 10 koszyków po 10%. Próg 70%. const low = p.histo.slice(0,6).reduce((a,b)=>a+b,0); // 0-60 const mid = p.histo.slice(6,8).reduce((a,b)=>a+b,0); // 60-80 const high = p.histo.slice(8,10).reduce((a,b)=>a+b,0); // 80-100 const total = low + mid + high; if (!total) return null; const pct = (n) => (n/total)*100; return (
Rozkład wyników
{total} prób · próg 70%
{low>0 &&
{pct(low)>=12 && low}
} {mid>0 &&
{pct(mid)>=12 && mid}
} {high>0 &&
{pct(high)>=12 && high}
}
0–60% 60–80% 80–100%
); })()}
); }; const ProgramsListView = ({programs, onOpen}) => (
Program Status Tryb Przypisanych Śr. wynik Deadline
{programs.map(p => { const isDraft = p.status==="draft"; const isDone = p.status==="done"; const isLive = p.status==="live"; return (
onOpen(p.id)}>
{p.name}
{p.skills} umiej. · {p.scenarios} scen.
{isLive && LIVE} {isDraft && DRAFT} {isDone && ZAKOŃCZONY}
{p.mode==="required"?"Obowiązkowy":"Sugerowany"}
{p.assigned ?? "—"}
=70?"var(--ok)":p.avgScore!=null?"var(--warn)":"var(--fg-4)"}}>{p.avgScore!=null?`${p.avgScore}%`:"—"}
{p.deadlineShort || "—"}
); })}
); const ProgramsEmpty = ({setRoute}) => (
Brak programów w tym widoku.
Zacznij od kontekstu firmy, potem wybierz umiejętności z katalogu i stwórz pierwszy program.
); Object.assign(window, { HrProgramsList });