diff --git a/app/Http/Controllers/Admin/ShipmentController.php b/app/Http/Controllers/Admin/ShipmentController.php
index d281059..0eab511 100644
--- a/app/Http/Controllers/Admin/ShipmentController.php
+++ b/app/Http/Controllers/Admin/ShipmentController.php
@@ -209,4 +209,20 @@ class ShipmentController extends Controller
         return redirect()->route('admin.shipments')
                         ->with('success', 'Shipment deleted successfully.');
     }
+
+    public function dummy($id)
+    {
+        // Load shipment
+        $shipment = Shipment::with('orders')->findOrFail($id);
+
+        // Dummy data (you can modify anytime)
+        $dummyData = [
+            'title' => 'Dummy Shipment Preview',
+            'generated_on' => now()->format('d M Y h:i A'),
+            'note' => 'This is dummy shipment information for testing page layout.'
+        ];
+
+        return view('admin.view_shipment', compact('shipment', 'dummyData'));
+    }
+
 }
\ No newline at end of file
diff --git a/database/migrations/2025_12_08_044216_create_support_tickets_table.php b/database/migrations/2025_12_08_044216_create_support_tickets_table.php
new file mode 100644
index 0000000..cb44083
--- /dev/null
+++ b/database/migrations/2025_12_08_044216_create_support_tickets_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('support_tickets', function (Blueprint $table) {
+            $table->id();
+            $table->unsignedBigInteger('user_id');  // user who owns the chat
+            $table->string('status')->default('open'); // open / closed
+            $table->timestamps();
+
+            // foreign key constraint (optional but recommended)
+            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('support_tickets');
+    }
+};
diff --git a/database/migrations/2025_12_08_044254_create_chat_messages_table.php b/database/migrations/2025_12_08_044254_create_chat_messages_table.php
new file mode 100644
index 0000000..d37ded5
--- /dev/null
+++ b/database/migrations/2025_12_08_044254_create_chat_messages_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('chat_messages', function (Blueprint $table) {
+            $table->id();
+            $table->unsignedBigInteger('ticket_id'); // support ticket ID
+            $table->unsignedBigInteger('sender_id'); // user or admin/staff
+            $table->text('message')->nullable();     // message content
+            $table->string('file_path')->nullable(); // image/pdf/video
+            $table->string('file_type')->default('text'); // text/image/pdf/video
+            $table->timestamps();
+
+            // foreign keys
+            $table->foreign('ticket_id')->references('id')->on('support_tickets')->onDelete('cascade');
+            $table->foreign('sender_id')->references('id')->on('users')->onDelete('cascade'); // admin also stored in users table? If admin separate, change later.
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('chat_messages');
+    }
+};
diff --git a/resources/views/admin/shipments.blade.php b/resources/views/admin/shipments.blade.php
index 24a2193..4fa2ad0 100644
--- a/resources/views/admin/shipments.blade.php
+++ b/resources/views/admin/shipments.blade.php
@@ -258,6 +258,14 @@
         line-height: 1.2 !important;
     }
     
