// App shell: sidebar, topbar, MAX panel, footer, role switcher.
const Sidebar = ({ stages, activeKey, onNav, role }) => {
const STAGE_KEYS = stages.map(s => s.id);
const items = [
{ key: 'home', label: 'Главный экран', icon: 'home' },
{ key: 'team', label: 'Моя команда', icon: 'users' },
];
const utility = [
{ key: 'materials', label: 'Материалы', icon: 'book' },
{ key: 'feedback', label: 'Обратная связь', icon: 'chat' },
{ key: 'profile', label: 'Профиль', icon: 'user' },
];
return (
);
};
const BrandMark = () => (
);
const Topbar = ({ role, onRoleChange, breadcrumb, onMaxOpen, maxCount }) => {
return (
{breadcrumb.map((b, i) => (
{i>0 && }
{b}
))}
);
};
const ROLE_DEFS = [
{ id: 'hr', label: 'HR (компания)', sub: 'Елена Гончарова', initials: 'ЕГ', av:'wine' },
{ id: 'mentor', label: 'Наставник', sub: 'Игорь Савельев', initials: 'ИС', av:'ink' },
{ id: 'intern', label: 'Стажёр', sub: 'Анастасия Ким', initials: 'АК', av:'amber' },
{ id: 'curator', label: 'Куратор ЦОПП', sub: 'Дарья Маратканова', initials: 'ДМ', av:'wine' },
{ id: 'dapr', label: 'Наблюдатель ДАПР', sub: 'Министерство', initials: 'М', av:'ink' },
];
const RoleSwitcher = ({ role, onChange }) => {
const [open, setOpen] = React.useState(false);
const cur = ROLE_DEFS.find(r => r.id === role);
React.useEffect(() => {
const onClick = (e) => {
if (!e.target.closest('.role-switcher')) setOpen(false);
};
document.addEventListener('mousedown', onClick);
return () => document.removeEventListener('mousedown', onClick);
}, []);
return (
{open && (
Демо · переключение роли
{ROLE_DEFS.map(r => (
))}
)}
);
};
const UserChip = ({ role }) => {
const r = ROLE_DEFS.find(x => x.id === role);
return (
{r.sub}
{r.id==='hr'||r.id==='mentor' ? COMPANY_NAME : r.label}
{r.initials}
);
};
const COMPANY_NAME = 'Восток-Сталь';
const MaxPanel = ({ open, onClose, items }) => {
if (!open) return null;
return (
M
MAX · уведомления
Бот ЦОПП Приморья · {items.length} новых
{items.map((it, i) => (
{i===0?'⏱':'!'}
{it.title}
{it.body}
{it.time}
))}
Уведомления приходят в MAX. Можно отключить в Профиле.
);
};
const TutorFAB = ({ onClick }) => (
);
const Footer = () => (
);
const SupportBadge = () => (
При поддержке Министерства профессионального образования Приморского края
);
const StageProgress = ({ stages, current }) => {
return (
{stages.map((s, i) => {
const isDone = s.status === 'done';
const isActive = s.status === 'active';
return (
0{s.n}
{isActive && Сейчас}
{s.title}
{s.dates}
);
})}
);
};
Object.assign(window, { Sidebar, Topbar, MaxPanel, TutorFAB, Footer, SupportBadge, StageProgress, BrandMark, ROLE_DEFS });