kent-logistics/Kent-logistics-Laravel
SHA256
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

invoice pop up invoice edit file chnages

Browse Source
This commit is contained in:
divya abdar
2025-12-22 17:30:47 +05:30
parent d2730e78f6
commit ea2532efc8
2 changed files with 346 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
resources/views/admin/invoice_edit.blade.php
View File

@@ -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;
}
}
</style>
<!-- Main Container -->
@@ -344,7 +459,7 @@ body {
<i class="fas fa-file-invoice me-2"></i>Invoice Overview
</h4>
</div>
<div class="card-body-compact">
<div class="card-body-compact invoice-preview-wrapper">
@include('admin.popup_invoice', [
'invoice' => $invoice,
'shipment' => $shipment,

377
resources/views/admin/popup_invoice.blade.php
View File

@@ -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;
}
}
</style>
</head>
@@ -318,6 +368,24 @@
</div>
<div class="col-md-6 text-end">
<div class="date-status-row">
<!-- Invoice Date -->
<div class="date-badge">
<div class="badge-label">
<i class="fas fa-calendar-alt"></i> INVOICE DATE
</div>
<div class="badge-value">{{ \Carbon\Carbon::parse($invoice->invoice_date)->format('M d, Y') }}</div>
</div>
<!-- Due Date -->
<div class="date-badge due-date @if($invoice->status == 'overdue') overdue @endif">
<div class="badge-label">
<i class="fas fa-clock"></i> DUE DATE
</div>
<div class="badge-value">{{ \Carbon\Carbon::parse($invoice->due_date)->format('M d, Y') }}</div>
</div>
<!-- Status Badge -->
<span class="status-badge
@if($invoice->status=='paid') bg-success
@elseif($invoice->status=='overdue') bg-danger
@@ -333,28 +401,21 @@
</div>
</div>
</div>
</div>
<!-- Three ID Boxes in One Row -->
<!-- ============================
ORDER & SHIPMENT ID BOXES
============================ -->
<div class="id-container">
<div class="row">
<!-- Invoice ID Box -->
<div class="col-md-4 mb-3">
<!-- Order ID Box -->
<div class="col-md-6 mb-3">
<div class="id-box id-box-primary">
<div class="id-icon id-icon-primary">
<i class="fas fa-receipt"></i>
</div>
<div class="id-label">Invoice ID</div>
<div class="id-value">{{ $invoice->invoice_number }}</div>
</div>
</div>
<!-- Order ID Box -->
<div class="col-md-4 mb-3">
<div class="id-box id-box-secondary">
<div class="id-icon id-icon-secondary">
<i class="fas fa-shopping-cart"></i>
</div>
<div class="id-label">Order ID</div>
<div class="id-content">
<div class="id-label">ORDER ID</div>
<div class="id-value">
@if($invoice->order && $invoice->order->order_id)
{{ $invoice->order->order_id }}
@@ -366,14 +427,16 @@
</div>
</div>
</div>
</div>
<!-- Shipment ID Box -->
<div class="col-md-4 mb-3">
<div class="id-box id-box-accent">
<div class="id-icon id-icon-accent">
<div class="col-md-6 mb-3">
<div class="id-box id-box-secondary">
<div class="id-icon id-icon-secondary">
<i class="fas fa-shipping-fast"></i>
</div>
<div class="id-label">Shipment ID</div>
<div class="id-content">
<div class="id-label">SHIPMENT ID</div>
<div class="id-value">
@php
$shipmentId = 'N/A';
@@ -392,38 +455,6 @@
</div>
</div>
</div>
<!-- ============================
DATES SECTION
============================ -->
<div class="date-container">
<div class="row align-items-center">
<div class="col-md-5">
<div class="date-card">
<div class="date-icon">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="date-label">INVOICE DATE</div>
<div class="date-value">{{ \Carbon\Carbon::parse($invoice->invoice_date)->format('M d, Y') }}</div>
</div>
</div>
<div class="col-md-2">
<div class="date-connector">
<i class="fas fa-arrow-right"></i>
</div>
</div>
<div class="col-md-5">
<div class="date-card">
<div class="date-icon">
<i class="fas fa-clock"></i>
</div>
<div class="date-label">DUE DATE</div>
<div class="date-value @if($invoice->status == 'overdue') text-danger @endif">
{{ \Carbon\Carbon::parse($invoice->due_date)->format('M d, Y') }}
</div>
</div>
</div>
</div>
</div>
<!-- ============================
@@ -520,53 +551,27 @@
</div>
<!-- ============================
FINAL SUMMARY
SIMPLIFIED INVOICE SUMMARY
============================ -->
<div class="row">
<div class="col-md-6 offset-md-6">
<div class="card summary-card">
<div class="card-header summary-header">
<h6 class="mb-0 fw-bold">
<i class="fas fa-calculator me-2"></i> Final Summary
</h6>
</div>
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
<span class="fw-semibold">Amount:</span>
<span class="fw-bold text-dark">₹{{ number_format($invoice->final_amount,2) }}</span>
<div class="summary-container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Subtotal -->
<div class="amount-row mb-2">
<span>Subtotal Amount</span>
<span class="fw-bold">₹{{ number_format($invoice->final_amount,2) }}</span>
</div>
@if($invoice->tax_type === 'gst')
{{-- CGST --}}
<div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
<span class="fw-semibold">CGST ({{ $invoice->cgst_percent ?? ($invoice->gst_percent/2) }}%):</span>
<span class="fw-bold text-danger">₹{{ number_format($invoice->gst_amount/2, 2) }}</span>
</div>
{{-- SGST --}}
<div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
<span class="fw-semibold">SGST ({{ $invoice->sgst_percent ?? ($invoice->gst_percent/2) }}%):</span>
<span class="fw-bold text-danger">₹{{ number_format($invoice->gst_amount/2, 2) }}</span>
</div>
@elseif($invoice->tax_type === 'igst')
{{-- IGST --}}
<div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
<span class="fw-semibold">IGST ({{ $invoice->igst_percent ?? $invoice->gst_percent }}%):</span>
<!-- GST -->
<div class="amount-row mb-2">
<span>GST Amount</span>
<span class="fw-bold text-danger">₹{{ number_format($invoice->gst_amount, 2) }}</span>
</div>
@else
{{-- Default GST --}}
<div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
<span class="fw-semibold">GST ({{ $invoice->gst_percent }}%):</span>
<span class="fw-bold text-danger">₹{{ number_format($invoice->gst_amount, 2) }}</span>
</div>
@endif
<div class="d-flex justify-content-between align-items-center pt-1">
<span class="fw-bold text-dark">Total Payable:</span>
<span class="fw-bold text-success">₹{{ number_format($invoice->final_amount_with_gst,2) }}</span>
</div>
<!-- Total Payable -->
<div class="amount-row mb-2 pt-2 border-top">
<span class="fw-bold">Total Payable Amount</span>
<span class="fw-bold text-success fs-5">₹{{ number_format($invoice->final_amount_with_gst,2) }}</span>
</div>
</div>
</div>
@@ -586,12 +591,6 @@
</button>
@endif
</div>
<!-- Footer Message -->
<div class="mt-4 pt-3 border-top text-center text-muted">
<p class="mb-1">Thank you for your business!</p>
<p class="mb-0">For any inquiries, contact us at support@Kent Logistic</p>
</div>
</div>
</div>