+    /* Loading Status - PROPER */
+    .badge-loading {
+        background: linear-gradient(135deg, #e3f2fd, #90caf9) !important;
+        color: #1565c0 !important;
+        border-color: #2196f3 !important;
+        width: 110px;
+    }
+    
     /* Pending Status - SAME SIZE */
     .badge-pending {
         background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
@@ -320,16 +328,9 @@
         padding: 6px 12px !important;
     }
     
-    /* NEW: Action Button Styles */
-    .action-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-    }
-    
-    .btn-view-details {
-        background: linear-gradient(135deg, #10b981, #059669);
+    /* Eye Button Style - PROPER */
+    .btn-eye {
+        background: linear-gradient(135deg, #4cc9f0, #4361ee);
         color: white;
         border: none;
         border-radius: 8px;
@@ -341,14 +342,19 @@
         justify-content: center;
         width: 36px;
         height: 36px;
-        text-decoration: none;
+        margin: 0 auto;
+    }
+
+    .btn-eye:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(76, 201, 240, 0.3);
+        background: linear-gradient(135deg, #38bdf8, #3a56d4);
     }
     
-    .btn-view-details:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
-        background: linear-gradient(135deg, #059669, #047857);
-        color: white;
+    /* Action Button Styles */
+    .action-container {
+        position: relative;
+        display: inline-block;
     }
     
     .btn-edit-status {
@@ -393,6 +399,16 @@
         display: flex;
     }
     
+    /* Loading Status Option - PROPER */
+    .status-option.loading {
+        background: rgba(33, 150, 243, 0.1);
+        color: #2196f3;
+    }
+
+    .status-option.loading:hover {
+        background: rgba(33, 150, 243, 0.2);
+    }
+    
     .status-option {
         padding: 10px 12px;
         border: none;
@@ -455,6 +471,11 @@
         border-radius: 50%;
         display: inline-block;
     }
+
+    /* Loading Status Indicator - PROPER */
+    .status-indicator.loading {
+        background: #2196f3;
+    }
     
     .status-indicator.pending {
         background: #f8961e;
@@ -1108,15 +1129,13 @@
         </div>
     @endif
 
-    <!-- ============================= -->
-    <!--    SEARCH BAR AND ADD BUTTON  -->
-    <!-- ============================= -->
     <div class="search-shipment-bar">
         <span class="search-icon">🔍</span>
         <input type="text" id="searchInput" placeholder="Search Shipments...">
         <div class="status-filter-container">
             <select id="statusFilter" class="status-filter-select">
                 <option value="all">All Status</option>
+                <option value="loading">Loading</option>
                 <option value="pending">Pending</option>
                 <option value="in_transit">In Transit</option>
                 <option value="dispatched">Dispatched</option>
@@ -1135,9 +1154,6 @@
         </button>
     </div>
 
-    <!-- ============================= -->
-    <!--   CREATE SHIPMENT MODAL -->
-    <!-- ============================= -->
     <div class="modal fade" id="createShipmentModal" tabindex="-1" aria-labelledby="createShipmentModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-xl">
             <div class="modal-content">
@@ -1229,9 +1245,6 @@
         </div>
     </div>
 
-    <!-- ============================= -->
-    <!--      SHIPMENT LIST TABLE     -->
-    <!-- ============================= -->
     <div class="card">
         <div class="card-header">
             <h5 class="mb-0"><i class="bi bi-truck me-2"></i> Shipments List</h5>
@@ -1252,6 +1265,7 @@
                             <th>Total Amount</th>
                             <th>Status</th>
                             <th>Date</th>
+                            <th>View</th>
                             <th>Action</th>
                         </tr>
                     </thead>
@@ -1282,52 +1296,49 @@
                                 </span>
                             </td>
                             <td>{{ \Carbon\Carbon::parse($ship->shipment_date)->format('d M Y') }}</td>
+                            <td>
+                                <button type="button" class="btn-eye" onclick="openShipmentDetails({{ $ship->id }})" title="View Shipment">
+                                    <i class="bi bi-eye"></i>
+                                </button>
+                            </td>
+                            
                             <td>
                                 <div class="action-container">
-                                    <!-- 👁️ View Icon -->
-                                    <!-- <a href="{{ route('admin.shipment.view', $ship->id) }}" 
-                                       class="btn-view-details" 
-                                       title="View Shipment">
-                                        <i class="bi bi-eye"></i>
-                                    </a> -->
-
-                                    <!-- ✏️ Edit Status Icon -->
-                                    <button type="button" class="btn-edit-status" 
-                                            onclick="toggleStatusDropdown(this, {{ $ship->id }})" 
-                                            title="Edit Status">
+                                    <button type="button" class="btn-edit-status" onclick="toggleStatusDropdown(this, {{ $ship->id }})" title="Edit Status">
                                         <i class="bi bi-pencil"></i>
                                     </button>
-
-                                    <!-- Dropdown -->
                                     <div class="status-dropdown" id="statusDropdown-{{ $ship->id }}">
                                         <form action="{{ route('admin.shipments.updateStatus') }}" method="POST" class="status-form">
                                             @csrf
                                             <input type="hidden" name="shipment_id" value="{{ $ship->id }}">
-
+                                            <button type="submit" name="status" value="loading" class="status-option loading">
+                                                <span class="status-indicator loading"></span>
+                                                Loading
+                                            </button>
                                             <button type="submit" name="status" value="pending" class="status-option pending">
-                                                <span class="status-indicator pending"></span> Pending
+                                                <span class="status-indicator pending"></span>
+                                                Pending
                                             </button>
-
                                             <button type="submit" name="status" value="in_transit" class="status-option in_transit">
-                                                <span class="status-indicator in_transit"></span> In Transit
+                                                <span class="status-indicator in_transit"></span>
+                                                In Transit
                                             </button>
-
                                             <button type="submit" name="status" value="dispatched" class="status-option dispatched">
-                                                <span class="status-indicator dispatched"></span> Dispatched
+                                                <span class="status-indicator dispatched"></span>
+                                                Dispatched
                                             </button>
-
                                             <button type="submit" name="status" value="delivered" class="status-option delivered">
-                                                <span class="status-indicator delivered"></span> Delivered
+                                                <span class="status-indicator delivered"></span>
+                                                Delivered
                                             </button>
                                         </form>
                                     </div>
                                 </div>
                             </td>
-
                         </tr>
                         @empty
                         <tr>
-                            <td colspan="11" class="text-center py-5 text-muted">
+                            <td colspan="12" class="text-center py-5 text-muted">
                                 <i class="bi bi-inbox display-4 d-block mb-3"></i>
                                 No shipments found
                             </td>
@@ -1337,21 +1348,17 @@
                 </table>
             </div>
 
-            <!-- Pagination Controls -->
             <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-img-btn" id="prevPageBtn" title="Previous page" disabled>
-                        <!-- Left arrow SVG -->
                         <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">
-                        <!-- Page numbers will be inserted here -->
-                    </div>
+                        </div>
                     <button class="pagination-img-btn" id="nextPageBtn" title="Next page" disabled>
-                        <!-- Right arrow SVG -->
                         <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>
@@ -1361,9 +1368,7 @@
         </div>
     </div>
 
-    <!-- ============================= -->
-    <!--   SHIPMENT DETAILS MODAL     -->
-    <!-- ============================= -->
+    {{-- SHIPMENT DETAILS MODAL --}}
     <div class="modal fade" id="shipmentDetailsModal" tabindex="-1">
         <div class="modal-dialog modal-xl modal-dialog-scrollable">
             <div class="modal-content">
@@ -1386,9 +1391,6 @@
 
 </div>
 
-<!-- ========================= -->
-<!--  MODAL LOAD SCRIPT (AJAX) -->
-<!-- ========================= -->
 <script>
 // Pagination state
 let currentPage = 1;
@@ -1541,7 +1543,7 @@ function renderTable() {
     if (filteredShipments.length === 0) {
         tbody.innerHTML = `
             <tr>
-                <td colspan="11" class="text-center py-5 text-muted">
+                <td colspan="12" class="text-center py-5 text-muted">
                     <i class="bi bi-search display-4 d-block mb-3"></i>
                     No shipments found matching your criteria
                 </td>
@@ -1567,6 +1569,12 @@ function renderTable() {
         row.setAttribute('data-status', shipment.status);
         row.setAttribute('data-shipment-id', shipment.shipment_id);
         
+        // Function to format status string
+        const formatStatus = (status) => {
+            if (!status) return '';
+            return status.charAt(0).toUpperCase() + status.slice(1).replace(/_/g, ' ');
+        };
+
         row.innerHTML = `
             <td class="fw-bold">${displayIndex}</td>
             <td>
@@ -1582,15 +1590,21 @@ function renderTable() {
             <td class="fw-bold text-success">₹${parseFloat(shipment.total_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
             <td>
                 <span class="badge badge-${shipment.status}">
-                    ${shipment.status.charAt(0).toUpperCase() + shipment.status.slice(1).replace('_', ' ')}
+                    ${formatStatus(shipment.status)}
                 </span>
             </td>
             <td>${new Date(shipment.shipment_date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</td>
+          
+            <td>
+                <a href="{{ route('admin.shipments.dummy', $ship->id) }}"
+                class="btn-view-details">
+                    <i class="bi bi-eye"></i>
+                </a>
+            </td>
+
+
             <td>
                 <div class="action-container">
-                    <a href="/admin/dashboard/${shipment.id}" class="btn-view-details" title="View Shipment">
-                        <i class="bi bi-eye"></i>
-                    </a>
                     <button type="button" class="btn-edit-status" onclick="toggleStatusDropdown(this, ${shipment.id})" title="Edit Status">
                         <i class="bi bi-pencil"></i>
                     </button>
@@ -1598,6 +1612,10 @@ function renderTable() {
                         <form action="/admin/shipments/update-status" method="POST" class="status-form">
                             <input type="hidden" name="_token" value="{{ csrf_token() }}">
                             <input type="hidden" name="shipment_id" value="${shipment.id}">
+                            <button type="submit" name="status" value="loading" class="status-option loading">
+                                <span class="status-indicator loading"></span>
+                                Loading
+                            </button>
                             <button type="submit" name="status" value="pending" class="status-option pending">
                                 <span class="status-indicator pending"></span>
                                 Pending
@@ -1623,6 +1641,9 @@ function renderTable() {
     });
 }
 
+// --------------------------------------------------------------------
+// Function: Open Consolidated Shipment Details Modal 
+// --------------------------------------------------------------------
 function openShipmentDetails(id) {
     let modal = new bootstrap.Modal(document.getElementById('shipmentDetailsModal'));
     let content = document.getElementById('shipmentDetailsContent');
@@ -1650,8 +1671,13 @@ function openShipmentDetails(id) {
                 year: 'numeric'
             });
 
+            // Function to format status string
+            const formatStatus = (status) => {
+                if (!status) return 'N/A';
+                return status.charAt(0).toUpperCase() + status.slice(1).replace(/_/g, ' ');
+            };
+
             let html = `
-                <!-- Shipment Basic Info -->
                 <div class="shipment-info-row">
                     <div class="shipment-info-item">
                         <div class="shipment-info-label">Shipment ID</div>
@@ -1663,7 +1689,7 @@ function openShipmentDetails(id) {
                     </div>
                     <div class="shipment-info-item">
                         <div class="shipment-info-label">Status</div>
-                        <div class="shipment-info-value">${data.shipment.status}</div>
+                        <div class="shipment-info-value">${formatStatus(data.shipment.status)}</div>
                     </div>
                     <div class="shipment-info-item">
                         <div class="shipment-info-label">Date</div>
@@ -1698,7 +1724,9 @@ function openShipmentDetails(id) {
             data.orders.forEach(order => {
                 html += `
                     <tr>
-                        <td class="fw-bold text-primary">${order.order_id}</td>
+                        <td class="fw-bold">
+                            ${order.order_id}
+                        </td>
                         <td>${order.origin || 'N/A'}</td>
                         <td>${order.destination || 'N/A'}</td>
                         <td>${order.mark_no || 'ITEM001'}</td>
@@ -1720,7 +1748,6 @@ function openShipmentDetails(id) {
                     </table>
                 </div>
 
-                <!-- Totals Section -->
                 <div class="shipment-totals">
                     <div class="shipment-totals-row">
                         <div class="shipment-total-item">
diff --git a/resources/views/admin/view-shipment.blade.php b/resources/views/admin/view-shipment.blade.php
deleted file mode 100644
index f3d6ebd..0000000
--- a/resources/views/admin/view-shipment.blade.php
+++ /dev/null
@@ -1,975 +0,0 @@
-@extends('admin.layouts.app')
-
-@section('page-title', 'Shipment Details')
-
-@section('content')
-
-<style>
-    /* ===== ANIMATIONS ===== */
-    .fade-in {
-        animation: fadeIn 0.6s ease-out;
-    }
-    @keyframes fadeIn {
-        from { opacity: 0; transform: translateY(10px); }
-        to { opacity: 1; transform: translateY(0px); }
-    }
-
-    /* ===== CARD STYLES ===== */
-    .card {
-        border-radius: 20px;
-        background: #ffffff;
-        box-shadow: 0 15px 35px rgba(13, 38, 76, 0.08);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        backdrop-filter: blur(10px);
-        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
-                    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        overflow: hidden;
-    }
-    
-    .card:hover {
-        transform: translateY(-6px);
-        box-shadow: 0 20px 40px rgba(103, 126, 234, 0.15);
-    }
-
-    .card-header h5 {
-        margin: 0;
-        font-size: 20px;
-        font-weight: 800;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-    }
-
-    /* ===== GLASSMORPHISM BUTTON ===== */
-    .glass-btn {
-        background: linear-gradient(
-            135deg,
-            rgba(103, 126, 234, 0.25) 0%,
-            rgba(118, 75, 162, 0.25) 100%
-        );
-        backdrop-filter: blur(12px);
-        -webkit-backdrop-filter: blur(12px);
-        border: 1.5px solid rgba(255, 255, 255, 0.4);
-        color: #ffffff !important;
-        padding: 12px 24px;
-        border-radius: 14px;
-        font-weight: 700;
-        display: inline-flex;
-        align-items: center;
-        gap: 10px;
-        text-decoration: none;
-        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-        box-shadow: 
-            0 8px 32px rgba(103, 126, 234, 0.2),
-            inset 0 1px 0 rgba(255, 255, 255, 0.3),
-            inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-        position: relative;
-        overflow: hidden;
-        z-index: 1;
-    }
-
-    .glass-btn::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: linear-gradient(
-            135deg,
-            rgba(103, 126, 234, 0.4) 0%,
-            rgba(118, 75, 162, 0.4) 100%
-        );
-        z-index: -1;
-        transition: opacity 0.4s ease;
-        opacity: 0;
-    }
-
-    .glass-btn:hover {
-        transform: translateY(-4px) scale(1.05);
-        box-shadow: 
-            0 15px 40px rgba(103, 126, 234, 0.35),
-            inset 0 1px 0 rgba(255, 255, 255, 0.4),
-            inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-        border-color: rgba(255, 255, 255, 0.6);
-        background: linear-gradient(
-            135deg,
-            rgba(103, 126, 234, 0.15) 0%,
-            rgba(118, 75, 162, 0.15) 100%
-        );
-    }
-
-    .glass-btn:hover::before {
-        opacity: 1;
-    }
-
-    .glass-btn:active {
-        transform: translateY(-1px) scale(0.98);
-        transition: transform 0.1s ease;
-    }
-
-    .glass-btn i {
-        font-size: 18px;
-        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-    }
-
-    /* ===== HEADER STYLES ===== */
-    .card-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 16px;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: #fff;
-        padding: 22px 28px;
-        border-radius: 20px 20px 0 0 !important;
-        position: relative;
-        overflow: hidden;
-    }
-
-    .card-header::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0.1) 0%,
-            rgba(255, 255, 255, 0.05) 100%
-        );
-        pointer-events: none;
-    }
-
-    .title-row {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        z-index: 1;
-    }
-
-    .header-controls {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        z-index: 1;
-    }
-
-    .header-cancel-btn {
-        background: rgba(255, 255, 255, 0.15);
-        backdrop-filter: blur(10px);
-        color: rgba(255, 255, 255, 0.95);
-        border: 1.5px solid rgba(255, 255, 255, 0.3);
-        padding: 10px 14px;
-        border-radius: 12px;
-        font-weight: 600;
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        transition: all 0.3s ease;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-    }
-
-    .header-cancel-btn:hover {
-        background: rgba(255, 255, 255, 0.25);
-        border-color: rgba(255, 255, 255, 0.5);
-        transform: translateY(-2px);
-        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
-    }
-
-    /* ===== INFO BLOCKS ===== */
-    .shipment-info-box {
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: wrap;
-        gap: 24px;
-        margin-bottom: 32px;
-    }
-
-    .shipment-info-item {
-        flex: 1;
-        min-width: 220px;
-        background: linear-gradient(145deg, #ffffff, #f8fafc);
-        padding: 24px;
-        border-radius: 16px;
-        box-shadow: 
-            0 5px 20px rgba(0, 0, 0, 0.05),
-            inset 0 1px 0 rgba(255, 255, 255, 0.8);
-        text-align: center;
-        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-        border: 1px solid rgba(255, 255, 255, 0.8);
-        position: relative;
-        overflow: hidden;
-    }
-
-    .shipment-info-item::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 4px;
-        background: linear-gradient(90deg, #667eea, #764ba2);
-        opacity: 0;
-        transition: opacity 0.4s ease;
-    }
-
-    .shipment-info-item:hover {
-        transform: translateY(-6px);
-        box-shadow: 
-            0 15px 35px rgba(103, 126, 234, 0.15),
-            inset 0 1px 0 rgba(255, 255, 255, 0.9);
-    }
-
-    .shipment-info-item:hover::before {
-        opacity: 1;
-    }
-
-    .shipment-info-label {
-        color: #64748b;
-        font-weight: 600;
-        margin-bottom: 8px;
-        font-size: 14px;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
-
-    .shipment-info-value {
-        font-size: 24px;
-        font-weight: 800;
-        color: #1e293b;
-        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-    }
-
-    /* ===== TOTAL BOXES ===== */
-    .total-box {
-        background: linear-gradient(145deg, #ffffff, #f8fafc);
-        padding: 20px;
-        border-radius: 16px;
-        box-shadow: 
-            0 5px 20px rgba(0, 0, 0, 0.05),
-            inset 0 1px 0 rgba(255, 255, 255, 0.8);
-        text-align: center;
-        min-width: 160px;
-        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-        border: 1px solid rgba(255, 255, 255, 0.8);
-        position: relative;
-        overflow: hidden;
-    }
-
-    .total-box::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 3px;
-        background: linear-gradient(90deg, #667eea, #764ba2);
-        transform: translateX(-100%);
-        transition: transform 0.4s ease;
-    }
-
-    .total-box:hover {
-        transform: translateY(-5px) scale(1.03);
-        box-shadow: 
-            0 15px 35px rgba(103, 126, 234, 0.15),
-            inset 0 1px 0 rgba(255, 255, 255, 0.9);
-    }
-
-    .total-box:hover::after {
-        transform: translateX(0);
-    }
-
-    .total-title {
-        font-size: 13px;
-        font-weight: 700;
-        color: #64748b;
-        margin-bottom: 10px;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-    }
-
-    .total-value {
-        font-size: 22px;
-        font-weight: 900;
-        color: #1e293b;
-        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-    }
-
-    /* ===== TABLE STYLES ===== */
-    .table {
-        border-collapse: separate;
-        border-spacing: 0;
-        border-radius: 16px;
-        overflow: hidden;
-        background: #ffffff;
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
-    }
-
-    .table thead th {
-        background:  #667eea ;
-        color: #ffffff;
-        font-weight: 700;
-        padding: 18px;
-        white-space: nowrap;
-        border: none;
-        position: relative;
-    }
-
-    .table thead th::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 15px;
-        right: 15px;
-        height: 1px;
-        background: rgba(255, 255, 255, 0.3);
-    }
-
-    .table tbody tr {
-        transition: all 0.3s ease;
-        border-left: 3px solid transparent;
-    }
-
-    .table tbody tr:hover {
-        background: linear-gradient(90deg, rgba(103, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
-        transform: translateX(4px);
-        border-left: 3px solid #667eea;
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
-    }
-
-    .table tbody td {
-        padding: 16px;
-        vertical-align: middle;
-        white-space: nowrap;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-        font-weight: 500;
-    }
-
-    /* ===== GLASSMORPHISM MODAL ===== */
-    #newOrderModal .modal-content {
-        background: rgba(255, 255, 255, 0.95);
-        backdrop-filter: blur(20px) saturate(180%);
-        -webkit-backdrop-filter: blur(20px) saturate(180%);
-        border-radius: 24px;
-        border: 1.5px solid rgba(255, 255, 255, 0.3);
-        box-shadow: 
-            0 25px 50px -12px rgba(0, 0, 0, 0.25),
-            inset 0 1px 0 rgba(255, 255, 255, 0.5);
-        overflow: hidden;
-    }
-
-    #newOrderModal .modal-header {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-        padding: 24px 32px;
-        border-radius: 24px 24px 0 0;
-        position: relative;
-        overflow: hidden;
-    }
-
-    #newOrderModal .modal-header::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0.1) 0%,
-            rgba(255, 255, 255, 0.05) 100%
-        );
-    }
-
-    #newOrderModal .modal-title {
-        color: #ffffff;
-        font-weight: 800;
-        font-size: 22px;
-        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-        position: relative;
-        z-index: 1;
-    }
-
-    #newOrderModal .btn-close {
-        background: rgba(255, 255, 255, 0.2);
-        backdrop-filter: blur(10px);
-        border-radius: 10px;
-        padding: 8px;
-        opacity: 0.9;
-        transition: all 0.3s ease;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-    }
-
-    #newOrderModal .btn-close:hover {
-        background: rgba(255, 255, 255, 0.3);
-        opacity: 1;
-        transform: rotate(90deg);
-    }
-
-    #newOrderModal .modal-body {
-        background: rgba(248, 250, 252, 0.7);
-        padding: 32px;
-        backdrop-filter: blur(10px);
-    }
-
-    #newOrderModal .modal-footer {
-        background: rgba(255, 255, 255, 0.8);
-        border-top: 1px solid rgba(255, 255, 255, 0.4);
-        padding: 24px 32px;
-        border-radius: 0 0 24px 24px;
-        backdrop-filter: blur(10px);
-    }
-
-    #newOrderModal h6 {
-        color: #1e293b;
-        font-weight: 700;
-        margin-bottom: 16px;
-        font-size: 16px;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
-
-    /* ===== ORDER LIST ITEMS ===== */
-    #availableOrdersList,
-    #deletedOrdersList {
-        max-height: 300px;
-        overflow-y: auto;
-        border-radius: 16px;
-        background: rgba(255, 255, 255, 0.6);
-        backdrop-filter: blur(10px);
-        border: 1.5px solid rgba(255, 255, 255, 0.5);
-    }
-
-    .list-group-item {
-        background: rgba(255, 255, 255, 0.7);
-        border: 1.5px solid rgba(255, 255, 255, 0.4);
-        margin-bottom: 8px;
-        border-radius: 12px !important;
-        padding: 16px;
-        transition: all 0.3s ease;
-        backdrop-filter: blur(10px);
-    }
-
-    .list-group-item:hover {
-        background: rgba(103, 126, 234, 0.1);
-        border-color: rgba(103, 126, 234, 0.3);
-        transform: translateX(4px);
-        box-shadow: 0 5px 15px rgba(103, 126, 234, 0.15);
-    }
-
-    .list-group-item strong {
-        color: #1e293b;
-        font-weight: 700;
-    }
-
-    .list-group-item .small {
-        color: #64748b;
-        font-size: 13px;
-    }
-
-    .order-checkbox {
-        width: 18px;
-        height: 18px;
-        border-radius: 6px;
-        border: 2px solid #cbd5e1;
-        cursor: pointer;
-        transition: all 0.3s ease;
-    }
-
-    .order-checkbox:checked {
-        background: linear-gradient(135deg, #667eea, #764ba2);
-        border-color: #667eea;
-        box-shadow: 0 0 0 3px rgba(103, 126, 234, 0.2);
-    }
-
-    /* ===== MODAL BUTTONS ===== */
-    #newOrderModal .btn-secondary {
-        background: rgba(100, 116, 139, 0.2);
-        backdrop-filter: blur(10px);
-        border: 1.5px solid rgba(100, 116, 139, 0.3);
-        color: #64748b;
-        padding: 12px 28px;
-        border-radius: 12px;
-        font-weight: 600;
-        transition: all 0.3s ease;
-    }
-
-    #newOrderModal .btn-secondary:hover {
-        background: rgba(100, 116, 139, 0.3);
-        border-color: rgba(100, 116, 139, 0.5);
-        transform: translateY(-2px);
-        box-shadow: 0 6px 20px rgba(100, 116, 139, 0.2);
-    }
-
-    #newOrderModal .btn-success {
-        background: linear-gradient(
-            135deg,
-            rgba(34, 197, 94, 0.25) 0%,
-            rgba(21, 128, 61, 0.25) 100%
-        );
-        backdrop-filter: blur(12px);
-        border: 1.5px solid rgba(34, 197, 94, 0.4);
-        color: #166534;
-        padding: 12px 28px;
-        border-radius: 12px;
-        font-weight: 700;
-        transition: all 0.3s ease;
-        box-shadow: 
-            0 8px 25px rgba(34, 197, 94, 0.2),
-            inset 0 1px 0 rgba(255, 255, 255, 0.4);
-    }
-
-    #newOrderModal .btn-success:hover {
-        background: linear-gradient(
-            135deg,
-            rgba(34, 197, 94, 0.35) 0%,
-            rgba(21, 128, 61, 0.35) 100%
-        );
-        border-color: rgba(34, 197, 94, 0.6);
-        color: #14532d;
-        transform: translateY(-2px);
-        box-shadow: 
-            0 12px 30px rgba(34, 197, 94, 0.3),
-            inset 0 1px 0 rgba(255, 255, 255, 0.5);
-    }
-
-    /* ===== SCROLLBAR STYLING ===== */
-    ::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-    }
-
-    ::-webkit-scrollbar-track {
-        background: rgba(0, 0, 0, 0.05);
-        border-radius: 10px;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        background: linear-gradient(135deg, #667eea, #764ba2);
-        border-radius: 10px;
-    }
-
-    ::-webkit-scrollbar-thumb:hover {
-        background: linear-gradient(135deg, #5a6fe8, #6a42a0);
-    }
-
-    /* ===== ACTION BUTTONS ===== */
-    .btn-secondary {
-        background: linear-gradient(135deg, #94a3b8, #64748b);
-        border: none;
-        color: white;
-        padding: 12px 28px;
-        border-radius: 12px;
-        font-weight: 600;
-        transition: all 0.3s ease;
-        box-shadow: 0 6px 20px rgba(100, 116, 139, 0.2);
-    }
-
-    .btn-secondary:hover {
-        background: linear-gradient(135deg, #8492a6, #565e6e);
-        transform: translateY(-2px);
-        box-shadow: 0 10px 25px rgba(100, 116, 139, 0.3);
-        color: white;
-    }
-
-    /* ===== RESPONSIVE ADJUSTMENTS ===== */
-    @media (max-width: 768px) {
-        .shipment-info-item,
-        .total-box {
-            min-width: 100%;
-        }
-        
-        .card-header {
-            flex-direction: column;
-            align-items: flex-start;
-            gap: 16px;
-        }
-        
-        .header-controls {
-            width: 100%;
-            justify-content: space-between;
-        }
-        
-        .glass-btn {
-            padding: 10px 20px;
-            font-size: 14px;
-        }
-    }
-</style>
-
-<div class="container-fluid py-4">
-
-    <div class="card mb-4">
-        <div class="card-header">
-            <div class="title-row">
-                <h5 class="mb-0"><i class="bi bi-truck me-2"></i>Shipment Details</h5>
-                <!-- <small class="text-white-50" style="margin-left:8px; font-weight:600;">{{ $shipment->shipment_id ?? '' }}</small> -->
-            </div>
-
-            <div class="header-controls">
-                <!-- Add Order button (top-right) with glass effect -->
-                 @if($mode === 'edit' && $shipment->status === 'pending')
-                    <a href="#" data-bs-toggle="modal" data-bs-target="#newOrderModal" class="glass-btn">
-                        <i class="bi bi-plus-circle"></i> Add Order
-                    </a>
-                @endif
-
-                <!-- Cancel/close: goes back to shipments list -->
-                <a href="{{ route('admin.shipments') }}" class="btn header-cancel-btn" title="Cancel / Back">
-                    <i class="bi bi-x-lg"></i> 
-                </a>
-            </div>
-        </div>
-
-        <div class="card-body">
-
-            <!-- ================================ -->
-            <!--       SHIPMENT MAIN DETAILS      -->
-            <!-- ================================ -->
-            <div class="shipment-info-box">
-
-                <div class="shipment-info-item">
-                    <div class="shipment-info-label">Shipment ID</div>
-                    <div class="shipment-info-value">{{ $shipment->shipment_id }}</div>
-                </div>
-
-                <div class="shipment-info-item">
-                    <div class="shipment-info-label">Status</div>
-                    <div class="shipment-info-value text-capitalize">
-                        {{ str_replace('_', ' ', $shipment->status) }}
-                    </div>
-                </div>
-
-                <div class="shipment-info-item">
-                    <div class="shipment-info-label">Shipment Date</div>
-                    <div class="shipment-info-value">
-                        {{ \Carbon\Carbon::parse($shipment->shipment_date)->format('d M Y') }}
-                    </div>
-                </div>
-
-                <div class="shipment-info-item">
-                    <div class="shipment-info-label">Total Orders</div>
-                    <div class="shipment-info-value">{{ $orders->count() }}</div>
-                </div>
-
-            </div>
-
-            <!-- ================================ -->
-            <!--      SHIPMENT TOTAL BLOCKS       -->
-            <!-- ================================ -->
-            <h5 class="fw-bold mb-3 mt-4" style="color: #1e293b;">Shipment Summary</h5>
-            <div class="d-flex flex-wrap gap-3">
-
-                <div class="total-box">
-                    <div class="total-title">TOTAL CTN</div>
-                    <div class="total-value">{{ $shipment->total_ctn }}</div>
-                </div>
-
-                <div class="total-box">
-                    <div class="total-title">TOTAL QTY</div>
-                    <div class="total-value">{{ $shipment->total_qty }}</div>
-                </div>
-
-                <div class="total-box">
-                    <div class="total-title">TOTAL CBM</div>
-                    <div class="total-value">{{ $shipment->total_cbm }}</div>
-                </div>
-
-                <div class="total-box">
-                    <div class="total-title">TOTAL KG</div>
-                    <div class="total-value">{{ $shipment->total_kg }}</div>
-                </div>
-
-                <div class="total-box">
-                    <div class="total-title">TOTAL TTL QTY</div>
-                    <div class="total-value">{{ $shipment->total_ttl_qty }}</div>
-                </div>
-
-                <div class="total-box">
-                    <div class="total-title">TOTAL TTL CBM</div>
-                    <div class="total-value">{{ $shipment->total_ttl_cbm }}</div>
-                </div>
-
-                <div class="total-box">
-                    <div class="total-title">TOTAL TTL KG</div>
-                    <div class="total-value">{{ $shipment->total_ttl_kg }}</div>
-                </div>
-
-                <div class="total-box">
-                    <div class="total-title">TOTAL AMOUNT</div>
-                    <div class="total-value text-success">
-                        ₹{{ number_format($shipment->total_amount, 2) }}
-                    </div>
-                </div>
-
-            </div>
-
-            <!-- ================================ -->
-            <!--       ORDERS TABLE LIST          -->
-            <!-- ================================ -->
-            <h5 class="fw-bold mb-3 mt-5" style="color: #1e293b;">Orders in This Shipment</h5>
-
-            <div class="table-responsive">
-                <table class="table table-bordered table-hover">
-                    <thead>
-                        <tr>
-                            <th>Order ID</th>
-                            <th>Origin</th>
-                            <th>Destination</th>
-                            <th>CTN</th>
-                            <th>QTY</th>
-                            <th>TTL/QTY</th>
-                            <th>CBM</th>
-                            <th>TTL CBM</th>
-                            <th>KG</th>
-                            <th>TTL KG</th>
-                            <th>Amount (₹)</th>
-                            <!-- Conditionally show Delete column header -->
-                            @if($mode === 'edit' && $shipment->status === 'pending')
-                                <th>Delete</th>
-                            @endif
-                        </tr>
-                    </thead>
-
-                    <tbody>
-                        @foreach($orders as $order)
-                        <tr>
-                            <td class="fw-bold text-primary">{{ $order->order_id }}</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">
-                                ₹{{ number_format($order->ttl_amount, 2) }}
-                            </td>
-                            
-                            <!-- Conditionally show Delete button -->
-                            @if($mode === 'edit' && $shipment->status === 'pending')
-                            <td>
-                                <form method="POST" action="{{ route('admin.shipments.removeOrder') }}" onsubmit="return confirmDelete()">
-                                    @csrf
-                                    <input type="hidden" name="shipment_id" value="{{ $shipment->id }}">
-                                    <input type="hidden" name="order_id" value="{{ $order->id }}">
-                                    <button type="submit" class="btn btn-danger btn-sm" style="border-radius: 10px; padding: 8px 16px;">
-                                        <i class="bi bi-trash"></i> Delete
-                                    </button>
-                                </form>
-                            </td>
-                            @endif
-                        </tr>
-                        @endforeach
-                    </tbody>
-                </table>
-            </div>
-
-            <!-- Action Buttons -->
-            <div class="d-flex justify-content-between mt-4">
-                <!-- <a href="{{ route('admin.shipments') }}" class="btn btn-secondary">
-                    <i class="bi bi-arrow-left"></i> Back to Shipments
-                </a>
-                 -->
-                @if($mode === 'edit' && $shipment->status === 'pending')
-                <div>
-                    <!-- <a href="{{ route('admin.shipments.view', ['id' => $shipment->id, 'mode' => 'edit']) }}" 
-                    class="btn btn-warning me-2">
-                        <i class="bi bi-pencil"></i> Edit Shipment
-                    </a> -->
-
-                    <!-- <a href="{{ route('admin.shipments.view', ['id' => $shipment->id, 'mode' => 'view']) }}" 
-                    class="btn btn-info">
-                        <i class="bi bi-eye"></i> View Mode
-                    </a> -->
-                </div>
-                @elseif($shipment->status === 'pending')
-                <div>
-                    <!-- <a href="{{ route('admin.shipments.view', ['id' => $shipment->id, 'mode' => 'edit']) }}" 
-                    class="btn btn-primary">
-                        <i class="bi bi-pencil"></i> Edit Shipment
-                    </a> -->
-                </div>
-                @endif
-            </div>
-
-        </div>
-    </div>
-    <!-- New Order Modal -->
-<div class="modal fade" id="newOrderModal" tabindex="-1" aria-labelledby="newOrderModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-xl modal-dialog-scrollable">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="newOrderModalLabel">Add Orders to Shipment</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body">
-        <div class="row mb-3">
-          <div class="col-md-6">
-            <h6>Deleted Orders (recently removed)</h6>
-            <div id="deletedOrdersList" class="list-group"></div>
-          </div>
-          <div class="col-md-6">
-            <h6>Available Orders</h6>
-            <div id="availableOrdersList" class="list-group"></div>
-          </div>
-        </div>
-
-        <div class="mt-3">
-          <small class="text-muted">Select orders to add back to this shipment, then click "Add Selected".</small>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-        <button id="addSelectedOrdersBtn" type="button" class="btn btn-success">Add Selected</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-
-</div>
-
-<script>
-function confirmDelete() {
-    return confirm('Are you sure you want to remove this order from the shipment?');
-}
-</script>
-<script>
-document.addEventListener('DOMContentLoaded', function () {
-    const csrfToken = '{{ csrf_token() }}';
-    const shipmentId = {{ $shipment->id }};
-    let availableOrders = @json($availableOrders ?? []);
-    let deletedOrders = [];
-
-    function renderOrdersList(containerId, orders) {
-        const container = document.getElementById(containerId);
-        container.innerHTML = '';
-        if (!orders.length) {
-            container.innerHTML = '<div class="text-muted py-3">No orders</div>';
-            return;
-        }
-        orders.forEach(order => {
-            const item = document.createElement('label');
-            item.className = 'list-group-item d-flex justify-content-between align-items-center';
-            item.innerHTML = `
-                <div>
-                    <input type="checkbox" class="me-2 order-checkbox" data-order='${JSON.stringify(order)}'>
-                    <strong>${order.order_id}</strong>
-                    <div class="small text-muted"> ${order.origin} → ${order.destination} • ${order.qty} qty • ₹${parseFloat(order.ttl_amount).toLocaleString('en-IN', {minimumFractionDigits:2})}</div>
-                </div>
-                <div class="small text-muted">ID: ${order.id}</div>
-            `;
-            container.appendChild(item);
-        });
-    }
-
-    renderOrdersList('availableOrdersList', availableOrders);
-    renderOrdersList('deletedOrdersList', deletedOrders);
-
-    // Intercept remove-order forms (update selector if form action different)
-    document.querySelectorAll('form[action="{{ route('admin.shipments.removeOrder') }}"]').forEach(form => {
-        form.addEventListener('submit', function(e) {
-            e.preventDefault();
-            if (!confirm('Are you sure you want to remove this order from the shipment?')) return;
-
-            const formData = new FormData(this);
-
-            fetch(this.action, {
-                method: 'POST',
-                headers: {'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json'},
-                body: formData
-            })
-            .then(res => res.json())
-            .then(data => {
-                if (!data.success) { alert(data.message || 'Failed'); return; }
-
-                // Remove row from DOM
-                const row = this.closest('tr');
-                // Build deleted order object from row cells if present
-                const orderObj = {
-                    id: formData.get('order_id'),
-                    order_id: row ? row.querySelector('td:first-child')?.innerText.trim() : ('Order-'+formData.get('order_id')),
-                    origin: row ? row.cells[1]?.innerText.trim() : '',
-                    destination: row ? row.cells[2]?.innerText.trim() : '',
-                    qty: row ? row.cells[4]?.innerText.trim() : '',
-                    ttl_amount: row ? row.cells[10]?.innerText.replace('₹','').replace(',','').trim() : 0
-                };
-
-                if (row) row.remove();
-
-                deletedOrders.unshift(orderObj);
-                renderOrdersList('deletedOrdersList', deletedOrders);
-
-                // Optional: update totals by refetching shipment summary endpoint or reload
-                if (data.shipment) updateTotalsInDOM(data.shipment);
-            })
-            .catch(err => {
-                console.error(err);
-                alert('Remove failed.');
-            });
-        });
-    });
-
-    // Open modal from add-order button
-    document.querySelectorAll('.glass-btn').forEach(btn => {
-        btn.addEventListener('click', function(e) {
-            renderOrdersList('availableOrdersList', availableOrders);
-            renderOrdersList('deletedOrdersList', deletedOrders);
-            const modal = new bootstrap.Modal(document.getElementById('newOrderModal'));
-            modal.show();
-        });
-    });
-
-    // Add selected orders
-    document.getElementById('addSelectedOrdersBtn').addEventListener('click', function() {
-        const checked = Array.from(document.querySelectorAll('.order-checkbox:checked'));
-        if (!checked.length) { alert('Please select orders'); return; }
-
-        const orderIds = checked.map(cb => JSON.parse(cb.getAttribute('data-order')).id);
-
-        fetch(`/admin/shipments/${shipmentId}/add-orders`, {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json'},
-            body: JSON.stringify({ order_ids: orderIds })
-        })
-        .then(r => r.json())
-        .then(data => {
-            if (!data.success) { alert(data.message || 'Failed'); return; }
-
-            // Update orders table — simplest approach: reload page to reflect DB
-            // But we can also append rows from data.orders (if provided)
-            location.reload();
-        })
-        .catch(err => {
-            console.error(err);
-            alert('Add failed.');
-        });
-    });
-
-    function updateTotalsInDOM(shipment) {
-        try {
-            if (document.getElementById('total_qty')) {
-                document.getElementById('total_qty').innerText = shipment.total_qty;
-            }
-            if (document.getElementById('total_amount')) {
-                document.getElementById('total_amount').innerText = '₹' + parseFloat(shipment.total_amount).toLocaleString('en-IN', {minimumFractionDigits:2});
-            }
-            // add other totals similarly...
-        } catch(e) { console.warn(e); }
-    }
-});
-document.addEventListener('hidden.bs.modal', function (event) {
-    document.body.classList.remove('modal-open');
-    let backdrop = document.querySelector('.modal-backdrop');
-    if (backdrop) backdrop.remove();
-});
-
-</script>
-
-
-@endsection
\ No newline at end of file
diff --git a/resources/views/admin/view_shipment.blade.php b/resources/views/admin/view_shipment.blade.php
new file mode 100644
index 0000000..f46f1cc
--- /dev/null
+++ b/resources/views/admin/view_shipment.blade.php
@@ -0,0 +1,128 @@
+@extends('admin.layouts.app')
+
+@section('page-title', 'Shipment Preview')
+
+@section('content')
+
+<div class="container py-4">
+
+    <div class="card shadow-sm border-0">
+        <div class="card-header bg-primary text-white">
+            <h5 class="mb-0">
+                <i class="bi bi-box-seam me-2"></i>
+                Shipment Preview: {{ $shipment->shipment_id }}
+            </h5>
+        </div>
+
+        <div class="card-body">
+
+            <!-- Dummy Info -->
+            <div class="alert alert-info">
+                <strong>{{ $dummyData['title'] }}</strong><br>
+                Generated On: {{ $dummyData['generated_on'] }} <br>
+                Note: {{ $dummyData['note'] }}
+            </div>
+
+            <!-- Shipment Basic Details -->
+            <h5 class="fw-bold mt-3">Shipment Details</h5>
+            <table class="table table-bordered">
+                <tr>
+                    <th>Shipment ID</th>
+                    <td>{{ $shipment->shipment_id }}</td>
+                </tr>
+                <tr>
+                    <th>Origin</th>
+                    <td>{{ $shipment->origin }}</td>
+                </tr>
+                <tr>
+                    <th>Destination</th>
+                    <td>{{ $shipment->destination }}</td>
+                </tr>
+                <tr>
+                    <th>Status</th>
+                    <td>{{ ucfirst($shipment->status) }}</td>
+                </tr>
+                <tr>
+                    <th>Date</th>
+                    <td>{{ \Carbon\Carbon::parse($shipment->shipment_date)->format('d M Y') }}</td>
+                </tr>
+            </table>
+
+            <!-- Orders in Shipment -->
+            <h5 class="fw-bold mt-4">Orders Contained in Shipment</h5>
+
+            @if($shipment->orders->isEmpty())
+                <p class="text-muted">No orders found.</p>
+            @else
+                <div class="table-responsive">
+                    <table class="table table-hover table-striped">
+                        <thead class="table-dark">
+                            <tr>
+                                <th>Order ID</th>
+                                <th>Origin</th>
+                                <th>Destination</th>
+                                <th>CTN</th>
+                                <th>QTY</th>
+                                <th>TTL/QTY</th>
+                                <th>KG</th>
+                                <th>Amount</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            @foreach($shipment->orders as $order)
+                                <tr>
+                                    <td>{{ $order->order_id }}</td>
+                                    <td>{{ $order->origin }}</td>
+                                    <td>{{ $order->destination }}</td>
+                                    <td>{{ $order->ctn }}</td>
+                                    <td>{{ $order->qty }}</td>
+                                    <td>{{ $order->ttl_qty }}</td>
+                                    <td>{{ $order->ttl_kg }}</td>
+                                    <td>₹{{ number_format($order->ttl_amount, 2) }}</td>
+                                </tr>
+                            @endforeach
+                        </tbody>
+                    </table>
+                </div>
+            @endif
+
+            <!-- Shipment Totals -->
+            <h5 class="fw-bold mt-4">Shipment Totals</h5>
+            <table class="table table-bordered">
+                <tr>
+                    <th>Total CTN</th>
+                    <td>{{ $shipment->total_ctn }}</td>
+                </tr>
+                <tr>
+                    <th>Total Quantity</th>
+                    <td>{{ $shipment->total_qty }}</td>
+                </tr>
+                <tr>
+                    <th>Total TTL Quantity</th>
+                    <td>{{ $shipment->total_ttl_qty }}</td>
+                </tr>
+                <tr>
+                    <th>Total CBM</th>
+                    <td>{{ $shipment->total_cbm }}</td>
+                </tr>
+                <tr>
+                    <th>Total KG</th>
+                    <td>{{ $shipment->total_kg }}</td>
+                </tr>
+                <tr>
+                    <th>Total Amount</th>
+                    <td class="fw-bold text-success">
+                        ₹{{ number_format($shipment->total_amount, 2) }}
+                    </td>
+                </tr>
+            </table>
+
+            <a href="{{ route('admin.shipments') }}" class="btn btn-secondary mt-3">
+                ← Back to Shipments
+            </a>
+
+        </div>
+    </div>
+</div>
+
+@endsection
diff --git a/routes/web.php b/routes/web.php
index 5620968..b8df13e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -168,6 +168,10 @@ Route::prefix('admin')
                 Route::delete('/shipments/{id}', [ShipmentController::class, 'destroy'])
                     ->name('admin.shipments.destroy');
 
+                    Route::get('/shipment/dummy/{id}', [ShipmentController::class, 'dummy'])
+    ->name('admin.shipments.dummy');
+
+
         // ---------------------------
         // INVOICES
         // ---------------------------