diff --git a/resources/views/admin/invoice_edit.blade.php b/resources/views/admin/invoice_edit.blade.php index 662bef7..dd203c4 100644 --- a/resources/views/admin/invoice_edit.blade.php +++ b/resources/views/admin/invoice_edit.blade.php @@ -33,6 +33,97 @@ body { 100% { opacity: 1; transform: translateY(0) scale(1); } } +/* -------------------------------------------------- + INVOICE PREVIEW RESPONSIVE FIXES +-------------------------------------------------- */ +.invoice-preview-wrapper { + width: 100%; + overflow: auto; + max-width: 100%; + box-sizing: border-box; +} + +.invoice-preview-wrapper * { + box-sizing: border-box; +} + +/* Override any fixed width styles that might be in popup_invoice */ +#invoicePreview, +.invoice-container, +.invoice-wrapper { + max-width: 100% !important; + width: 100% !important; +} + +/* Responsive table fixes for invoice */ +.invoice-preview-wrapper table { + width: 100% !important; + max-width: 100% !important; + table-layout: auto !important; +} + +.invoice-preview-wrapper .table-responsive { + overflow-x: auto !important; + -webkit-overflow-scrolling: touch; +} + +/* Ensure all elements scale properly */ +.invoice-preview-wrapper .row, +.invoice-preview-wrapper .col, +.invoice-preview-wrapper [class*="col-"] { + flex: 1 1 auto !important; + max-width: 100% !important; +} + +/* Force responsive behavior for print-style elements */ +@media (max-width: 1200px) { + .invoice-preview-wrapper { + font-size: 95%; + } +} + +@media (max-width: 992px) { + .invoice-preview-wrapper { + font-size: 90%; + } +} + +@media (max-width: 768px) { + .invoice-preview-wrapper { + font-size: 85%; + } + + .invoice-preview-wrapper table th, + .invoice-preview-wrapper table td { + padding: 0.5rem !important; + } +} + +@media (max-width: 576px) { + .invoice-preview-wrapper { + font-size: 80%; + } + + .invoice-preview-wrapper .d-flex { + flex-direction: column !important; + } + + .invoice-preview-wrapper .text-end, + .invoice-preview-wrapper .text-start { + text-align: center !important; + } +} + +/* Prevent any fixed pixel widths */ +.invoice-preview-wrapper [style*="width:"]:not([style*="width:100%"]):not([style*="width:auto"]) { + width: auto !important; + max-width: 100% !important; +} + +.invoice-preview-wrapper [style*="min-width"] { + min-width: 0 !important; +} + /* -------------------------------------------------- COMPACT CARD DESIGN -------------------------------------------------- */ @@ -332,6 +423,30 @@ body { font-size: 0.8rem; } } + +@media print { + .invoice-preview-wrapper { + max-width: 100% !important; + width: 100% !important; + overflow: visible !important; + } + + .invoice-preview-wrapper * { + visibility: visible !important; + } + + .glass-card { + box-shadow: none !important; + border: 1px solid #000 !important; + } + + .card-header-compact { + background: #000 !important; + color: #fff !important; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } +} @@ -344,7 +459,7 @@ body { Invoice Overview -
+
@include('admin.popup_invoice', [ 'invoice' => $invoice, 'shipment' => $shipment, diff --git a/resources/views/admin/popup_invoice.blade.php b/resources/views/admin/popup_invoice.blade.php index ce9392b..51775be 100644 --- a/resources/views/admin/popup_invoice.blade.php +++ b/resources/views/admin/popup_invoice.blade.php @@ -56,7 +56,7 @@ } .id-container { - margin-bottom: 1rem; /* Reduced from 1.5rem */ + margin-bottom: 1rem; } .id-box { @@ -67,6 +67,9 @@ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; height: 100%; + display: flex; + align-items: center; + gap: 1rem; } .id-box:hover { @@ -82,34 +85,29 @@ border-left: 4px solid var(--success); } - .id-box-accent { - border-left: 4px solid var(--warning); - } - .id-icon { - width: 36px; - height: 36px; - border-radius: 50%; + width: 48px; + height: 48px; + border-radius: var(--border-radius); display: flex; align-items: center; justify-content: center; - margin-bottom: 0.5rem; /* Reduced from 0.75rem */ - font-size: 1rem; + font-size: 1.2rem; + flex-shrink: 0; } .id-icon-primary { - background: rgba(52, 152, 219, 0.1); - color: var(--secondary); + background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); + color: white; } .id-icon-secondary { - background: rgba(39, 174, 96, 0.1); - color: var(--success); + background: linear-gradient(135deg, #27ae60 0%, #219653 100%); + color: white; } - .id-icon-accent { - background: rgba(243, 156, 18, 0.1); - color: var(--warning); + .id-content { + flex: 1; } .id-label { @@ -126,76 +124,87 @@ font-weight: 700; color: var(--primary); margin-bottom: 0; + word-break: break-word; + line-height: 1.3; } - .date-container { - background: white; - border-radius: var(--border-radius); - padding: 1rem; /* Reduced from 1.25rem */ - margin-bottom: 1rem; /* Reduced from 1.5rem */ - border: 1px solid #e9ecef; - box-shadow: var(--box-shadow); - } - - .date-card { - text-align: center; - padding: 0.75rem; - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); - border-radius: var(--border-radius); - border: 1px solid rgba(0,0,0,0.05); - } - - .date-icon { - width: 40px; - height: 40px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto 0.5rem; /* Reduced from 0.75rem */ - background: var(--secondary); + /* Enhanced Date Section with Blue-Purple Gradient */ + .date-badge { + font-size: 0.85rem; + padding: 0.75rem 1rem; + border-radius: 8px; + font-weight: 500; + background: linear-gradient(135deg, #3498db 0%, #9b59b6 100%); color: white; - font-size: 1rem; + border: none; + min-width: 140px; + position: relative; + overflow: hidden; + box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2); } - .date-label { - font-size: 0.8rem; - color: #6c757d; - font-weight: 600; - margin-bottom: 0.5rem; + .date-badge:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3); + } + + .date-badge .badge-label { + font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; - } - - .date-value { - font-size: 1rem; - font-weight: 700; - color: var(--primary); - padding: 0.5rem; - background: white; - border-radius: 4px; - border: 1px solid #e9ecef; - } - - .date-connector { + color: rgba(255, 255, 255, 0.9); + margin-bottom: 0.25rem; display: flex; align-items: center; - justify-content: center; - height: 100%; + gap: 4px; } - .date-connector i { - background: var(--light); - padding: 10px; + .date-badge .badge-label i { + font-size: 0.6rem; + } + + .date-badge .badge-value { + font-weight: 700; + font-size: 0.95rem; + color: white; + } + + .date-badge.due-date { + background: linear-gradient(135deg, #3498db 0%, #9b59b6 100%); + } + + .date-badge.overdue { + background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); + animation: pulse 2s infinite; + } + + @keyframes pulse { + 0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); } + 70% { box-shadow: 0 0 0 6px rgba(231, 76, 60, 0); } + 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); } + } + + .date-separator { + color: #dee2e6; + font-weight: 300; + padding: 0 0.5rem; + display: flex; + align-items: center; + } + + .date-separator i { + background: white; + padding: 8px; border-radius: 50%; color: var(--secondary); border: 2px solid #e9ecef; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .card { border: 1px solid #e9ecef; border-radius: var(--border-radius); - margin-bottom: 1rem; /* Reduced from 1.5rem */ + margin-bottom: 1rem; box-shadow: var(--box-shadow); } @@ -228,27 +237,18 @@ background-color: rgba(52, 152, 219, 0.03); } - .summary-card { - background: var(--light); - border-left: 4px solid var(--secondary); - } - - .summary-header { - background: var(--primary); - color: white; + /* Simplified Summary Section */ + .summary-container { + margin: 2rem 0; } .amount-row { - border-bottom: 1px solid #e9ecef; + display: flex; + justify-content: space-between; + align-items: center; padding: 0.75rem 0; } - .total-row { - border-top: 2px solid #dee2e6; - font-size: 1.1rem; - font-weight: 700; - } - .text-primary { color: var(--primary) !important; } @@ -268,15 +268,20 @@ /* COMPACT HEADER STYLES */ .compact-header { - margin-bottom: 0.75rem; /* Reduced from default */ + margin-bottom: 0.75rem; } .compact-header .invoice-title { - margin-bottom: 0.25rem; /* Reduced gap */ + margin-bottom: 0.25rem; } - .compact-header .status-badge { - margin-top: 0.25rem; /* Reduced gap */ + /* Date and status row */ + .date-status-row { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 0.75rem; + flex-wrap: wrap; } @media (max-width: 768px) { @@ -284,10 +289,6 @@ margin: 1rem; } - .date-connector { - margin: 1rem 0; - } - .table-responsive { font-size: 0.8rem; } @@ -295,6 +296,55 @@ .id-box { margin-bottom: 1rem; } + + .date-status-row { + justify-content: flex-start; + margin-top: 0.5rem; + } + + .compact-header .col-md-6.text-end { + text-align: left !important; + } + + .date-badge { + min-width: 120px; + } + + .summary-container { + padding: 0 1rem; + } + } + + @media (max-width: 576px) { + .date-status-row { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .date-separator { + display: none; + } + + .date-badge { + width: 100%; + } + + .id-box { + flex-direction: column; + text-align: center; + gap: 0.75rem; + } + + .id-icon { + width: 40px; + height: 40px; + font-size: 1rem; + } + + .table-responsive { + overflow-x: auto; + } } @@ -318,108 +368,89 @@
- - - {{ ucfirst($invoice->status) }} - -
-
- - - -
-
- -
-
-
- +
+ +
+
+ INVOICE DATE +
+
{{ \Carbon\Carbon::parse($invoice->invoice_date)->format('M d, Y') }}
-
Invoice ID
-
{{ $invoice->invoice_number }}
-
-
- - -
-
-
- -
-
Order ID
-
- @if($invoice->order && $invoice->order->order_id) - {{ $invoice->order->order_id }} - @elseif($invoice->order_id) - {{ $invoice->order_id }} - @else - N/A - @endif -
-
-
- - -
-
-
- -
-
Shipment ID
-
- @php - $shipmentId = 'N/A'; - // Try multiple ways to get shipment ID - if($invoice->shipment && $invoice->shipment->shipment_id) { - $shipmentId = $invoice->shipment->shipment_id; - } elseif($invoice->shipment_id) { - $shipmentId = $invoice->shipment_id; - } elseif(isset($shipment) && $shipment && $shipment->shipment_id) { - $shipmentId = $shipment->shipment_id; - } - @endphp - {{ $shipmentId }} + + +
+
+ DUE DATE +
+
{{ \Carbon\Carbon::parse($invoice->due_date)->format('M d, Y') }}
+ + + + + {{ ucfirst($invoice->status) }} +
-
-
-
-
-
- +
+
+ +
+
+
+ +
+
+
ORDER ID
+
+ @if($invoice->order && $invoice->order->order_id) + {{ $invoice->order->order_id }} + @elseif($invoice->order_id) + {{ $invoice->order_id }} + @else + N/A + @endif +
-
INVOICE DATE
-
{{ \Carbon\Carbon::parse($invoice->invoice_date)->format('M d, Y') }}
-
-
- -
-
-
-
-
- + + +
+
+
+
-
DUE DATE
-
- {{ \Carbon\Carbon::parse($invoice->due_date)->format('M d, Y') }} +
+
SHIPMENT ID
+
+ @php + $shipmentId = 'N/A'; + // Try multiple ways to get shipment ID + if($invoice->shipment && $invoice->shipment->shipment_id) { + $shipmentId = $invoice->shipment->shipment_id; + } elseif($invoice->shipment_id) { + $shipmentId = $invoice->shipment_id; + } elseif(isset($shipment) && $shipment && $shipment->shipment_id) { + $shipmentId = $shipment->shipment_id; + } + @endphp + {{ $shipmentId }} +
@@ -520,53 +551,27 @@
-
-
-
-
-
- Final Summary -
+
+
+
+ +
+ Subtotal Amount + ₹{{ number_format($invoice->final_amount,2) }}
-
-
- Amount: - ₹{{ number_format($invoice->final_amount,2) }} -
- - @if($invoice->tax_type === 'gst') - {{-- CGST --}} -
- CGST ({{ $invoice->cgst_percent ?? ($invoice->gst_percent/2) }}%): - ₹{{ number_format($invoice->gst_amount/2, 2) }} -
- - {{-- SGST --}} -
- SGST ({{ $invoice->sgst_percent ?? ($invoice->gst_percent/2) }}%): - ₹{{ number_format($invoice->gst_amount/2, 2) }} -
- - @elseif($invoice->tax_type === 'igst') - {{-- IGST --}} -
- IGST ({{ $invoice->igst_percent ?? $invoice->gst_percent }}%): - ₹{{ number_format($invoice->gst_amount, 2) }} -
- @else - {{-- Default GST --}} -
- GST ({{ $invoice->gst_percent }}%): - ₹{{ number_format($invoice->gst_amount, 2) }} -
- @endif - -
- Total Payable: - ₹{{ number_format($invoice->final_amount_with_gst,2) }} -
+ + +
+ GST Amount + ₹{{ number_format($invoice->gst_amount, 2) }} +
+ + +
+ Total Payable Amount + ₹{{ number_format($invoice->final_amount_with_gst,2) }}
@@ -586,12 +591,6 @@ @endif
- - -
-

Thank you for your business!

-

For any inquiries, contact us at support@Kent Logistic

-