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

Merge branch 'dev' of http://103.248.30.24:3000/kent-logistics/Kent-logistics-Laravel into dev

Browse Source
This commit is contained in:
Abhishek Mali
2025-12-23 09:51:35 +05:30
parent e0a8a5c69c a6dd919d3f
commit cd9a786ef4
7 changed files with 733 additions and 515 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/Http/Controllers/Admin/AdminInvoiceController.php
View File

@@ -26,13 +26,11 @@ class AdminInvoiceController extends Controller
// -------------------------------------------------------------
public function popup($id)
{
$invoice = Invoice::with(['items', 'order'])->findOrFail($id);
$invoice = Invoice::with(['items', 'order', 'installments'])->findOrFail($id);
// Find actual Shipment record
$shipment = \App\Models\Shipment::whereHas('items', function ($q) use ($invoice) {
$q->where('order_id', $invoice->order_id);
})
->first();
})->first();
return view('admin.popup_invoice', compact('invoice', 'shipment'));
}
@@ -145,6 +143,22 @@ class AdminInvoiceController extends Controller
$invoice->update(['pdf_path' => 'invoices/' . $fileName]);
}
public function downloadInvoice($id)
{
$invoice = Invoice::findOrFail($id);
// Generate PDF if missing
if (
!$invoice->pdf_path ||
!file_exists(public_path($invoice->pdf_path))
) {
$this->generateInvoicePDF($invoice);
$invoice->refresh();
}
return response()->download(public_path($invoice->pdf_path));
}
// -------------------------------------------------------------
// INSTALLMENTS (ADD/DELETE)
// -------------------------------------------------------------

BIN
public/invoices/invoice-INV-2025-000029.pdf
View File

Binary file not shown.

BIN
public/invoices/invoice-INV-2025-000031.pdf Normal file
View File

Binary file not shown.

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,

