Widok Kalendarza płatności
This commit is contained in:
@@ -22,22 +22,24 @@ include '../../header-invoice.php';
|
||||
|
||||
<div class="row mb-4">
|
||||
|
||||
<div class="col-lg-2 col-md-12 mb-3 mb-lg-0">
|
||||
<div class="card h-100 bg-label-secondary border-0">
|
||||
<!-- Left Column: Seller & Buyer -->
|
||||
<div class="col-lg-5 col-md-12 mb-3 mb-lg-0">
|
||||
|
||||
<!-- Buyer Card -->
|
||||
<div class="card bg-label-secondary border-0 mb-3">
|
||||
<div class="card-body p-3 d-flex flex-column justify-content-center text-center">
|
||||
<div class="avatar mx-auto mb-2">
|
||||
<span class="avatar-initial rounded bg-white text-secondary"><i
|
||||
class="bx bx-building-house fs-4"></i></span>
|
||||
</div>
|
||||
<h6 class="card-title mb-1 text-nowrap">Nabywca (My)</h6>
|
||||
<h6 class="card-title mb-1 text-nowrap">Nabywca</h6>
|
||||
<small class="d-block fw-bold text-truncate">Magico Software</small>
|
||||
<small class="text-muted text-truncate">NIP: 8652582386</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-5 col-md-6 mb-3 mb-lg-0">
|
||||
<div class="card h-100">
|
||||
<!-- Seller Card -->
|
||||
<div class="card mb-3">
|
||||
<div class="card-header border-bottom py-3">
|
||||
<h6 class="card-title m-0"><i class="bx bx-store-alt me-2"></i>Sprzedawca</h6>
|
||||
</div>
|
||||
@@ -59,15 +61,32 @@ include '../../header-invoice.php';
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-5 col-12">
|
||||
<!-- Right Column: Document Data -->
|
||||
<div class="col-lg-7 col-12">
|
||||
<div class="card h-100">
|
||||
<div class="card-header border-bottom py-3">
|
||||
<h6 class="card-title m-0"><i class="bx bx-file me-2"></i>Dane Dokumentu</h6>
|
||||
</div>
|
||||
<div class="card-body pt-3">
|
||||
|
||||
<!-- OCR Dropzone -->
|
||||
<div class="dropzone p-4 border-dashed border-2 rounded text-center mb-3 d-flex flex-column justify-content-center align-items-center"
|
||||
style="border-color: #d9dee3; background-color: #f8f9fa; cursor: pointer; transition: 0.2s;"
|
||||
onmouseover="this.style.borderColor='#696cff'; this.style.backgroundColor='#f0f2ff';"
|
||||
onmouseout="this.style.borderColor='#d9dee3'; this.style.backgroundColor='#f8f9fa';">
|
||||
<i class="bx bx-cloud-upload fs-2 text-muted mb-2"></i>
|
||||
<span class="text-muted fw-bold">Przeciągnij fakturę tutaj lub kliknij</span>
|
||||
<span class="small text-muted">(PDF, JPG, PNG)</span>
|
||||
</div>
|
||||
<button type="button" class="btn btn-label-primary w-100 mb-4" id="btn-ocr-read-page">
|
||||
<i class="bx bx-scan me-1"></i> Odczytaj dane z pliku (OCR)
|
||||
</button>
|
||||
|
||||
<!-- KSeF Info Block -->
|
||||
<div class="mb-4 p-3 bg-label-secondary rounded border-dashed border-2">
|
||||
<div class="d-flex align-items-center mb-2 justify-content-between">
|
||||
@@ -89,6 +108,8 @@ include '../../header-invoice.php';
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d-flex gap-2 mb-2">
|
||||
<button class="btn btn-sm btn-outline-primary w-100"><i
|
||||
class="bx bx-download me-1"></i>PDF</button>
|
||||
<button class="btn btn-sm btn-outline-primary w-100"><i
|
||||
class="bx bx-download me-1"></i>UPO</button>
|
||||
<button class="btn btn-sm btn-outline-secondary w-100"><i
|
||||
@@ -394,6 +415,117 @@ include '../../header-invoice.php';
|
||||
paidInput.focus();
|
||||
});
|
||||
}
|
||||
|
||||
// --- OCR Simulation Logic for Page ---
|
||||
const ocrBtnPage = document.getElementById('btn-ocr-read-page');
|
||||
if (ocrBtnPage) {
|
||||
ocrBtnPage.addEventListener('click', function () {
|
||||
const btn = this;
|
||||
|
||||
// 1. Loader
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Przetwarzanie obrazu...';
|
||||
|
||||
// 2. Delay
|
||||
setTimeout(() => {
|
||||
// 3. Fill Data
|
||||
|
||||
// Vendor (Find the card body with select placeholder)
|
||||
const vendorCardBody = document.querySelector('.card.shadow-none .card-body');
|
||||
if (vendorCardBody) {
|
||||
vendorCardBody.innerHTML = `
|
||||
<div>
|
||||
<h6 class="mb-0">Tauron Polska Energia S.A.</h6>
|
||||
<small class="text-muted d-block">ul. Ks. Piotra Ściegiennego 3</small>
|
||||
<small class="text-muted d-block">40-114 Katowice</small>
|
||||
<small class="text-muted d-block">NIP: 551-102-12-34</small>
|
||||
</div>
|
||||
<button class="btn btn-outline-secondary btn-sm position-absolute end-0 top-0 m-2"><i class="bx bx-x"></i></button>
|
||||
`;
|
||||
}
|
||||
|
||||
// Invoice Data
|
||||
const invNum = document.querySelector('input[placeholder="np. FV/2026/02/105"]');
|
||||
if (invNum) invNum.value = 'FV/KAT/2026/02/552';
|
||||
|
||||
const dates = document.querySelectorAll('.date-picker');
|
||||
if (dates.length >= 3) {
|
||||
dates[0].value = '2026-02-15'; // Purchase
|
||||
dates[1].value = '2026-02-15'; // Issue
|
||||
dates[2].value = '2026-02-29'; // Payment
|
||||
}
|
||||
|
||||
// Items - Row 1
|
||||
const row1 = document.querySelector('table tbody tr:first-child');
|
||||
if (row1) {
|
||||
const inputs = row1.querySelectorAll('input');
|
||||
if (inputs.length >= 5) { // Name, Code, Qty, Price, VAT (select is not input)
|
||||
inputs[0].value = 'Energia elektryczna - taryfa C11'; // Name
|
||||
inputs[1].value = 'PKW-2026'; // Code
|
||||
// inputs[2] is select in some tables, here it is unit select (col 4, idx 3)
|
||||
// wait, let's look at table structure.
|
||||
// td 2: input name [0]
|
||||
// td 3: input code [1]
|
||||
// td 4: select unit
|
||||
// td 5: input qty [2]
|
||||
// td 6: input price [3]
|
||||
|
||||
// Let's use specific selector for safety
|
||||
}
|
||||
|
||||
const nameInput = row1.querySelector('input[placeholder="Np. Usługa księgowa, Paliwo..."]');
|
||||
if (nameInput) nameInput.value = 'Energia elektryczna - taryfa C11';
|
||||
|
||||
const codeInput = row1.querySelector('input[placeholder="-"]');
|
||||
if (codeInput) codeInput.value = 'PKW-2026';
|
||||
|
||||
const qtyInput = row1.querySelector('td:nth-child(5) input');
|
||||
if (qtyInput) qtyInput.value = '1.00';
|
||||
|
||||
const priceInput = row1.querySelector('td:nth-child(6) input');
|
||||
if (priceInput) priceInput.value = '450.00';
|
||||
|
||||
// Update totals in row (td 8 and 9)
|
||||
const netCell = row1.querySelector('td:nth-child(8)');
|
||||
if (netCell) netCell.innerText = '450,00 zł';
|
||||
|
||||
const grossCell = row1.querySelector('td:nth-child(9)');
|
||||
if (grossCell) grossCell.innerText = '553,50 zł';
|
||||
}
|
||||
|
||||
// Summary
|
||||
const summaries = document.querySelectorAll('.card-body .d-flex.justify-content-between span.fw-semibold');
|
||||
if (summaries.length >= 2) {
|
||||
summaries[0].innerText = '450,00 zł'; // Netto
|
||||
summaries[1].innerText = '103,50 zł'; // VAT
|
||||
}
|
||||
|
||||
const totalEl = document.getElementById('finalTotal');
|
||||
if (totalEl) totalEl.innerText = '553,50 zł';
|
||||
|
||||
// 4. Restore Button
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = '<i class="bx bx-check me-1"></i> Dane odczytane poprawnie';
|
||||
btn.classList.remove('btn-label-primary');
|
||||
btn.classList.add('btn-label-success');
|
||||
|
||||
// Animation
|
||||
const allInputs = document.querySelectorAll('input');
|
||||
allInputs.forEach(input => {
|
||||
if (input.value && input.value !== '0.00' && input.type !== 'text' && input.type !== 'hidden') {
|
||||
// Filter a bit to avoid everything flashing
|
||||
}
|
||||
if (input.value && input.value !== '0.00' && input.type !== 'hidden') {
|
||||
input.classList.add('animate__animated', 'animate__flash');
|
||||
setTimeout(() => input.classList.remove('animate__animated', 'animate__flash'), 1000);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user