diff --git a/app/Http/Controllers/Admin/AdminInvoiceController.php b/app/Http/Controllers/Admin/AdminInvoiceController.php
index 0209ff0..19d313e 100644
--- a/app/Http/Controllers/Admin/AdminInvoiceController.php
+++ b/app/Http/Controllers/Admin/AdminInvoiceController.php
@@ -26,15 +26,13 @@ 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();
+    $shipment = \App\Models\Shipment::whereHas('items', function ($q) use ($invoice) {
+        $q->where('order_id', $invoice->order_id);
+    })->first();
 
-        return view('admin.popup_invoice', compact('invoice', 'shipment'));
+    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)
     // -------------------------------------------------------------
diff --git a/app/Http/Controllers/Admin/AdminOrderController.php b/app/Http/Controllers/Admin/AdminOrderController.php
index 486040f..f116b96 100644
--- a/app/Http/Controllers/Admin/AdminOrderController.php
+++ b/app/Http/Controllers/Admin/AdminOrderController.php
@@ -13,6 +13,11 @@ use App\Models\User;
 use PDF;
 use Maatwebsite\Excel\Facades\Excel;
 use App\Exports\OrdersExport;
+use App\Imports\OrderItemsPreviewImport;
+
+
+use Illuminate\Validation\ValidationException;
+
 
 class AdminOrderController extends Controller
 {
@@ -36,44 +41,6 @@ class AdminOrderController extends Controller
         return view('admin.orders_create', compact('markList'));
     }
 
-    public function store(Request $request)
-    {
-        $data = $request->validate([
-            'mark_no'     => 'required|string',
-            'origin'      => 'nullable|string',
-            'destination' => 'nullable|string',
-            'ctn'         => 'nullable|numeric',
-            'qty'         => 'nullable|numeric',
-            'ttl_qty'     => 'nullable|numeric',
-            'ttl_amount'  => 'nullable|numeric',
-            'cbm'         => 'nullable|numeric',
-            'ttl_cbm'     => 'nullable|numeric',
-            'kg'          => 'nullable|numeric',
-            'ttl_kg'      => 'nullable|numeric',
-        ]);
-
-        $order = Order::create([
-            'order_id'   => $this->generateOrderId(),
-            'mark_no'    => $data['mark_no'],
-            'origin'     => $data['origin'] ?? null,
-            'destination'=> $data['destination'] ?? null,
-            'ctn'        => $data['ctn'] ?? 0,
-            'qty'        => $data['qty'] ?? 0,
-            'ttl_qty'    => $data['ttl_qty'] ?? 0,
-            'ttl_amount' => $data['ttl_amount'] ?? 0,
-            'cbm'        => $data['cbm'] ?? 0,
-            'ttl_cbm'    => $data['ttl_cbm'] ?? 0,
-            'kg'         => $data['kg'] ?? 0,
-            'ttl_kg'     => $data['ttl_kg'] ?? 0,
-            'status'     => 'pending',
-        ]);
-
-        $this->createInvoice($order);
-
-        return redirect()->route('admin.orders.show', $order->id)
-            ->with('success', 'Order created successfully.');
-    }
-
     /* ---------------------------
      * SHOW / POPUP
      * ---------------------------*/
@@ -580,7 +547,7 @@ class AdminOrderController extends Controller
             'ttl_cbm'    => $total_ttl_cbm,
             'kg'         => $total_kg,
             'ttl_kg'     => $total_ttl_kg,
-            'status'     => 'pending',
+            'status'     => 'order_placed',
         ]);
 
         // 6) order items
@@ -723,4 +690,36 @@ class AdminOrderController extends Controller
             ]);
         }
     }
+
+
+
+public function uploadExcelPreview(Request $request)
+{
+    try {
+        $request->validate([
+            'excel' => 'required|file|mimes:xlsx,xls'
+        ]);
+
+        $import = new OrderItemsPreviewImport();
+        Excel::import($import, $request->file('excel'));
+
+        return response()->json([
+            'success' => true,
+            'items' => $import->rows
+        ]);
+    } catch (ValidationException $e) {
+        return response()->json([
+            'success' => false,
+            'message' => 'Invalid Excel file format'
+        ], 422);
+    } catch (\Throwable $e) {
+        \Log::error($e);
+        return response()->json([
+            'success' => false,
+            'message' => 'Server error'
+        ], 500);
+    }
+}
+
+
 }
diff --git a/app/Http/Controllers/Admin/ShipmentController.php b/app/Http/Controllers/Admin/ShipmentController.php
index 6feffef..781507e 100644
--- a/app/Http/Controllers/Admin/ShipmentController.php
+++ b/app/Http/Controllers/Admin/ShipmentController.php
@@ -20,7 +20,11 @@ class ShipmentController extends Controller
         $usedOrderIds = ShipmentItem::pluck('order_id')->toArray();
 
         // 2) Load available orders (not used in any shipment)
-        $availableOrders = Order::whereNotIn('id', $usedOrderIds)->get();
+        $availableOrders = Order::whereNotIn('id', $usedOrderIds)
+        ->where('status', '!=', 'order_placed')
+        ->get();
+
+
 
         // 3) Load all shipments for listing
         $shipments = Shipment::latest()->get();
@@ -65,6 +69,16 @@ class ShipmentController extends Controller
         // CALCULATE TOTALS
         // -----------------------------
         $orders = Order::whereIn('id', $request->order_ids)->get();
+        foreach ($orders as $order) {
+            if ($order->status === 'order_placed') {
+                return back()->with(
+                    'error',
+                    "Order {$order->order_id} is not ready for shipment"
+                );
+            }
+        }
+
+
 
         $total_ctn       = $orders->sum('ctn');
         $total_qty       = $orders->sum('qty');
@@ -82,7 +96,7 @@ class ShipmentController extends Controller
             'shipment_id'    => $newShipmentId,
             'origin'         => $request->origin,
             'destination'    => $request->destination,
-            'status'         => Shipment::STATUS_PENDING,
+            'status' => Shipment::STATUS_SHIPMENT_READY,
             'shipment_date'  => $request->shipment_date,
 
             'total_ctn'      => $total_ctn,
@@ -135,29 +149,35 @@ class ShipmentController extends Controller
      * Update Shipment status from action button
      */
     public function updateStatus(Request $request)
-    {
-        $request->validate([
-            'shipment_id' => 'required|exists:shipments,id',
-            'status'      => 'required|string'
-        ]);
+{
+    $request->validate([
+        'shipment_id' => 'required|exists:shipments,id',
+        'status'      => 'required|string'
+    ]);
 
-        // 1) Update shipment status
-        $shipment = Shipment::findOrFail($request->shipment_id);
-        $shipment->status = $request->status;
-        $shipment->save();
+    $shipment = Shipment::findOrFail($request->shipment_id);
+    $shipment->status = $request->status;
+    $shipment->save();
 
-        // 2) Update ALL related orders' status
-        foreach ($shipment->orders as $order) {
-            $order->status = $shipment->status;  // status is string: pending, in_transit, dispatched, delivered
-            $order->save();
+    // ✅ Sync shipment status to orders ONLY after shipment exists
+    foreach ($shipment->orders as $order) {
+
+        // Prevent rollback or overwrite
+        if ($order->status === 'delivered') {
+            continue;
         }
 
-        return redirect()->back()->with(
-            'success',
-            "Shipment status updated to {$shipment->statusLabel()} and related orders updated."
-        );
+        $order->status = $shipment->status;
+        $order->save();
     }
 
+    return redirect()->back()->with(
+        'success',
+        "Shipment status updated to {$shipment->statusLabel()}."
+    );
+}
+
+
     /**
      * Update shipment details
      */
@@ -266,11 +286,23 @@ public function addOrders(Request $request, Shipment $shipment)
         'order_ids' => 'required|array|min:1',
     ]);
 
-    // फक्त न वापरलेले orders घ्या
     $orders = Order::whereIn('id', $request->order_ids)->get();
 
     foreach ($orders as $order) {
-        // pivot मध्ये insert
+
+        if ($order->status === 'order_placed') {
+            return back()->with(
+                'error',
+                "Order {$order->order_id} is not ready for shipment"
+            );
+        }
+
+
+        // Prevent duplicates
+        if (ShipmentItem::where('order_id', $order->id)->exists()) {
+            continue;
+        }
+
         ShipmentItem::create([
             'shipment_id'      => $shipment->id,
             'order_id'         => $order->id,
@@ -282,23 +314,25 @@ public function addOrders(Request $request, Shipment $shipment)
         ]);
     }
 
-    // totals 
+    // Recalculate totals
     $orderIds = ShipmentItem::where('shipment_id', $shipment->id)->pluck('order_id');
     $allOrders = Order::whereIn('id', $orderIds)->get();
 
-    $shipment->total_ctn     = $allOrders->sum('ctn');
-    $shipment->total_qty     = $allOrders->sum('qty');
-    $shipment->total_ttl_qty = $allOrders->sum('ttl_qty');
-    $shipment->total_cbm     = $allOrders->sum('cbm');
-    $shipment->total_ttl_cbm = $allOrders->sum('ttl_cbm');
-    $shipment->total_kg      = $allOrders->sum('kg');
-    $shipment->total_ttl_kg  = $allOrders->sum('ttl_kg');
-    $shipment->total_amount  = $allOrders->sum('ttl_amount');
-    $shipment->save();
+    $shipment->update([
+        'total_ctn'     => $allOrders->sum('ctn'),
+        'total_qty'     => $allOrders->sum('qty'),
+        'total_ttl_qty' => $allOrders->sum('ttl_qty'),
+        'total_cbm'     => $allOrders->sum('cbm'),
+        'total_ttl_cbm' => $allOrders->sum('ttl_cbm'),
+        'total_kg'      => $allOrders->sum('kg'),
+        'total_ttl_kg'  => $allOrders->sum('ttl_kg'),
+        'total_amount'  => $allOrders->sum('ttl_amount'),
+    ]);
 
     return redirect()
         ->route('admin.shipments.dummy', $shipment->id)
         ->with('success', 'Orders added to shipment successfully.');
 }
 
+
 }
\ No newline at end of file
diff --git a/app/Http/Controllers/user/UserOrderController.php b/app/Http/Controllers/user/UserOrderController.php
index d18f7ae..da77e68 100644
--- a/app/Http/Controllers/user/UserOrderController.php
+++ b/app/Http/Controllers/user/UserOrderController.php
@@ -289,6 +289,44 @@ public function invoiceDetails($invoice_id)
     ]);
 }
 