413
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>
<!-- ============================
@@ -519,78 +550,71 @@
</div>
</div>
<!-- ============================
FINAL 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>
@php
$totalAmount = $invoice->final_amount;
$gstAmount = $invoice->gst_amount;
$totalPayable = $invoice->final_amount_with_gst;
$paidAmount = $invoice->totalPaid();
$remaining = $invoice->remainingAmount();
@endphp
<div class="summary-container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="amount-row">
<span>Total Amount</span>
<span class="fw-bold">₹{{ number_format($totalAmount,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 class="amount-row">
<span>GST Amount</span>
<span class="fw-bold text-danger">
+ ₹{{ number_format($gstAmount,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 class="amount-row border-top pt-2">
<span class="fw-bold">Total Payable</span>
<span class="fw-bold text-success">
₹{{ number_format($totalPayable,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>
<span class="fw-bold text-danger">₹{{ number_format($invoice->gst_amount, 2) }}</span>
<div class="amount-row">
<span>Paid Amount</span>
<span class="fw-bold text-primary">
− ₹{{ number_format($paidAmount,2) }}
</span>
</div>
<div class="amount-row border-top pt-2">
<span class="fw-bold text-danger">Remaining Amount</span>
<span class="fw-bold text-danger fs-5">
₹{{ number_format($remaining,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>
</div>
</div>
</div>
</div>
</div>
<!-- ============================
FOOTER — DOWNLOAD & SHARE
============================ -->
<div class="mt-4 pt-3 border-top text-center">
@if($invoice->pdf_path)
<a href="{{ asset($invoice->pdf_path) }}" class="btn btn-primary me-2" download>
<a href="{{ route('admin.invoices.download', $invoice->id) }}"
class="btn btn-primary me-2">
<i class="fas fa-download me-1"></i> Download PDF
</a>
<button class="btn btn-success" onclick="shareInvoice()">
<i class="fas fa-share me-1"></i> Share
</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>
@@ -605,7 +629,7 @@
const shareData = {
title: "Invoice {{ $invoice->invoice_number }}",
text: "Sharing invoice {{ $invoice->invoice_number }}",
url: "{{ asset($invoice->pdf_path) }}"
url: "{{ route('admin.invoices.download', $invoice->id) }}"
};
if (navigator.share) {
@@ -615,6 +639,7 @@
alert("Link copied! Sharing not supported on this browser.");
}
}
</script>
</script>
</body>
</html>

590
resources/views/admin/shipments.blade.php
View File

@@ -734,17 +734,31 @@
text-decoration: underline;
}
/* Shipment Details Modal */
/* Shipment Details Modal - EDGE-TO-EDGE STYLING */
.modal-xl.edge-to-edge {
max-width: 95vw !important;
width: 95vw !important;
margin: 1vh auto !important;
}
/* UPDATED: Shipment Order Details Modal - ALSO EDGE-TO-EDGE */
.modal-xl.edge-to-edge.order-details-modal {
max-width: 95vw !important;
width: 95vw !important;
margin: 1vh auto !important;
}
.shipment-details-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 25px 30px 15px;
padding: 25px 35px 15px;
border-radius: 20px 20px 0 0;
}
.shipment-details-body {
padding: 40px 45px;
padding: 30px 35px;
width: 100%;
}
.shipment-info-row {
@@ -824,47 +838,63 @@
border-bottom-right-radius: 10px;
}
/* Shipment Totals Section */
/* Shipment Totals Section - SINGLE ROW ON DESKTOP */
.shipment-totals {
margin-top: 25px;
padding: 25px;
padding: 25px 20px;
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
border-left: 4px solid #4361ee;
width: 100%;
}
.shipment-totals-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
justify-content: center;
align-items: stretch;
width: 100%;
}
.shipment-total-item {
flex: 1;
min-width: 150px;
text-align: center;
padding: 15px;
padding: 15px 10px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 1;
}
.shipment-total-label {
font-weight: 600;
color: #64748b;
font-size: 12px;
font-size: 11px;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.shipment-total-value {
font-weight: 800;
font-size: 20px;
font-size: 18px;
color: #1e293b;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.total-amount {
@@ -873,6 +903,7 @@
padding: 10px;
border-radius: 8px;
border: 2px solid #10b981;
width: 100%;
}
.total-quantity {
@@ -881,6 +912,7 @@
padding: 10px;
border-radius: 8px;
border: 2px solid #0ea5e9;
width: 100%;
}
.total-weight {
@@ -889,6 +921,7 @@
padding: 10px;
border-radius: 8px;
border: 2px solid #8b5cf6;
width: 100%;
}
.total-cbm {
@@ -897,6 +930,7 @@
padding: 10px;
border-radius: 8px;
border: 2px solid #ef4444;
width: 100%;
}
.total-ctn {
@@ -905,6 +939,7 @@
padding: 10px;
border-radius: 8px;
border: 2px solid #f59e0b;
width: 100%;
}
.total-ttl-cbm {
@@ -913,6 +948,7 @@
padding: 10px;
border-radius: 8px;
border: 2px solid #8b5cf6;
width: 100%;
}
.total-ttl-kg {
@@ -921,6 +957,7 @@
padding: 10px;
border-radius: 8px;
border: 2px solid #14b8a6;
width: 100%;
}
/* Animation for loading */
@@ -964,8 +1001,8 @@
display: table-row;
}
/* ---------- Pagination Styles ---------- */
.pagination-container, .modal-pagination-container {
/* ---------- Pagination Styles (Same as Account Dashboard) ---------- */
.pagination-container {
display: flex;
justify-content: space-between;
align-items: center;
@@ -974,19 +1011,19 @@
border-top: 1px solid #eef3fb;
}
.pagination-info, .modal-pagination-info {
.pagination-info {
font-size: 13px;
color: #9ba5bb;
font-weight: 600;
}
.pagination-controls, .modal-pagination-controls {
.pagination-controls {
display: flex;
align-items: center;
gap: 8px;
}
.pagination-btn, .modal-pagination-btn {
.pagination-btn {
background: #fff;
border: 1px solid #e3eaf6;
color: #1a2951;
@@ -1003,13 +1040,13 @@
height: 32px;
}
.pagination-btn:hover:not(:disabled), .modal-pagination-btn:hover:not(:disabled) {
.pagination-btn:hover:not(:disabled) {
background: #1a2951;
color: white;
border-color: #1a2951;
}
.pagination-btn:disabled, .modal-pagination-btn:disabled {
.pagination-btn:disabled {
background: #f8fafc;
color: #cbd5e0;
border-color: #e2e8f0;
@@ -1017,7 +1054,7 @@
opacity: 0.6;
}
.pagination-page-btn, .modal-pagination-page-btn {
.pagination-page-btn {
background: #fff;
border: 1px solid #e3eaf6;
color: #1a2951;
@@ -1031,13 +1068,13 @@
text-align: center;
}
.pagination-page-btn:hover, .modal-pagination-page-btn:hover {
.pagination-page-btn:hover {
background: #1a2951;
color: white;
border-color: #1a2951;
}
.pagination-page-btn.active, .modal-pagination-page-btn.active {
.pagination-page-btn.active {
background: #1a2951;
color: white;
border-color: #1a2951;
@@ -1055,16 +1092,210 @@
padding: 0 4px;
}
/* Image-based pagination buttons */
.pagination-img-btn {
background: #fff;
border: 1px solid #e3eaf6;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 32px;
padding: 0;
}
.pagination-img-btn:hover:not(:disabled) {
background: #1a2951;
border-color: #1a2951;
}
.pagination-img-btn:disabled {
background: #f8fafc;
border-color: #e2e8f0;
cursor: not-allowed;
opacity: 0.5;
}
.pagination-img-btn img {
width: 16px;
height: 16px;
filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(748%) hue-rotate(201deg) brightness(93%) contrast(89%);
transition: filter 0.3s ease;
}
.pagination-img-btn:hover:not(:disabled) img {
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(106%) contrast(101%);
}
.pagination-img-btn:disabled img {
filter: brightness(0) saturate(100%) invert(84%) sepia(8%) saturate(165%) hue-rotate(179deg) brightness(89%) contrast(86%);
}
/* RESPONSIVE DESIGN FOR TABLET/MOBILE */
@media (max-width: 1200px) {
.modal-xl.edge-to-edge {
max-width: 96vw !important;
width: 96vw !important;
margin: 2vh auto !important;
}
.modal-xl.edge-to-edge.order-details-modal {
max-width: 96vw !important;
width: 96vw !important;
margin: 2vh auto !important;
}
.shipment-totals-row {
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
}
@media (max-width: 992px) {
.modal-xl.edge-to-edge {
max-width: 95vw !important;
width: 95vw !important;
margin: 2.5vh auto !important;
}
.modal-xl.edge-to-edge.order-details-modal {
max-width: 95vw !important;
width: 95vw !important;
margin: 2.5vh auto !important;
}
.shipment-details-body {
padding: 20px 25px;
}
.shipment-totals-row {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.pagination-container, .modal-pagination-container {
.pagination-container {
flex-direction: column;
gap: 10px;
align-items: stretch;
}
.pagination-controls, .modal-pagination-controls {
.pagination-controls {
justify-content: center;
}
.modal-xl.edge-to-edge {
max-width: 100vw !important;
width: 100vw !important;
margin: 0 !important;
height: 100vh !important;
max-height: 100vh !important;
}
.modal-xl.edge-to-edge.order-details-modal {
max-width: 100vw !important;
width: 100vw !important;
margin: 0 !important;
height: 100vh !important;
max-height: 100vh !important;
}
.shipment-details-body {
padding: 15px 20px;
}
.shipment-info-row {
flex-direction: column;
gap: 15px;
padding: 15px;
}
.shipment-info-item {
padding: 10px 0;
}
.shipment-totals {
padding: 20px 15px;
}
.shipment-totals-row {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.shipment-total-item {
padding: 12px 8px;
}
.shipment-total-label {
font-size: 10px;
}
.shipment-total-value {
font-size: 16px;
}
/* Order details modal specific responsive styles */
.order-details-content {
padding: 15px;
}
.order-details-table {
min-width: 1000px;
}
}
@media (max-width: 576px) {
.shipment-totals-row {
grid-template-columns: 1fr;
gap: 10px;
}
.modal-xl.edge-to-edge .modal-content {
border-radius: 0;
height: 100vh;
overflow-y: auto;
}
.modal-xl.edge-to-edge.order-details-modal .modal-content {
border-radius: 0;
height: 100vh;
overflow-y: auto;
}
.shipment-details-header {
padding: 20px 25px 15px;
border-radius: 0;
}
.order-details-header {
padding: 20px 15px 10px;
border-radius: 0;
}
.order-details-body {
padding: 15px;
}
}
@media (max-width: 480px) {
.modal-xl.edge-to-edge,
.modal-xl.edge-to-edge.order-details-modal {
margin: 0 !important;
padding: 0 !important;
}
.modal-content {
border-radius: 0 !important;
}
.shipment-details-body,
.order-details-body {
padding: 10px 15px;
}
}
</style>
@@ -1168,7 +1399,7 @@
<th>Amount (₹)</th>
</tr>
</thead>
<tbody id="modalOrdersTableBody">
<tbody>
@forelse($availableOrders as $order)
<tr>
<td>
@@ -1196,29 +1427,6 @@
</tbody>
</table>
</div>
<!-- Modal Pagination -->
<div class="modal-pagination-container" id="modalPaginationContainer">
<div class="modal-pagination-info" id="modalPageInfo">
Showing 1 to {{ min(10, count($availableOrders)) }} of {{ count($availableOrders) }} entries
</div>
<div class="modal-pagination-controls">
<button class="modal-pagination-btn" id="modalPrevPageBtn" title="Previous page" disabled>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div class="pagination-pages" id="modalPaginationPages">
<!-- Pages will be generated here by JavaScript -->
</div>
<button class="modal-pagination-btn" id="modalNextPageBtn" title="Next page" {{ count($availableOrders) <= 10 ? 'disabled' : '' }}>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
<div class="d-flex justify-content-end mt-4 mb-2">
<button type="button" class="btn-cancel me-3" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn-create">
@@ -1354,14 +1562,14 @@
<div class="pagination-container">
<div class="pagination-info" id="pageInfo">Showing 1 to {{ $shipments->count() }} of {{ $shipments->count() }} entries</div>
<div class="pagination-controls">
<button class="pagination-btn" id="prevPageBtn" title="Previous page" disabled>
<button class="pagination-img-btn" id="prevPageBtn" title="Previous page" disabled>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div class="pagination-pages" id="paginationPages">
</div>
<button class="pagination-btn" id="nextPageBtn" title="Next page" disabled>
<button class="pagination-img-btn" id="nextPageBtn" title="Next page" disabled>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
@@ -1373,7 +1581,7 @@
{{-- SHIPMENT DETAILS MODAL --}}
<div class="modal fade" id="shipmentDetailsModal" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-dialog modal-xl edge-to-edge modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header shipment-details-header">
<h5 class="modal-title fw-bold"><i class="bi bi-box-seam me-2"></i>Consolidated Shipment Details</h5>
@@ -1395,35 +1603,21 @@
</div>
<script>
// Main Pagination state
// Pagination state
let currentPage = 1;
const itemsPerPage = 10;
let allShipments = @json($shipments);
let filteredShipments = [...allShipments];
// Modal Pagination state
let modalCurrentPage = 1;
const modalItemsPerPage = 10;
let modalAllOrders = @json($availableOrders);
// Initialize both paginations on page load
// Initialize pagination on page load
document.addEventListener('DOMContentLoaded', function() {
// Initialize main table pagination
renderTable();
updatePaginationControls();
// Initialize modal pagination
renderModalTable();
updateModalPaginationControls();
// Bind main pagination events
// Bind pagination events
document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);
// Bind modal pagination events
document.getElementById('modalPrevPageBtn').addEventListener('click', goToModalPreviousPage);
document.getElementById('modalNextPageBtn').addEventListener('click', goToModalNextPage);
// Status Filter Functionality
const statusFilter = document.getElementById('statusFilter');
const searchInput = document.getElementById('searchInput');
@@ -1452,7 +1646,7 @@ document.addEventListener('DOMContentLoaded', function() {
if (!matchesSearch) include = false;
}
// Carrier filter
// Carrier filter (you can add carrier data attribute if needed)
if (selectedCarrier !== 'all') {
// Add carrier filtering logic here if you have carrier data
}
@@ -1474,26 +1668,7 @@ document.addEventListener('DOMContentLoaded', function() {
filterShipments();
});
// Helper function to extract numeric part from order ID
function extractOrderNumber(orderId) {
if (!orderId) return 0;
// Try to find numbers in the order ID
const matches = orderId.match(/\d+/g);
if (matches && matches.length > 0) {
// Take the last sequence of numbers (often the actual order number)
return parseInt(matches[matches.length - 1]);
}
// Fallback: try to convert the whole string
const num = parseInt(orderId.replace(/\D/g, ''));
return isNaN(num) ? 0 : num;
}
// ====================================
// MAIN PAGINATION FUNCTIONS
// ====================================
// Pagination Functions
function goToPreviousPage() {
if (currentPage > 1) {
currentPage--;
@@ -1532,11 +1707,11 @@ function updatePaginationControls() {
if (totalPages <= 7) {
// Show all pages
for (let i = 1; i <= totalPages; i++) {
addPageButton(i, paginationPages, currentPage);
addPageButton(i, paginationPages);
}
} else {
// Show first page, current page range, and last page
addPageButton(1, paginationPages, currentPage);
addPageButton(1, paginationPages);
if (currentPage > 3) {
paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
@@ -1546,18 +1721,18 @@ function updatePaginationControls() {
const end = Math.min(totalPages - 1, currentPage + 1);
for (let i = start; i <= end; i++) {
addPageButton(i, paginationPages, currentPage);
addPageButton(i, paginationPages);
}
if (currentPage < totalPages - 2) {
paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
}
addPageButton(totalPages, paginationPages, currentPage);
addPageButton(totalPages, paginationPages);
}
}
function addPageButton(pageNumber, container, currentPage) {
function addPageButton(pageNumber, container) {
const button = document.createElement('button');
button.className = 'pagination-page-btn';
if (pageNumber === currentPage) {
@@ -1572,93 +1747,7 @@ function addPageButton(pageNumber, container, currentPage) {
container.appendChild(button);
}
// ====================================
// MODAL PAGINATION FUNCTIONS
// ====================================
function goToModalPreviousPage() {
if (modalCurrentPage > 1) {
modalCurrentPage--;
renderModalTable();
updateModalPaginationControls();
}
}
function goToModalNextPage() {
const totalPages = Math.ceil(modalAllOrders.length / modalItemsPerPage);
if (modalCurrentPage < totalPages) {
modalCurrentPage++;
renderModalTable();
updateModalPaginationControls();
}
}
function updateModalPaginationControls() {
const totalPages = Math.ceil(modalAllOrders.length / modalItemsPerPage);
const prevBtn = document.getElementById('modalPrevPageBtn');
const nextBtn = document.getElementById('modalNextPageBtn');
const pageInfo = document.getElementById('modalPageInfo');
const paginationPages = document.getElementById('modalPaginationPages');
prevBtn.disabled = modalCurrentPage === 1;
nextBtn.disabled = modalCurrentPage === totalPages || totalPages === 0;
// Update page info text - Order count correctly
const startIndex = (modalCurrentPage - 1) * modalItemsPerPage + 1;
const endIndex = Math.min(modalCurrentPage * modalItemsPerPage, modalAllOrders.length);
pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${modalAllOrders.length} entries`;
// Generate page numbers
paginationPages.innerHTML = '';
if (totalPages <= 7) {
// Show all pages
for (let i = 1; i <= totalPages; i++) {
addModalPageButton(i, paginationPages);
}
} else {
// Show first page, current page range, and last page
addModalPageButton(1, paginationPages);
if (modalCurrentPage > 3) {
paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
}
const start = Math.max(2, modalCurrentPage - 1);
const end = Math.min(totalPages - 1, modalCurrentPage + 1);
for (let i = start; i <= end; i++) {
addModalPageButton(i, paginationPages);
}
if (modalCurrentPage < totalPages - 2) {
paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
}
addModalPageButton(totalPages, paginationPages);
}
}
function addModalPageButton(pageNumber, container) {
const button = document.createElement('button');
button.className = 'modal-pagination-page-btn';
if (pageNumber === modalCurrentPage) {
button.classList.add('active');
}
button.textContent = pageNumber;
button.addEventListener('click', () => {
modalCurrentPage = pageNumber;
renderModalTable();
updateModalPaginationControls();
});
container.appendChild(button);
}
// ====================================
// RENDER FUNCTIONS
// ====================================
// Render Main Table Function
// Render Table Function
function renderTable() {
const tbody = document.getElementById('shipmentsTableBody');
@@ -1677,27 +1766,15 @@ function renderTable() {
// Calculate pagination
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const paginatedItems = filteredShipments.slice(startIndex, endIndex);
// Sort by order_id in DESCENDING order (largest number first)
const sortedItems = [...filteredShipments].sort((a, b) => {
// Extract numeric part from order_id for comparison
const numA = extractOrderNumber(a.shipment_id);
const numB = extractOrderNumber(b.shipment_id);
return numB - numA; // DESCENDING order
});
const paginatedItems = sortedItems.slice(startIndex, endIndex);
// Calculate reverse index starting from total count
const totalCount = filteredShipments.length;
const reverseStartIndex = totalCount - (currentPage - 1) * itemsPerPage;
// Sort by creation date (newest first)
const sortedItems = [...paginatedItems].sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
// Render table rows
tbody.innerHTML = '';
paginatedItems.forEach((shipment, index) => {
// Calculate display number in reverse order
const displayNumber = reverseStartIndex - index;
sortedItems.forEach((shipment, index) => {
const displayIndex = filteredShipments.length - (startIndex + index);
const row = document.createElement('tr');
row.className = 'shipment-row';
row.setAttribute('data-status', shipment.status);
@@ -1710,7 +1787,7 @@ function renderTable() {
};
row.innerHTML = `
<td class="fw-bold">${displayNumber}</td>
<td class="fw-bold">${displayIndex}</td>
<td>
<a href="#" class="text-primary fw-bold" onclick="openShipmentDetails(${shipment.id})">
${shipment.shipment_id}
@@ -1736,6 +1813,7 @@ function renderTable() {
</a>
</td>
<td>
<div class="action-container">
<button type="button"
@@ -1804,71 +1882,9 @@ function renderTable() {
});
}
// Render Modal Table Function
function renderModalTable() {
const tbody = document.getElementById('modalOrdersTableBody');
if (modalAllOrders.length === 0) {
tbody.innerHTML = `
<tr>
<td colspan="12" class="text-muted text-center py-4">No available orders to add to shipment</td>
</tr>
`;
return;
}
// Calculate pagination
const startIndex = (modalCurrentPage - 1) * modalItemsPerPage;
const endIndex = startIndex + modalItemsPerPage;
// Sort by order_id in DESCENDING order (largest number first)
const sortedItems = [...modalAllOrders].sort((a, b) => {
// Extract numeric part from order_id for comparison
const numA = extractOrderNumber(a.order_id);
const numB = extractOrderNumber(b.order_id);
return numB - numA; // DESCENDING order
});
const paginatedItems = sortedItems.slice(startIndex, endIndex);
// Calculate reverse index starting from total count
const totalCount = modalAllOrders.length;
const reverseStartIndex = totalCount - (modalCurrentPage - 1) * modalItemsPerPage;
// Render table rows
tbody.innerHTML = '';
paginatedItems.forEach((order, index) => {
// Calculate display number in reverse order
const displayNumber = reverseStartIndex - index;
tbody.innerHTML += `
<tr>
<td>
<input type="checkbox" name="order_ids[]" value="${order.id}">
</td>
<td>
<a href="#" class="text-primary fw-bold">${order.order_id}</a>
</td>
<td>${order.origin}</td>
<td>${order.destination}</td>
<td>${order.ctn}</td>
<td>${order.qty}</td>
<td>${order.ttl_qty}</td>
<td>${order.cbm}</td>
<td>${order.ttl_cbm}</td>
<td>${order.kg}</td>
<td>${order.ttl_kg}</td>
<td class="fw-bold text-success">₹${parseFloat(order.ttl_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
</tr>
`;
});
}
// ====================================
// OTHER FUNCTIONS
// ====================================
// --------------------------------------------------------------------
// Function: Open Consolidated Shipment Details Modal
// --------------------------------------------------------------------
function openShipmentDetails(id) {
let modal = new bootstrap.Modal(document.getElementById('shipmentDetailsModal'));
let content = document.getElementById('shipmentDetailsContent');
@@ -1952,7 +1968,11 @@ function openShipmentDetails(id) {
html += `
<tr>
<td class="fw-bold">
<a href="javascript:void(0)"
class="text-primary fw-bold"
onclick="openShipmentOrderDetails(${order.id})">
${order.order_id}
</a>
</td>
<td>${order.origin || 'N/A'}</td>
<td>${order.destination || 'N/A'}</td>
@@ -2065,6 +2085,46 @@ document.addEventListener('DOMContentLoaded', function() {
});
});
});
function openShipmentOrderDetails(orderId) {
const modal = new bootstrap.Modal(
document.getElementById('shipmentOrderDetailsModal')
);
const body = document.getElementById('shipmentOrderDetailsBody');
body.innerHTML = "<p class='text-center text-muted'>Loading...</p>";
modal.show();
fetch(`/admin/orders/view/${orderId}`)
.then(res => res.text())
.then(html => {
body.innerHTML = html;
})
.catch(() => {
body.innerHTML =
"<p class='text-danger text-center'>Failed to load order details.</p>";
});
}
</script>
<!-- SHIPMENT ORDER DETAILS MODAL - UPDATED TO EDGE-TO-EDGE -->
<div class="modal fade" id="shipmentOrderDetailsModal" tabindex="-1">
<div class="modal-dialog modal-xl edge-to-edge order-details-modal modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header shipment-details-header order-details-header">
<h5 class="modal-title fw-bold"><i class="bi bi-file-text me-2"></i>Order Details</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body shipment-details-body order-details-body" id="shipmentOrderDetailsBody">
<p class="text-center text-muted">Loading order details...</p>
</div>
</div>
</div>
</div>
@endsection

4
routes/web.php
View File

@@ -223,6 +223,10 @@ Route::prefix('admin')
Route::post('/invoices/{id}/installment', [AdminInvoiceController::class, 'storeInstallment'])
->name('admin.invoice.installment.store');
Route::get(
'/admin/invoices/{id}/download',
[AdminInvoiceController::class, 'downloadInvoice']
)->name('admin.invoices.download');
Route::delete('/installment/{id}', [AdminInvoiceController::class, 'deleteInstallment'])