BartekGit/magico.prototype
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Faktury zakupowe prototyp

Browse Source
This commit is contained in:
Bartek
2026-02-18 23:47:37 +01:00
parent c9845b2df9
commit bb114ced7b
1 changed files with 654 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

654
prototype/invoice/app-purchase-list.php Normal file
View File

@@ -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>