+public function confirmOrder($order_id)
+{
+    $user = JWTAuth::parseToken()->authenticate();
+
+    if (! $user) {
+        return response()->json([
+            'success' => false,
+            'message' => 'Unauthorized'
+        ], 401);
+    }
+
+    $order = $user->orders()
+        ->where('order_id', $order_id)
+        ->first();
+
+    if (! $order) {
+        return response()->json([
+            'success' => false,
+            'message' => 'Order not found'
+        ], 404);
+    }
+
+    // 🚫 Only allow confirm from order_placed
+    if ($order->status !== 'order_placed') {
+        return response()->json([
+            'success' => false,
+            'message' => 'Order cannot be confirmed'
+        ], 422);
+    }
+
+    $order->status = 'order_confirmed';
+    $order->save();
+
+    return response()->json([
+        'success' => true,
+        'message' => 'Order confirmed successfully'
+    ]);
+}
 
 
 
diff --git a/app/Imports/OrderItemsPreviewImport.php b/app/Imports/OrderItemsPreviewImport.php
new file mode 100644
index 0000000..0865b6f
--- /dev/null
+++ b/app/Imports/OrderItemsPreviewImport.php
@@ -0,0 +1,26 @@
+<?php
+namespace App\Imports;
+
+use Maatwebsite\Excel\Concerns\ToCollection;
+use Illuminate\Support\Collection;
+
+class OrderItemsPreviewImport implements ToCollection
+{
+    public array $rows = [];
+
+    public function collection(Collection $collection)
+    {
+        $header = $collection->first()->map(fn ($h) => strtolower(trim($h)))->toArray();
+
+        foreach ($collection->skip(1) as $row) {
+            $item = [];
+            foreach ($header as $i => $key) {
+                $item[$key] = $row[$i] ?? null;
+            }
+
+            if (!empty($item['description'])) {
+                $this->rows[] = $item;
+            }
+        }
+    }
+}
diff --git a/app/Models/Order.php b/app/Models/Order.php
index 029cf35..9362328 100644
--- a/app/Models/Order.php
+++ b/app/Models/Order.php
@@ -64,5 +64,25 @@ class Order extends Model
     }
 
 
+    const STATUS_LABELS = [
+        'order_placed'        => 'Order Placed',
+        'order_confirmed'     => 'Order Confirmed',
+        'supplier_warehouse'  => 'Supplier Warehouse',
+        'consolidate_warehouse'=> 'Consolidate Warehouse',
+        'export_custom'       => 'Export Custom',
+        'international_transit'=> 'International Transit',
+        'arrived_india'       => 'Arrived at India',
+        'import_custom'       => 'Import Custom',
+        'warehouse'           => 'Warehouse',
+        'domestic_distribution'=> 'Domestic Distribution',
+        'out_for_delivery'    => 'Out for Delivery',
+        'delivered'           => 'Delivered',
+    ];
+
+    public function getStatusLabelAttribute()
+    {
+        return self::STATUS_LABELS[$this->status]
+            ?? ucfirst(str_replace('_', ' ', $this->status));
+    }
 
 }
diff --git a/app/Models/Shipment.php b/app/Models/Shipment.php
index 95bb5d5..3c5cacd 100644
--- a/app/Models/Shipment.php
+++ b/app/Models/Shipment.php
@@ -45,25 +45,6 @@ class Shipment extends Model
         return $this->belongsToMany(Order::class, 'shipment_items', 'shipment_id', 'order_id');
     }
 
-    // ---------------------------
-    // STATUS CONSTANTS
-    // ---------------------------
-
-    const STATUS_PENDING     = 'pending';
-    const STATUS_IN_TRANSIT  = 'in_transit';
-    const STATUS_DISPATCHED  = 'dispatched';
-    const STATUS_DELIVERED   = 'delivered';
-
-    public static function statusOptions()
-    {
-        return [
-            self::STATUS_PENDING     => 'Pending',
-            self::STATUS_IN_TRANSIT  => 'In Transit',
-            self::STATUS_DISPATCHED  => 'Dispatched',
-            self::STATUS_DELIVERED   => 'Delivered',
-        ];
-    }
-
     // ---------------------------
     // HELPERS
     // ---------------------------
@@ -73,8 +54,38 @@ class Shipment extends Model
         return $this->items()->count();
     }
 
+        // ---------------------------
+    // STATUS CONSTANTS (LOGISTICS FLOW)
+    // ---------------------------
+    const STATUS_SHIPMENT_READY       = 'shipment_ready';
+    const STATUS_EXPORT_CUSTOM        = 'export_custom';
+    const STATUS_INTERNATIONAL_TRANSIT= 'international_transit';
+    const STATUS_ARRIVED_INDIA        = 'arrived_india';
+    const STATUS_IMPORT_CUSTOM        = 'import_custom';
+    const STATUS_WAREHOUSE            = 'warehouse';
+    const STATUS_DOMESTIC_DISTRIBUTION= 'domestic_distribution';
+    const STATUS_OUT_FOR_DELIVERY     = 'out_for_delivery';
+    const STATUS_DELIVERED            = 'delivered';
+
+    public static function statusOptions()
+    {
+        return [
+            self::STATUS_SHIPMENT_READY        => 'Shipment Ready',
+            self::STATUS_EXPORT_CUSTOM         => 'Export Custom',
+            self::STATUS_INTERNATIONAL_TRANSIT => 'International Transit',
+            self::STATUS_ARRIVED_INDIA         => 'Arrived at India',
+            self::STATUS_IMPORT_CUSTOM         => 'Import Custom',
+            self::STATUS_WAREHOUSE             => 'Warehouse',
+            self::STATUS_DOMESTIC_DISTRIBUTION => 'Domestic Distribution',
+            self::STATUS_OUT_FOR_DELIVERY      => 'Out for Delivery',
+            self::STATUS_DELIVERED             => 'Delivered',
+        ];
+    }
+
     public function statusLabel()
     {
-        return self::statusOptions()[$this->status] ?? ucfirst($this->status);
+        return self::statusOptions()[$this->status]
+            ?? ucfirst(str_replace('_', ' ', $this->status));
     }
+
 }
