1155 lines
40 KiB
PHP
1155 lines
40 KiB
PHP
<style>
|
|
@media print {
|
|
.no-print,
|
|
.sidebar,
|
|
.topbar,
|
|
.btn,
|
|
.modal-header,
|
|
.modal-footer,
|
|
.d-print-none,
|
|
.modal-backdrop {
|
|
display: none !important;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background: white !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
overflow: visible !important;
|
|
width: auto !important;
|
|
min-height: auto !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
body.modal-open:not(.printing-receipt) {
|
|
visibility: hidden !important;
|
|
overflow: visible !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
body.printing-invoice {
|
|
visibility: visible !important;
|
|
overflow: visible !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
body.printing-invoice > :not(#viewInvoiceModal):not(script):not(style) {
|
|
display: none !important;
|
|
}
|
|
|
|
.main-content {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
background: white !important;
|
|
}
|
|
|
|
.modal {
|
|
display: none !important;
|
|
}
|
|
|
|
.modal.show,
|
|
body.printing-invoice #viewInvoiceModal.modal.show {
|
|
position: static !important;
|
|
inset: auto !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
overflow: visible !important;
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
background: white !important;
|
|
width: auto !important;
|
|
}
|
|
|
|
.modal.show .modal-dialog {
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.modal.show .modal-content {
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
background: white !important;
|
|
}
|
|
|
|
.modal.show .modal-body {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
background: white !important;
|
|
}
|
|
|
|
.modal.show * {
|
|
visibility: visible !important;
|
|
}
|
|
|
|
@page {
|
|
size: A4 portrait;
|
|
margin: 7mm;
|
|
}
|
|
|
|
.invoice-print-shell {
|
|
padding: 0 !important;
|
|
background: white !important;
|
|
}
|
|
|
|
.invoice-paper,
|
|
.invoice-paper * {
|
|
-webkit-print-color-adjust: exact !important;
|
|
print-color-adjust: exact !important;
|
|
}
|
|
|
|
.invoice-paper {
|
|
border: none !important;
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.invoice-paper-body {
|
|
padding: 12px 12px 8px !important;
|
|
}
|
|
|
|
.invoice-header {
|
|
padding-bottom: 12px !important;
|
|
}
|
|
|
|
.invoice-paper-body .g-4,
|
|
.invoice-paper-body .g-3 {
|
|
--bs-gutter-y: 0.75rem !important;
|
|
}
|
|
|
|
.invoice-paper-body .g-4 {
|
|
--bs-gutter-x: 1rem !important;
|
|
}
|
|
|
|
.invoice-paper-body .g-3 {
|
|
--bs-gutter-x: 0.85rem !important;
|
|
}
|
|
|
|
.invoice-paper-body .mt-4 {
|
|
margin-top: 0.95rem !important;
|
|
}
|
|
|
|
.invoice-paper-body .mt-3 {
|
|
margin-top: 0.65rem !important;
|
|
}
|
|
|
|
.invoice-paper-body .mb-3 {
|
|
margin-bottom: 0.65rem !important;
|
|
}
|
|
|
|
.invoice-paper-body .mb-2 {
|
|
margin-bottom: 0.4rem !important;
|
|
}
|
|
|
|
.invoice-top-accent {
|
|
height: 5px !important;
|
|
}
|
|
|
|
.invoice-logo {
|
|
max-height: 58px !important;
|
|
}
|
|
|
|
.invoice-title {
|
|
font-size: 1.1rem !important;
|
|
letter-spacing: 0.06em !important;
|
|
}
|
|
|
|
.invoice-meta-grid {
|
|
gap: 0.6rem !important;
|
|
margin-top: 0.75rem !important;
|
|
}
|
|
|
|
.invoice-meta-card {
|
|
min-height: 72px !important;
|
|
padding: 0.7rem 0.85rem !important;
|
|
}
|
|
|
|
.invoice-meta-value {
|
|
font-size: 0.92rem !important;
|
|
}
|
|
|
|
.invoice-party-meta {
|
|
gap: 0.2rem 0.75rem !important;
|
|
margin-top: 0.25rem !important;
|
|
}
|
|
|
|
.invoice-inline-list {
|
|
gap: 0.3rem 0.7rem !important;
|
|
}
|
|
|
|
.invoice-inline-kv {
|
|
gap: 0.12rem !important;
|
|
min-width: 92px !important;
|
|
}
|
|
|
|
.invoice-inline-kv-label {
|
|
font-size: 0.54rem !important;
|
|
letter-spacing: 0.08em !important;
|
|
}
|
|
|
|
.invoice-inline-kv strong {
|
|
font-size: 0.8rem !important;
|
|
line-height: 1.2 !important;
|
|
}
|
|
|
|
.invoice-note-card--compact {
|
|
gap: 0.55rem !important;
|
|
}
|
|
|
|
.invoice-note-row {
|
|
gap: 0.28rem !important;
|
|
}
|
|
|
|
.invoice-note-value {
|
|
font-size: 0.78rem !important;
|
|
line-height: 1.35 !important;
|
|
}
|
|
|
|
.invoice-note-text {
|
|
font-size: 0.72rem !important;
|
|
line-height: 1.38 !important;
|
|
}
|
|
|
|
.invoice-summary-grid {
|
|
gap: 0.4rem !important;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
|
|
}
|
|
|
|
.invoice-summary-metric {
|
|
padding: 0.5rem 0.55rem !important;
|
|
border-radius: 12px !important;
|
|
gap: 0.22rem !important;
|
|
}
|
|
|
|
.invoice-summary-metric-label {
|
|
font-size: 0.54rem !important;
|
|
letter-spacing: 0.05em !important;
|
|
}
|
|
|
|
.invoice-summary-metric-value {
|
|
font-size: 0.84rem !important;
|
|
}
|
|
|
|
.invoice-summary-metric--total .invoice-summary-metric-value {
|
|
font-size: 1rem !important;
|
|
}
|
|
|
|
.invoice-payment-compact {
|
|
margin-top: 0.65rem !important;
|
|
padding-top: 0.55rem !important;
|
|
}
|
|
|
|
.invoice-payment-list {
|
|
gap: 0.32rem !important;
|
|
}
|
|
|
|
.invoice-payment-pill {
|
|
padding: 0.28rem 0.5rem !important;
|
|
font-size: 0.68rem !important;
|
|
}
|
|
|
|
.invoice-payment-pill strong {
|
|
font-size: 0.72rem !important;
|
|
}
|
|
|
|
.invoice-section-card,
|
|
.invoice-note-card,
|
|
.invoice-summary-card,
|
|
.invoice-payment-card {
|
|
padding: 0.8rem 0.9rem !important;
|
|
border-radius: 14px !important;
|
|
}
|
|
|
|
.invoice-table-wrap,
|
|
.invoice-section-card,
|
|
.invoice-note-card,
|
|
.invoice-summary-card,
|
|
.invoice-payment-card,
|
|
.invoice-meta-card,
|
|
.invoice-qr-card {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.invoice-printable-container {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.table-formal thead th {
|
|
background: #0f172a !important;
|
|
color: #ffffff !important;
|
|
border-color: #0f172a !important;
|
|
}
|
|
|
|
.table-formal tbody tr:nth-child(even) {
|
|
background: #f8fafc !important;
|
|
}
|
|
|
|
.table-formal thead th {
|
|
padding: 0.6rem 0.55rem !important;
|
|
font-size: 0.65rem !important;
|
|
}
|
|
|
|
.table-formal tbody td {
|
|
padding: 0.55rem 0.55rem !important;
|
|
font-size: 0.82rem !important;
|
|
}
|
|
|
|
.invoice-summary-row {
|
|
padding: 0.35rem 0 !important;
|
|
font-size: 0.84rem !important;
|
|
}
|
|
|
|
.invoice-summary-row--total {
|
|
padding-top: 0.7rem !important;
|
|
font-size: 0.94rem !important;
|
|
}
|
|
|
|
.invoice-summary-row--total span:last-child {
|
|
font-size: 1.18rem !important;
|
|
}
|
|
|
|
.invoice-footer {
|
|
margin-top: 0.95rem !important;
|
|
padding-top: 0.8rem !important;
|
|
}
|
|
|
|
.invoice-signature-line {
|
|
width: 150px !important;
|
|
padding-top: 0.4rem !important;
|
|
}
|
|
|
|
.invoice-qr-card {
|
|
min-width: 112px !important;
|
|
min-height: 112px !important;
|
|
padding: 0.55rem !important;
|
|
border-radius: 14px !important;
|
|
}
|
|
|
|
.invoice-qr-card img {
|
|
width: 88px !important;
|
|
height: 88px !important;
|
|
}
|
|
|
|
.invoice-footer-note {
|
|
font-size: 0.72rem !important;
|
|
}
|
|
|
|
.invoice-pill,
|
|
.invoice-meta-card,
|
|
.invoice-summary-card,
|
|
.invoice-payment-card,
|
|
.invoice-note-card,
|
|
.invoice-section-card {
|
|
background-clip: padding-box !important;
|
|
}
|
|
|
|
.table-formal tr,
|
|
.invoice-section-card,
|
|
.invoice-summary-card,
|
|
.invoice-note-card,
|
|
.invoice-payment-card,
|
|
.invoice-footer {
|
|
break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
body.printing-receipt .modal,
|
|
body.printing-receipt .modal-backdrop {
|
|
display: none !important;
|
|
}
|
|
|
|
body.printing-receipt #posPrintArea {
|
|
display: flex !important;
|
|
visibility: visible !important;
|
|
justify-content: center !important;
|
|
align-items: flex-start !important;
|
|
position: fixed !important;
|
|
inset: 0 !important;
|
|
width: 100% !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
z-index: 9999 !important;
|
|
background: white !important;
|
|
}
|
|
|
|
body.printing-receipt #posPrintArea * {
|
|
visibility: visible !important;
|
|
}
|
|
|
|
body.printing-receipt #posPrintArea .thermal-receipt-print {
|
|
position: static !important;
|
|
left: auto !important;
|
|
top: auto !important;
|
|
margin: 0 auto !important;
|
|
}
|
|
}
|
|
|
|
#viewInvoiceModal .modal-dialog.invoice-print-dialog {
|
|
max-width: 980px;
|
|
}
|
|
|
|
#viewInvoiceModal .modal-content {
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.invoice-print-shell {
|
|
padding: 1.5rem;
|
|
background: linear-gradient(135deg, #eef4ff 0%, #f8fafc 48%, #ffffff 100%);
|
|
}
|
|
|
|
.invoice-paper {
|
|
background: #ffffff;
|
|
border: 1px solid #dbe5f0;
|
|
border-radius: 26px;
|
|
overflow: hidden;
|
|
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
|
|
}
|
|
|
|
.invoice-top-accent {
|
|
height: 8px;
|
|
background: linear-gradient(90deg, #0f172a 0%, #1d4ed8 55%, #0ea5e9 100%);
|
|
}
|
|
|
|
.invoice-paper-body {
|
|
padding: 2rem;
|
|
color: #0f172a;
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
.invoice-header {
|
|
border-bottom: 1px solid #dbe5f0;
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
|
|
.invoice-logo {
|
|
max-height: 72px;
|
|
width: auto;
|
|
}
|
|
|
|
.invoice-brand-name {
|
|
font-size: 1.45rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
color: #0f172a;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.invoice-contact-line {
|
|
margin: 0;
|
|
font-size: 0.88rem;
|
|
line-height: 1.6;
|
|
color: #475569;
|
|
}
|
|
|
|
.invoice-outlet {
|
|
margin-top: 0.6rem;
|
|
font-size: 0.76rem;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
.invoice-eyebrow {
|
|
margin: 0;
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.26em;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
color: #64748b;
|
|
}
|
|
|
|
.invoice-title {
|
|
font-size: 1.38rem;
|
|
line-height: 1.25;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.invoice-pill-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.invoice-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.42rem 0.85rem;
|
|
border-radius: 999px;
|
|
border: 1px solid transparent;
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.invoice-pill--sale {
|
|
background: #e0f2fe;
|
|
color: #0c4a6e;
|
|
border-color: #bae6fd;
|
|
}
|
|
|
|
.invoice-pill--purchase {
|
|
background: #fef3c7;
|
|
color: #92400e;
|
|
border-color: #fde68a;
|
|
}
|
|
|
|
.invoice-pill--paid {
|
|
background: #dcfce7;
|
|
color: #166534;
|
|
border-color: #bbf7d0;
|
|
}
|
|
|
|
.invoice-pill--unpaid {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
border-color: #fecaca;
|
|
}
|
|
|
|
.invoice-pill--partial {
|
|
background: #fef3c7;
|
|
color: #9a3412;
|
|
border-color: #fcd34d;
|
|
}
|
|
|
|
.invoice-pill--neutral {
|
|
background: #e2e8f0;
|
|
color: #334155;
|
|
border-color: #cbd5e1;
|
|
}
|
|
|
|
.invoice-meta-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.75rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.invoice-meta-card {
|
|
min-height: 84px;
|
|
padding: 0.9rem 1rem;
|
|
border: 1px solid #dbe5f0;
|
|
border-radius: 16px;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.invoice-meta-label {
|
|
display: block;
|
|
margin-bottom: 0.35rem;
|
|
font-size: 0.68rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: #64748b;
|
|
}
|
|
|
|
.invoice-meta-value {
|
|
display: block;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.invoice-party-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem 1rem;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
.invoice-inline-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.45rem 1rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.invoice-inline-kv {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.2rem;
|
|
min-width: 118px;
|
|
}
|
|
|
|
.invoice-inline-kv-label {
|
|
font-size: 0.64rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: #64748b;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.invoice-inline-kv strong {
|
|
font-size: 0.94rem;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
line-height: 1.3;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.invoice-section-card,
|
|
.invoice-note-card,
|
|
.invoice-summary-card,
|
|
.invoice-payment-card {
|
|
border: 1px solid #dbe5f0;
|
|
border-radius: 18px;
|
|
padding: 1rem 1.15rem;
|
|
}
|
|
|
|
.invoice-section-card {
|
|
background: #ffffff;
|
|
height: 100%;
|
|
}
|
|
|
|
.invoice-note-card,
|
|
.invoice-payment-card {
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.invoice-summary-card {
|
|
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
|
|
}
|
|
|
|
.invoice-section-title {
|
|
margin: 0;
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: #64748b;
|
|
}
|
|
|
|
.invoice-party-name {
|
|
font-size: 1.12rem;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
margin: 0.15rem 0 0.4rem;
|
|
}
|
|
|
|
.invoice-detail-text {
|
|
margin: 0;
|
|
font-size: 0.9rem;
|
|
line-height: 1.55;
|
|
color: #475569;
|
|
}
|
|
|
|
.invoice-detail-text strong {
|
|
color: #0f172a;
|
|
}
|
|
|
|
.invoice-table-wrap {
|
|
margin-top: 1.25rem;
|
|
border: 1px solid #dbe5f0;
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table-formal {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.table-formal thead th {
|
|
background: #0f172a;
|
|
color: #ffffff;
|
|
border-color: #0f172a;
|
|
padding: 0.88rem 0.75rem;
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.table-formal tbody td {
|
|
padding: 0.85rem 0.75rem;
|
|
border-color: #e2e8f0;
|
|
vertical-align: top;
|
|
font-size: 0.9rem;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.table-formal tbody tr:nth-child(even) {
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.invoice-line-no {
|
|
width: 56px;
|
|
font-weight: 700;
|
|
color: #64748b;
|
|
}
|
|
|
|
.invoice-item-name {
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.invoice-item-secondary {
|
|
margin-top: 0.2rem;
|
|
font-size: 0.78rem;
|
|
color: #64748b;
|
|
}
|
|
|
|
.invoice-amount {
|
|
white-space: nowrap;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.invoice-note-card--compact {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.85rem;
|
|
}
|
|
|
|
.invoice-note-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.invoice-note-divider {
|
|
height: 1px;
|
|
background: #dbe5f0;
|
|
}
|
|
|
|
.invoice-note-value {
|
|
margin: 0;
|
|
font-size: 0.88rem;
|
|
line-height: 1.5;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.invoice-note-text {
|
|
margin: 0;
|
|
font-size: 0.82rem;
|
|
line-height: 1.55;
|
|
color: #64748b;
|
|
}
|
|
|
|
.invoice-summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.invoice-summary-metric {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
padding: 0.78rem 0.9rem;
|
|
border: 1px solid #dbe5f0;
|
|
border-radius: 16px;
|
|
background: rgba(255, 255, 255, 0.94);
|
|
min-width: 0;
|
|
}
|
|
|
|
.invoice-summary-metric-label {
|
|
font-size: 0.66rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: #64748b;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.invoice-summary-metric-value {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
line-height: 1.25;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.invoice-summary-metric--accent {
|
|
border-color: #fecaca;
|
|
background: #fff5f5;
|
|
}
|
|
|
|
.invoice-summary-metric--accent .invoice-summary-metric-value {
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.invoice-summary-metric--total {
|
|
border-color: #bfdbfe;
|
|
background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
|
|
}
|
|
|
|
.invoice-summary-metric--total .invoice-summary-metric-value {
|
|
font-size: 1.22rem;
|
|
font-weight: 800;
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
.invoice-payment-compact {
|
|
margin-top: 1rem;
|
|
padding-top: 0.95rem;
|
|
border-top: 1px solid #dbe5f0;
|
|
}
|
|
|
|
.invoice-payment-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.55rem;
|
|
}
|
|
|
|
.invoice-payment-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem;
|
|
padding: 0.45rem 0.72rem;
|
|
border-radius: 999px;
|
|
background: #e2e8f0;
|
|
color: #334155;
|
|
font-size: 0.76rem;
|
|
font-weight: 600;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.invoice-payment-pill strong {
|
|
font-size: 0.82rem;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.invoice-payment-sep {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.invoice-summary-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 0.45rem 0;
|
|
font-size: 0.92rem;
|
|
color: #334155;
|
|
}
|
|
|
|
.invoice-summary-row span:last-child {
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.invoice-summary-row--accent span:last-child {
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.invoice-summary-row--total {
|
|
margin-top: 0.25rem;
|
|
padding-top: 0.85rem;
|
|
border-top: 1px solid #cbd5e1;
|
|
font-size: 1.02rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.invoice-summary-row--total span:last-child {
|
|
font-size: 1.35rem;
|
|
font-weight: 800;
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
.invoice-payment-table {
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.invoice-payment-table thead th {
|
|
background: #e2e8f0;
|
|
color: #334155;
|
|
border-color: #dbe5f0;
|
|
font-size: 0.68rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.invoice-payment-table tbody td {
|
|
font-size: 0.82rem;
|
|
color: #475569;
|
|
border-color: #e2e8f0;
|
|
}
|
|
|
|
.invoice-terms-list {
|
|
margin: 0;
|
|
padding-left: 1.15rem;
|
|
color: #64748b;
|
|
font-size: 0.84rem;
|
|
}
|
|
|
|
.invoice-terms-list li + li {
|
|
margin-top: 0.4rem;
|
|
}
|
|
|
|
.invoice-footer {
|
|
margin-top: 1.5rem;
|
|
padding-top: 1.25rem;
|
|
border-top: 1px solid #dbe5f0;
|
|
}
|
|
|
|
.invoice-signature-line {
|
|
width: 180px;
|
|
margin: 0 auto;
|
|
padding-top: 0.55rem;
|
|
border-top: 1px solid #94a3b8;
|
|
}
|
|
|
|
.invoice-qr-card {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.45rem;
|
|
min-width: 132px;
|
|
min-height: 132px;
|
|
padding: 0.75rem;
|
|
border: 1px solid #dbe5f0;
|
|
border-radius: 18px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.invoice-footer-note {
|
|
font-size: 0.78rem;
|
|
color: #64748b;
|
|
}
|
|
|
|
.invoice-currency {
|
|
display: inline-block;
|
|
margin-inline-end: 0.22rem;
|
|
font-size: 0.72em;
|
|
font-weight: 600;
|
|
color: #64748b;
|
|
}
|
|
|
|
.x-small {
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.invoice-pill-group {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.invoice-summary-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.invoice-print-shell {
|
|
padding: 0.85rem;
|
|
}
|
|
|
|
.invoice-paper-body {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.invoice-title {
|
|
font-size: 1.18rem;
|
|
}
|
|
|
|
.invoice-meta-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="modal fade" id="viewInvoiceModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl invoice-print-dialog">
|
|
<div class="modal-content shadow-none border-0">
|
|
<div class="modal-header d-print-none">
|
|
<h5 class="modal-title" data-en="View Invoice" data-ar="عرض الفاتورة">View Invoice</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body p-0" id="invoicePrintableArea">
|
|
<div class="invoice-print-shell">
|
|
<article class="invoice-paper invoice-printable-container">
|
|
<div class="invoice-top-accent"></div>
|
|
<div class="invoice-paper-body">
|
|
<header class="invoice-header">
|
|
<div class="row g-4 align-items-start">
|
|
<div class="col-md-6">
|
|
<?php
|
|
$logo = $data['settings']['company_logo'] ?? $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|
if ($logo):
|
|
?>
|
|
<img src="<?= htmlspecialchars($logo) ?>" alt="<?= htmlspecialchars($data['settings']['company_name'] ?? 'Company Logo') ?>" class="invoice-logo mb-3">
|
|
<?php endif; ?>
|
|
<div class="invoice-brand-name mb-2"><?= htmlspecialchars($data['settings']['company_name'] ?? 'Accounting System') ?></div>
|
|
<?php if (!empty($data['settings']['company_address'])): ?>
|
|
<p class="invoice-contact-line"><?= nl2br(htmlspecialchars($data['settings']['company_address'])) ?></p>
|
|
<?php endif; ?>
|
|
<?php if (!empty($data['settings']['company_phone'])): ?>
|
|
<p class="invoice-contact-line">Tel: <?= htmlspecialchars($data['settings']['company_phone']) ?></p>
|
|
<?php endif; ?>
|
|
<?php if (!empty($data['settings']['company_email'])): ?>
|
|
<p class="invoice-contact-line">Email: <?= htmlspecialchars($data['settings']['company_email']) ?></p>
|
|
<?php endif; ?>
|
|
<?php if (!empty($data['settings']['vat_number'])): ?>
|
|
<p class="invoice-contact-line">VAT: <?= htmlspecialchars($data['settings']['vat_number']) ?></p>
|
|
<?php endif; ?>
|
|
<p class="invoice-outlet mb-0" id="invOutletRow" style="display: none;">Outlet / الفرع: <span id="invOutletName"></span></p>
|
|
</div>
|
|
<div class="col-md-6 text-md-end">
|
|
<p id="invDocumentSubtitle" class="invoice-eyebrow mb-2">Official tax document / مستند ضريبي رسمي</p>
|
|
<h1 id="invDocumentTitle" class="invoice-title mb-2">Tax Invoice / فاتورة ضريبية</h1>
|
|
<div class="invoice-pill-group mb-2">
|
|
<span id="invoiceTypeLabel" class="invoice-pill invoice-pill--sale">Sales Invoice</span>
|
|
<span id="invoiceStatusLabel" class="invoice-pill invoice-pill--neutral">Status</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="mt-4">
|
|
<div class="row g-3 align-items-stretch">
|
|
<div class="col-md-7">
|
|
<div class="invoice-section-card h-100">
|
|
<p id="invPartyLabel" class="invoice-section-title mb-2">Bill To / بيانات العميل</p>
|
|
<div id="invCustomerName" class="invoice-party-name">---</div>
|
|
<div class="invoice-party-meta">
|
|
<p class="invoice-detail-text mb-0" id="invCustomerTaxIdContainer">VAT / الضريبة: <strong id="invCustomerTaxId"></strong></p>
|
|
<p class="invoice-detail-text mb-0" id="invCustomerPhoneContainer">Phone / الهاتف: <strong id="invCustomerPhone"></strong></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<div class="invoice-section-card h-100">
|
|
<p class="invoice-section-title mb-2">Invoice Details / تفاصيل الفاتورة</p>
|
|
<div class="invoice-inline-list">
|
|
<div class="invoice-inline-kv">
|
|
<span class="invoice-inline-kv-label">Invoice No / رقم الفاتورة</span>
|
|
<strong id="invNumber"></strong>
|
|
</div>
|
|
<div class="invoice-inline-kv">
|
|
<span class="invoice-inline-kv-label">Issue Date / تاريخ الإصدار</span>
|
|
<strong id="invDate"></strong>
|
|
</div>
|
|
<div class="invoice-inline-kv">
|
|
<span class="invoice-inline-kv-label">Payment Method / طريقة الدفع</span>
|
|
<strong id="invPaymentTypeSummary"></strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="invoice-table-wrap mt-4">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-formal align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-center" style="width: 56px;">#</th>
|
|
<th>Item Description / وصف الصنف</th>
|
|
<th class="text-center" style="width: 90px;">Qty / الكمية</th>
|
|
<th class="text-end" style="width: 130px;">Unit Price / سعر الوحدة</th>
|
|
<th class="text-end" style="width: 105px;">VAT % / الضريبة</th>
|
|
<th class="text-end" style="width: 145px;">Line Total / الإجمالي</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="invItemsBody"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mt-4">
|
|
<div class="row g-3 align-items-start">
|
|
<div class="col-lg-5">
|
|
<div class="invoice-note-card invoice-note-card--compact h-100">
|
|
<div class="invoice-note-row">
|
|
<p class="invoice-section-title mb-0">Amount in Words / المبلغ كتابة</p>
|
|
<p id="invAmountInWords" class="invoice-note-value fw-semibold"></p>
|
|
</div>
|
|
<div class="invoice-note-divider"></div>
|
|
<div class="invoice-note-row">
|
|
<p class="invoice-section-title mb-0">Terms & Conditions / الشروط والأحكام</p>
|
|
<p class="invoice-note-text">Goods once sold will not be taken back or exchanged. Payment is due within the agreed credit period. Please verify invoice details upon receipt.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-7">
|
|
<div class="invoice-summary-card">
|
|
<p class="invoice-section-title mb-2">Financial Summary / الملخص المالي</p>
|
|
<div class="invoice-summary-grid">
|
|
<div class="invoice-summary-metric">
|
|
<span class="invoice-summary-metric-label">Subtotal (Excl. VAT) / المجموع قبل الضريبة</span>
|
|
<span id="invSubtotal" class="invoice-summary-metric-value"></span>
|
|
</div>
|
|
<div class="invoice-summary-metric">
|
|
<span class="invoice-summary-metric-label">VAT Amount / مبلغ الضريبة</span>
|
|
<span id="invVatAmount" class="invoice-summary-metric-value"></span>
|
|
</div>
|
|
<div id="invDiscountRow" class="invoice-summary-metric invoice-summary-metric--accent" style="display: none;">
|
|
<span class="invoice-summary-metric-label">Discount / الخصم</span>
|
|
<span id="invDiscountAmount" class="invoice-summary-metric-value"></span>
|
|
</div>
|
|
<div class="invoice-summary-metric invoice-summary-metric--total">
|
|
<span class="invoice-summary-metric-label">Grand Total / الإجمالي النهائي</span>
|
|
<span id="invGrandTotal" class="invoice-summary-metric-value"></span>
|
|
</div>
|
|
<div class="invoice-summary-metric">
|
|
<span class="invoice-summary-metric-label">Paid Amount / المدفوع</span>
|
|
<span id="invPaidInfo" class="invoice-summary-metric-value"></span>
|
|
</div>
|
|
<div class="invoice-summary-metric">
|
|
<span class="invoice-summary-metric-label">Balance Due / المتبقي</span>
|
|
<span id="invBalanceInfo" class="invoice-summary-metric-value"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="invPaymentsSection" class="invoice-payment-compact" style="display: none;">
|
|
<p class="invoice-section-title mb-2">Payment Tracking / تتبع الدفع</p>
|
|
<div id="invPaymentsBody" class="invoice-payment-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="invoice-footer">
|
|
<div class="row g-3 align-items-end text-center">
|
|
<div class="col-md-4">
|
|
<div class="invoice-signature-line">
|
|
<p class="small text-muted mb-0">Customer Signature / توقيع العميل</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="invoice-qr-card mx-auto">
|
|
<div id="invQrCode" class="d-flex justify-content-center"></div>
|
|
<p class="x-small text-muted mb-0">Scan for invoice data</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="invoice-signature-line">
|
|
<p class="small text-muted mb-0">Authorized Signatory / التوقيع المعتمد</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="invoice-footer-note text-center mt-3 mb-0">Generated by <?= htmlspecialchars($data['settings']['company_name'] ?? 'Accounting System') ?> · <?= htmlspecialchars($_SERVER['HTTP_HOST'] ?? '') ?></p>
|
|
</footer>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer d-print-none">
|
|
<button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Close" data-ar="إغلاق">Close</button>
|
|
<button type="button" class="btn btn-primary" onclick="window.printInvoiceDocument()"><i class="bi bi-printer me-2"></i>Print Invoice</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|