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

app/Http/Controllers/Admin/AdminInvoiceController.php

@@ -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)
     // -------------------------------------------------------------

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;
+    }
+}
 </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,

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;
+            width: 48px;
-            height: 36px;
+            height: 48px;
-            border-radius: 50%;
+            border-radius: var(--border-radius);
             display: flex;
             align-items: center;
             justify-content: center;
-            margin-bottom: 0.5rem; /* Reduced from 0.75rem */
+            font-size: 1.2rem;
-            font-size: 1rem;
+            flex-shrink: 0;
         }
         
         .id-icon-primary {
-            background: rgba(52, 152, 219, 0.1);
+            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
-            color: var(--secondary);
+            color: white;
         }
         
         .id-icon-secondary {
-            background: rgba(39, 174, 96, 0.1);
+            background: linear-gradient(135deg, #27ae60 0%, #219653 100%);
-            color: var(--success);
+            color: white;
         }
         
-        .id-icon-accent {
+        .id-content {
-            background: rgba(243, 156, 18, 0.1);
+            flex: 1;
-            color: var(--warning);
         }
         
         .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 {
+        /* Enhanced Date Section with Blue-Purple Gradient */
-            background: white;
+        .date-badge {
-            border-radius: var(--border-radius);
+            font-size: 0.85rem;
-            padding: 1rem; /* Reduced from 1.25rem */
+            padding: 0.75rem 1rem;
-            margin-bottom: 1rem; /* Reduced from 1.5rem */
+            border-radius: 8px;
-            border: 1px solid #e9ecef;
+            font-weight: 500;
-            box-shadow: var(--box-shadow);
+            background: linear-gradient(135deg, #3498db 0%, #9b59b6 100%);
-        }
-        
-        .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);
             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 {
+        .date-badge:hover {
-            font-size: 0.8rem;
+            transform: translateY(-2px);
-            color: #6c757d;
+            box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
-            font-weight: 600;
+        }
-            margin-bottom: 0.5rem;
+        
+        .date-badge .badge-label {
+            font-size: 0.7rem;
             text-transform: uppercase;
             letter-spacing: 0.5px;
-        }
+            color: rgba(255, 255, 255, 0.9);
-        
+            margin-bottom: 0.25rem;
-        .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 {
             display: flex;
             align-items: center;
-            justify-content: center;
+            gap: 4px;
-            height: 100%;
         }
         
-        .date-connector i {
+        .date-badge .badge-label i {
-            background: var(--light);
+            font-size: 0.6rem;
-            padding: 10px;
+        }
+        
+        .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 {
+        /* Simplified Summary Section */
-            background: var(--light);
+        .summary-container {
-            border-left: 4px solid var(--secondary);
+            margin: 2rem 0;
-        }
-        
-        .summary-header {
-            background: var(--primary);
-            color: white;
         }
         
         .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 {
+        /* Date and status row */
-            margin-top: 0.25rem; /* Reduced gap */
+        .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 -->
+                    <!-- Order ID Box -->
-                    <div class="col-md-4 mb-3">
+                    <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="col-md-6 mb-3">
-                        <div class="id-box id-box-accent">
+                        <div class="id-box id-box-secondary">
-                            <div class="id-icon id-icon-accent">
+                            <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>
 
-            <!-- ============================
+      @php
-                 FINAL SUMMARY
+        $totalAmount   = $invoice->final_amount;
-            ============================ -->
+        $gstAmount     = $invoice->gst_amount;
-            <div class="row">
+        $totalPayable  = $invoice->final_amount_with_gst;
-                <div class="col-md-6 offset-md-6">
+
-                    <div class="card summary-card">
+        $paidAmount    = $invoice->totalPaid();
-                        <div class="card-header summary-header">
+        $remaining     = $invoice->remainingAmount();
-                            <h6 class="mb-0 fw-bold">
+        @endphp
-                                <i class="fas fa-calculator me-2"></i> Final Summary
+
-                            </h6>
+<div class="summary-container">
-                        </div>
+    <div class="row justify-content-center">
-                        <div class="card-body">
+        <div class="col-lg-8">
-                            <div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
+
-                                <span class="fw-semibold">Amount:</span>
+            <div class="amount-row">
-                                <span class="fw-bold text-dark">₹{{ number_format($invoice->final_amount,2) }}</span>
+                <span>Total Amount</span>
+                <span class="fw-bold">₹{{ number_format($totalAmount,2) }}</span>
             </div>
 
-                            @if($invoice->tax_type === 'gst')
+            <div class="amount-row">
-                                {{-- CGST --}}
+                <span>GST Amount</span>
-                                <div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
+                <span class="fw-bold text-danger">
-                                    <span class="fw-semibold">CGST ({{ $invoice->cgst_percent ?? ($invoice->gst_percent/2) }}%):</span>
+                    + ₹{{ number_format($gstAmount,2) }}
-                                    <span class="fw-bold text-danger">₹{{ number_format($invoice->gst_amount/2, 2) }}</span>
+                </span>
             </div>
 
-                                {{-- SGST --}}
+            <div class="amount-row border-top pt-2">
-                                <div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
+                <span class="fw-bold">Total Payable</span>
-                                    <span class="fw-semibold">SGST ({{ $invoice->sgst_percent ?? ($invoice->gst_percent/2) }}%):</span>
+                <span class="fw-bold text-success">
-                                    <span class="fw-bold text-danger">₹{{ number_format($invoice->gst_amount/2, 2) }}</span>
+                    ₹{{ number_format($totalPayable,2) }}
+                </span>
             </div>
 
-                            @elseif($invoice->tax_type === 'igst')
+            <div class="amount-row">
-                                {{-- IGST --}}
+                <span>Paid Amount</span>
-                                <div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
+                <span class="fw-bold text-primary">
-                                    <span class="fw-semibold">IGST ({{ $invoice->igst_percent ?? $invoice->gst_percent }}%):</span>
+                    − ₹{{ number_format($paidAmount,2) }}
-                                    <span class="fw-bold text-danger">₹{{ number_format($invoice->gst_amount, 2) }}</span>
+                </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>
 
+            
             <!-- ============================
                  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) {
@@ -616,5 +640,6 @@
         }
     }
 </script>
+
 </body>
 </html>

resources/views/admin/shipments.blade.php

@@ -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;
+        display: grid;
-        flex-wrap: wrap;
+        grid-template-columns: repeat(8, 1fr);
-        gap: 20px;
+        gap: 12px;
-        justify-content: space-between;
+        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 Styles (Same as Account Dashboard) ---------- */
-    .pagination-container, .modal-pagination-container {
+    .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
+// Initialize pagination on page load
-let modalCurrentPage = 1;
-const modalItemsPerPage = 10;
-let modalAllOrders = @json($availableOrders);
-
-// Initialize both paginations on page load
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize main table pagination
     renderTable();
     updatePaginationControls();
     
-    // Initialize modal pagination
+    // Bind pagination events
-    renderModalTable();
-    updateModalPaginationControls();
-    
-    // Bind main 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
+// Pagination Functions
-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
-// ====================================
-
 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);
 }
 
-// ====================================
+// Render Table Function
-// 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
 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)
+    // Sort by creation date (newest first)
-    const sortedItems = [...filteredShipments].sort((a, b) => {
+    const sortedItems = [...paginatedItems].sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
-        // 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;
     
     // Render table rows
     tbody.innerHTML = '';
-    paginatedItems.forEach((shipment, index) => {
+    sortedItems.forEach((shipment, index) => {
-        // Calculate display number in reverse order
+        const displayIndex = filteredShipments.length - (startIndex + index);
-        const displayNumber = reverseStartIndex - 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

routes/web.php

@@ -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'])