diff --git a/public/invoices/invoice-INV-2025-000029.pdf b/public/invoices/invoice-INV-2025-000029.pdf
index 212a927..80c41f2 100644
Binary files a/public/invoices/invoice-INV-2025-000029.pdf and b/public/invoices/invoice-INV-2025-000029.pdf differ
diff --git a/public/invoices/invoice-INV-2025-000031.pdf b/public/invoices/invoice-INV-2025-000031.pdf
new file mode 100644
index 0000000..87950b3
Binary files /dev/null and b/public/invoices/invoice-INV-2025-000031.pdf differ
diff --git a/public/invoices/invoice-INV-2025-000032.pdf b/public/invoices/invoice-INV-2025-000032.pdf
index 7ffbb92..c681ac0 100644
Binary files a/public/invoices/invoice-INV-2025-000032.pdf and b/public/invoices/invoice-INV-2025-000032.pdf differ
diff --git a/public/invoices/invoice-INV-2025-000044.pdf b/public/invoices/invoice-INV-2025-000044.pdf
new file mode 100644
index 0000000..63c4fa5
Binary files /dev/null and b/public/invoices/invoice-INV-2025-000044.pdf differ
diff --git a/public/invoices/invoice-INV-2025-000046.pdf b/public/invoices/invoice-INV-2025-000046.pdf
new file mode 100644
index 0000000..39c5a85
Binary files /dev/null and b/public/invoices/invoice-INV-2025-000046.pdf differ
diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php
index 3d413e3..02f5a9e 100644
--- a/resources/views/admin/dashboard.blade.php
+++ b/resources/views/admin/dashboard.blade.php
@@ -1284,6 +1284,7 @@ body, .container-fluid {
                   <th>#</th>
                   <th>Order ID</th>
                   <th>Mark No</th>
+                  <th>Date</th>
                   <th>Origin</th>
                   <th>Destination</th>
                   <th>Total CTN</th>
@@ -1295,7 +1296,6 @@ body, .container-fluid {
                   <th>Total KG</th>
                   <th>Total TTL KG</th>
                   <th>Status</th>
-                  <th>Date</th>
                   <th>Actions</th>
                 </tr>
               </thead>
@@ -1351,10 +1351,75 @@ body, .container-fluid {
             </table>
           </div>
 
-          <!-- Pagination Controls -->
-          <div class="pagination-container">
-            <div class="pagination-info" id="pageInfo">
-              Showing 1 to 10 of {{ $orders->count() }} entries
+                    <td>{{ $order->mark_no }}</td>
+                    <td>{{ $order->origin }}</td>
+                    <td>{{ $order->destination }}</td>
+                    <td>{{ $order->ctn }}</td>
+                    <td>{{ $order->qty }}</td>
+                    <td>{{ $order->ttl_qty }}</td>
+                    <td>₹{{ number_format($order->ttl_amount, 2) }}</td>
+                    <td>{{ $order->cbm }}</td>
+                    <td>{{ $order->ttl_cbm }}</td>
+                    <td>{{ $order->kg }}</td>
+                    <td>{{ $order->ttl_kg }}</td>
+                    <td>
+                      @php
+                          // Badge color mapping
+                          $badgeMap = [
+                              'order_placed'          => 'secondary',
+                              'order_confirmed'       => 'info',
+                              'supplier_warehouse'    => 'warning',
+                              'consolidate_warehouse' => 'warning',
+                              'export_custom'         => 'primary',
+                              'international_transit' => 'primary',
+                              'arrived_india'         => 'info',
+                              'import_custom'         => 'info',
+                              'warehouse'             => 'dark',
+                              'domestic_distribution' => 'primary',
+                              'out_for_delivery'      => 'success',
+                              'delivered'             => 'success',
+                          ];
+
+                          // Icon mapping
+                          $iconMap = [
+                              'order_placed'          => 'bi-clock-fill',
+                              'order_confirmed'       => 'bi-check-circle',
+                              'supplier_warehouse'    => 'bi-box-seam',
+                              'consolidate_warehouse' => 'bi-boxes',
+                              'export_custom'         => 'bi-upload',
+                              'international_transit' => 'bi-truck',
+                              'arrived_india'         => 'bi-geo-alt',
+                              'import_custom'         => 'bi-download',
+                              'warehouse'             => 'bi-building',
+                              'domestic_distribution' => 'bi-diagram-3',
+                              'out_for_delivery'      => 'bi-truck-flatbed',
+                              'delivered'             => 'bi-check-circle-fill',
+                          ];
+
+                          $badgeClass = $badgeMap[$order->status] ?? 'secondary';
+                          $iconClass  = $iconMap[$order->status] ?? 'bi-info-circle';
+                      @endphp
+
+                      <span class="badge bg-{{ $badgeClass }}">
+                          <i class="bi {{ $iconClass }} status-icon"></i>
+                          {{ $order->status_label }}
+                      </span>
+                  </td>
+
+                    <td>{{ $order->created_at->format('d-m-Y') }}</td>
+                    <td>
+                      <a href="{{ route('admin.orders.show', $order->id) }}" class="btn btn-sm btn-outline-primary">
+                        <i class="bi bi-eye"></i> View
+                      </a>
+                    </td>
+                  </tr>
+                  @empty
+                  <tr>
+                    <td colspan="16" class="text-muted">No orders found</td>
+                  </tr>
+                  @endforelse
+                </tbody>
+              </table>
             </div>
             <div class="pagination-controls">
               <button class="pagination-img-btn" id="prevPageBtn" title="Previous page">
@@ -1490,6 +1555,13 @@ body, .container-fluid {
             <button type="submit" class="btn btn-info" id="addItemBtn">
               <i class="bi bi-plus-circle"></i> Add Item
             </button>
+
+            <input type="file" id="excelInput" accept=".xlsx,.xls" hidden>
+
+            <button type="button" class="btn btn-outline-success" id="uploadExcelBtn">
+              <i class="bi bi-file-earmark-excel"></i> Upload Excel
+            </button>
+
           </div>
         </div>
       </form>
@@ -1951,6 +2023,75 @@ document.addEventListener('DOMContentLoaded', function() {
         e.target.closest('tr').remove();
         reindexRows();
     });
+
+// ===== EXCEL UPLOAD LOGIC =====
+const uploadExcelBtn = document.getElementById('uploadExcelBtn');
+const excelInput = document.getElementById('excelInput');
+
+if (uploadExcelBtn && excelInput) {
+
+    uploadExcelBtn.addEventListener('click', () => excelInput.click());
+
+    excelInput.addEventListener('change', function () {
+        const file = this.files[0];
+        if (!file) return;
+
+        const formData = new FormData();
+        formData.append('excel', file);
+        formData.append('_token', '{{ csrf_token() }}');
+
+        fetch('{{ route("admin.orders.upload.excel.preview") }}', {
+            method: 'POST',
+            body: formData,
+            headers: {
+                'Accept': 'application/json'
+            }
+        })
+        .then(async res => {
+            if (!res.ok) {
+                const text = await res.text();
+                throw new Error(text);
+            }
+            return res.json();
+        })
+        .then(res => {
+            if (!res.success) {
+                alert('Invalid Excel file');
+                return;
+            }
+            populateItemsTable(res.items);
+        })
+        .catch(err => {
+            console.error(err);
+            alert('Excel upload failed');
+        });
+    });
+
+}
+
+function populateItemsTable(items) {
+    itemsTableBody.innerHTML = '';
+
+    items.forEach((item, index) => {
+        addRow(index);
+        const row = itemsTableBody.children[index];
+
+        row.querySelector('[data-field="description"]').value = item.description ?? '';
+        row.querySelector('[data-field="ctn"]').value = item.ctn ?? '';
+        row.querySelector('[data-field="qty"]').value = item.qty ?? '';
+        row.querySelector('[data-field="ttl_qty"]').value = item.ttl_qty ?? '';
+        row.querySelector('[data-field="unit"]').value = item.unit ?? '';
+        row.querySelector('[data-field="price"]').value = item.price ?? '';
+        row.querySelector('[data-field="ttl_amount"]').value = item.ttl_amount ?? '';
+        row.querySelector('[data-field="cbm"]').value = item.cbm ?? '';
+        row.querySelector('[data-field="ttl_cbm"]').value = item.ttl_cbm ?? '';
+        row.querySelector('[data-field="kg"]').value = item.kg ?? '';
+        row.querySelector('[data-field="ttl_kg"]').value = item.ttl_kg ?? '';
+        row.querySelector('[data-field="shop_no"]').value = item.shop_no ?? '';
+    });
+
+    reindexRows();
+}
 });
 </script>
 
diff --git a/resources/views/admin/invoice_edit.blade.php b/resources/views/admin/invoice_edit.blade.php
index 662bef7..dd203c4 100644
--- a/resources/views/admin/invoice_edit.blade.php
+++ b/resources/views/admin/invoice_edit.blade.php
@@ -33,6 +33,97 @@ body {
     100% { opacity: 1; transform: translateY(0) scale(1); }
 }
 
+/* --------------------------------------------------
+   INVOICE PREVIEW RESPONSIVE FIXES
+-------------------------------------------------- */
+.invoice-preview-wrapper {
+    width: 100%;
+    overflow: auto;
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
+.invoice-preview-wrapper * {
+    box-sizing: border-box;
+}
+
+/* Override any fixed width styles that might be in popup_invoice */
+#invoicePreview,
+.invoice-container,
+.invoice-wrapper {
+    max-width: 100% !important;
+    width: 100% !important;
+}
+
+/* Responsive table fixes for invoice */
+.invoice-preview-wrapper table {
+    width: 100% !important;
+    max-width: 100% !important;
+    table-layout: auto !important;
+}
+
+.invoice-preview-wrapper .table-responsive {
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+}
+
+/* Ensure all elements scale properly */
+.invoice-preview-wrapper .row,
+.invoice-preview-wrapper .col,
+.invoice-preview-wrapper [class*="col-"] {
+    flex: 1 1 auto !important;
+    max-width: 100% !important;
+}
+
+/* Force responsive behavior for print-style elements */
+@media (max-width: 1200px) {
+    .invoice-preview-wrapper {
+        font-size: 95%;
+    }
+}
+
+@media (max-width: 992px) {
+    .invoice-preview-wrapper {
+        font-size: 90%;
+    }
+}
+
+@media (max-width: 768px) {
+    .invoice-preview-wrapper {
+        font-size: 85%;
+    }
+    
+    .invoice-preview-wrapper table th,
+    .invoice-preview-wrapper table td {
+        padding: 0.5rem !important;
+    }
+}
+
+@media (max-width: 576px) {
+    .invoice-preview-wrapper {
+        font-size: 80%;
+    }
+    
+    .invoice-preview-wrapper .d-flex {
+        flex-direction: column !important;
+    }
+    
+    .invoice-preview-wrapper .text-end,
+    .invoice-preview-wrapper .text-start {
+        text-align: center !important;
+    }
+}
+
+/* Prevent any fixed pixel widths */
+.invoice-preview-wrapper [style*="width:"]:not([style*="width:100%"]):not([style*="width:auto"]) {
+    width: auto !important;
+    max-width: 100% !important;
+}
+
+.invoice-preview-wrapper [style*="min-width"] {
+    min-width: 0 !important;
+}
+
 /* --------------------------------------------------
    COMPACT CARD DESIGN
 -------------------------------------------------- */
@@ -332,6 +423,30 @@ body {
         font-size: 0.8rem;
     }
 }
+
+@media print {
+    .invoice-preview-wrapper {
+        max-width: 100% !important;
+        width: 100% !important;
+        overflow: visible !important;
+    }
+    
+    .invoice-preview-wrapper * {
+        visibility: visible !important;
+    }
+    
+    .glass-card {
+        box-shadow: none !important;
+        border: 1px solid #000 !important;
+    }
+    
+    .card-header-compact {
+        background: #000 !important;
+        color: #fff !important;
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+    }
+}
 </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,
diff --git a/resources/views/admin/popup_invoice.blade.php b/resources/views/admin/popup_invoice.blade.php
index ce9392b..b02a7b6 100644
--- a/resources/views/admin/popup_invoice.blade.php
+++ b/resources/views/admin/popup_invoice.blade.php
@@ -56,7 +56,7 @@
         }
         
         .id-container {
-            margin-bottom: 1rem; /* Reduced from 1.5rem */
+            margin-bottom: 1rem;
         }
         
         .id-box {
@@ -67,6 +67,9 @@
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
             transition: all 0.3s ease;
             height: 100%;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
         }
         
         .id-box:hover {
@@ -82,34 +85,29 @@
             border-left: 4px solid var(--success);
         }
         
-        .id-box-accent {
-            border-left: 4px solid var(--warning);
-        }
-        
         .id-icon {
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
+            width: 48px;
+            height: 48px;
+            border-radius: var(--border-radius);
             display: flex;
             align-items: center;
             justify-content: center;
-            margin-bottom: 0.5rem; /* Reduced from 0.75rem */
-            font-size: 1rem;
+            font-size: 1.2rem;
+            flex-shrink: 0;
         }
         
         .id-icon-primary {
-            background: rgba(52, 152, 219, 0.1);
-            color: var(--secondary);
+            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+            color: white;
         }
         
         .id-icon-secondary {
-            background: rgba(39, 174, 96, 0.1);
-            color: var(--success);
+            background: linear-gradient(135deg, #27ae60 0%, #219653 100%);
+            color: white;
         }
         
-        .id-icon-accent {
-            background: rgba(243, 156, 18, 0.1);
-            color: var(--warning);
+        .id-content {
+            flex: 1;
         }
         
         .id-label {
@@ -126,76 +124,87 @@
             font-weight: 700;
             color: var(--primary);
             margin-bottom: 0;
+            word-break: break-word;
+            line-height: 1.3;
         }
         
-        .date-container {
-            background: white;
-            border-radius: var(--border-radius);
-            padding: 1rem; /* Reduced from 1.25rem */
-            margin-bottom: 1rem; /* Reduced from 1.5rem */
-            border: 1px solid #e9ecef;
-            box-shadow: var(--box-shadow);
-        }
-        
-        .date-card {
-            text-align: center;
-            padding: 0.75rem;
-            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-            border-radius: var(--border-radius);
-            border: 1px solid rgba(0,0,0,0.05);
-        }
-        
-        .date-icon {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 0 auto 0.5rem; /* Reduced from 0.75rem */
-            background: var(--secondary);
+        /* Enhanced Date Section with Blue-Purple Gradient */
+        .date-badge {
+            font-size: 0.85rem;
+            padding: 0.75rem 1rem;
+            border-radius: 8px;
+            font-weight: 500;
+            background: linear-gradient(135deg, #3498db 0%, #9b59b6 100%);
             color: white;
-            font-size: 1rem;
+            border: none;
+            min-width: 140px;
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2);
         }
         
-        .date-label {
-            font-size: 0.8rem;
-            color: #6c757d;
-            font-weight: 600;
-            margin-bottom: 0.5rem;
+        .date-badge:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
+        }
+        
+        .date-badge .badge-label {
+            font-size: 0.7rem;
             text-transform: uppercase;
             letter-spacing: 0.5px;
-        }
-        
-        .date-value {
-            font-size: 1rem;
-            font-weight: 700;
-            color: var(--primary);
-            padding: 0.5rem;
-            background: white;
-            border-radius: 4px;
-            border: 1px solid #e9ecef;
-        }
-        
-        .date-connector {
+            color: rgba(255, 255, 255, 0.9);
+            margin-bottom: 0.25rem;
             display: flex;
             align-items: center;
-            justify-content: center;
-            height: 100%;
+            gap: 4px;
         }
         
-        .date-connector i {
-            background: var(--light);
-            padding: 10px;
+        .date-badge .badge-label i {
+            font-size: 0.6rem;
+        }
+        
+        .date-badge .badge-value {
+            font-weight: 700;
+            font-size: 0.95rem;
+            color: white;
+        }
+        
+        .date-badge.due-date {
+            background: linear-gradient(135deg, #3498db 0%, #9b59b6 100%);
+        }
+        
+        .date-badge.overdue {
+            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
+            animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); }
+            70% { box-shadow: 0 0 0 6px rgba(231, 76, 60, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
+        }
+        
+        .date-separator {
+            color: #dee2e6;
+            font-weight: 300;
+            padding: 0 0.5rem;
+            display: flex;
+            align-items: center;
+        }
+        
+        .date-separator i {
+            background: white;
+            padding: 8px;
             border-radius: 50%;
             color: var(--secondary);
             border: 2px solid #e9ecef;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
         }
         
         .card {
             border: 1px solid #e9ecef;
             border-radius: var(--border-radius);
-            margin-bottom: 1rem; /* Reduced from 1.5rem */
+            margin-bottom: 1rem;
             box-shadow: var(--box-shadow);
         }
         
@@ -228,27 +237,18 @@
             background-color: rgba(52, 152, 219, 0.03);
         }
         
-        .summary-card {
-            background: var(--light);
-            border-left: 4px solid var(--secondary);
-        }
-        
-        .summary-header {
-            background: var(--primary);
-            color: white;
+        /* Simplified Summary Section */
+        .summary-container {
+            margin: 2rem 0;
         }
         
         .amount-row {
-            border-bottom: 1px solid #e9ecef;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
             padding: 0.75rem 0;
         }
         
-        .total-row {
-            border-top: 2px solid #dee2e6;
-            font-size: 1.1rem;
-            font-weight: 700;
-        }
-        
         .text-primary {
             color: var(--primary) !important;
         }
@@ -268,15 +268,20 @@
         
         /* COMPACT HEADER STYLES */
         .compact-header {
-            margin-bottom: 0.75rem; /* Reduced from default */
+            margin-bottom: 0.75rem;
         }
         
         .compact-header .invoice-title {
-            margin-bottom: 0.25rem; /* Reduced gap */
+            margin-bottom: 0.25rem;
         }
         
-        .compact-header .status-badge {
-            margin-top: 0.25rem; /* Reduced gap */
+        /* Date and status row */
+        .date-status-row {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            gap: 0.75rem;
+            flex-wrap: wrap;
         }
         
         @media (max-width: 768px) {
@@ -284,10 +289,6 @@
                 margin: 1rem;
             }
             
-            .date-connector {
-                margin: 1rem 0;
-            }
-            
             .table-responsive {
                 font-size: 0.8rem;
             }
@@ -295,6 +296,55 @@
             .id-box {
                 margin-bottom: 1rem;
             }
+            
+            .date-status-row {
+                justify-content: flex-start;
+                margin-top: 0.5rem;
+            }
+            
+            .compact-header .col-md-6.text-end {
+                text-align: left !important;
+            }
+            
+            .date-badge {
+                min-width: 120px;
+            }
+            
+            .summary-container {
+                padding: 0 1rem;
+            }
+        }
+        
+        @media (max-width: 576px) {
+            .date-status-row {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 0.5rem;
+            }
+            
+            .date-separator {
+                display: none;
+            }
+            
+            .date-badge {
+                width: 100%;
+            }
+            
+            .id-box {
+                flex-direction: column;
+                text-align: center;
+                gap: 0.75rem;
+            }
+            
+            .id-icon {
+                width: 40px;
+                height: 40px;
+                font-size: 1rem;
+            }
+            
+            .table-responsive {
+                overflow-x: auto;
+            }
         }
     </style>
 </head>
@@ -318,108 +368,89 @@
                     </div>
 
                     <div class="col-md-6 text-end">
-                        <span class="status-badge 
-                            @if($invoice->status=='paid') bg-success 
-                            @elseif($invoice->status=='overdue') bg-danger
-                            @elseif($invoice->status=='pending') bg-warning text-dark
-                            @else bg-secondary @endif">
-                            <i class="fas 
-                                @if($invoice->status=='paid') fa-check-circle 
-                                @elseif($invoice->status=='overdue') fa-exclamation-circle
-                                @elseif($invoice->status=='pending') fa-clock
-                                @else fa-question-circle @endif me-1"></i>
-                            {{ ucfirst($invoice->status) }}
-                        </span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Three ID Boxes in One Row -->
-            <div class="id-container">
-                <div class="row">
-                    <!-- Invoice ID Box -->
-                    <div class="col-md-4 mb-3">
-                        <div class="id-box id-box-primary">
-                            <div class="id-icon id-icon-primary">
-                                <i class="fas fa-receipt"></i>
+                        <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>
-                            <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-value">
-                                @if($invoice->order && $invoice->order->order_id)
-                                    {{ $invoice->order->order_id }}
-                                @elseif($invoice->order_id)
-                                    {{ $invoice->order_id }}
-                                @else
-                                    N/A
-                                @endif
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- Shipment ID Box -->
-                    <div class="col-md-4 mb-3">
-                        <div class="id-box id-box-accent">
-                            <div class="id-icon id-icon-accent">
-                                <i class="fas fa-shipping-fast"></i>
-                            </div>
-                            <div class="id-label">Shipment ID</div>
-                            <div class="id-value">
-                                @php
-                                    $shipmentId = 'N/A';
-                                    // Try multiple ways to get shipment ID
-                                    if($invoice->shipment && $invoice->shipment->shipment_id) {
-                                        $shipmentId = $invoice->shipment->shipment_id;
-                                    } elseif($invoice->shipment_id) {
-                                        $shipmentId = $invoice->shipment_id;
-                                    } elseif(isset($shipment) && $shipment && $shipment->shipment_id) {
-                                        $shipmentId = $shipment->shipment_id;
-                                    }
-                                @endphp
-                                {{ $shipmentId }}
+                            
+                            <!-- Due Date -->
+                            <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
+                                @elseif($invoice->status=='pending') bg-warning text-dark
+                                @else bg-secondary @endif">
+                                <i class="fas 
+                                    @if($invoice->status=='paid') fa-check-circle 
+                                    @elseif($invoice->status=='overdue') fa-exclamation-circle
+                                    @elseif($invoice->status=='pending') fa-clock
+                                    @else fa-question-circle @endif me-1"></i>
+                                {{ ucfirst($invoice->status) }}
+                            </span>
                         </div>
                     </div>
                 </div>
             </div>
 
             <!-- ============================
-                 DATES SECTION
+                 ORDER & SHIPMENT ID BOXES
             ============================ -->
-            <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 class="id-container">
+                <div class="row">
+                    <!-- Order ID Box -->
+                    <div class="col-md-6 mb-3">
+                        <div class="id-box id-box-primary">
+                            <div class="id-icon id-icon-primary">
+                                <i class="fas fa-shopping-cart"></i>
+                            </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 }}
+                                    @elseif($invoice->order_id)
+                                        {{ $invoice->order_id }}
+                                    @else
+                                        N/A
+                                    @endif
+                                </div>
                             </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>
+                    
+                    <!-- Shipment ID Box -->
+                    <div class="col-md-6 mb-3">
+                        <div class="id-box id-box-secondary">
+                            <div class="id-icon id-icon-secondary">
+                                <i class="fas fa-shipping-fast"></i>
                             </div>
-                            <div class="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 class="id-content">
+                                <div class="id-label">SHIPMENT ID</div>
+                                <div class="id-value">
+                                    @php
+                                        $shipmentId = 'N/A';
+                                        // Try multiple ways to get shipment ID
+                                        if($invoice->shipment && $invoice->shipment->shipment_id) {
+                                            $shipmentId = $invoice->shipment->shipment_id;
+                                        } elseif($invoice->shipment_id) {
+                                            $shipmentId = $invoice->shipment_id;
+                                        } elseif(isset($shipment) && $shipment && $shipment->shipment_id) {
+                                            $shipmentId = $shipment->shipment_id;
+                                        }
+                                    @endphp
+                                    {{ $shipmentId }}
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -519,78 +550,71 @@
                 </div>
             </div>
 
-            <!-- ============================
-                 FINAL SUMMARY
-            ============================ -->
-            <div class="row">
-                <div class="col-md-6 offset-md-6">
-                    <div class="card summary-card">
-                        <div class="card-header summary-header">
-                            <h6 class="mb-0 fw-bold">
-                                <i class="fas fa-calculator me-2"></i> Final Summary
-                            </h6>
-                        </div>
-                        <div class="card-body">
-                            <div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
-                                <span class="fw-semibold">Amount:</span>
-                                <span class="fw-bold text-dark">₹{{ number_format($invoice->final_amount,2) }}</span>
-                            </div>
+      @php
+        $totalAmount   = $invoice->final_amount;
+        $gstAmount     = $invoice->gst_amount;
+        $totalPayable  = $invoice->final_amount_with_gst;
 
-                            @if($invoice->tax_type === 'gst')
-                                {{-- CGST --}}
-                                <div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
-                                    <span class="fw-semibold">CGST ({{ $invoice->cgst_percent ?? ($invoice->gst_percent/2) }}%):</span>
-                                    <span class="fw-bold text-danger">₹{{ number_format($invoice->gst_amount/2, 2) }}</span>
-                                </div>
+        $paidAmount    = $invoice->totalPaid();
+        $remaining     = $invoice->remainingAmount();
+        @endphp
 
-                                {{-- SGST --}}
-                                <div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
-                                    <span class="fw-semibold">SGST ({{ $invoice->sgst_percent ?? ($invoice->gst_percent/2) }}%):</span>
-                                    <span class="fw-bold text-danger">₹{{ number_format($invoice->gst_amount/2, 2) }}</span>
-                                </div>
+<div class="summary-container">
+    <div class="row justify-content-center">
+        <div class="col-lg-8">
 
-                            @elseif($invoice->tax_type === 'igst')
-                                {{-- IGST --}}
-                                <div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
-                                    <span class="fw-semibold">IGST ({{ $invoice->igst_percent ?? $invoice->gst_percent }}%):</span>
-                                    <span class="fw-bold text-danger">₹{{ number_format($invoice->gst_amount, 2) }}</span>
-                                </div>
-                            @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 class="amount-row">
+                <span>Total Amount</span>
+                <span class="fw-bold">₹{{ number_format($totalAmount,2) }}</span>
             </div>
+
+            <div class="amount-row">
+                <span>GST Amount</span>
+                <span class="fw-bold text-danger">
+                    + ₹{{ number_format($gstAmount,2) }}
+                </span>
+            </div>
+
+            <div class="amount-row border-top pt-2">
+                <span class="fw-bold">Total Payable</span>
+                <span class="fw-bold text-success">
+                    ₹{{ number_format($totalPayable,2) }}
+                </span>
+            </div>
+
+            <div class="amount-row">
+                <span>Paid Amount</span>
+                <span class="fw-bold text-primary">
+                    − ₹{{ number_format($paidAmount,2) }}
+                </span>
+            </div>
+
+            <div class="amount-row border-top pt-2">
+                <span class="fw-bold text-danger">Remaining Amount</span>
+                <span class="fw-bold text-danger fs-5">
+                    ₹{{ number_format($remaining,2) }}
+                </span>
+            </div>
+
+        </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>
@@ -600,12 +624,12 @@
     <!-- ============================
          SHARE SCRIPT
     ============================ -->
-    <script>
+   <script>
     function shareInvoice() {
         const shareData = {
             title: "Invoice {{ $invoice->invoice_number }}",
             text: "Sharing invoice {{ $invoice->invoice_number }}",
-            url: "{{ asset($invoice->pdf_path) }}"
+            url: "{{ route('admin.invoices.download', $invoice->id) }}"
         };
 
         if (navigator.share) {
@@ -615,6 +639,7 @@
             alert("Link copied! Sharing not supported on this browser.");
         }
     }
-    </script>
+</script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/resources/views/admin/shipments.blade.php b/resources/views/admin/shipments.blade.php
index 2d8be18..c0bb32d 100644
--- a/resources/views/admin/shipments.blade.php
+++ b/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;
-        flex-wrap: wrap;
-        gap: 20px;
-        justify-content: space-between;
+        display: grid;
+        grid-template-columns: repeat(8, 1fr);
+        gap: 12px;
+        justify-content: center;
+        align-items: stretch;
+        width: 100%;
     }
     
     .shipment-total-item {
-        flex: 1;
-        min-width: 150px;
         text-align: center;
-        padding: 15px;
+        padding: 15px 10px;
         background: white;
         border-radius: 10px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 1;
     }
     
     .shipment-total-label {
         font-weight: 600;
         color: #64748b;
-        font-size: 12px;
+        font-size: 11px;
         margin-bottom: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
+        line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
     }
     
     .shipment-total-value {
         font-weight: 800;
-        font-size: 20px;
+        font-size: 18px;
         color: #1e293b;
         line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
     }
     
     .total-amount {
@@ -873,6 +903,7 @@
         padding: 10px;
         border-radius: 8px;
         border: 2px solid #10b981;
+        width: 100%;
     }
     
     .total-quantity {
@@ -881,6 +912,7 @@
         padding: 10px;
         border-radius: 8px;
         border: 2px solid #0ea5e9;
+        width: 100%;
     }
     
     .total-weight {
@@ -889,6 +921,7 @@
         padding: 10px;
         border-radius: 8px;
         border: 2px solid #8b5cf6;
+        width: 100%;
     }
     
     .total-cbm {
@@ -897,6 +930,7 @@
         padding: 10px;
         border-radius: 8px;
         border: 2px solid #ef4444;
+        width: 100%;
     }
     
     .total-ctn {
@@ -905,6 +939,7 @@
         padding: 10px;
         border-radius: 8px;
         border: 2px solid #f59e0b;
+        width: 100%;
     }
     
     .total-ttl-cbm {
@@ -913,6 +948,7 @@
         padding: 10px;
         border-radius: 8px;
         border: 2px solid #8b5cf6;
+        width: 100%;
     }
     
     .total-ttl-kg {
@@ -921,6 +957,7 @@
         padding: 10px;
         border-radius: 8px;
         border: 2px solid #14b8a6;
+        width: 100%;
     }
     
     /* Animation for loading */
@@ -964,8 +1001,8 @@
         display: table-row;
     }
 
-    /* ---------- Pagination Styles ---------- */
-    .pagination-container, .modal-pagination-container {
+    /* ---------- Pagination Styles (Same as Account Dashboard) ---------- */
+    .pagination-container {
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -974,19 +1011,19 @@
         border-top: 1px solid #eef3fb;
     }
 
-    .pagination-info, .modal-pagination-info {
+    .pagination-info {
         font-size: 13px;
         color: #9ba5bb;
         font-weight: 600;
     }
 
-    .pagination-controls, .modal-pagination-controls {
+    .pagination-controls {
         display: flex;
         align-items: center;
         gap: 8px;
     }
 
-    .pagination-btn, .modal-pagination-btn {
+    .pagination-btn {
         background: #fff;
         border: 1px solid #e3eaf6;
         color: #1a2951;
@@ -1003,13 +1040,13 @@
         height: 32px;
     }
 
-    .pagination-btn:hover:not(:disabled), .modal-pagination-btn:hover:not(:disabled) {
+    .pagination-btn:hover:not(:disabled) {
         background: #1a2951;
         color: white;
         border-color: #1a2951;
     }
 
-    .pagination-btn:disabled, .modal-pagination-btn:disabled {
+    .pagination-btn:disabled {
         background: #f8fafc;
         color: #cbd5e0;
         border-color: #e2e8f0;
@@ -1017,7 +1054,7 @@
         opacity: 0.6;
     }
 
-    .pagination-page-btn, .modal-pagination-page-btn {
+    .pagination-page-btn {
         background: #fff;
         border: 1px solid #e3eaf6;
         color: #1a2951;
@@ -1031,13 +1068,13 @@
         text-align: center;
     }
 
-    .pagination-page-btn:hover, .modal-pagination-page-btn:hover {
+    .pagination-page-btn:hover {
         background: #1a2951;
         color: white;
         border-color: #1a2951;
     }
 
-    .pagination-page-btn.active, .modal-pagination-page-btn.active {
+    .pagination-page-btn.active {
         background: #1a2951;
         color: white;
         border-color: #1a2951;
@@ -1055,16 +1092,210 @@
         padding: 0 4px;
     }
 
+    /* Image-based pagination buttons */
+    .pagination-img-btn {
+        background: #fff;
+        border: 1px solid #e3eaf6;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 40px;
+        height: 32px;
+        padding: 0;
+    }
+
+    .pagination-img-btn:hover:not(:disabled) {
+        background: #1a2951;
+        border-color: #1a2951;
+    }
+
+    .pagination-img-btn:disabled {
+        background: #f8fafc;
+        border-color: #e2e8f0;
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+
+    .pagination-img-btn img {
+        width: 16px;
+        height: 16px;
+        filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(748%) hue-rotate(201deg) brightness(93%) contrast(89%);
+        transition: filter 0.3s ease;
+    }
+
+    .pagination-img-btn:hover:not(:disabled) img {
+        filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(106%) contrast(101%);
+    }
+
+    .pagination-img-btn:disabled img {
+        filter: brightness(0) saturate(100%) invert(84%) sepia(8%) saturate(165%) hue-rotate(179deg) brightness(89%) contrast(86%);
+    }
+
+    /* RESPONSIVE DESIGN FOR TABLET/MOBILE */
+    @media (max-width: 1200px) {
+        .modal-xl.edge-to-edge {
+            max-width: 96vw !important;
+            width: 96vw !important;
+            margin: 2vh auto !important;
+        }
+        
+        .modal-xl.edge-to-edge.order-details-modal {
+            max-width: 96vw !important;
+            width: 96vw !important;
+            margin: 2vh auto !important;
+        }
+        
+        .shipment-totals-row {
+            grid-template-columns: repeat(4, 1fr);
+            gap: 15px;
+        }
+    }
+    
+    @media (max-width: 992px) {
+        .modal-xl.edge-to-edge {
+            max-width: 95vw !important;
+            width: 95vw !important;
+            margin: 2.5vh auto !important;
+        }
+        
+        .modal-xl.edge-to-edge.order-details-modal {
+            max-width: 95vw !important;
+            width: 95vw !important;
+            margin: 2.5vh auto !important;
+        }
+        
+        .shipment-details-body {
+            padding: 20px 25px;
+        }
+        
+        .shipment-totals-row {
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+    
     @media (max-width: 768px) {
-        .pagination-container, .modal-pagination-container {
+        .pagination-container {
             flex-direction: column;
             gap: 10px;
             align-items: stretch;
         }
         
-        .pagination-controls, .modal-pagination-controls {
+        .pagination-controls {
             justify-content: center;
         }
+        
+        .modal-xl.edge-to-edge {
+            max-width: 100vw !important;
+            width: 100vw !important;
+            margin: 0 !important;
+            height: 100vh !important;
+            max-height: 100vh !important;
+        }
+        
+        .modal-xl.edge-to-edge.order-details-modal {
+            max-width: 100vw !important;
+            width: 100vw !important;
+            margin: 0 !important;
+            height: 100vh !important;
+            max-height: 100vh !important;
+        }
+        
+        .shipment-details-body {
+            padding: 15px 20px;
+        }
+        
+        .shipment-info-row {
+            flex-direction: column;
+            gap: 15px;
+            padding: 15px;
+        }
+        
+        .shipment-info-item {
+            padding: 10px 0;
+        }
+        
+        .shipment-totals {
+            padding: 20px 15px;
+        }
+        
+        .shipment-totals-row {
+            grid-template-columns: repeat(2, 1fr);
+            gap: 12px;
+        }
+        
+        .shipment-total-item {
+            padding: 12px 8px;
+        }
+        
+        .shipment-total-label {
+            font-size: 10px;
+        }
+        
+        .shipment-total-value {
+            font-size: 16px;
+        }
+        
+        /* Order details modal specific responsive styles */
+        .order-details-content {
+            padding: 15px;
+        }
+        
+        .order-details-table {
+            min-width: 1000px;
+        }
+    }
+    
+    @media (max-width: 576px) {
+        .shipment-totals-row {
+            grid-template-columns: 1fr;
+            gap: 10px;
+        }
+        
+        .modal-xl.edge-to-edge .modal-content {
+            border-radius: 0;
+            height: 100vh;
+            overflow-y: auto;
+        }
+        
+        .modal-xl.edge-to-edge.order-details-modal .modal-content {
+            border-radius: 0;
+            height: 100vh;
+            overflow-y: auto;
+        }
+        
+        .shipment-details-header {
+            padding: 20px 25px 15px;
+            border-radius: 0;
+        }
+        
+        .order-details-header {
+            padding: 20px 15px 10px;
+            border-radius: 0;
+        }
+        
+        .order-details-body {
+            padding: 15px;
+        }
+    }
+    
+    @media (max-width: 480px) {
+        .modal-xl.edge-to-edge,
+        .modal-xl.edge-to-edge.order-details-modal {
+            margin: 0 !important;
+            padding: 0 !important;
+        }
+        
+        .modal-content {
+            border-radius: 0 !important;
+        }
+        
+        .shipment-details-body,
+        .order-details-body {
+            padding: 10px 15px;
+        }
     }
 </style>
 
@@ -1093,11 +1324,16 @@
         <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>
+                <option value="shipment_ready">Shipment Ready</option>
+                <option value="export_custom">Export Custom</option>
+                <option value="international_transit">International Transit</option>
+                <option value="arrived_india">Arrived at India</option>
+                <option value="import_custom">Import Custom</option>
+                <option value="warehouse">Warehouse</option>
+                <option value="domestic_distribution">Domestic Distribution</option>
+                <option value="out_for_delivery">Out for Delivery</option>
                 <option value="delivered">Delivered</option>
+
             </select>
         </div>
         <select id="carrierFilter">
@@ -1163,7 +1399,7 @@
                                         <th>Amount (₹)</th>
                                     </tr>
                                 </thead>
-                                <tbody id="modalOrdersTableBody">
+                                <tbody>
                                     @forelse($availableOrders as $order)
                                     <tr>
                                         <td>
@@ -1191,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">
@@ -1293,26 +1506,42 @@
                                         <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 type="submit" name="status" value="shipment_ready" class="status-option shipment_ready">
+                                                Shipment Ready
                                             </button>
-                                            <button type="submit" name="status" value="pending" class="status-option pending">
-                                                <span class="status-indicator pending"></span>
-                                                Pending
+
+                                            <button type="submit" name="status" value="export_custom" class="status-option export_custom">
+                                                Export Custom
                                             </button>
-                                            <button type="submit" name="status" value="in_transit" class="status-option in_transit">
-                                                <span class="status-indicator in_transit"></span>
-                                                In Transit
+
+                                            <button type="submit" name="status" value="international_transit" class="status-option international_transit">
+                                                International Transit
                                             </button>
-                                            <button type="submit" name="status" value="dispatched" class="status-option dispatched">
-                                                <span class="status-indicator dispatched"></span>
-                                                Dispatched
+
+                                            <button type="submit" name="status" value="arrived_india" class="status-option arrived_india">
+                                                Arrived at India
                                             </button>
+
+                                            <button type="submit" name="status" value="import_custom" class="status-option import_custom">
+                                                Import Custom
+                                            </button>
+
+                                            <button type="submit" name="status" value="warehouse" class="status-option warehouse">
+                                                Warehouse
+                                            </button>
+
+                                            <button type="submit" name="status" value="domestic_distribution" class="status-option domestic_distribution">
+                                                Domestic Distribution
+                                            </button>
+
+                                            <button type="submit" name="status" value="out_for_delivery" class="status-option out_for_delivery">
+                                                Out for Delivery
+                                            </button>
+
                                             <button type="submit" name="status" value="delivered" class="status-option delivered">
-                                                <span class="status-indicator delivered"></span>
                                                 Delivered
                                             </button>
+
                                         </form>
                                     </div>
                                 </div>
@@ -1333,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>
@@ -1352,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>
@@ -1374,34 +1603,20 @@
 </div>
 
 <script>
-// Main Pagination state
+// Pagination state
 let currentPage = 1;
 const itemsPerPage = 10;
 let allShipments = @json($shipments);
 let filteredShipments = [...allShipments];
 
-// Modal Pagination state
-let modalCurrentPage = 1;
-const modalItemsPerPage = 10;
-let modalAllOrders = @json($availableOrders);
-
-// Initialize both paginations on page load
+// Initialize pagination on page load
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize main table pagination
     renderTable();
     updatePaginationControls();
     
-    // Initialize modal pagination
-    renderModalTable();
-    updateModalPaginationControls();
-    
-    // Bind main pagination events
+    // Bind pagination events
     document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
     document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);
-    
-    // Bind modal pagination events
-    document.getElementById('modalPrevPageBtn').addEventListener('click', goToModalPreviousPage);
-    document.getElementById('modalNextPageBtn').addEventListener('click', goToModalNextPage);
 
     // Status Filter Functionality
     const statusFilter = document.getElementById('statusFilter');
@@ -1431,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
             }
@@ -1453,26 +1668,7 @@ document.addEventListener('DOMContentLoaded', function() {
     filterShipments();
 });
 
-// Helper function to extract numeric part from order ID
-function extractOrderNumber(orderId) {
-    if (!orderId) return 0;
-    
-    // Try to find numbers in the order ID
-    const matches = orderId.match(/\d+/g);
-    if (matches && matches.length > 0) {
-        // Take the last sequence of numbers (often the actual order number)
-        return parseInt(matches[matches.length - 1]);
-    }
-    
-    // Fallback: try to convert the whole string
-    const num = parseInt(orderId.replace(/\D/g, ''));
-    return isNaN(num) ? 0 : num;
-}
-
-// ====================================
-// MAIN PAGINATION FUNCTIONS
-// ====================================
-
+// Pagination Functions
 function goToPreviousPage() {
     if (currentPage > 1) {
         currentPage--;
@@ -1511,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>';
@@ -1525,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) {
@@ -1551,93 +1747,7 @@ function addPageButton(pageNumber, container, currentPage) {
     container.appendChild(button);
 }
 
-// ====================================
-// MODAL PAGINATION FUNCTIONS
-// ====================================
-
-function goToModalPreviousPage() {
-    if (modalCurrentPage > 1) {
-        modalCurrentPage--;
-        renderModalTable();
-        updateModalPaginationControls();
-    }
-}
-
-function goToModalNextPage() {
-    const totalPages = Math.ceil(modalAllOrders.length / modalItemsPerPage);
-    if (modalCurrentPage < totalPages) {
-        modalCurrentPage++;
-        renderModalTable();
-        updateModalPaginationControls();
-    }
-}
-
-function updateModalPaginationControls() {
-    const totalPages = Math.ceil(modalAllOrders.length / modalItemsPerPage);
-    const prevBtn = document.getElementById('modalPrevPageBtn');
-    const nextBtn = document.getElementById('modalNextPageBtn');
-    const pageInfo = document.getElementById('modalPageInfo');
-    const paginationPages = document.getElementById('modalPaginationPages');
-    
-    prevBtn.disabled = modalCurrentPage === 1;
-    nextBtn.disabled = modalCurrentPage === totalPages || totalPages === 0;
-    
-    // Update page info text - Order count correctly
-    const startIndex = (modalCurrentPage - 1) * modalItemsPerPage + 1;
-    const endIndex = Math.min(modalCurrentPage * modalItemsPerPage, modalAllOrders.length);
-    pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${modalAllOrders.length} entries`;
-    
-    // Generate page numbers
-    paginationPages.innerHTML = '';
-    
-    if (totalPages <= 7) {
-        // Show all pages
-        for (let i = 1; i <= totalPages; i++) {
-            addModalPageButton(i, paginationPages);
-        }
-    } else {
-        // Show first page, current page range, and last page
-        addModalPageButton(1, paginationPages);
-        
-        if (modalCurrentPage > 3) {
-            paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
-        }
-        
-        const start = Math.max(2, modalCurrentPage - 1);
-        const end = Math.min(totalPages - 1, modalCurrentPage + 1);
-        
-        for (let i = start; i <= end; i++) {
-            addModalPageButton(i, paginationPages);
-        }
-        
-        if (modalCurrentPage < totalPages - 2) {
-            paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
-        }
-        
-        addModalPageButton(totalPages, paginationPages);
-    }
-}
-
-function addModalPageButton(pageNumber, container) {
-    const button = document.createElement('button');
-    button.className = 'modal-pagination-page-btn';
-    if (pageNumber === modalCurrentPage) {
-        button.classList.add('active');
-    }
-    button.textContent = pageNumber;
-    button.addEventListener('click', () => {
-        modalCurrentPage = pageNumber;
-        renderModalTable();
-        updateModalPaginationControls();
-    });
-    container.appendChild(button);
-}
-
-// ====================================
-// RENDER FUNCTIONS
-// ====================================
-
-// Render Main Table Function
+// Render Table Function
 function renderTable() {
     const tbody = document.getElementById('shipmentsTableBody');
     
@@ -1656,27 +1766,15 @@ function renderTable() {
     // Calculate pagination
     const startIndex = (currentPage - 1) * itemsPerPage;
     const endIndex = startIndex + itemsPerPage;
+    const paginatedItems = filteredShipments.slice(startIndex, endIndex);
     
-    // Sort by order_id in DESCENDING order (largest number first)
-    const sortedItems = [...filteredShipments].sort((a, b) => {
-        // Extract numeric part from order_id for comparison
-        const numA = extractOrderNumber(a.shipment_id);
-        const numB = extractOrderNumber(b.shipment_id);
-        return numB - numA; // DESCENDING order
-    });
-    
-    const paginatedItems = sortedItems.slice(startIndex, endIndex);
-    
-    // Calculate reverse index starting from total count
-    const totalCount = filteredShipments.length;
-    const reverseStartIndex = totalCount - (currentPage - 1) * itemsPerPage;
+    // Sort by creation date (newest first)
+    const sortedItems = [...paginatedItems].sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
     
     // Render table rows
     tbody.innerHTML = '';
-    paginatedItems.forEach((shipment, index) => {
-        // Calculate display number in reverse order
-        const displayNumber = reverseStartIndex - index;
-        
+    sortedItems.forEach((shipment, index) => {
+        const displayIndex = filteredShipments.length - (startIndex + index);
         const row = document.createElement('tr');
         row.className = 'shipment-row';
         row.setAttribute('data-status', shipment.status);
@@ -1689,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}
@@ -1715,109 +1813,78 @@ function renderTable() {
                 </a>
             </td>
 
+       
             <td>
-                <div class="action-container">
-                    <button type="button" class="btn-edit-status" onclick="toggleStatusDropdown(this, ${shipment.id})" title="Edit Status">
-                        <i class="bi bi-pencil"></i>
-                    </button>
-                    <div class="status-dropdown" id="statusDropdown-${shipment.id}">
-                        <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
-                            </button>
-                            <button type="submit" name="status" value="in_transit" class="status-option 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
-                            </button>
-                            <button type="submit" name="status" value="delivered" class="status-option delivered">
-                                <span class="status-indicator delivered"></span>
-                                Delivered
-                            </button>
-                        </form>
-                    </div>
-                </div>
-            </td>
+    <div class="action-container">
+        <button type="button"
+                class="btn-edit-status"
+                onclick="toggleStatusDropdown(this, ${shipment.id})"
+                title="Edit Status">
+            <i class="bi bi-pencil"></i>
+        </button>
+
+        <div class="status-dropdown" id="statusDropdown-${shipment.id}">
+            <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="shipment_ready" class="status-option shipment_ready">
+                    <span class="status-indicator shipment_ready"></span>
+                    Shipment Ready
+                </button>
+
+                <button type="submit" name="status" value="export_custom" class="status-option export_custom">
+                    <span class="status-indicator export_custom"></span>
+                    Export Custom
+                </button>
+
+                <button type="submit" name="status" value="international_transit" class="status-option international_transit">
+                    <span class="status-indicator international_transit"></span>
+                    International Transit
+                </button>
+
+                <button type="submit" name="status" value="arrived_india" class="status-option arrived_india">
+                    <span class="status-indicator arrived_india"></span>
+                    Arrived at India
+                </button>
+
+                <button type="submit" name="status" value="import_custom" class="status-option import_custom">
+                    <span class="status-indicator import_custom"></span>
+                    Import Custom
+                </button>
+
+                <button type="submit" name="status" value="warehouse" class="status-option warehouse">
+                    <span class="status-indicator warehouse"></span>
+                    Warehouse
+                </button>
+
+                <button type="submit" name="status" value="domestic_distribution" class="status-option domestic_distribution">
+                    <span class="status-indicator domestic_distribution"></span>
+                    Domestic Distribution
+                </button>
+
+                <button type="submit" name="status" value="out_for_delivery" class="status-option out_for_delivery">
+                    <span class="status-indicator out_for_delivery"></span>
+                    Out for Delivery
+                </button>
+
+                <button type="submit" name="status" value="delivered" class="status-option delivered">
+                    <span class="status-indicator delivered"></span>
+                    Delivered
+                </button>
+            </form>
+        </div>
+    </div>
+</td>
+
         `;
         tbody.appendChild(row);
     });
 }
 
-// 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');
@@ -1901,7 +1968,11 @@ function openShipmentDetails(id) {
                 html += `
                     <tr>
                         <td class="fw-bold">
-                            ${order.order_id}
+                            <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>
@@ -2014,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
\ No newline at end of file
diff --git a/resources/views/admin/staff/create.blade.php b/resources/views/admin/staff/create.blade.php
index a91e221..7fe1dfe 100644
--- a/resources/views/admin/staff/create.blade.php
+++ b/resources/views/admin/staff/create.blade.php
@@ -4,6 +4,7 @@
 
 @section('content')
 <style>
+    
     :root {
         --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
@@ -20,10 +21,9 @@
         font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     }
 
-    /* Main Container */
+    /* Main Container - FLUID LIKE SHIPMENT PAGE */
     .staff-add-container {
-        max-width: 900px;
-        margin: 0 auto;
+        width: 100%;
         position: relative;
     }
 
@@ -41,7 +41,7 @@
         right: -100px;
     }
 
-    /* Main Card */
+    /* Main Card - FLUID BEHAVIOR */
     .staff-add-card {
         background: var(--glass-bg);
         backdrop-filter: blur(10px);
@@ -51,9 +51,10 @@
         overflow: hidden;
         position: relative;
         z-index: 1;
+        width: 100%;
     }
 
-    /* Header Section */
+    /* Header Section - FLUID SCALING */
     .staff-add-header {
         background: var(--primary-gradient);
         padding: 35px 40px;
@@ -105,7 +106,7 @@
         margin: 0 auto;
     }
 
-    /* Progress Steps */
+    /* Progress Steps - FLUID ADJUSTMENTS */
     .progress-steps {
         display: flex;
         justify-content: space-between;
@@ -207,7 +208,7 @@
         display: block;
     }
 
-    /* Form Grid */
+    /* Form Grid - ADAPTIVE LIKE SHIPMENT PAGE */
     .form-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@@ -327,7 +328,7 @@
         display: none;
     }
 
-    /* Permissions Section */
+    /* Permissions Section - ADAPTIVE GRID */
     .permissions-container {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
@@ -585,7 +586,305 @@
     .strength-good { background: #38b2ac; }
     .strength-strong { background: #48bb78; }
 
-    /* Responsive Design */
+    /* =========================================== */
+    /* DESKTOP MEDIA QUERIES - LIKE SHIPMENT PAGE  */
+    /* =========================================== */
+    
+    /* Base desktop - 992px+ */
+    @media (min-width: 992px) {
+        body {
+            padding: 20px;
+        }
+        
+        .form-stage {
+            padding: 0 30px 30px;
+        }
+        
+        .staff-add-header {
+            padding: 30px 30px;
+        }
+        
+        .form-grid {
+            gap: 25px;
+        }
+        
+        .permissions-container {
+            gap: 20px;
+        }
+        
+        .navigation-buttons {
+            padding: 30px;
+        }
+    }
+    
+    /* Large desktop - 1200px+ */
+    @media (min-width: 1200px) {
+        .staff-add-card {
+            margin: 0 auto;
+            max-width: 95%;
+        }
+        
+        .form-grid {
+            grid-template-columns: repeat(2, 1fr);
+            gap: 30px;
+        }
+        
+        .permissions-container {
+            grid-template-columns: repeat(2, 1fr);
+            gap: 25px;
+        }
+        
+        .staff-add-header {
+            padding: 35px 35px;
+        }
+        
+        .header-title {
+            font-size: 2rem;
+        }
+        
+        .header-icon {
+            font-size: 42px;
+        }
+        
+        .progress-steps {
+            padding: 30px 35px 0;
+        }
+        
+        .form-stage {
+            padding: 0 35px 35px;
+        }
+        
+        .step-circle {
+            width: 55px;
+            height: 55px;
+        }
+        
+        .navigation-buttons {
+            padding: 30px 35px;
+        }
+        
+        .btn {
+            padding: 14px 32px;
+            min-width: 140px;
+            font-size: 15px;
+        }
+        
+        .btn-submit {
+            min-width: 160px;
+        }
+    }
+    
+    /* Extra large desktop - 1440px+ */
+    @media (min-width: 1440px) {
+        .staff-add-card {
+            max-width: 97%;
+        }
+        
+        .form-grid {
+            grid-template-columns: repeat(3, 1fr);
+            gap: 35px;
+        }
+        
+        .permissions-container {
+            grid-template-columns: repeat(3, 1fr);
+            gap: 30px;
+        }
+        
+        .staff-add-header {
+            padding: 40px 40px;
+        }
+        
+        .header-title {
+            font-size: 2.3rem;
+        }
+        
+        .header-icon {
+            font-size: 50px;
+        }
+        
+        .progress-steps {
+            padding: 35px 40px 0;
+        }
+        
+        .form-stage {
+            padding: 0 40px 40px;
+        }
+        
+        .step-circle {
+            width: 60px;
+            height: 60px;
+            font-size: 20px;
+        }
+        
+        .step-label {
+            font-size: 0.95rem;
+        }
+        
+        .form-input {
+            padding: 16px 20px;
+            font-size: 16px;
+        }
+        
+        .form-label {
+            font-size: 1rem;
+        }
+        
+        .group-title {
+            font-size: 1.1rem;
+        }
+        
+        .permission-group {
+            padding: 25px;
+        }
+        
+        .permission-name {
+            font-size: 0.95rem;
+        }
+        
+        .navigation-buttons {
+            padding: 35px 40px;
+        }
+        
+        .btn {
+            padding: 16px 36px;
+            min-width: 150px;
+            font-size: 16px;
+        }
+        
+        .btn-submit {
+            min-width: 180px;
+        }
+    }
+    
+    /* Ultra wide desktop - 1600px+ */
+    @media (min-width: 1600px) {
+        .staff-add-card {
+            max-width: 98%;
+        }
+        
+        .form-grid {
+            grid-template-columns: repeat(4, 1fr);
+            gap: 40px;
+        }
+        
+        .permissions-container {
+            grid-template-columns: repeat(4, 1fr);
+            gap: 35px;
+        }
+        
+        .staff-add-header {
+            padding: 45px 45px;
+        }
+        
+        .header-title {
+            font-size: 2.5rem;
+        }
+        
+        .header-icon {
+            font-size: 55px;
+        }
+        
+        .progress-steps {
+            padding: 40px 45px 0;
+        }
+        
+        .form-stage {
+            padding: 0 45px 45px;
+        }
+        
+        .step-circle {
+            width: 65px;
+            height: 65px;
+            font-size: 22px;
+        }
+        
+        .step-label {
+            font-size: 1rem;
+        }
+        
+        .form-input {
+            padding: 18px 22px;
+            font-size: 17px;
+        }
+        
+        .form-label {
+            font-size: 1.1rem;
+        }
+        
+        .group-title {
+            font-size: 1.2rem;
+        }
+        
+        .permission-group {
+            padding: 30px;
+        }
+        
+        .navigation-buttons {
+            padding: 40px 45px;
+        }
+        
+        .btn {
+            padding: 18px 40px;
+            min-width: 160px;
+            font-size: 17px;
+        }
+        
+        .btn-submit {
+            min-width: 200px;
+        }
+    }
+    
+    /* Ultra wide 4K+ screens - 1920px+ */
+    @media (min-width: 1920px) {
+        body {
+            padding: 30px;
+        }
+        
+        .staff-add-card {
+            max-width: 99%;
+        }
+        
+        .form-grid {
+            grid-template-columns: repeat(5, 1fr);
+            gap: 45px;
+        }
+        
+        .permissions-container {
+            grid-template-columns: repeat(5, 1fr);
+            gap: 40px;
+        }
+        
+        .staff-add-header {
+            padding: 50px 50px;
+        }
+        
+        .header-title {
+            font-size: 2.7rem;
+        }
+        
+        .progress-steps {
+            padding: 45px 50px 0;
+        }
+        
+        .form-stage {
+            padding: 0 50px 50px;
+        }
+        
+        .navigation-buttons {
+            padding: 45px 50px;
+        }
+        
+        .decorative-circle {
+            width: 400px;
+            height: 400px;
+            top: -150px;
+            right: -150px;
+        }
+    }
+
+    /* =========================================== */
+    /* MOBILE RESPONSIVE (UNCHANGED) */
+    /* =========================================== */
     @media (max-width: 768px) {
         body {
             padding: 15px;
diff --git a/resources/views/admin/staff/edit.blade.php b/resources/views/admin/staff/edit.blade.php
index 09bb26a..aeb0f7a 100644
--- a/resources/views/admin/staff/edit.blade.php
+++ b/resources/views/admin/staff/edit.blade.php
@@ -18,10 +18,9 @@
         font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     }
 
-    /* Compact Container */
+    /* FLUID CONTAINER - LIKE SHIPMENT PAGE */
     .staff-edit-container {
-        max-width: 900px;
-        margin: 0 auto;
+        width: 100%;
         position: relative;
     }
 
@@ -33,6 +32,7 @@
         box-shadow: var(--shadow-lg);
         overflow: hidden;
         position: relative;
+        width: 100%;
     }
 
     .staff-edit-card::before {
@@ -46,10 +46,10 @@
         z-index: 10;
     }
 
-    /* Compact Header */
+    /* Fluid Header */
     .staff-header {
         background: var(--primary-gradient);
-        padding: 25px;
+        padding: 30px 25px;
         color: white;
         text-align: center;
         position: relative;
@@ -102,7 +102,7 @@
         border: 1px solid rgba(255,255,255,0.2);
     }
 
-    /* Compact Form Sections */
+    /* Fluid Form Sections */
     .form-section {
         padding: 25px;
         border-bottom: 1px solid rgba(0,0,0,0.05);
@@ -135,7 +135,7 @@
         margin: 0;
     }
 
-    /* Compact Form Grid */
+    /* ADAPTIVE FORM GRID - LIKE SHIPMENT PAGE */
     .form-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@@ -160,7 +160,7 @@
         margin-left: 3px;
     }
 
-    /* Compact Form Inputs */
+    /* Form Inputs */
     .form-input {
         width: 100%;
         padding: 12px 16px;
@@ -189,7 +189,7 @@
         line-height: 1.4;
     }
 
-    /* Compact Status Toggle */
+    /* Status Toggle */
     .status-toggle {
         display: flex;
         gap: 10px;
@@ -228,7 +228,7 @@
         display: none;
     }
 
-    /* Compact Permissions Section */
+    /* ADAPTIVE PERMISSIONS SECTION - LIKE SHIPMENT PAGE */
     .permissions-container {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
@@ -337,7 +337,7 @@
         flex: 1;
     }
 
-    /* Compact Error Messages */
+    /* Error Messages */
     .error-container {
         background: linear-gradient(135deg, #fff5f5, #fed7d7);
         border: 1.5px solid #fc8181;
@@ -377,7 +377,7 @@
         font-size: 0.9rem;
     }
 
-    /* Compact Action Buttons */
+    /* Action Buttons */
     .action-buttons {
         display: flex;
         gap: 12px;
@@ -448,7 +448,267 @@
     .strength-good { background: #38b2ac; }
     .strength-strong { background: #48bb78; }
 
-    /* Responsive Design */
+    /* =========================================== */
+    /* DESKTOP MEDIA QUERIES - LIKE SHIPMENT PAGE  */
+    /* =========================================== */
+    
+    /* Base desktop - 992px+ */
+    @media (min-width: 992px) {
+        body {
+            padding: 20px;
+        }
+        
+        .form-section {
+            padding: 30px;
+        }
+        
+        .staff-header {
+            padding: 35px 30px;
+        }
+        
+        .form-grid {
+            gap: 25px;
+        }
+        
+        .permissions-container {
+            gap: 20px;
+        }
+    }
+    
+    /* Large desktop - 1200px+ */
+    @media (min-width: 1200px) {
+        .staff-edit-card {
+            margin: 0 auto;
+            max-width: 95%;
+        }
+        
+        .form-grid {
+            grid-template-columns: repeat(2, 1fr);
+            gap: 30px;
+        }
+        
+        .permissions-container {
+            grid-template-columns: repeat(2, 1fr);
+            gap: 25px;
+        }
+        
+        .staff-header {
+            padding: 40px 35px;
+        }
+        
+        .staff-title {
+            font-size: 2rem;
+        }
+        
+        .staff-avatar {
+            width: 90px;
+            height: 90px;
+            font-size: 36px;
+        }
+        
+        .staff-avatar-initials {
+            font-size: 36px;
+        }
+        
+        .section-title {
+            font-size: 1.4rem;
+        }
+        
+        .form-section {
+            padding: 35px;
+        }
+        
+        .action-buttons {
+            padding: 30px;
+        }
+        
+        .btn {
+            padding: 14px 28px;
+            min-width: 140px;
+            font-size: 15px;
+        }
+    }
+    
+    /* Extra large desktop - 1440px+ */
+    @media (min-width: 1440px) {
+        .staff-edit-card {
+            max-width: 97%;
+        }
+        
+        .form-grid {
+            grid-template-columns: repeat(3, 1fr);
+            gap: 35px;
+        }
+        
+        .permissions-container {
+            grid-template-columns: repeat(3, 1fr);
+            gap: 30px;
+        }
+        
+        .staff-header {
+            padding: 45px 40px;
+        }
+        
+        .staff-title {
+            font-size: 2.2rem;
+        }
+        
+        .staff-avatar {
+            width: 100px;
+            height: 100px;
+            font-size: 40px;
+        }
+        
+        .staff-avatar-initials {
+            font-size: 40px;
+        }
+        
+        .section-title {
+            font-size: 1.5rem;
+        }
+        
+        .form-input {
+            padding: 14px 18px;
+            font-size: 15px;
+        }
+        
+        .form-label {
+            font-size: 0.95rem;
+        }
+        
+        .section-icon {
+            width: 45px;
+            height: 45px;
+            font-size: 18px;
+        }
+        
+        .group-title {
+            font-size: 1.2rem;
+        }
+        
+        .permission-group {
+            padding: 25px;
+        }
+        
+        .permission-name {
+            font-size: 0.95rem;
+        }
+        
+        .btn {
+            padding: 15px 32px;
+            min-width: 150px;
+            font-size: 16px;
+        }
+    }
+    
+    /* Ultra wide desktop - 1600px+ */
+    @media (min-width: 1600px) {
+        .staff-edit-card {
+            max-width: 98%;
+        }
+        
+        .form-grid {
+            grid-template-columns: repeat(4, 1fr);
+            gap: 40px;
+        }
+        
+        .permissions-container {
+            grid-template-columns: repeat(4, 1fr);
+            gap: 35px;
+        }
+        
+        .staff-header {
+            padding: 50px 45px;
+        }
+        
+        .staff-title {
+            font-size: 2.4rem;
+        }
+        
+        .staff-avatar {
+            width: 110px;
+            height: 110px;
+            font-size: 44px;
+        }
+        
+        .staff-avatar-initials {
+            font-size: 44px;
+        }
+        
+        .section-title {
+            font-size: 1.6rem;
+        }
+        
+        .form-input {
+            padding: 15px 20px;
+            font-size: 16px;
+        }
+        
+        .form-label {
+            font-size: 1rem;
+        }
+        
+        .section-icon {
+            width: 50px;
+            height: 50px;
+            font-size: 20px;
+        }
+        
+        .group-title {
+            font-size: 1.3rem;
+        }
+        
+        .permission-group {
+            padding: 30px;
+        }
+        
+        .btn {
+            padding: 16px 36px;
+            min-width: 160px;
+            font-size: 17px;
+        }
+    }
+    
+    /* Ultra wide 4K+ screens - 1920px+ */
+    @media (min-width: 1920px) {
+        body {
+            padding: 30px;
+        }
+        
+        .staff-edit-card {
+            max-width: 99%;
+        }
+        
+        .form-grid {
+            grid-template-columns: repeat(5, 1fr);
+            gap: 45px;
+        }
+        
+        .permissions-container {
+            grid-template-columns: repeat(5, 1fr);
+            gap: 40px;
+        }
+        
+        .staff-header {
+            padding: 60px 50px;
+        }
+        
+        .staff-title {
+            font-size: 2.6rem;
+        }
+        
+        .form-section {
+            padding: 40px;
+        }
+        
+        .action-buttons {
+            padding: 40px;
+        }
+    }
+
+    /* =========================================== */
+    /* MOBILE RESPONSIVE (UNCHANGED) */
+    /* =========================================== */
     @media (max-width: 768px) {
         body {
             padding: 10px;
@@ -521,7 +781,7 @@
 <div class="staff-edit-container">
     <!-- Main Card -->
     <div class="staff-edit-card">
-        <!-- Compact Header -->
+        <!-- Fluid Header -->
         <div class="staff-header">
             <div class="staff-avatar">
                 <div class="staff-avatar-initials">
diff --git a/routes/api.php b/routes/api.php
index 8cb2ed3..666bbd0 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -38,6 +38,7 @@ Route::middleware(['auth:api'])->group(function () {
     Route::get('/user/order/{order_id}/shipment', [UserOrderController::class, 'orderShipment']);
     Route::get('/user/order/{order_id}/invoice', [UserOrderController::class, 'orderInvoice']);
     Route::get('/user/order/{order_id}/track', [UserOrderController::class, 'trackOrder']);
+    Route::post('/user/orders/{order_id}/confirm', [UserOrderController::class, 'confirmOrder']);
 
 
     // Invoice List
diff --git a/routes/web.php b/routes/web.php
index 8930fcb..ac0a309 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -159,6 +159,12 @@ Route::prefix('admin')
             // Delete full order
             Route::delete('/orders/{id}/delete', [AdminOrderController::class, 'destroy'])
                 ->name('admin.orders.destroy');
+
+
+                Route::post('/orders/upload-excel-preview',
+                    [AdminOrderController::class, 'uploadExcelPreview']
+                )->name('admin.orders.upload.excel.preview');
+
                     
                 // ---------------------------
                 // SHIPMENTS (FIXED ROUTES)
@@ -223,7 +229,11 @@ 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'])
         ->name('admin.invoice.installment.delete');