/* ============================================================ app.jsx — shell (sidebar + topbar + site selector + router) ============================================================ */ const { useState, useEffect, useRef, useMemo, useCallback } = React; // — nav config — const NAV = [ { group: "", items: [ { id: "dashboard", label: "Дашборд", icon: "dashboard" }, { id: "clients", label: "Клиенты", icon: "users" }, ]}, { group: "Исследование", items: [ { id: "keywords", label: "Ключевые слова", icon: "search" }, { id: "audit", label: "Аудит сайта", icon: "stethoscope", badge: "site" }, { id: "onpage", label: "Оптимизация страниц", icon: "wrench" }, { id: "content", label: "Контент (AI)", icon: "pen" }, { id: "links", label: "Ссылки", icon: "link" }, { id: "competitors", label: "Конкуренты", icon: "eye" }, ]}, { group: "Мониторинг", items: [ { id: "positions", label: "Позиции", icon: "trending" }, { id: "monitoring", label: "Мониторинг изменений", icon: "shield" }, { id: "migration", label: "Миграция (редизайн)", icon: "truck", badge: "redesign" }, { id: "aiseo", label: "AI SEO", icon: "bot" }, ]}, { group: "Управление", items: [ { id: "tasks", label: "Задачи", icon: "check_circle", badge: "tasks" }, { id: "reports", label: "Отчёты", icon: "report" }, ]}, ]; // route -> component name on window const SCREENS = { dashboard: "Dashboard", audit: "Audit", tasks: "Tasks", content: "Content", positions: "Positions", migration: "Migration", aiseo: "AISeo", clients: "Onboarding", keywords: "Keywords", onpage: "OnPage", links: "Links", competitors: "Competitors", monitoring: "Monitoring", reports: "Reports", settings: "Settings", }; const SCREEN_META = { dashboard: { title: "Дашборд", sub: "Обзор всех клиентских сайтов" }, clients: { title: "Клиенты и сайты", sub: "Управление проектами и подключениями" }, keywords: { title: "Ключевые слова", sub: "Семантическое ядро и Вордстат" }, audit: { title: "Аудит сайта", sub: "Технический анализ и здоровье сайта" }, onpage: { title: "Оптимизация страниц", sub: "On-page анализ отдельной страницы" }, content: { title: "Контент", sub: "AI-генератор статей и мета-тегов" }, links: { title: "Ссылки", sub: "Входящие ссылки и доноры" }, competitors: { title: "Конкуренты", sub: "Сравнение и анализ соперников" }, positions: { title: "Позиции", sub: "Отслеживание в Google и Яндексе" }, monitoring: { title: "Мониторинг изменений", sub: "Защита от «тихих катастроф»" }, migration: { title: "SEO-миграция при редизайне", sub: "Сохранение позиций при переезде" }, aiseo: { title: "AI SEO", sub: "Видимость в нейросетях" }, tasks: { title: "Задачи", sub: "План работ по всем сайтам" }, reports: { title: "Отчёты для клиентов", sub: "Брендированные PDF-отчёты" }, settings: { title: "Настройки", sub: "Студия, интеграции, команда и тариф" }, }; function useOutside(ref, cb) { useEffect(() => { function h(e) { if (ref.current && !ref.current.contains(e.target)) cb(); } document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, []); } // ===== Sidebar ===== function Sidebar({ route, setRoute, collapsed }) { const totalTasks = DATA.tasks.filter(t => t.status !== "done").length; const badgeFor = (b) => { if (b === "tasks") return totalTasks; if (b === "redesign") return DATA.sites.filter(s => s.status === "redesign").length || null; return null; }; return ( ); } // ===== Site selector ===== function SiteSelector({ activeSite, setActiveSite, allowAll, route }) { const [open, setOpen] = useState(false); const ref = useRef(); useOutside(ref, () => setOpen(false)); const isAll = activeSite === "all"; const site = DATA.sites.find(s => s.id === activeSite); return (
{open && (
{allowAll && ( )}
Сайты клиентов
{DATA.sites.map(s => ( ))}
)}
); } // ===== Account menu ===== function AccountMenu({ setRoute }) { const [open, setOpen] = useState(false); const ref = useRef(); useOutside(ref, () => setOpen(false)); return (
{open && (
КС
Кирилл Соколов
Kant Studio · владелец
)}
); } // ===== Notifications ===== function NotifMenu() { const [open, setOpen] = useState(false); const ref = useRef(); useOutside(ref, () => setOpen(false)); return (
{open && (
Уведомления
{DATA.alerts.slice(0, 4).map(a => { const m = severityMeta[a.sev]; return (
{a.text} {a.time}
); })}
)}
); } // ===== Placeholder for not-yet-built screens ===== function Placeholder({ route }) { const meta = SCREEN_META[route] || {}; return (

{meta.title}

Этот раздел использует те же паттерны, что и готовые экраны. В этом прототипе сфокусированы 8 ключевых экранов — выберите их в боковом меню.

); } // ===== App ===== function App() { const [route, setRoute] = useState(() => localStorage.getItem("kant.route") || "dashboard"); const [activeSite, setActiveSite] = useState(() => localStorage.getItem("kant.site") || "all"); const [collapsed, setCollapsed] = useState(false); const [aiOpen, setAiOpen] = useState(false); useEffect(() => { localStorage.setItem("kant.route", route); }, [route]); useEffect(() => { localStorage.setItem("kant.site", activeSite); }, [activeSite]); // dashboard & tasks allow "all"; detail screens need a concrete site const allowAll = ["dashboard", "tasks", "positions", "reports", "monitoring", "settings", "clients"].includes(route); const effSite = (!allowAll && activeSite === "all") ? DATA.sites[0].id : activeSite; useEffect(() => { if (!allowAll && activeSite === "all") setActiveSite(DATA.sites[0].id); }, [route]); const meta = SCREEN_META[route] || {}; const ScreenName = SCREENS[route]; const Screen = ScreenName ? window[ScreenName] : null; const ctx = { site: effSite, activeSite, setActiveSite, setRoute }; return (
Kant SEO Manager — {meta.title}

{meta.title}

{meta.sub}

{Screen ? : }
setAiOpen(false)} setRoute={setRoute} setActiveSite={setActiveSite} />
); } window.__mountApp = () => { ReactDOM.createRoot(document.getElementById("root")).render(); };