@extends('layouts.site')

@section('title','Baza Wiedzy')

@section('content')

<style>
    :root {
        --kb-bg: #f3f7fb;
        --kb-card: #ffffff;
        --kb-border: #d6e3f0;
        --kb-text: #1f2d3d;
        --kb-muted: #5f7388;
        --kb-primary: #1f6fb2;
        --kb-primary-soft: #e7f1fb;
        --kb-success-soft: #e8f7ef;
        --kb-panel-h: calc(100vh - 160px);
    }

    .kb-module-tabs {
        border-bottom: 1px solid #c8d8e8;
        margin-bottom: 10px;
    }

    .kb-module-tabs .nav-link {
        border: 1px solid #c8d8e8;
        border-bottom: 0;
        border-radius: 8px 8px 0 0;
        color: #2b4e6f !important;
        font-weight: 600;
        background: #e8f0f8;
        margin-right: 6px;
        padding: 8px 14px;
        transition: all .15s ease-in-out;
    }

    .kb-module-tabs .nav-link:hover,
    .kb-module-tabs .nav-link:focus {
        color: #123f67 !important;
        background: #dce9f6;
        border-color: #8fb6d9;
    }

    .kb-module-tabs .nav-link.active {
        color: #0f3f67 !important;
        background: #ffffff !important;
        border-color: #7faad1 !important;
        box-shadow: inset 0 3px 0 #4e8ec4;
    }

    .kb-module-content .tab-pane {
        background: transparent;
    }

    .kb-wrap {
        display: grid;
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 16px;
        align-items: stretch;
        height: var(--kb-panel-h);
        min-height: 560px;
    }

    .kb-sidebar {
        position: relative;
        top: 0;
        background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
        border: 1px solid var(--kb-border);
        border-radius: 8px;
        padding: 12px;
        box-shadow: 0 8px 24px rgba(11, 47, 83, 0.08);
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .kb-brand {
        margin-bottom: 12px;
        padding: 10px 12px;
        border-radius: 6px;
        background: var(--kb-primary-soft);
        border: 1px solid #c9def3;
    }

    .kb-brand h5 {
        margin: 0;
        color: #174c7a;
        font-weight: 700;
        font-size: 15px;
    }

    .kb-brand p {
        margin: 4px 0 0 0;
        color: #315f87;
        font-size: 12px;
    }

    .kb-search-group {
        margin-bottom: 10px;
    }

    .kb-search-group input {
        width: 100%;
        border: 1px solid #b9d2ea;
        border-radius: 6px;
        padding: 10px 12px;
        font-size: 13px;
        color: #123a5e;
        background: #fff;
        outline: none;
    }

    .kb-search-group input:focus {
        border-color: #4c94d3;
        box-shadow: 0 0 0 3px rgba(76, 148, 211, 0.15);
    }

    .kb-search-info {
        min-height: 18px;
        margin: 3px 0 9px 0;
        color: #4a6077;
        font-size: 12px;
    }

    .kb-toc {
        border-top: 1px solid #d4e2ef;
        padding-top: 10px;
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1 1 auto;
    }

    .kb-toc h6 {
        margin: 0 0 8px 0;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-size: 11px;
        color: #4d6780;
    }

    .kb-toc-list {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: none;
        min-height: 0;
        flex: 1 1 auto;
        overflow: auto;
    }

    .kb-toc-item {
        margin-bottom: 3px;
    }

    .kb-toc-link,
    .kb-admin-toc-link {
        display: block;
        padding: 7px 8px;
        border-radius: 6px;
        color: #2a4663;
        font-size: 12px;
        text-decoration: none;
        line-height: 1.3;
        border: 1px solid transparent;
    }

    .kb-toc-link:hover,
    .kb-toc-link:focus,
    .kb-admin-toc-link:hover,
    .kb-admin-toc-link:focus {
        background: #edf5fd;
        border-color: #c4dbf0;
        color: #174c7a;
        text-decoration: none;
    }

    .kb-toc-link.active,
    .kb-admin-toc-link.active {
        background: #dfefff;
        border-color: #8ab6df;
        color: #0f3f67;
        font-weight: 700;
    }

    .kb-main {
        background: var(--kb-bg);
        border: 1px solid var(--kb-border);
        border-radius: 8px;
        padding: 12px;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .kb-hero {
        background: linear-gradient(130deg, #e8f2fb 0%, #f4fbff 56%, #e8f7ef 100%);
        border: 1px solid #c8dff3;
        border-radius: 8px;
        padding: 14px 16px;
        margin-bottom: 14px;
    }

    .kb-hero h3 {
        margin: 0 0 8px 0;
        color: #183d61;
        font-size: 22px;
        font-weight: 700;
    }

    .kb-hero p {
        margin: 0;
        color: #375a7a;
        font-size: 14px;
    }

    .kb-section,
    .kb-admin-section {
        background: var(--kb-card);
        border: 1px solid var(--kb-border);
        border-radius: 8px;
        padding: 14px;
        margin-bottom: 12px;
        scroll-margin-top: 70px;
    }

    .kb-section h4,
    .kb-admin-section h4 {
        margin: 0 0 8px 0;
        color: var(--kb-text);
        font-size: 18px;
        font-weight: 700;
    }

    .kb-section p,
    .kb-admin-section p {
        margin: 0 0 8px 0;
        color: #2e455d;
        font-size: 14px;
    }

    .kb-section ul,
    .kb-admin-section ul {
        margin: 0 0 8px 16px;
        color: #24384d;
        font-size: 14px;
    }

    .kb-note {
        border-left: 4px solid #63a3d8;
        background: #f1f8ff;
        color: #214b6f;
        border-radius: 6px;
        padding: 9px 11px;
        margin: 10px 0;
        font-size: 13px;
    }

    .kb-shot {
        margin-top: 10px;
        border: 2px dashed #aac7e2;
        border-radius: 6px;
        background: #f8fbff;
        padding: 12px;
    }

    .kb-shot-title {
        margin: 0 0 5px 0;
        color: #1e507d;
        font-size: 13px;
        font-weight: 700;
    }

    .kb-shot p {
        margin: 0;
        color: #4b6885;
        font-size: 12px;
    }

    .kb-inline-tag {
        display: inline-block;
        border: 1px solid #c6d9ec;
        background: #f5faff;
        border-radius: 999px;
        color: #21517a;
        padding: 2px 9px;
        font-size: 11px;
        margin: 0 6px 6px 0;
    }

    .kb-view-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
        border: 1px solid #cfe0f2;
        border-radius: 6px;
        overflow: hidden;
    }

    .kb-view-table th,
    .kb-view-table td {
        border: 1px solid #d8e6f3;
        padding: 8px 10px;
        vertical-align: top;
        font-size: 13px;
        color: #2a4460;
    }

    .kb-view-table th {
        background: #eaf3fc;
        color: #1c4a74;
        font-weight: 700;
    }

    .kb-shot-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .kb-step {
        border: 1px solid #d3e3f2;
        border-radius: 6px;
        background: #f9fcff;
        padding: 10px;
        margin-bottom: 8px;
        font-size: 13px;
        color: #2d4f70;
    }

    .kb-hidden {
        display: none !important;
    }

    .tab-content_2 {
        height: calc(100vh - 225px);
    }

    @media (max-width: 991px) {
        .kb-wrap {
            grid-template-columns: 1fr;
            height: auto;
            min-height: 0;
        }

        .kb-sidebar {
            position: static;
            overflow: visible;
        }

        .kb-toc-list {
            max-height: 300px;
        }

        .kb-main {
            overflow: visible;
        }

        .kb-shot-grid {
            grid-template-columns: 1fr;
        }
    }
</style>


    <div class="row">
        <div class="col-sm-12">
            <div class="kb-wrap">
                <aside class="kb-sidebar">
                    <div class="kb-brand">
                        <h5>Baza Wiedzy ODO</h5>
                        <p>Dokumentacja użytkownika aplikacji</p>
                    </div>

                    <div class="kb-search-group">
                        <input id="kbSearchInput" type="text" placeholder="Wyszukaj funkcje, widok lub temat..." autocomplete="off">
                    </div>
                    <div id="kbSearchInfo" class="kb-search-info"></div>

                    <nav class="kb-toc">
                        <h6>Spis treści</h6>
                        <ul id="kbTocList" class="kb-toc-list">
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-start">1. Start i zakres dokumentacji</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-login">2. Logowanie i bezpieczeństwo</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-layout">3. Układ aplikacji i nawigacja</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-panel">4. Panel główny ODO</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-procesy-kafelki">5. Zarządzanie: Procesy Kafelki</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-procesy-lista">6. Zarządzanie: Procesy Lista</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-zarz-umowy">7. Zarządzanie: Umowy Powierzenia</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-zarz-udostepnienia">8. Zarządzanie: Udostępnienia Danych</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-zarz-upowaznienia">9. Zarządzanie: Upoważnienia do PDO</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-zarz-szkolenia">10. Zarządzanie: Szkolenia ODO</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-zarz-analiza">11. Zarządzanie: Analizy Ryzyka</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-zarz-dpia">12. Zarządzanie: Oceny Skutków (DPIA)</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-rej-czynnosci">13. Rejestr Czynności</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-rej-kategorii">14. Rejestr Kategorii Czynności</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-rej-umow">15. Rejestr Umów Powierzenia</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-rej-udostepnien">16. Rejestr Udostępnień</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-rej-upowaznien">17. Rejestr Upoważnień</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-dokumenty">18. Dokumenty: Generator i Lista</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-zgloszenia">19. Zgłoszenia i obieg informacji</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-funkcje-wspolne">20. Funkcje wspólne (filtry, export, modal)</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-dobre-praktyki">21. Dobre praktyki pracy</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-troubleshooting">22. Najczęstsze problemy i rozwiązania</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-mapa-widokow">23. Mapa widoków ODO i funkcjonalności</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-komponenty-globalne">24. Komponenty globalne - jak używać</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-scenariusze-pracy">25. Scenariusze pracy krok po kroku</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-screenshot-plan">26. Lista zrzutów ekranowych do uzupełnienia</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-dashboard-aktualizacje">27. Aktualizacje dashboardu m_odo</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-dashboard-nawigacja">28. Nawigacja z dashboardu do list procesów</a></li>
                        </ul>
                    </nav>
                </aside>

                <section class="kb-main" id="kbMainContent">
                    <div class="kb-hero">
                        <h3>Dokumentacja użytkownika ODO</h3>
                        <p>
                            Ten materiał prowadzi krok po kroku przez główny przepływ pracy: od logowania, przez obsługę modułów,
                            po eksport danych i zgłoszenia. Sekcje są przygotowane pod uzupełnienie o zrzuty ekranowe.
                        </p>
                    </div>

                    <article id="sec-start" class="kb-section">
                        <h4>1. Start i zakres dokumentacji</h4>
                        <p>Dokumentacja obejmuje działanie aplikacji ODO od momentu wejscia do systemu az po codzienna prace na rejestrach i formularzach.</p>
                        <p>Materiał jest napisany tak, aby nowy użytkownik mógł samodzielnie wykonać podstawowe i zaawansowane operacje.</p>
                        <div>
                            <span class="kb-inline-tag">Logowanie</span>
                            <span class="kb-inline-tag">Nawigacja</span>
                            <span class="kb-inline-tag">Rejestry</span>
                            <span class="kb-inline-tag">Zarzadzanie</span>
                            <span class="kb-inline-tag">Eksport</span>
                        </div>
                    </article>

                    <article id="sec-login" class="kb-section">
                        <h4>2. Logowanie i bezpieczeństwo</h4>
                        <ul>
                            <li>Użytkownik otwiera stronę logowania i podaje login oraz hasło.</li>
                            <li>Po poprawnym logowaniu system przekierowuje do obszaru aplikacji.</li>
                            <li>Uprawnienia do funkcji są nadawane rolami i zakresem dostępu.</li>
                            <li>Brak uprawnień powoduje ukrycie opcji menu lub brak możliwości operacji.</li>
                        </ul>
                        <div class="kb-note">Rekomendacja: po zakończeniu pracy wyloguj się i nie pozostawiaj aktywnej sesji bez nadzoru.</div>
                        <div class="kb-shot">
                            <p class="kb-shot-title">Miejsce na zrzut ekranu: logowanie</p>
                            <p>Podmien zawartosc tymczasowa na screenshot ekranu logowania i komunikatów walidacyjnych.</p>
                        </div>
                    </article>

                    <article id="sec-layout" class="kb-section">
                        <h4>3. Układ aplikacji i nawigacja</h4>
                        <ul>
                            <li>Lewa kolumna: menu główne z grupami funkcji.</li>
                            <li>Górny pasek: breadcrumb i szybki podgląd aktualnego miejsca.</li>
                            <li>Środek: główna przestrzeń robocza aktualnego widoku.</li>
                            <li>Wiele list posiada ten sam standard: filtry, tabela, akcje, modale i export.</li>
                        </ul>
                        <div class="kb-shot">
                            <p class="kb-shot-title">Miejsce na zrzut ekranu: uklad po zalogowaniu</p>
                            <p>Sugerowany plik: <code>01-uklad-aplikacji.png</code></p>
                        </div>
                    </article>

                    <article id="sec-panel" class="kb-section">
                        <h4>4. Panel główny ODO</h4>
                        <p>Panel główny służy jako punkt startowy i dashboard nawigacyjny. Z tego miejsca przechodzisz do kluczowych modułów.</p>
                        <ul>
                            <li>Przejście do modułów zarządzania i rejestrów.</li>
                            <li>Kontrola kontekstu organizacyjnego (zależne od uprawnień).</li>
                            <li>Szybki dostęp do codziennie używanych obszarów.</li>
                        </ul>
                    </article>

                    <article id="sec-procesy-kafelki" class="kb-section">
                        <h4>5. Zarządzanie: Procesy Kafelki</h4>
                        <p>Widok kafelkowy wspiera szybkie przejście do procesów według obszarów organizacyjnych.</p>
                        <ul>
                            <li>Nawigacja po jednostkach i procesach.</li>
                            <li>Podgląd statusu i podstawowych metryk procesu.</li>
                            <li>Przejście do szczegółów procesu.</li>
                        </ul>
                    </article>

                    <article id="sec-procesy-lista" class="kb-section">
                        <h4>6. Zarządzanie: Procesy Lista</h4>
                        <p>Centralny widok listy procesów. Umożliwia wyszukiwanie, filtrowanie i akcje na rekordach.</p>
                        <ul>
                            <li>Filtry statusu i kryteriow wyszukiwania.</li>
                            <li>Operacje na rekordzie: edycja, podgląd, usuwanie, pliki.</li>
                            <li>Eksport listy do DOC/XLS/CSV/PDF.</li>
                        </ul>
                        <div class="kb-shot">
                            <p class="kb-shot-title">Miejsce na zrzut ekranu: tabela procesów i przyciski akcji</p>
                            <p>Sugerowany plik: <code>02-procesy-lista.png</code></p>
                        </div>
                    </article>

                    <article id="sec-zarz-umowy" class="kb-section">
                        <h4>7. Zarządzanie: Umowy Powierzenia</h4>
                        <ul>
                            <li>Dodawanie i edycja umów powierzenia.</li>
                            <li>Powiązanie umowy z podmiotem, zakresem i okresem obowiązywania.</li>
                            <li>Obsługa dokumentów powiązanych z umową.</li>
                            <li>Zmiany statusu i usuwanie rekordów.</li>
                        </ul>
                    </article>

                    <article id="sec-zarz-udostepnienia" class="kb-section">
                        <h4>8. Zarządzanie: Udostępnienia Danych</h4>
                        <ul>
                            <li>Rejestrowanie podmiotu wnioskujacego i celu udostepnienia.</li>
                            <li>Obsługa statusu zatwierdzenia przez IOD.</li>
                            <li>Zapisywanie daty faktycznego udostepnienia.</li>
                            <li>Historia operacji i edycja wpisów.</li>
                        </ul>
                    </article>

                    <article id="sec-zarz-upowaznienia" class="kb-section">
                        <h4>9. Zarządzanie: Upoważnienia do PDO</h4>
                        <ul>
                            <li>Nadawanie upowaznien i okreslanie zakresu.</li>
                            <li>Data nadania i data odebrania upoważnienia.</li>
                            <li>Status aktualności i przegląd szczegółów osoby.</li>
                            <li>Obsuga dokumentów PDF upowaznien.</li>
                        </ul>
                    </article>

                    <article id="sec-zarz-szkolenia" class="kb-section">
                        <h4>10. Zarządzanie: Szkolenia ODO</h4>
                        <ul>
                            <li>Planowanie szkolen i rejestracja uczestnikow.</li>
                            <li>Statusy procesu szkoleniowego.</li>
                            <li>Wydruki list i raporty szkoleniowe.</li>
                        </ul>
                    </article>

                    <article id="sec-zarz-analiza" class="kb-section">
                        <h4>11. Zarządzanie: Analizy Ryzyka</h4>
                        <ul>
                            <li>Tworzenie analiz i podpinanie procesów.</li>
                            <li>Ocena postępu analizy i status roboczy/zapisany.</li>
                            <li>Druk podglądu oraz eksport.</li>
                        </ul>
                    </article>

                    <article id="sec-zarz-dpia" class="kb-section">
                        <h4>12. Zarządzanie: Oceny Skutków (DPIA)</h4>
                        <ul>
                            <li>Tworzenie oceny skutkow dla wskazanych procesów.</li>
                            <li>Kontrola stanu wykonania i dat zatwierdzenia.</li>
                            <li>Widoki podglądu i raportowania.</li>
                        </ul>
                    </article>

                    <article id="sec-rej-czynnosci" class="kb-section">
                        <h4>13. Rejestr Czynności</h4>
                        <ul>
                            <li>Wybieranie ADO i zatwierdzenie wyboru jako warunek aktywacji eksportu.</li>
                            <li>Widok danych adresowych i szczegółów rejestru.</li>
                            <li>Eksport danych i wydruki wg ustalonego standardu.</li>
                        </ul>
                        <div class="kb-note">Jeżeli ADO nie jest wybrane, akcje eksportu są nieaktywne, a system wyświetla komunikat podpowiedzi.</div>
                    </article>

                    <article id="sec-rej-kategorii" class="kb-section">
                        <h4>14. Rejestr Kategorii Czynności</h4>
                        <ul>
                            <li>Widok rozszerzonych danych kategorii przetwarzan.</li>
                            <li>Informacje o środkach bezpieczeństwa i transferach danych.</li>
                            <li>Eksport dokumentacyjny w orientacji poziomej.</li>
                        </ul>
                    </article>

                    <article id="sec-rej-umow" class="kb-section">
                        <h4>15. Rejestr Umów Powierzenia</h4>
                        <ul>
                            <li>Lista umów z danymi podmiotu i zakresem umowy.</li>
                            <li>Status obowiązywania i historia dokumentów.</li>
                            <li>Standardowy eksport listy.</li>
                        </ul>
                    </article>

                    <article id="sec-rej-udostepnien" class="kb-section">
                        <h4>16. Rejestr Udostępnień</h4>
                        <ul>
                            <li>Rejestrowanie celu i podstawy prawnej udostepnienia.</li>
                            <li>Daty potwierdzenia oraz daty faktycznego udostepnienia.</li>
                            <li>Status obslugi wpisu i filtrowanie listy.</li>
                        </ul>
                    </article>

                    <article id="sec-rej-upowaznien" class="kb-section">
                        <h4>17. Rejestr Upoważnień</h4>
                        <ul>
                            <li>Podgląd numerow upowaznien, statusów i zakresu.</li>
                            <li>Dane osoby i przynaleznosc do komorek organizacyjnych.</li>
                            <li>Eksport zbiorczy i wydruki dokumentów.</li>
                        </ul>
                    </article>

                    <article id="sec-dokumenty" class="kb-section">
                        <h4>18. Dokumenty: Generator i Lista</h4>
                        <ul>
                            <li>Wzory dokumentów: tworzenie i utrzymanie szablonów.</li>
                            <li>Wygenerowane dokumenty: lista, filtrowanie, pobieranie.</li>
                            <li>Spojnosc z danymi z rejestrów i procesów.</li>
                        </ul>
                        <div class="kb-shot">
                            <p class="kb-shot-title">Miejsce na zrzut ekranu: generator dokumentów</p>
                            <p>Sugerowany plik: <code>03-generator-dokumentów.png</code></p>
                        </div>
                    </article>

                    <article id="sec-zgloszenia" class="kb-section">
                        <h4>19. Zgłoszenia i obieg informacji</h4>
                        <ul>
                            <li>Formularz: potrzeba kontaktu z IOD.</li>
                            <li>Formularz: zgłoszenie nowego procesu.</li>
                            <li>Formularz: zgłoszenie naruszenia.</li>
                            <li>Widok "Moje zgłoszenia" do śledzenia statusów.</li>
                        </ul>
                    </article>

                    <article id="sec-funkcje-wspolne" class="kb-section">
                        <h4>20. Funkcje wspólne (filtry, export, modal)</h4>
                        <ul>
                            <li>Filtrowanie i sortowanie tabel po kolumnach.</li>
                            <li>Wspólny zestaw eksportu: DOC, XLS, CSV, PDF.</li>
                            <li>Okna modalne zgodne ze standardem globalnym.</li>
                            <li>Powiadomienia po akcjach zapisu/usunięcia/aktualizacji.</li>
                        </ul>
                        <div class="kb-note">W eksportach listowych stosowany jest standard ukladu landscape dla PDF i DOC tam, gdzie tabela wymaga szerokiego ukladu.</div>
                    </article>

                    <article id="sec-dobre-praktyki" class="kb-section">
                        <h4>21. Dobre praktyki pracy</h4>
                        <ul>
                            <li>Przed eksportem ustaw filtry i status, aby raport odzwierciedlal oczekiwany zakres.</li>
                            <li>Regularnie uzupełniaj dane słownikowe i statusowe.</li>
                            <li>Nie usuwaj rekordów bez sprawdzenia powiązań i historii dokumentów.</li>
                            <li>W zgłoszeniach dodawaj komplet informacji, aby skrócić czas obsługi.</li>
                        </ul>
                    </article>

                    <article id="sec-troubleshooting" class="kb-section">
                        <h4>22. Najczęstsze problemy i rozwiązania</h4>
                        <ul>
                            <li>Brak przycisków lub sekcji: sprawdź role i zakres uprawnień.</li>
                            <li>Brak eksportu: sprawdź, czy wymagany kontekst (np. wybór ADO) został zatwierdzony.</li>
                            <li>Nieprawidłowe dane na liście: odśwież filtry i ustawienia sortowania.</li>
                            <li>Brak reakcji po kliknięciu: sprawdź, czy popup/modal nie jest blokowany przez przeglądarkę.</li>
                        </ul>
                        <div class="kb-shot">
                            <p class="kb-shot-title">Miejsce na zrzut ekranu: przyklady komunikatów i błędów</p>
                            <p>Sugerowany plik: <code>04-komunikaty-systemowe.png</code></p>
                        </div>
                    </article>

                    <article id="sec-mapa-widokow" class="kb-section">
                        <h4>23. Mapa widoków ODO i funkcjonalności</h4>
                        <p>Poniżej znajduje się praktyczna mapa najważniejszych widoków ODO wraz z zakresem operacji, jakie użytkownik może wykonać.</p>
                        <table class="kb-view-table">
                            <thead>
                                <tr>
                                    <th>Widok / trasa</th>
                                    <th>Przeznaczenie</th>
                                    <th>Kluczowe operacje</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>m_odo_proces_kafelki_dzial</code></td>
                                    <td>Szybki podgląd procesów po komórkach organizacyjnych.</td>
                                    <td>Wejście do listy procesów, podgląd statusów i przejście do szczegółów procesu.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_proces_lista_index</code></td>
                                    <td>Glowna lista procesów w ukladzie tabelarycznym.</td>
                                    <td>Filtry, wyszukiwanie, sortowanie, add/edit/delete, statusy, eksport i wydruk.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_proces_lista_info/{id}</code><br><code>m_odo_proces_lista_info_extend/{id}</code></td>
                                    <td>Szczegóły procesu oraz dane rozszerzone.</td>
                                    <td>Edycja danych procesu, zarządzanie plikami i umowami powiązanymi z procesem.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_proces_umowy_powierzenia_rejestr*</code></td>
                                    <td>Operacje na umowach powierzenia PDO.</td>
                                    <td>CRUD, zmiana statusu, przypisywanie do procesów, eksporty i podglądy.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_proces_udostepnienia_danych_rejestr*</code></td>
                                    <td>Rejestr udostepnien danych i obsługa statusów.</td>
                                    <td>Dodawanie wpisów, walidacja, zmiana statusu i kontrola dat potwierdzenia.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_proces_upowaznienia_rejestr*</code></td>
                                    <td>Rejestr upowaznien do przetwarzania danych.</td>
                                    <td>Zarządzanie statusem upoważnienia, eksporty i widoki szczegółowe.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_proces_szkolenia_rejestr*</code></td>
                                    <td>Ewidencja szkolen i uczestnikow.</td>
                                    <td>CRUD szkolen, lista uczestnikow, import z CSV, kontrola duplikatow.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_analiza_ryzyka_index</code><br><code>m_odo_ocena_skutkow_index</code></td>
                                    <td>Obsługa analiz ryzyka i ocen skutkow (DPIA).</td>
                                    <td>Tworzenie i edycja analiz, podglądy raportów, eksporty i wydruki.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_rejestr_* </code></td>
                                    <td>Rejestry formalne ODO (czynności, kategorie, umowy, udostępnienia, upoważnienia).</td>
                                    <td>Przeglad i utrzymanie danych rejestrowych, eksport dokumentacyjny.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_dokumenty_wzory</code><br><code>m_odo_dokumenty_lista</code></td>
                                    <td>Generator dokumentów i lista dokumentów wygenerowanych.</td>
                                    <td>Tworzenie dokumentu z danych systemowych, pobieranie i archiwizacja.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_zgl_rejestr_zgloszen</code></td>
                                    <td>Obsługa zgłoszeń użytkownika.</td>
                                    <td>Podgląd statusów zgłoszeń i historia obiegu informacji.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_statystyka_proces_*</code></td>
                                    <td>Wykresy i raporty statystyczne.</td>
                                    <td>Widoki kolowe i zbiorcze, eksporty DOC/PDF/PNG/HTML/Print.</td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="kb-shot">
                            <p class="kb-shot-title">Miejsce na zrzut: mapa menu ODO i aktywne grupy</p>
                            <p>Sugerowany plik: <code>05-mapa-widoków-odo.png</code></p>
                        </div>
                    </article>

                    <article id="sec-komponenty-globalne" class="kb-section">
                        <h4>24. Komponenty globalne - jak używać</h4>
                        <p>Moduł ODO wykorzystuje wspólne komponenty. Prawidłowe użycie zapewnia spójną walidację, styl i zachowanie we wszystkich widokach.</p>
                        <table class="kb-view-table">
                            <thead>
                                <tr>
                                    <th>Komponent</th>
                                    <th>Zastosowanie</th>
                                    <th>Jak używać na widoku</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>global-form-modal</code></td>
                                    <td>Okna modalne add/edit/delete/info/status.</td>
                                    <td>Przekaz id modala, tytul, akcje formularza i pola. Logike zapisu pozostawiasz w kontrolerze.</td>
                                </tr>
                                <tr>
                                    <td><code>view-export-buttons</code></td>
                                    <td>Eksport calego widoku: DOC/PDF/PNG/HTML + wydruk.</td>
                                    <td>Ustaw <code>target-selector</code> i <code>filename-prefix</code>; dla szerokich tabel włącz <code>doc-landscape</code>.</td>
                                </tr>
                                <tr>
                                    <td><code>view-graph-export-buttons</code></td>
                                    <td>Eksport widoków grafowych (np. drzewo struktury).</td>
                                    <td>Użyj na widokach z grafami i ustaw selektor kontenera z grafem.</td>
                                </tr>
                                <tr>
                                    <td><code>ajax-crud-table</code></td>
                                    <td>Globalna tabela DataGrid (index + CRUD + AJAX).</td>
                                    <td>Konfigurujesz kolumny, filtry, akcje, endpoint danych i endpointy operacji.</td>
                                </tr>
                                <tr>
                                    <td><code>ajax-search-box</code> + <code>search-columns-selector</code></td>
                                    <td>Wyszukiwanie tekstowe i wybor kolumn przeszukiwania.</td>
                                    <td>Kolumny ukryte nie są przeszukiwane; licznik pokazuje liczbe aktywnych kolumn.</td>
                                </tr>
                                <tr>
                                    <td><code>column-visibility-selector</code></td>
                                    <td>Wlaczanie/ukrywanie kolumn i ich kolejnosc.</td>
                                    <td>Kolumna Lp jest stale pierwsza, Akcje stale ostatnia.</td>
                                </tr>
                                <tr>
                                    <td><code>ajax-filters</code> + <code>ajax-filters-status-indicator</code></td>
                                    <td>Filtry słownikowe i status ich aktywności.</td>
                                    <td>Dla zdefiniowanych filtrów wyświetla status i przycisk czyszczenia filtrów.</td>
                                </tr>
                                <tr>
                                    <td><code>ajax-pagination-controls</code> + <code>records-per-page-selector</code> + <code>ajax-records-count</code></td>
                                    <td>Paginacja i informacje o rekordach.</td>
                                    <td>Pokazuje liczbe rekordów po filtrach oraz liczbe wszystkich rekordów.</td>
                                </tr>
                                <tr>
                                    <td><code>view-close-button</code></td>
                                    <td>Zamykanie aktualnego widoku i powrót do nadrzednego.</td>
                                    <td>Dodawaj w prawym gornym rogu sekcji z akcjami.</td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="kb-note">Komponenty powinny być stosowane bez zmiany logiki biznesowej. Najpierw przepiecie stylu i walidacji, potem ewentualna refaktoryzacja danych.</div>
                    </article>

                    <article id="sec-scenariusze-pracy" class="kb-section">
                        <h4>25. Scenariusze pracy krok po kroku</h4>
                        <div class="kb-step"><strong>Scenariusz A - Dodanie procesu:</strong> wejdź na <code>m_odo_proces_lista_index</code>, kliknij add, uzupełnij pola wymagane, zapisz, sprawdź komunikat i podświetlenie rekordu.</div>
                        <div class="kb-step"><strong>Scenariusz B - Zmiana statusu:</strong> na liście kliknij status, zweryfikuj dane informacyjne w modalu, zatwierdź akcję i sprawdź powiadomienie.</div>
                        <div class="kb-step"><strong>Scenariusz C - Eksport raportu:</strong> ustaw filtry, wybierz kolumny, uruchom eksport PDF/DOC i porownaj, czy plik odzwierciedla aktualny widok.</div>
                        <div class="kb-step"><strong>Scenariusz D - Obsługa plików:</strong> w szczegółach procesu dodaj załącznik, sprawdź walidację pola pliku, potwierdź widoczność pliku w sekcji "Załączniki".</div>
                        <div class="kb-step"><strong>Scenariusz E - Rejestr czynności:</strong> wybierz ADO i zatwierdź wybór, wygeneruj eksport i sprawdź podział sekcji na strony.</div>
                        <div class="kb-shot-grid">
                            <div class="kb-shot">
                                <p class="kb-shot-title">Miejsce na zrzut: scenariusz A</p>
                                <p>Sugerowany plik: <code>06-scenariusz-dodanie-procesu.png</code></p>
                            </div>
                            <div class="kb-shot">
                                <p class="kb-shot-title">Miejsce na zrzut: scenariusz B</p>
                                <p>Sugerowany plik: <code>07-scenariusz-zmiana-statusu.png</code></p>
                            </div>
                            <div class="kb-shot">
                                <p class="kb-shot-title">Miejsce na zrzut: scenariusz C</p>
                                <p>Sugerowany plik: <code>08-scenariusz-eksport.png</code></p>
                            </div>
                            <div class="kb-shot">
                                <p class="kb-shot-title">Miejsce na zrzut: scenariusz D</p>
                                <p>Sugerowany plik: <code>09-scenariusz-załączniki.png</code></p>
                            </div>
                        </div>
                    </article>

                    <article id="sec-screenshot-plan" class="kb-section">
                        <h4>26. Lista zrzutów ekranowych do uzupełnienia</h4>
                        <ul>
                            <li>Widok logowania i komunikaty walidacji.</li>
                            <li>Panel główny ODO po zalogowaniu.</li>
                            <li>Procesy lista: filtry, akcje i statusy.</li>
                            <li>Szczegóły procesu i sekcja załączników.</li>
                            <li>Modal add/edit/delete/status/info zgodny ze standardem.</li>
                            <li>Rejestr czynności: wybór ADO i eksport.</li>
                            <li>Dokumenty: wzory i lista dokumentów.</li>
                            <li>Statystyki: wykresy i tabela porownawcza.</li>
                            <li>Zgłoszenia: formularze i lista "Moje zgłoszenia".</li>
                        </ul>
                        <div class="kb-note">Każdy screenshot powinien zawierać krótki podpis: co użytkownik robi, jaki jest efekt i gdzie to widać na ekranie.</div>
                    </article>

                    <article id="sec-dashboard-aktualizacje" class="kb-section">
                        <h4>27. Aktualizacje dashboardu m_odo</h4>
                        <p>Panel główny modułu ODO został rozbudowany o aktualne widoki operacyjne i statystyki zależne od uprawnień użytkownika.</p>
                        <ul>
                            <li>Aktywny panel główny działa pod trasą <code>/m_odo</code> (stary ekran pozostaje pod <code>/m_odo_old</code>).</li>
                            <li>Kafelki KPI są liczone zgodnie z zakresem dostępu użytkownika (całość danych / dane wydziałowe / dane własne).</li>
                            <li>W sekcji <strong>Najnowsze procesy</strong> dodano kolumnę <strong>Kompletność</strong> (procent uzupełnienia procesu).</li>
                            <li>W kolumnie <strong>Status</strong> zastosowano infografiki zamiast tekstów, aby szybciej identyfikować stan procesu.</li>
                            <li>Kliknięcie w rekord na liście najnowszych procesów otwiera widok szczegółów wskazanego procesu.</li>
                        </ul>
                        <div class="kb-note">
                            Zakres danych na dashboardzie jest automatycznie filtrowany przez uprawnienia. Użytkownik bez uprawnień globalnych nie widzi agregacji dla całej organizacji.
                        </div>
                    </article>

                    <article id="sec-dashboard-nawigacja" class="kb-section">
                        <h4>28. Nawigacja z dashboardu do list procesów</h4>
                        <p>Kafelki dashboardu (np. <strong>Procesy aktywne</strong>, <strong>Procesy nieaktywne</strong>) prowadzą do list procesów z odpowiednim filtrem.</p>
                        <ul>
                            <li>Przejście z kafelka ustawia filtr zgodny z wybraną metryką.</li>
                            <li>Dla wejść z dashboardu działa bezpieczny warunek <code>from_dashboard=1</code>, który wymusza przejście na właściwą listę procesów.</li>
                            <li>Dotychczasowa logika „ostatnio otwarty widok” pozostaje zachowana dla innych ścieżek wejścia.</li>
                        </ul>
                        <p>Dzięki temu nie zaburzamy istniejących przepływów pracy, a jednocześnie kliknięcia z dashboardu zawsze kierują do poprawnego widoku listy.</p>
                    </article>
                </section>
            </div>
        </div>
    </div>

@endsection

@section('menu')
    @include('sites.odo.menu_odo')
@endsection

@section('navbar')
    @include('sites.odo._navbar_odo')

    <i class="fas fa-chevron-right separator"></i>
    <span class="navbar_navigate" title="Aktywna Strona">
        Baza Wiedzy
    </span>
@endsection

@push('scripts')
    <x-knowledge-base.toc-sync-script
        search-input-id="kbSearchInput"
        search-info-id="kbSearchInfo"
        toc-link-selector=".kb-toc-link"
        section-selector=".kb-section"
    />
@endpush