commit initial

This commit is contained in:
2025-08-13 22:47:45 +03:00
commit 8d0eaf7af1
146 changed files with 19138 additions and 0 deletions

View File

@@ -0,0 +1,331 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Factură</title>
<style>
:root {
--primary-color: #2563eb;
--text-color: #1e293b;
--text-light: #64748b;
--border-color: #e2e8f0;
--background-light: #f8fafc;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.4;
color: var(--text-color);
font-size: 10px;
padding: 1cm;
}
.invoice-container {
max-width: 210mm;
margin: 0 auto;
}
.invoice-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--primary-color);
}
.invoice-title {
color: var(--primary-color);
font-size: 18px;
font-weight: bold;
}
.invoice-number, .invoice-dates {
font-size: 11px;
color: var(--text-light);
}
.qr-section {
display: flex;
flex-direction: column;
align-items: center;
margin-left: -3rem;
margin-top: -0.5rem;
}
#qrcode {
width: 100px;
height: 100px;
margin-bottom: 0.5rem;
}
.e-invoice-info {
font-size: 10px;
color: var(--text-light);
text-align: center;
max-width: 120px;
}
.party-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
font-size: 10px;
}
.party-box {
padding: 0.5rem;
background: var(--background-light);
border: 1px solid var(--border-color);
}
.party-title {
font-weight: bold;
color: var(--primary-color);
margin-bottom: 0.25rem;
}
.items-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1rem;
font-size: 9px;
}
.items-table th,
.items-table td {
padding: 4px;
border-bottom: 1px solid var(--border-color);
}
.items-table th:nth-child(1),
.items-table td:nth-child(1) {
text-align: center;
}
.items-table th:nth-child(4),
.items-table td:nth-child(4),
.items-table th:nth-child(5),
.items-table td:nth-child(5),
.items-table th:nth-child(6),
.items-table td:nth-child(6),
.items-table th:nth-child(7),
.items-table td:nth-child(7) {
text-align: right;
}
.note-section {
font-size: 9px;
margin: 0.5rem 0;
padding: 0.5rem;
background: var(--background-light);
border: 1px solid var(--border-color);
}
.totals-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
margin-top: 1rem;
}
.currency-info {
font-size: 9px;
padding: 0.5rem;
background: var(--background-light);
border: 1px solid var(--border-color);
width: fit-content;
}
.currency-code {
font-weight: bold;
color: var(--primary-color);
}
.totals-section {
font-size: 10px;
}
.total-row {
display: flex;
justify-content: space-between;
padding: 2px 0;
}
.total-row.final {
border-top: 1px solid var(--primary-color);
padding-top: 4px;
margin-top: 4px;
font-weight: bold;
color: var(--primary-color);
}
.vat-breakdown {
margin-top: 0.5rem;
font-size: 9px;
}
.vat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
margin: 4px 0;
}
.footer {
margin-top: 1rem;
padding-top: 0.5rem;
border-top: 1px solid var(--border-color);
font-size: 8px;
color: var(--text-light);
text-align: center;
}
@media print {
@page {
size: A4;
margin: 1cm;
}
body {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
<div class="invoice-container">
<div class="invoice-header">
<div>
<h1 class="invoice-title">FACTURĂ</h1>
<div class="invoice-number">Seria & Nr: <span id="print-invoice-number"></span></div>
<div class="invoice-dates">
Data emiterii: <span id="print-issue-date"></span> |
Data scadentă: <span id="print-due-date"></span>
</div>
</div>
<div class="qr-section">
<div id="qrcode"></div>
<div class="e-invoice-info"></div>
</div>
</div>
<div class="party-details">
<div class="party-box">
<div class="party-title">Furnizor</div>
<div id="print-supplier-details"></div>
</div>
<div class="party-box">
<div class="party-title">Client</div>
<div id="print-customer-details"></div>
</div>
</div>
<table class="items-table">
<thead>
<tr>
<th>Nr.</th>
<th>Denumire</th>
<th>UM</th>
<th>Cant.</th>
<th>Preț</th>
<th>TVA</th>
<th>Total</th>
</tr>
</thead>
<tbody id="print-items"></tbody>
</table>
<div class="note-section" id="print-note" style="display: none;">
<h3>Text Adițional:</h3>
<div></div>
</div>
<div class="totals-container">
<div class="currency-info">
<p>Monedă Factură: <span class="currency-code" id="print-document-currency"></span></p>
<p id="print-tax-currency-container" style="display: none;">
Monedă TVA: <span class="currency-code" id="print-tax-currency"></span>
<br>
Curs valutar: <span id="print-exchange-rate"></span>
</p>
</div>
<div class="totals-section">
<div class="total-row">
<span>Subtotal:</span>
<span id="print-subtotal"></span>
</div>
<div id="print-allowances-row" style="display: none;">
<div class="total-row">
<span>Reduceri:</span>
<span id="print-allowances"></span>
</div>
</div>
<div id="print-charges-row" style="display: none;">
<div class="total-row">
<span>Taxe:</span>
<span id="print-charges"></span>
</div>
</div>
<div class="total-row">
<span>Valoare Netă:</span>
<span id="print-net-amount"></span>
</div>
<div class="vat-breakdown">
<div class="vat-grid">
<div>Tip TVA</div>
<div>Cotă</div>
<div>Bază</div>
<div>TVA</div>
</div>
<div class="vat-grid" id="print-vat-breakdown"></div>
<div class="total-row">
<span>Total TVA (<span id="print-vat-currency-main"></span>):</span>
<span id="print-vat-main"></span>
</div>
<div id="print-vat-secondary" class="total-row" style="display: none;">
<span>TVA (<span id="print-vat-currency-secondary"></span>):</span>
<span id="print-vat-secondary-amount"></span>
</div>
</div>
<div class="total-row final">
<span>Total cu TVA:</span>
<span id="print-total"></span>
</div>
</div>
</div>
<div class="footer">
</div>
</div>
<script>
function updateAllowancesChargesVisibility() {
const allowancesRow = document.getElementById('print-allowances-row');
const chargesRow = document.getElementById('print-charges-row');
const allowancesAmount = parseFloat(document.getElementById('print-allowances').textContent) || 0;
const chargesAmount = parseFloat(document.getElementById('print-charges').textContent) || 0;
allowancesRow.style.display = allowancesAmount > 0 ? 'block' : 'none';
chargesRow.style.display = chargesAmount > 0 ? 'block' : 'none';
}
window.addEventListener('load', updateAllowancesChargesVisibility);
</script>
</body>
</html>

View File

@@ -0,0 +1,378 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Factură</title>
<style>
/* Variables - Keep original colors */
:root {
--primary-color: #2563eb;
--text-color: #1e293b;
--text-light: #64748b;
--border-color: #e2e8f0;
--background-light: #f8fafc;
}
/* Base Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.4;
color: var(--text-color);
background: white;
font-size: 11px;
padding: 1cm;
}
/* Layout */
.invoice-container {
max-width: 210mm;
margin: 0 auto;
}
/* Header */
.invoice-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--primary-color);
}
.invoice-title-section {
display: flex;
flex-direction: column;
}
.invoice-title {
color: var(--primary-color);
font-size: 18px;
font-weight: bold;
margin-bottom: 0.25rem;
}
.invoice-number {
font-size: 11px;
color: var(--text-light);
margin-bottom: 0.25rem;
}
.invoice-dates {
font-size: 10px;
color: var(--text-light);
}
/* QR Code */
.qr-section {
display: flex;
flex-direction: column;
align-items: center;
margin-left: 2rem;
}
#qrcode {
width: 100px;
height: 100px;
margin-bottom: 0.5rem;
}
.e-invoice-info {
font-size: 8px;
color: var(--text-light);
text-align: center;
max-width: 100px;
}
/* Party Details */
.party-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.party-box {
padding: 0.5rem;
background: var(--background-light);
border: 1px solid var(--border-color);
}
.party-title {
font-weight: bold;
color: var(--primary-color);
margin-bottom: 0.25rem;
font-size: 11px;
}
.party-info p {
margin: 0.15rem 0;
font-size: 10px;
}
/* Items Table */
.items-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1rem;
font-size: 9px;
}
.items-table th,
.items-table td {
padding: 4px;
border-bottom: 1px solid var(--border-color);
}
.items-table th:nth-child(1),
.items-table td:nth-child(1) {
text-align: center;
}
.items-table th:nth-child(4),
.items-table td:nth-child(4),
.items-table th:nth-child(5),
.items-table td:nth-child(5),
.items-table th:nth-child(6),
.items-table td:nth-child(6),
.items-table th:nth-child(7),
.items-table td:nth-child(7) {
text-align: right;
}
/* Note Section */
.note-section {
margin: 0.5rem 0;
padding: 0.5rem;
background: var(--background-light);
border: 1px solid var(--border-color);
font-size: 9px;
}
.note-section h3 {
font-size: 10px;
color: var(--text-light);
margin-bottom: 0.25rem;
}
/* Totals Container */
.totals-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
margin-top: 1rem;
}
.currency-info {
padding: 0.5rem;
background: var(--background-light);
border: 1px solid var(--border-color);
font-size: 9px;
width: fit-content;
}
.currency-code {
font-weight: bold;
color: var(--primary-color);
}
.totals-section {
font-size: 10px;
}
.total-row {
display: flex;
justify-content: space-between;
padding: 2px 0;
border-bottom: 1px solid var(--border-color);
}
.total-row.final {
border-bottom: 2px solid var(--primary-color);
font-weight: bold;
font-size: 11px;
color: var(--primary-color);
}
/* VAT Breakdown */
.vat-breakdown {
margin: 0.5rem 0;
padding: 0.5rem;
background: var(--background-light);
border-radius: 4px;
font-size: 9px;
}
.vat-title {
font-weight: bold;
color: var(--text-light);
margin-bottom: 0.25rem;
}
.vat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
margin-bottom: 0.5rem;
}
.vat-grid-header {
font-weight: bold;
color: var(--text-light);
}
.vat-amount-row {
display: flex;
justify-content: space-between;
padding: 4px 0;
border-top: 1px solid var(--border-color);
}
/* Footer */
.footer {
margin-top: 1rem;
padding-top: 0.5rem;
border-top: 1px solid var(--border-color);
font-size: 8px;
color: var(--text-light);
text-align: center;
}
/* Print Styles */
@media print {
@page {
size: A4;
margin: 1cm;
}
body {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.no-print {
display: none;
}
.show-in-print {
display: flex !important;
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
<div class="invoice-container">
<div class="invoice-header">
<div class="invoice-title-section">
<h1 class="invoice-title">FACTURĂ</h1>
<div class="invoice-number">Seria & Nr: <span id="print-invoice-number"></span></div>
<div class="invoice-dates">
Data emiterii: <span id="print-issue-date"></span> |
Data scadentă: <span id="print-due-date"></span>
</div>
</div>
<div class="qr-section">
<div id="qrcode"></div>
<div class="e-invoice-info"></div>
</div>
</div>
<div class="party-details">
<div class="party-box">
<div class="party-title">Furnizor</div>
<div class="party-info" id="print-supplier-details"></div>
</div>
<div class="party-box">
<div class="party-title">Client</div>
<div class="party-info" id="print-customer-details"></div>
</div>
</div>
<table class="items-table">
<thead>
<tr>
<th>Nr.</th>
<th>Denumire</th>
<th>UM</th>
<th>Cant.</th>
<th>Preț</th>
<th>TVA</th>
<th>Total</th>
</tr>
</thead>
<tbody id="print-items"></tbody>
</table>
<div class="note-section" id="print-note" style="display: none;">
<h3>Text Adițional:</h3>
<div></div>
</div>
<div class="totals-container">
<div class="currency-info">
<p>Monedă Factură: <span class="currency-code" id="print-document-currency"></span></p>
<p id="print-tax-currency-container" style="display: none;">
Monedă TVA: <span class="currency-code" id="print-tax-currency"></span>
<br>
Curs valutar: <span id="print-exchange-rate"></span>
</p>
</div>
<div class="totals-section">
<div class="total-row">
<span>Subtotal:</span>
<span id="print-subtotal"></span>
</div>
<div class="total-row">
<span>Total Reduceri:</span>
<span id="print-allowances"></span>
</div>
<div class="total-row">
<span>Total Taxe:</span>
<span id="print-charges"></span>
</div>
<div class="total-row">
<span>Valoare Netă:</span>
<span id="print-net-amount"></span>
</div>
<div class="vat-breakdown">
<div class="vat-title">Defalcare TVA</div>
<div class="vat-grid">
<div class="vat-grid-header">Tip TVA</div>
<div class="vat-grid-header">Cotă</div>
<div class="vat-grid-header">Bază</div>
<div class="vat-grid-header">TVA</div>
</div>
<div class="vat-grid" id="print-vat-breakdown"></div>
<div id="print-vat-currencies" class="vat-amount-row">
<span>Total TVA (<span id="print-vat-currency-main"></span>):</span>
<span id="print-vat-main"></span>
</div>
<div id="print-vat-secondary" class="vat-amount-row" style="display: none;">
<span>Total TVA (<span id="print-vat-currency-secondary"></span>):</span>
<span id="print-vat-secondary-amount"></span>
</div>
</div>
<div class="total-row final">
<span>Total cu TVA:</span>
<span id="print-total"></span>
</div>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>