diff --git a/prototype/invoice/app-purchase-list.php b/prototype/invoice/app-purchase-list.php
new file mode 100644
index 0000000..162d0b8
--- /dev/null
+++ b/prototype/invoice/app-purchase-list.php
@@ -0,0 +1,654 @@
+<?php
+$enablePrototypeComments = true;
+include '../../header-invoice.php';
+?>
+
+<div class="container-fluid flex-grow-1 container-p-y">
+
+    <h4 class="py-3 mb-4">
+        <span class="text-muted fw-light">Zakupy /</span> Faktury zakupowe
+    </h4>
+
+    <div class="d-flex mb-3 gap-2 align-items-center flex-nowrap overflow-auto pt-2 pb-2">
+
+        <a href="#" class="btn btn-primary text-nowrap">
+            <i class="bx bx-list-ul me-1"></i> Wszystkie
+        </a>
+        <a href="#" class="btn btn-label-primary text-nowrap">
+            <i class="bx bx-check-circle me-1"></i> Zapłacone
+        </a>
+        <a href="#" class="btn btn-label-primary text-nowrap">
+            <i class="bx bx-error-circle me-1"></i> Do zapłaty
+        </a>
+
+        <div class="vr mx-2"></div>
+
+        <a href="#" class="btn btn-label-secondary text-nowrap position-relative overflow-visible me-3">
+            Tauron
+            <span
+                class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger border border-light p-1"
+                style="font-size: 0.6rem;">
+                2
+            </span>
+        </a>
+
+        <a href="#" class="btn btn-label-secondary text-nowrap position-relative overflow-visible me-3">
+            DrutexPol
+            <span
+                class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger border border-light p-1"
+                style="font-size: 0.6rem;">
+                4
+            </span>
+        </a>
+
+        <button class="btn btn-icon btn-label-secondary" type="button" data-bs-toggle="modal"
+            data-bs-target="#manageTabsModal" title="Zarządzaj zakładkami">
+            <i class="bx bx-cog"></i>
+        </button>
+    </div>
+
+    <div class="row">
+
+        <div class="col-lg-9 transition-width" id="invoice-list-col">
+            <div class="card">
+                <div
+                    class="card-header border-bottom d-flex justify-content-between align-items-center flex-wrap gap-2">
+
+                    <div class="me-2">
+                        <div class="input-group input-group-merge">
+                            <span class="input-group-text" id="basic-addon-search31"><i class="bx bx-search"></i></span>
+                            <input type="text" class="form-control" placeholder="Szukaj po numerze, dostawcy..."
+                                aria-label="Search..." aria-describedby="basic-addon-search31">
+                        </div>
+                    </div>
+
+                    <div class="d-flex align-items-center gap-2">
+
+                        <div class="dropdown">
+                            <button type="button" class="btn btn-label-secondary p-2" data-bs-toggle="dropdown"
+                                aria-expanded="false">
+                                <i class="bx bx-cog"></i>
+                            </button>
+
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <li>
+                                    <h6 class="dropdown-header">Widoczność kolumn</h6>
+                                </li>
+                                <li>
+                                    <div class="dropdown-item">
+                                        <div class="form-check"><input class="form-check-input" type="checkbox" checked>
+                                            <label class="form-check-label">Numer dokumentu</label>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li>
+                                    <div class="dropdown-item">
+                                        <div class="form-check"><input class="form-check-input" type="checkbox" checked>
+                                            <label class="form-check-label">Dostawca</label>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li>
+                                    <div class="dropdown-item">
+                                        <div class="form-check"><input class="form-check-input" type="checkbox" checked>
+                                            <label class="form-check-label">Data zakupu</label>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li>
+                                    <div class="dropdown-item">
+                                        <div class="form-check"><input class="form-check-input" type="checkbox" checked>
+                                            <label class="form-check-label">Termin płatności</label>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li>
+                                    <div class="dropdown-item">
+                                        <div class="form-check"><input class="form-check-input" type="checkbox" checked>
+                                            <label class="form-check-label">Kwota Brutto</label>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li>
+                                    <div class="dropdown-item">
+                                        <div class="form-check"><input class="form-check-input" type="checkbox" checked>
+                                            <label class="form-check-label">Status</label>
+                                        </div>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <button type="button" class="btn btn-label-secondary d-flex align-items-center gap-2"
+                            id="filter-toggle-btn">
+                            <i class="bx bx-filter-alt"></i> Filtry
+                        </button>
+
+                        <select class="form-select" style="width: 80px;">
+                            <option value="40">40</option>
+                            <option value="60">60</option>
+                            <option value="100">100</option>
+                        </select>
+
+                        <button class="btn btn-label-secondary me-2">
+                            <i class="bx bx-sync me-1"></i> <span class="d-none d-sm-inline-block">Synchronizuj z
+                                KSeF</span>
+                        </button>
+
+                        <div class="btn-group">
+                            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
+                                aria-expanded="false">
+                                <i class="bx bx-plus me-1"></i> Dodaj koszt
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <li>
+                                    <a class="dropdown-item" href="app-purchase-add.php">
+                                        <i class="bx bx-file-plus me-2"></i> Dodaj fakturę
+                                    </a>
+                                </li>
+                                <li>
+                                    <button class="dropdown-item" type="button" data-bs-toggle="modal"
+                                        data-bs-target="#quickAddModal">
+                                        <i class="bx bx-lightning me-2"></i> Szybkie dodawanie
+                                    </button>
+                                </li>
+                                <li>
+                                    <hr class="dropdown-divider">
+                                </li>
+                                <li>
+                                    <a class="dropdown-item" href="app-purchase-ocr.php">
+                                        <i class="bx bx-scan me-2"></i> Import masowy OCR
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Modal Szybkie dodawanie (Placeholder) -->
+                <div class="modal fade" id="quickAddModal" tabindex="-1" aria-hidden="true">
+                    <div class="modal-dialog modal-dialog-centered" role="document">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title">Szybkie dodawanie kosztu</h5>
+                                <button type="button" class="btn-close" data-bs-dismiss="modal"
+                                    aria-label="Close"></button>
+                            </div>
+                            <div class="modal-body">
+                                <div class="alert alert-label-info">
+                                    <i class="bx bx-info-circle me-1"></i> Tutaj pojawi się formularz szybkiego
+                                    dodawania.
+                                </div>
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-outline-secondary"
+                                    data-bs-dismiss="modal">Anuluj</button>
+                                <button type="button" class="btn btn-primary">Zapisz</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="table-responsive text-nowrap" style="min-height: 400px;">
+                    <table class="table table-hover table-striped align-middle">
+                        <thead class="table-light">
+                            <tr>
+                                <th style="width: 50px;">#</th>
+                                <th>Nr dokumentu</th>
+                                <th>Dostawca</th>
+                                <th>Data zakupu</th>
+                                <th>Termin</th>
+                                <th class="text-end">Kwota Brutto</th>
+                                <th class="text-center">Status</th>
+                                <th class="text-center">Akcje</th>
+                            </tr>
+                        </thead>
+                        <tbody class="table-border-bottom-0">
+
+                            <tr>
+                                <td>1</td>
+                                <td>
+                                    <span class="fw-medium">FZ/2026/02/001</span>
+                                    <br><small class="text-muted">Hosting i domeny</small>
+                                </td>
+                                <td>
+                                    <span class="text-heading text-truncate fw-medium">OVH Sp. z o.o.</span>
+                                </td>
+                                <td>2026-02-15</td>
+                                <td>2026-02-22</td>
+                                <td class="text-end">123,00 zł</td>
+                                <td class="text-center">
+                                    <span class="badge bg-label-success">Opłacona</span>
+                                </td>
+                                <td class="text-center">
+                                    <div class="d-flex justify-content-center align-items-center gap-1">
+                                        <div class="dropdown">
+                                            <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
+                                                data-bs-toggle="dropdown">
+                                                <i class="bx bx-dots-vertical-rounded"></i>
+                                            </button>
+                                            <div class="dropdown-menu dropdown-menu-end">
+                                                <a class="dropdown-item" href="javascript:void(0);"><i
+                                                        class="bx bx-show me-1"></i> Podgląd</a>
+                                                <a class="dropdown-item" href="javascript:void(0);"><i
+                                                        class="bx bx-download me-1"></i> Pobierz skan</a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="javascript:void(0);"><i
+                                                        class="bx bx-edit-alt me-1"></i> Edytuj</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+
+                            <tr>
+                                <td>2</td>
+                                <td>
+                                    <span class="fw-medium">FV/TAURON/22/05</span>
+                                    <br><small class="text-muted">Energia elektryczna</small>
+                                </td>
+                                <td>
+                                    <span class="text-heading text-truncate fw-medium">Tauron Polska</span>
+                                </td>
+                                <td>2026-02-10</td>
+                                <td><span class="text-danger">2026-02-24</span></td>
+                                <td class="text-end">1 450,20 zł</td>
+                                <td class="text-center">
+                                    <span class="badge bg-label-danger">Do zapłaty</span>
+                                </td>
+                                <td class="text-center">
+                                    <div class="d-flex justify-content-center align-items-center gap-1">
+                                        <button class="btn btn-sm btn-icon btn-label-success" data-bs-toggle="tooltip"
+                                            title="Oznacz jako opłaconą">
+                                            <i class="bx bx-check"></i>
+                                        </button>
+
+                                        <div class="dropdown">
+                                            <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
+                                                data-bs-toggle="dropdown">
+                                                <i class="bx bx-dots-vertical-rounded"></i>
+                                            </button>
+                                            <div class="dropdown-menu dropdown-menu-end">
+                                                <a class="dropdown-item" href="javascript:void(0);"><i
+                                                        class="bx bx-money me-1"></i> Dodaj płatność</a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="javascript:void(0);"><i
+                                                        class="bx bx-show me-1"></i> Podgląd</a>
+                                                <a class="dropdown-item" href="javascript:void(0);"><i
+                                                        class="bx bx-download me-1"></i> Pobierz skan</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+
+                            <tr>
+                                <td>3</td>
+                                <td>
+                                    <span class="fw-medium">102/K/2026</span>
+                                    <br><small class="text-muted">Materiały biurowe</small>
+                                </td>
+                                <td>
+                                    <span class="text-heading text-truncate fw-medium">Papierniczy S.A.</span>
+                                </td>
+                                <td>2026-01-15</td>
+                                <td>
+                                    <span class="text-danger">2026-01-29</span>
+                                </td>
+                                <td class="text-end ">320,00 zł</td>
+                                <td class="text-center">
+                                    <span class="badge bg-label-danger">Do zapłaty</span>
+                                </td>
+                                <td class="text-center">
+                                    <div class="d-flex justify-content-center align-items-center gap-1">
+                                        <button class="btn btn-sm btn-icon btn-label-success" data-bs-toggle="tooltip"
+                                            title="Oznacz jako opłaconą">
+                                            <i class="bx bx-check"></i>
+                                        </button>
+                                        <div class="dropdown">
+                                            <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
+                                                data-bs-toggle="dropdown">
+                                                <i class="bx bx-dots-vertical-rounded"></i>
+                                            </button>
+                                            <div class="dropdown-menu dropdown-menu-end">
+                                                <a class="dropdown-item" href="javascript:void(0);"><i
+                                                        class="bx bx-money me-1"></i> Dodaj płatność</a>
+                                                <a class="dropdown-item" href="javascript:void(0);"><i
+                                                        class="bx bx-show me-1"></i> Podgląd</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+
+                            <tr>
+                                <td>4</td>
+                                <td>
+                                    <span class="fw-medium">FV/22/09/2026</span>
+                                    <br><small class="text-muted">Usługi programistyczne</small>
+                                </td>
+                                <td>
+                                    <span class="text-heading text-truncate fw-medium">DevHouse Sp. z o.o.</span>
+                                </td>
+                                <td>2026-02-01</td>
+                                <td>2026-02-15</td>
+                                <td class="text-end">
+                                    <span class="text-decoration-line-through text-muted"
+                                        style="font-size:0.8em">5000,00 zł</span><br>
+                                    <span class="text-warning">2 500,00 zł</span>
+                                </td>
+                                <td class="text-center">
+                                    <span class="badge bg-label-warning">Częściowo</span>
+                                </td>
+                                <td class="text-center">
+                                    <div class="d-flex justify-content-center align-items-center gap-1">
+                                        <div class="dropdown">
+                                            <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
+                                                data-bs-toggle="dropdown">
+                                                <i class="bx bx-dots-vertical-rounded"></i>
+                                            </button>
+                                            <div class="dropdown-menu dropdown-menu-end">
+                                                <a class="dropdown-item" href="javascript:void(0);"><i
+                                                        class="bx bx-money me-1"></i> Rozlicz resztę</a>
+                                                <a class="dropdown-item" href="javascript:void(0);"><i
+                                                        class="bx bx-history me-1"></i> Historia wpłat</a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="javascript:void(0);"><i
+                                                        class="bx bx-show me-1"></i> Podgląd</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+
+                            <tr class="bg-label-secondary">
+                                <td colspan="5" class="text-end fw-bold">Suma (PLN):</td>
+                                <td class="text-end fw-bold">6 893,20 zł</td>
+                                <td colspan="2"></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="card-footer d-flex justify-content-center border-top">
+                    <nav aria-label="Page navigation">
+                        <ul class="pagination pagination-sm mb-0">
+                            <li class="page-item prev"><a class="page-link" href="javascript:void(0);"><i
+                                        class="tf-icon bx bx-chevron-left"></i></a></li>
+                            <li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
+                            <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
+                            <li class="page-item next"><a class="page-link" href="javascript:void(0);"><i
+                                        class="tf-icon bx bx-chevron-right"></i></a></li>
+                        </ul>
+                    </nav>
+                </div>
+
+            </div>
+        </div>
+
+        <div class="col-lg-3" id="invoice-filters-col">
+            <div class="card sticky-top" style="top: 20px;">
+                <div class="card-header border-bottom">
+                    <h5 class="card-title mb-0">Filtry</h5>
+                </div>
+                <div class="card-body pt-4">
+
+                    <div class="mb-3">
+                        <label class="form-label">Dostawca</label>
+                        <select class="select2 form-select" data-allow-clear="true" placeholder="Wybierz dostawcę">
+                            <option value="">Wszyscy</option>
+                            <option value="1">Tauron Polska</option>
+                            <option value="2">Orange Polska</option>
+                            <option value="3">Hurtownia Biurowa</option>
+                            <option value="4">Google Ireland</option>
+                        </select>
+                    </div>
+
+                    <div class="mb-3">
+                        <label class="form-label">Status płatności</label>
+                        <div class="d-flex flex-column gap-2">
+                            <div class="form-check">
+                                <input name="status-radio" class="form-check-input" type="radio" value="" id="statusAll"
+                                    checked>
+                                <label class="form-check-label" for="statusAll"> Wszystkie </label>
+                            </div>
+                            <div class="form-check">
+                                <input name="status-radio" class="form-check-input" type="radio" value=""
+                                    id="statusUnpaid">
+                                <label class="form-check-label" for="statusUnpaid"> Do zapłaty </label>
+                            </div>
+                            <div class="form-check">
+                                <input name="status-radio" class="form-check-input" type="radio" value=""
+                                    id="statusPaid">
+                                <label class="form-check-label" for="statusPaid"> Opłacone </label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label class="form-label">Data zakupu</label>
+                        <input type="text" class="form-control flatpickr-range" placeholder="Zakres dat" />
+                    </div>
+
+                    <div class="mb-3">
+                        <label class="form-label">Termin płatności</label>
+                        <div class="d-flex flex-column gap-2">
+                            <div class="form-check">
+                                <input name="term-radio" class="form-check-input" type="radio" value="" id="termAll"
+                                    checked>
+                                <label class="form-check-label" for="termAll"> Wszystkie </label>
+                            </div>
+                            <div class="form-check">
+                                <input name="term-radio" class="form-check-input" type="radio" value=""
+                                    id="termOverdue">
+                                <label class="form-check-label text-danger" for="termOverdue"> Przeterminowane </label>
+                            </div>
+                            <div class="form-check">
+                                <input name="term-radio" class="form-check-input" type="radio" value=""
+                                    id="termUpcoming">
+                                <label class="form-check-label" for="termUpcoming"> Nadchodzące (7 dni) </label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="d-grid gap-2">
+                        <button class="btn btn-primary">Filtruj</button>
+                        <button class="btn btn-outline-secondary">Wyczyść</button>
+                    </div>
+
+                    <div class="mt-4 pt-3 border-top text-center">
+                        <small class="text-muted">Zapisz obecne filtry jako:</small>
+                        <button class="btn btn-sm btn-label-primary w-100 mt-2" data-bs-toggle="modal"
+                            data-bs-target="#saveViewModal">
+                            <i class="bx bx-save me-1"></i> Nowy widok (Tab)
+                        </button>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+<!-- Modale -->
+<div class="modal fade" id="saveViewModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Zapisz nowy widok</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="alert alert-label-info mb-3 d-flex">
+                    <i class="bx bx-info-circle me-2 fs-4"></i>
+                    <span>Bieżące ustawienia filtrów (Dostawca, Status, Termin) zostaną zapisane jako nowa zakładka na
+                        pasku powyżej.</span>
+                </div>
+                <div class="mb-3">
+                    <label for="viewName" class="form-label">Nazwa widoku (zakładki)</label>
+                    <input type="text" id="viewName" class="form-control" placeholder="np. Tauron (Do zapłaty)">
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Anuluj</button>
+                <button type="button" class="btn btn-primary">Zapisz</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="manageTabsModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Zarządzaj zakładkami</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="alert alert-label-info mb-3 d-flex">
+                    <i class="bx bx-info-circle me-2 fs-4"></i>
+                    <span>Przeciągnij, aby zmienić kolejność zakładek. Możesz też zmienić ich nazwę lub je
+                        usunąć.</span>
+                </div>
+
+                <ul class="list-group list-group-flush" id="tabs-sortable-list">
+                    <!-- Statyczne zakładki (nieedytowalne) -->
+                    <li class="list-group-item d-flex align-items-center justify-content-between static">
+                        <div class="d-flex align-items-center">
+                            <i class="bx bx-lock-alt text-muted me-2" title="Zakładka systemowa"></i>
+                            <span class="fw-medium">Wszystkie</span>
+                        </div>
+                    </li>
+                    <li class="list-group-item d-flex align-items-center justify-content-between static">
+                        <div class="d-flex align-items-center">
+                            <i class="bx bx-lock-alt text-muted me-2" title="Zakładka systemowa"></i>
+                            <span class="fw-medium">Zapłacone</span>
+                        </div>
+                    </li>
+                    <li class="list-group-item d-flex align-items-center justify-content-between static">
+                        <div class="d-flex align-items-center">
+                            <i class="bx bx-lock-alt text-muted me-2" title="Zakładka systemowa"></i>
+                            <span class="fw-medium">Do zapłaty</span>
+                        </div>
+                    </li>
+
+                    <!-- Zakładki użytkownika (edytowalne) -->
+                    <li class="list-group-item d-flex align-items-center justify-content-between" data-id="1">
+                        <div class="d-flex align-items-center gap-2">
+                            <div class="drag-handle cursor-move text-muted">
+                                <i class="bx bx-grid-vertical"></i>
+                            </div>
+                            <input type="text" class="form-control form-control-sm" value="Tauron"
+                                style="max-width: 200px;">
+                        </div>
+                        <div class="d-flex align-items-center gap-1">
+
+                            <button class="btn btn-icon btn-sm btn-label-danger"><i class="bx bx-trash"></i></button>
+                        </div>
+                    </li>
+
+                    <li class="list-group-item d-flex align-items-center justify-content-between" data-id="2">
+                        <div class="d-flex align-items-center gap-2">
+                            <div class="drag-handle cursor-move text-muted">
+                                <i class="bx bx-grid-vertical"></i>
+                            </div>
+                            <input type="text" class="form-control form-control-sm" value="DrutexPol"
+                                style="max-width: 200px;">
+                        </div>
+                        <div class="d-flex align-items-center gap-1">
+
+                            <button class="btn btn-icon btn-sm btn-label-danger"><i class="bx bx-trash"></i></button>
+                        </div>
+                    </li>
+                </ul>
+
+                <button class="btn btn-outline-primary w-100 mt-3 dashed-border">
+                    <i class="bx bx-plus me-1"></i> Dodaj bieżący widok jako zakładkę
+                </button>
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Anuluj</button>
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Zapisz zmiany</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="../../assets/vendor/libs/sortablejs/sortable.js"></script>
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        var el = document.getElementById('tabs-sortable-list');
+        if (el && typeof Sortable !== 'undefined') {
+            Sortable.create(el, {
+                handle: '.drag-handle',
+                animation: 150,
+                ghostClass: 'bg-light',
+                onMove: function (evt) {
+                    return !evt.related.classList.contains('static');
+                }
+            });
+        }
+    });
+</script>
+
+
+<?php include '../../footer.php'; ?>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        // Obsługa przycisku filtrów (pokaz/ukryj sidebar) - PIERWSZA, żeby działała na pewno
+        const filterBtn = document.getElementById('filter-toggle-btn');
+        const filtersCol = document.getElementById('invoice-filters-col');
+        const listCol = document.getElementById('invoice-list-col');
+
+        if (filterBtn && filtersCol && listCol) {
+            filterBtn.addEventListener('click', function (e) {
+                e.preventDefault();
+                // 1. Przełącz widoczność kolumny filtrów
+                filtersCol.classList.toggle('d-none');
+
+                // 2. Dostosuj szerokość kolumny listy
+                if (filtersCol.classList.contains('d-none')) {
+                    // Jeśli filtry ukryte -> lista na pełną szerokość
+                    listCol.classList.remove('col-lg-9');
+                    listCol.classList.add('col-12');
+                } else {
+                    // Jeśli filtry widoczne -> lista na 9/12 szerokości
+                    listCol.classList.remove('col-12');
+                    listCol.classList.add('col-lg-9');
+                }
+            });
+        }
+
+        // Inicjalizacja Select2 (zabezpieczona)
+        if (typeof $ !== 'undefined' && $('.select2').length) {
+            $('.select2').select2({
+                minimumResultsForSearch: 5
+            });
+        }
+
+        // Inicjalizacja Flatpickr (zabezpieczona)
+        if (typeof flatpickr !== 'undefined') {
+            document.querySelectorAll('.flatpickr-range').forEach(function (element) {
+                flatpickr(element, {
+                    mode: 'range',
+                    dateFormat: 'Y-m-d'
+                });
+            });
+        }
+
+        // Tooltipy (zabezpieczone)
+        if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+                return new bootstrap.Tooltip(tooltipTriggerEl)
+            });
+        }
+    });
+</script>
+
+</body>
+
+</html>
\ No newline at end of file