diff --git a/app/Http/Controllers/Admin/AdminOrderController.php b/app/Http/Controllers/Admin/AdminOrderController.php
index 662ecce..15799d4 100644
--- a/app/Http/Controllers/Admin/AdminOrderController.php
+++ b/app/Http/Controllers/Admin/AdminOrderController.php
@@ -7,28 +7,123 @@ use Illuminate\Http\Request;
 use App\Models\Order;
 use App\Models\OrderItem;
 use App\Models\MarkList;
+use App\Models\Invoice;
+use App\Models\InvoiceItem;
+use App\Models\User;
 
 class AdminOrderController extends Controller
 {
+    // ---------------------------
+    // LIST / DASHBOARD
+    // ---------------------------
     public function index()
     {
+        // raw list for admin dashboard (simple)
         $orders = Order::latest()->get();
         $markList = MarkList::where('status', 'active')->get();
 
         return view('admin.dashboard', compact('orders', 'markList'));
     }
 
-    // -------------------------------------------------------------------------
-    // STEP 1 : ADD TEMPORARY ITEM
-    // -------------------------------------------------------------------------
+    /**
+     * Orders list (detailed)
+     */
+    // public function orderShow()
+    // {
+    //     $orders = Order::with(['markList', 'shipments', 'invoice'])
+    //         ->latest('id')
+    //         ->get();
 
-    public function addTempItem(Request $request)
+    //     return view('admin.orders', compact('orders'));
+    // }
+
+    // ---------------------------
+    // CREATE NEW ORDER (simple DB flow)
+    // ---------------------------
+    /**
+     * Show create form (you can place create UI on separate view or dashboard)
+     */
+    public function create()
     {
-        // Validate item fields
-        $item = $request->validate([
-            'mark_no' => 'required',
-            'origin' => 'required',
-            'destination' => 'required',
+        // return a dedicated create view - create it at resources/views/admin/orders_create.blade.php
+        // If you prefer create UI on dashboard, change this to redirect route('admin.orders.index') etc.
+        $markList = MarkList::where('status', 'active')->get();
+        return view('admin.orders_create', compact('markList'));
+    }
+
+    /**
+     * Store a new order and optionally create initial invoice
+     */
+    public function store(Request $request)
+    {
+        $data = $request->validate([
+            'mark_no' => 'required|string',
+            'origin' => 'nullable|string',
+            'destination' => 'nullable|string',
+            // totals optional when creating without items
+            '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',
+        ]);
+
+        // If you want to auto-create an invoice at order creation, uncomment:
+        // $this->createInvoice($order);
+
+        return redirect()->route('admin.orders.show', $order->id)
+                         ->with('success', 'Order created successfully.');
+    }
+
+    // ---------------------------
+    // SHOW / POPUP
+    // ---------------------------
+    public function show($id)
+    {
+        $order = Order::with('items', 'markList')->findOrFail($id);
+        $user = $this->getCustomerFromOrder($order);
+
+        return view('admin.orders_show', compact('order', 'user'));
+    }
+
+    // public function popup($id)
+    // {
+    //     $order = Order::with(['items', 'markList'])->findOrFail($id);
+    //     $user = $this->getCustomerFromOrder($order);
+
+    //     return view('admin.popup', compact('order', 'user'));
+    // }
+
+    // ---------------------------
+    // ORDER ITEM MANAGEMENT (DB)
+    // ---------------------------
+    /**
+     * Add an item to an existing order
+     */
+    public function addItem(Request $request, $orderId)
+    {
+        $order = Order::findOrFail($orderId);
+
+        $data = $request->validate([
             'description' => 'required|string',
             'ctn' => 'nullable|numeric',
             'qty' => 'nullable|numeric',
@@ -43,233 +138,207 @@ class AdminOrderController extends Controller
             'shop_no' => 'nullable|string',
         ]);
 
-        // ❌ Prevent changing mark_no once first item added
-        if (session()->has('mark_no') && session('mark_no') != $request->mark_no) {
-            return redirect()->to(route('admin.orders.index') . '#createOrderForm')
-                             ->with('error', 'You must finish or clear the current order before changing Mark No.');
-        }
+        $data['order_id'] = $order->id;
 
-        // Save mark, origin, destination ONLY ONCE
-        if (!session()->has('mark_no')) {
-            session([
-                'mark_no' => $request->mark_no,
-                'origin' => $request->origin,
-                'destination' => $request->destination
+        OrderItem::create($data);
+
+        // recalc totals and save to order
+        $this->recalcTotals($order);
+
+        return redirect()->back()->with('success', 'Item added and totals updated.');
+    }
+
+    /**
+     * Soft-delete an order item and recalc totals
+     */
+    public function deleteItem($id)
+    {
+        $item = OrderItem::findOrFail($id);
+        $order = $item->order;
+
+        $item->delete(); // soft delete
+
+        // recalc totals
+        $this->recalcTotals($order);
+
+        return redirect()->back()->with('success', 'Item deleted and totals updated.');
+    }
+
+    /**
+     * Restore soft-deleted item and recalc totals
+     */
+    public function restoreItem($id)
+    {
+        $item = OrderItem::withTrashed()->findOrFail($id);
+        $order = Order::findOrFail($item->order_id);
+
+        $item->restore();
+
+        // recalc totals
+        $this->recalcTotals($order);
+
+        return redirect()->back()->with('success', 'Item restored and totals updated.');
+    }
+
+    // ---------------------------
+    // ORDER CRUD: update / destroy
+    // ---------------------------
+    public function update(Request $request, $id)
+    {
+        $order = Order::findOrFail($id);
+
+        $data = $request->validate([
+            'mark_no' => 'required|string',
+            'origin' => 'nullable|string',
+            'destination' => 'nullable|string',
+        ]);
+
+        $order->update([
+            'mark_no' => $data['mark_no'],
+            'origin' => $data['origin'] ?? null,
+            'destination' => $data['destination'] ?? null,
+        ]);
+
+        // optionally recalc totals (not necessary unless you change item-level fields here)
+        $this->recalcTotals($order);
+
+        return redirect()->route('admin.orders.show', $order->id)
+                         ->with('success', 'Order updated successfully.');
+    }
+
+    /**
+     * Soft-delete whole order and its items (soft-delete items first then order)
+     */
+    public function destroy($id)
+    {
+        $order = Order::findOrFail($id);
+
+        // soft-delete items first (so they show up in onlyTrashed for restore)
+        OrderItem::where('order_id', $order->id)->delete();
+
+        // then soft-delete order
+        $order->delete();
+
+        return redirect()->route('admin.orders.index')
+                         ->with('success', 'Order deleted successfully.');
+    }
+
+    // ---------------------------
+    // HELPERS
+    // ---------------------------
+    /**
+     * Recalculate totals for the order from current (non-deleted) items
+     */
+    private function recalcTotals(Order $order)
+    {
+        // make sure we re-query live items (non-deleted)
+        $items = $order->items()->get();
+
+        $order->update([
+            'ctn'       => (int) $items->sum(fn($i) => (int) ($i->ctn ?? 0)),
+            'qty'       => (int) $items->sum(fn($i) => (int) ($i->qty ?? 0)),
+            'ttl_qty'   => (int) $items->sum(fn($i) => (int) ($i->ttl_qty ?? 0)),
+            'ttl_amount'=> (float) $items->sum(fn($i) => (float) ($i->ttl_amount ?? 0)),
+            'cbm'       => (float) $items->sum(fn($i) => (float) ($i->cbm ?? 0)),
+            'ttl_cbm'   => (float) $items->sum(fn($i) => (float) ($i->ttl_cbm ?? 0)),
+            'kg'        => (float) $items->sum(fn($i) => (float) ($i->kg ?? 0)),
+            'ttl_kg'    => (float) $items->sum(fn($i) => (float) ($i->ttl_kg ?? 0)),
+        ]);
+    }
+
+    /**
+     * Generate order id (keeps old format)
+     */
+    private function generateOrderId()
+    {
+        $year = date('y');
+        $prefix = "KNT-$year-";
+
+        $lastOrder = Order::latest('id')->first();
+        $nextNumber = $lastOrder ? intval(substr($lastOrder->order_id, -8)) + 1 : 1;
+
+        return $prefix . str_pad($nextNumber, 8, '0', STR_PAD_LEFT);
+    }
+
+    // ---------------------------
+    // INVOICE CREATION (optional helper used by store/finish)
+    // ---------------------------
+    private function createInvoice(Order $order)
+    {
+        $invoiceNumber = $this->generateInvoiceNumber();
+        $customer = $this->getCustomerFromMarkList($order->mark_no);
+        $totalAmount = $order->ttl_amount;
+
+        $invoice = Invoice::create([
+            'order_id' => $order->id,
+            'customer_id' => $customer->id ?? null,
+            'mark_no' => $order->mark_no,
+            'invoice_number' => $invoiceNumber,
+            'invoice_date' => now(),
+            'due_date' => now()->addDays(10),
+            'payment_method' => null,
+            'reference_no' => null,
+            'status' => 'pending',
+            'final_amount' => $totalAmount,
+            'gst_percent' => 0,
+            'gst_amount' => 0,
+            'final_amount_with_gst' => $totalAmount,
+            'customer_name' => $customer->customer_name ?? null,
+            'company_name' => $customer->company_name ?? null,
+            'customer_email' => $customer->email ?? null,
+            'customer_mobile' => $customer->mobile_no ?? null,
+            'customer_address' => $customer->address ?? null,
+            'pincode' => $customer->pincode ?? null,
+            'notes' => null,
+            'pdf_path' => null,
+        ]);
+
+        // clone order items into invoice items
+        foreach ($order->items as $item) {
+            InvoiceItem::create([
+                'invoice_id' => $invoice->id,
+                'description' => $item->description,
+                'ctn' => $item->ctn,
+                'qty' => $item->qty,
+                'ttl_qty' => $item->ttl_qty,
+                'unit' => $item->unit,
+                'price' => $item->price,
+                'ttl_amount' => $item->ttl_amount,
+                'cbm' => $item->cbm,
+                'ttl_cbm' => $item->ttl_cbm,
+                'kg' => $item->kg,
+                'ttl_kg' => $item->ttl_kg,
+                'shop_no' => $item->shop_no,
             ]);
         }
-
-        // ❌ DO NOT overwrite these values again
-        // session(['mark_no' => $request->mark_no]);
-        // session(['origin' => $request->origin]);
-        // session(['destination' => $request->destination]);
-
-        // Add new sub-item into session
-        session()->push('temp_order_items', $item);
-
-        return redirect()->to(route('admin.orders.index') . '#createOrderForm')
-                         ->with('success', 'Item added.');
     }
 
-    // -------------------------------------------------------------------------
-    // STEP 2 : DELETE TEMPORARY ITEM
-    // -------------------------------------------------------------------------
-
-    public function deleteTempItem(Request $request)
+    private function generateInvoiceNumber()
     {
-        $index = $request->index;
+        $lastInvoice = Invoice::latest()->first();
+        $nextInvoice = $lastInvoice ? $lastInvoice->id + 1 : 1;
 
-        $items = session('temp_order_items', []);
+        return 'INV-' . date('Y') . '-' . str_pad($nextInvoice, 6, '0', STR_PAD_LEFT);
+    }
 
-        if (isset($items[$index])) {
-            unset($items[$index]);
-            session(['temp_order_items' => array_values($items)]);
+    private function getCustomerFromMarkList($markNo)
+    {
+        $markList = MarkList::where('mark_no', $markNo)->first();
+
+        if ($markList && $markList->customer_id) {
+            return User::where('customer_id', $markList->customer_id)->first();
         }
 
-        // If no items left → reset mark_no lock
-        if (empty($items)) {
-            session()->forget(['mark_no', 'origin', 'destination']);
-        }
-
-        return redirect()->to(route('admin.orders.index') . '#createOrderForm')
-                         ->with('success', 'Item removed successfully.');
+        return null;
     }
 
-    // -------------------------------------------------------------------------
-    // STEP 3 : FINISH ORDER
-    // -------------------------------------------------------------------------
-
-    public function finishOrder(Request $request)
-{
-    $request->validate([
-        'mark_no' => 'required',
-        'origin' => 'required',
-        'destination' => 'required',
-    ]);
-
-    $items = session('temp_order_items', []);
-
-    if (empty($items)) {
-        return redirect()->to(route('admin.orders.index') . '#createOrderForm')
-                         ->with('error', 'Add at least one item before finishing.');
-    }
-
-    // =======================
-    // GENERATE ORDER ID
-    // =======================
-    $year = date('y');
-    $prefix = "KNT-$year-";
-
-    $lastOrder = Order::latest('id')->first();
-    $nextNumber = $lastOrder ? intval(substr($lastOrder->order_id, -8)) + 1 : 1;
-
-    $orderId = $prefix . str_pad($nextNumber, 8, '0', STR_PAD_LEFT);
-
-    // =======================
-    // TOTAL SUMS
-    // =======================
-    $total_ctn = array_sum(array_column($items, 'ctn'));
-    $total_qty = array_sum(array_column($items, 'qty'));
-    $total_ttl_qty = array_sum(array_column($items, 'ttl_qty'));
-    $total_amount = array_sum(array_column($items, 'ttl_amount'));
-    $total_cbm = array_sum(array_column($items, 'cbm'));
-    $total_ttl_cbm = array_sum(array_column($items, 'ttl_cbm'));
-    $total_kg = array_sum(array_column($items, 'kg'));
-    $total_ttl_kg = array_sum(array_column($items, 'ttl_kg'));
-
-    // =======================
-    // CREATE ORDER
-    // =======================
-    $order = Order::create([
-        'order_id' => $orderId,
-        'mark_no' => $request->mark_no,
-        'origin' => $request->origin,
-        'destination' => $request->destination,
-        'ctn' => $total_ctn,
-        'qty' => $total_qty,
-        'ttl_qty' => $total_ttl_qty,
-        'ttl_amount' => $total_amount,
-        'cbm' => $total_cbm,
-        'ttl_cbm' => $total_ttl_cbm,
-        'kg' => $total_kg,
-        'ttl_kg' => $total_ttl_kg,
-        'status' => 'pending',
-    ]);
-
-    // SAVE ORDER ITEMS
-    foreach ($items as $item) {
-        OrderItem::create([
-            'order_id' => $order->id,
-            'description' => $item['description'],
-            'ctn' => $item['ctn'],
-            'qty' => $item['qty'],
-            'ttl_qty' => $item['ttl_qty'],
-            'unit' => $item['unit'],
-            'price' => $item['price'],
-            'ttl_amount' => $item['ttl_amount'],
-            'cbm' => $item['cbm'],
-            'ttl_cbm' => $item['ttl_cbm'],
-            'kg' => $item['kg'],
-            'ttl_kg' => $item['ttl_kg'],
-            'shop_no' => $item['shop_no'],
-        ]);
-    }
-
-    // =======================
-    // INVOICE CREATION START
-    // =======================
-
-    // 1. Auto-generate invoice number
-    $lastInvoice = \App\Models\Invoice::latest()->first();
-    $nextInvoice = $lastInvoice ? $lastInvoice->id + 1 : 1;
-    $invoiceNumber = 'INV-' . date('Y') . '-' . str_pad($nextInvoice, 6, '0', STR_PAD_LEFT);
-
-    // 2. Fetch customer (using mark list → customer_id)
-    $markList = MarkList::where('mark_no', $order->mark_no)->first();
-    $customer = null;
-
-    if ($markList && $markList->customer_id) {
-        $customer = \App\Models\User::where('customer_id', $markList->customer_id)->first();
-    }
-
-    // 3. Create Invoice Record
-    $invoice = \App\Models\Invoice::create([
-        'order_id' => $order->id,
-        'customer_id' => $customer->id ?? null,
-        'mark_no' => $order->mark_no,
-
-        'invoice_number' => $invoiceNumber,
-        'invoice_date' => now(),
-        'due_date' => now()->addDays(10),
-
-        'payment_method' => null,
-        'reference_no' => null,
-        'status' => 'pending',
-
-        'final_amount' => $total_amount,
-        'gst_percent' => 0,
-        'gst_amount' => 0,
-        'final_amount_with_gst' => $total_amount,
-
-        // snapshot customer fields
-        'customer_name' => $customer->customer_name ?? null,
-        'company_name' => $customer->company_name ?? null,
-        'customer_email' => $customer->email ?? null,
-        'customer_mobile' => $customer->mobile_no ?? null,
-        'customer_address' => $customer->address ?? null,
-        'pincode' => $customer->pincode ?? null,
-
-        'notes' => null,
-    ]);
-
-    // 4. Clone order items into invoice_items
-    foreach ($order->items as $item) {
-        \App\Models\InvoiceItem::create([
-            'invoice_id' => $invoice->id,
-            'description' => $item->description,
-            'ctn' => $item->ctn,
-            'qty' => $item->qty,
-            'ttl_qty' => $item->ttl_qty,
-            'unit' => $item->unit,
-            'price' => $item->price,
-            'ttl_amount' => $item->ttl_amount,
-            'cbm' => $item->cbm,
-            'ttl_cbm' => $item->ttl_cbm,
-            'kg' => $item->kg,
-            'ttl_kg' => $item->ttl_kg,
-            'shop_no' => $item->shop_no,
-        ]);
-    }
-
-    // 5. TODO: PDF generation (I will add this later)
-    $invoice->pdf_path = null; // placeholder for now
-    $invoice->save();
-
-    // =======================
-    // END INVOICE CREATION
-    // =======================
-
-    // CLEAR TEMP DATA
-    session()->forget(['temp_order_items', 'mark_no', 'origin', 'destination']);
-
-    return redirect()->route('admin.orders.index')
-                     ->with('success', 'Order + Invoice created successfully.');
-}
-
-
-    // -------------------------------------------------------------------------
-    // ORDER SHOW PAGE
-    // -------------------------------------------------------------------------
-
-    public function show($id)
+    private function getCustomerFromOrder($order)
     {
-        $order = Order::with('items', 'markList')->findOrFail($id);
-
-        $user = null;
         if ($order->markList && $order->markList->customer_id) {
-            $user = \App\Models\User::where('customer_id', $order->markList->customer_id)->first();
+            return User::where('customer_id', $order->markList->customer_id)->first();
         }
 
-        return view('admin.orders_show', compact('order', 'user'));
+        return null;
     }
 
     public function popup($id)
@@ -351,4 +420,129 @@ public function downloadExcel(Request $request)
     return Excel::download(new OrdersExport($request), 'orders-report-' . date('Y-m-d') . '.xlsx');
 }
 
+public function addTempItem(Request $request)
+    {
+        // Validate item fields
+        $item = $request->validate([
+            'mark_no' => 'required',
+            'origin' => 'required',
+            'destination' => 'required',
+            'description' => 'required|string',
+            'ctn' => 'nullable|numeric',
+            'qty' => 'nullable|numeric',
+            'ttl_qty' => 'nullable|numeric',
+            'unit' => 'nullable|string',
+            'price' => 'nullable|numeric',
+            'ttl_amount' => 'nullable|numeric',
+            'cbm' => 'nullable|numeric',
+            'ttl_cbm' => 'nullable|numeric',
+            'kg' => 'nullable|numeric',
+            'ttl_kg' => 'nullable|numeric',
+            'shop_no' => 'nullable|string',
+        ]);
+
+        // ❌ Prevent changing mark_no once first item added
+        if (session()->has('mark_no') && session('mark_no') != $request->mark_no) {
+            return redirect()->to(route('admin.orders.index') . '#createOrderForm')
+                             ->with('error', 'You must finish or clear the current order before changing Mark No.');
+        }
+
+        // Save mark, origin, destination ONLY ONCE
+        if (!session()->has('mark_no')) {
+            session([
+                'mark_no' => $request->mark_no,
+                'origin' => $request->origin,
+                'destination' => $request->destination
+            ]);
+        }
+
+        // ❌ DO NOT overwrite these values again
+        // session(['mark_no' => $request->mark_no]);
+        // session(['origin' => $request->origin]);
+        // session(['destination' => $request->destination]);
+
+        // Add new sub-item into session
+        session()->push('temp_order_items', $item);
+
+        return redirect()->to(route('admin.orders.index') . '#createOrderForm')
+                         ->with('success', 'Item added.');
+    }
+
+public function finishOrder(Request $request)
+    {
+        $request->validate([
+            'mark_no' => 'required',
+            'origin' => 'required',
+            'destination' => 'required',
+        ]);
+
+        $items = session('temp_order_items', []);
+
+        if (empty($items)) {
+            return redirect()->to(route('admin.orders.index') . '#createOrderForm')
+                             ->with('error', 'Add at least one item before finishing.');
+        }
+
+        // Generate Order ID
+        $year = date('y');
+        $prefix = "KNT-$year-";
+
+        $lastOrder = Order::latest('id')->first();
+        $nextNumber = $lastOrder ? intval(substr($lastOrder->order_id, -8)) + 1 : 1;
+
+        $orderId = $prefix . str_pad($nextNumber, 8, '0', STR_PAD_LEFT);
+
+        // TOTAL SUMS
+        $total_ctn = array_sum(array_column($items, 'ctn'));
+        $total_qty = array_sum(array_column($items, 'qty'));
+        $total_ttl_qty = array_sum(array_column($items, 'ttl_qty'));
+        $total_amount = array_sum(array_column($items, 'ttl_amount'));
+        $total_cbm = array_sum(array_column($items, 'cbm'));
+        $total_ttl_cbm = array_sum(array_column($items, 'ttl_cbm'));
+        $total_kg = array_sum(array_column($items, 'kg'));
+        $total_ttl_kg = array_sum(array_column($items, 'ttl_kg'));
+
+        // CREATE ORDER
+        $order = Order::create([
+            'order_id' => $orderId,
+            'mark_no' => $request->mark_no,
+            'origin' => $request->origin,
+            'destination' => $request->destination,
+            'ctn' => $total_ctn,
+            'qty' => $total_qty,
+            'ttl_qty' => $total_ttl_qty,
+            'ttl_amount' => $total_amount,
+            'cbm' => $total_cbm,
+            'ttl_cbm' => $total_ttl_cbm,
+            'kg' => $total_kg,
+            'ttl_kg' => $total_ttl_kg,
+            'status' => 'pending',
+        ]);
+
+        // SAVE ALL SUB-ITEMS
+        foreach ($items as $item) {
+            OrderItem::create([
+                'order_id' => $order->id,
+                'description' => $item['description'],
+                'ctn' => $item['ctn'],
+                'qty' => $item['qty'],
+                'ttl_qty' => $item['ttl_qty'],
+                'unit' => $item['unit'],
+                'price' => $item['price'],
+                'ttl_amount' => $item['ttl_amount'],
+                'cbm' => $item['cbm'],
+                'ttl_cbm' => $item['ttl_cbm'],
+                'kg' => $item['kg'],
+                'ttl_kg' => $item['ttl_kg'],
+                'shop_no' => $item['shop_no'],
+            ]);
+        }
+
+        // CLEAR TEMP DATA
+        session()->forget(['temp_order_items', 'mark_no', 'origin', 'destination']);
+
+        return redirect()->route('admin.orders.index')
+                         ->with('success', 'Order saved successfully.');
+    }
+
 }
diff --git a/app/Http/Controllers/Admin/ShipmentController.php b/app/Http/Controllers/Admin/ShipmentController.php
index c0883fd..d281059 100644
--- a/app/Http/Controllers/Admin/ShipmentController.php
+++ b/app/Http/Controllers/Admin/ShipmentController.php
@@ -14,7 +14,7 @@ class ShipmentController extends Controller
     /**
      * Show shipment page (Create Shipment + Shipment List)
      */
-   public function index()
+    public function index()
     {
         // 1) Get all used order IDs
         $usedOrderIds = ShipmentItem::pluck('order_id')->toArray();
@@ -29,8 +29,6 @@ class ShipmentController extends Controller
         return view('admin.shipments', compact('availableOrders', 'shipments'));
     }
 
-
-
     /**
      * Store new shipment
      */
@@ -115,8 +113,6 @@ class ShipmentController extends Controller
         return redirect()->back()->with('success', "Shipment $newShipmentId created successfully!");
     }
 
-
-
     /**
      * Show shipment details (for modal popup)
      */
@@ -135,8 +131,6 @@ class ShipmentController extends Controller
         ]);
     }
 
-
-
     /**
      * Update Shipment status from action button
      */
@@ -164,5 +158,55 @@ class ShipmentController extends Controller
         );
     }
 
+    /**
+     * Update shipment details
+     */
+    public function update(Request $request, $id)
+    {
+        $shipment = Shipment::findOrFail($id);
 
-}
+        $data = $request->validate([
+            'origin'        => 'required|string',
+            'destination'   => 'required|string',
+            'shipment_date' => 'required|date',
+            'status'        => 'required|string',
+        ]);
+
+        $shipment->update($data);
+
+        // If it's an AJAX request, return JSON response
+        if ($request->ajax() || $request->wantsJson()) {
+            return response()->json([
+                'success' => true,
+                'message' => 'Shipment updated successfully.'
+            ]);
+        }
+
+        return redirect()->back()->with('success', 'Shipment updated successfully.');
+    }
+
+    /**
+     * Delete shipment permanently
+     */
+    public function destroy($id, Request $request)
+    {
+        $shipment = Shipment::findOrFail($id);
+
+        // Delete shipment items
+        ShipmentItem::where('shipment_id', $shipment->id)->delete();
+
+        // Delete shipment itself
+        $shipment->delete();
+
+        // If it's an AJAX request, return JSON response
+        if ($request->ajax() || $request->wantsJson()) {
+            return response()->json([
+                'success' => true,
+                'message' => 'Shipment deleted successfully.'
+            ]);
+        }
+
+        return redirect()->route('admin.shipments')
+                        ->with('success', 'Shipment deleted successfully.');
+    }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Admin/UserRequestController.php b/app/Http/Controllers/Admin/UserRequestController.php
index 0b6306f..e09c56f 100644
--- a/app/Http/Controllers/Admin/UserRequestController.php
+++ b/app/Http/Controllers/Admin/UserRequestController.php
@@ -65,4 +65,52 @@ class UserRequestController extends Controller
 
         return redirect()->back()->with('info', 'Request rejected successfully.');
     }
+
+    public function profileUpdateRequests()
+{
+    $requests = \App\Models\UpdateRequest::where('status', 'pending')
+                ->orderBy('id', 'desc')
+                ->get();
+
+    return view('admin.profile_update_requests', compact('requests'));
+}
+
+public function approveProfileUpdate($id)
+{
+    $req = \App\Models\UpdateRequest::findOrFail($id);
+    $user = \App\Models\User::findOrFail($req->user_id);
+
+    // FIX: Ensure data is array
+    $newData = is_array($req->data) ? $req->data : json_decode($req->data, true);
+
+    foreach ($newData as $key => $value) {
+        if ($value !== null && $value !== "") {
+            if (in_array($key, ['customer_name','company_name','designation','email','mobile_no','address','pincode'])) {
+                $user->$key = $value;
+            }
+        }
+    }
+
+    $user->save();
+
+    $req->status = 'approved';
+    $req->admin_note = 'Approved by admin on ' . now();
+    $req->save();
+
+    return back()->with('success', 'Profile updated successfully.');
+}
+
+
+
+public function rejectProfileUpdate($id)
+{
+    $req = \App\Models\UpdateRequest::findOrFail($id);
+    $req->status = 'rejected';
+    $req->admin_note = 'Rejected by admin on ' . now();
+    $req->save();
+
+    return back()->with('info', 'Profile update request rejected.');
+}
+
+
 }
diff --git a/app/Http/Controllers/UserAuthController.php b/app/Http/Controllers/UserAuthController.php
index b6893d4..256f98a 100644
--- a/app/Http/Controllers/UserAuthController.php
+++ b/app/Http/Controllers/UserAuthController.php
@@ -9,6 +9,74 @@ use App\Models\User;
 
 class UserAuthController extends Controller
 {
+
+    public function refreshToken()
+    {
+        \Log::info('🔄 refreshToken() called');
+
+        try {
+            // Get current token
+            $currentToken = JWTAuth::getToken();
+
+            if (!$currentToken) {
+                \Log::warning('⚠ No token provided in refreshToken()');
+                return response()->json([
+                    'success' => false,
+                    'message' => 'Token not provided',
+                ], 401);
+            }
+
+            \Log::info('📥 Current Token:', ['token' => (string) $currentToken]);
+
+            // Try refreshing token
+            $newToken = JWTAuth::refresh($currentToken);
+
+            \Log::info('✅ Token refreshed successfully', ['new_token' => $newToken]);
+
+            return response()->json([
+                'success' => true,
+                'token' => $newToken,
+            ]);
+
+        } catch (\Tymon\JWTAuth\Exceptions\TokenExpiredException $e) {
+            \Log::error('❌ TokenExpiredException in refreshToken()', [
+                'message' => $e->getMessage(),
+            ]);
+            return response()->json([
+                'success' => false,
+                'message' => 'Token expired, cannot refresh.',
+            ], 401);
+
+        } catch (\Tymon\JWTAuth\Exceptions\TokenInvalidException $e) {
+            \Log::error('❌ TokenInvalidException in refreshToken()', [
+                'message' => $e->getMessage(),
+            ]);
+            return response()->json([
+                'success' => false,
+                'message' => 'Invalid token.',
+            ], 401);
+
+        } catch (\Tymon\JWTAuth\Exceptions\JWTException $e) {
+            \Log::error('❌ JWTException in refreshToken()', [
+                'message' => $e->getMessage(),
+            ]);
+            return response()->json([
+                'success' => false,
+                'message' => 'Could not refresh token.',
+            ], 401);
+
+        } catch (\Exception $e) {
+            \Log::error('❌ General Exception in refreshToken()', [
+                'message' => $e->getMessage(),
+                'trace' => $e->getTraceAsString(),
+            ]);
+            return response()->json([
+                'success' => false,
+                'message' => 'Unexpected error while refreshing token.',
+            ], 500);
+        }
+    }
+
     /**
      * User Login
      */
@@ -60,6 +128,8 @@ class UserAuthController extends Controller
         ]);
     }
 
+    
+
     /**
      * User Logout
      */
diff --git a/app/Http/Controllers/user/UserOrderController.php b/app/Http/Controllers/user/UserOrderController.php
new file mode 100644
index 0000000..d18f7ae
--- /dev/null
+++ b/app/Http/Controllers/user/UserOrderController.php
@@ -0,0 +1,296 @@
+<?php
+
+namespace App\Http\Controllers\User;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use PHPOpenSourceSaver\JWTAuth\Facades\JWTAuth;
+
+class UserOrderController extends Controller
+{
+    public function orderSummary()
+    {
+        // Authenticate user via JWT
+        $user = JWTAuth::parseToken()->authenticate();
+
+        if (!$user) {
+            return response()->json([
+                'status' => false,
+                'message' => 'Unauthorized'
+            ], 401);
+        }
+
+        // -------------------------------------
+        // Get all orders
+        // -------------------------------------
+        $orders = $user->orders()->with('invoice')->get();
+
+        // -------------------------------------
+        // Counts
+        // -------------------------------------
+        $totalOrders = $orders->count();
+        $delivered   = $orders->where('status', 'delivered')->count();
+        $inTransit   = $orders->where('status', '!=', 'delivered')->count();
+        $active      = $totalOrders;
+
+        // -------------------------------------
+        // Total Amount = Invoice.total_with_gst
+        // -------------------------------------
+        $totalAmount = $orders->sum(function ($o) {
+            return $o->invoice->final_amount_with_gst ?? 0;
+        });
+
+        // Format total amount in K, L, Cr
+        $formattedAmount = $this->formatIndianNumber($totalAmount);
+
+        return response()->json([
+            'status' => true,
+
+            'summary' => [
+                'active_orders'     => $active,
+                'in_transit_orders' => $inTransit,
+                'delivered_orders'  => $delivered,
+                'total_value'       => $formattedAmount,  // formatted value
+                'total_raw'         => $totalAmount       // original value
+            ]
+        ]);
+    }
+
+    /**
+     * Convert number into Indian Format:
+     * 1000 -> 1K
+     * 100000 -> 1L
+     * 10000000 -> 1Cr
+     */
+    private function formatIndianNumber($num)
+    {
+        if ($num >= 10000000) {
+            return round($num / 10000000, 1) . 'Cr';
+        }
+
+        if ($num >= 100000) {
+            return round($num / 100000, 1) . 'L';
+        }
+
+        if ($num >= 1000) {
+            return round($num / 1000, 1) . 'K';
+        }
+
+        return (string)$num;
+    }
+
+    public function allOrders()
+{
+    $user = JWTAuth::parseToken()->authenticate();
+
+    if (!$user) {
+        return response()->json([
+            'success' => false,
+            'message' => 'Unauthorized'
+        ], 401);
+    }
+
+    // Fetch orders for this user
+    $orders = $user->orders()
+        ->with(['invoice', 'shipments'])
+        ->orderBy('id', 'desc')
+        ->get()
+        ->map(function ($o) {
+            return [
+                'order_id'   => $o->order_id,
+                'status'     => $o->status,
+                'amount'     => $o->ttl_amount,
+                'description'=> "Order from {$o->origin} to {$o->destination}",
+                'created_at' => $o->created_at,
+            ];
+        });
+
+    return response()->json([
+        'success' => true,
+        'orders'  => $orders
+    ]);
+}
+
+public function orderDetails($order_id)
+{
+    $user = JWTAuth::parseToken()->authenticate();
+
+    $order = $user->orders()
+        ->with(['items'])
+        ->where('order_id', $order_id)
+        ->first();
+
+    if (!$order) {
+        return response()->json(['success' => false, 'message' => 'Order not found'], 404);
+    }
+
+    return response()->json([
+        'success' => true,
+        'order'   => $order
+    ]);
+}
+
+
+public function orderShipment($order_id)
+{
+    $user = JWTAuth::parseToken()->authenticate();
+
+    // Get order
+    $order = $user->orders()->where('order_id', $order_id)->first();
+
+    if (!$order) {
+        return response()->json(['success' => false, 'message' => 'Order not found'], 404);
+    }
+
+    // Find shipment only for this order
+    $shipment = $order->shipments()
+        ->with(['items' => function ($q) use ($order) {
+            $q->where('order_id', $order->id);
+        }])
+        ->first();
+
+    return response()->json([
+        'success' => true,
+        'shipment' => $shipment
+    ]);
+}
+
+
+public function orderInvoice($order_id)
+{
+    $user = JWTAuth::parseToken()->authenticate();
+
+    $order = $user->orders()
+        ->with('invoice.items')
+        ->where('order_id', $order_id)
+        ->first();
+
+    if (!$order) {
+        return response()->json(['success' => false, 'message' => 'Order not found'], 404);
+    }
+
+    return response()->json([
+        'success' => true,
+        'invoice' => $order->invoice
+    ]);
+}
+
+public function trackOrder($order_id)
+{
+    $user = JWTAuth::parseToken()->authenticate();
+
+    $order = $user->orders()
+        ->with('shipments')
+        ->where('order_id', $order_id)
+        ->first();
+
+    if (!$order) {
+        return response()->json(['success' => false, 'message' => 'Order not found'], 404);
+    }
+
+    $shipment = $order->shipments()->first();
+
+    return response()->json([
+        'success' => true,
+        'track' => [
+            'order_id' => $order->order_id,
+            'shipment_status' => $shipment->status ?? 'pending',
+            'shipment_date'   => $shipment->shipment_date ?? null,
+        ]
+    ]);
+}
+
+public function allInvoices()
+{
+    $user = JWTAuth::parseToken()->authenticate();
+
+    if (!$user) {
+        return response()->json([
+            'success' => false,
+            'message' => 'Unauthorized'
+        ], 401);
+    }
+
+    // Fetch all invoices of customer
+    $invoices = $user->invoices()
+        ->withCount('installments')
+        ->orderBy('id', 'desc')
+        ->get()
+        ->map(function ($invoice) {
+            return [
+                'invoice_id'        => $invoice->id,
+                'invoice_number'    => $invoice->invoice_number,
+                'invoice_date'      => $invoice->invoice_date,
+                'status'            => $invoice->status,
+                'amount'            => $invoice->final_amount_with_gst,
+                'formatted_amount'  => $this->formatIndianNumber($invoice->final_amount_with_gst),
+                'pdf_url'           => $invoice->pdf_path ? url($invoice->pdf_path) : null,
+                'installment_count' => $invoice->installments_count,
+            ];
+        });
+
+    return response()->json([
+        'success'  => true,
+        'invoices' => $invoices
+    ]);
+}
+
+public function invoiceInstallmentsById($invoice_id)
+{
+    $user = \PHPOpenSourceSaver\JWTAuth\Facades\JWTAuth::parseToken()->authenticate();
+
+    if (! $user) {
+        return response()->json(['success' => false, 'message' => 'Unauthorized'], 401);
+    }
+
+    // Find invoice by numeric id and ensure it belongs to logged-in user (invoice.customer_id = user.id)
+    $invoice = \App\Models\Invoice::where('id', (int)$invoice_id)
+        ->where('customer_id', $user->id)
+        ->with(['installments' => function($q){
+            $q->orderBy('installment_date', 'ASC')->orderBy('id', 'ASC');
+        }])
+        ->first();
+
+    if (! $invoice) {
+        return response()->json([
+            'success' => false,
+            'message' => 'Invoice not found for this customer'
+        ], 404);
+    }
+
+    return response()->json([
+        'success'        => true,
+        'invoice_id'     => $invoice->id,
+        'invoice_number' => $invoice->invoice_number,
+        'installments'   => $invoice->installments
+    ]);
+}
+
+public function invoiceDetails($invoice_id)
+{
+    $user = JWTAuth::parseToken()->authenticate();
+
+    if (! $user) {
+        return response()->json(['success' => false, 'message' => 'Unauthorized'], 401);
+    }
+
+    $invoice = \App\Models\Invoice::where('id', $invoice_id)
+        ->where('customer_id', $user->id)
+        ->with('items')
+        ->first();
+
+    if (! $invoice) {
+        return response()->json(['success' => false, 'message' => 'Invoice not found'], 404);
+    }
+
+    return response()->json([
+        'success' => true,
+        'invoice' => $invoice
+    ]);
+}
+
+
+
+
+
+}
diff --git a/app/Http/Controllers/user/UserProfileController.php b/app/Http/Controllers/user/UserProfileController.php
new file mode 100644
index 0000000..ca42ab2
--- /dev/null
+++ b/app/Http/Controllers/user/UserProfileController.php
@@ -0,0 +1,135 @@
+<?php
+
+namespace App\Http\Controllers\User;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Models\UpdateRequest;
+use PHPOpenSourceSaver\JWTAuth\Facades\JWTAuth;
+
+class UserProfileController extends Controller
+{
+    /**
+     * Get user profile
+     */
+    public function profile()
+    {
+        try {
+            $user = JWTAuth::parseToken()->authenticate();
+        } catch (\Exception $e) {
+            return response()->json([
+                'success' => false,
+                'message' => 'Token invalid or expired',
+            ], 401);
+        }
+
+        if (! $user) {
+            return response()->json([
+                'success' => false,
+                'message' => 'Unauthorized'
+            ], 401);
+        }
+
+        return response()->json([
+            'success' => true,
+            'data' => [
+                'customer_id'   => $user->customer_id,
+                'customer_name' => $user->customer_name,
+                'company_name'  => $user->company_name,
+                'designation'   => $user->designation,
+                'email'         => $user->email,
+                'mobile'        => $user->mobile_no,
+                'address'       => $user->address,
+                'pincode'       => $user->pincode,
+                'status'        => $user->status,
+                'customer_type' => $user->customer_type,
+                'profile_image' => $user->profile_image ? url($user->profile_image) : null,
+                'date'          => $user->date,
+                'created_at'    => $user->created_at,
+            ]
+        ]);
+    }
+
+
+
+    /**
+     * Update profile IMAGE only (no admin approval)
+     */
+    public function updateProfileImage(Request $request)
+    {
+        $user = JWTAuth::parseToken()->authenticate();
+
+        if (! $user) {
+            return response()->json([
+                'success' => false,
+                'message' => 'Unauthorized'
+            ], 401);
+        }
+
+        $request->validate([
+            'profile_image' => 'required|image|mimes:jpg,jpeg,png|max:2048'
+        ]);
+
+        // DELETE OLD IMAGE
+        if ($user->profile_image && file_exists(public_path($user->profile_image))) {
+            @unlink(public_path($user->profile_image));
+        }
+
+        // SAVE NEW IMAGE
+        $file = $request->file('profile_image');
+        $filename = 'profile_' . time() . '.' . $file->getClientOriginalExtension();
+        $folder = 'profile_upload/';
+        $file->move(public_path($folder), $filename);
+
+        $user->profile_image = $folder . $filename;
+        $user->save();
+
+        return response()->json([
+            'success' => true,
+            'message' => 'Profile image updated successfully',
+            'profile_image' => url($user->profile_image),
+        ]);
+    }
+
+
+
+    /**
+     * Submit profile update request (requires admin approval)
+     */
+    public function updateProfileRequest(Request $request)
+{
+    $user = JWTAuth::parseToken()->authenticate();
+
+    if (! $user) {
+        return response()->json([
+            'success' => false,
+            'message' => 'Unauthorized'
+        ], 401);
+    }
+
+    // Validate input
+    $request->validate([
+        'customer_name' => 'nullable|string|max:255',
+        'company_name'  => 'nullable|string|max:255',
+        'designation'   => 'nullable|string|max:255',
+        'email'         => 'nullable|email',
+        'mobile_no'     => 'nullable|string|max:15',
+        'address'       => 'nullable|string',
+        'pincode'       => 'nullable|string|max:10'
+    ]);
+
+    // SAVE AS ARRAY (NOT JSON STRING!)
+    $updateReq = \App\Models\UpdateRequest::create([
+        'user_id' => $user->id,
+        'data'    => $request->all(),     // <---- FIXED
+        'status'  => 'pending',
+    ]);
+
+    return response()->json([
+        'success' => true,
+        'message' => 'Profile update request submitted. Waiting for admin approval.',
+        'request_id' => $updateReq->id
+    ]);
+}
+
+}
diff --git a/app/Http/Middleware/JwtRefreshMiddleware.php b/app/Http/Middleware/JwtRefreshMiddleware.php
new file mode 100644
index 0000000..5d625e2
--- /dev/null
+++ b/app/Http/Middleware/JwtRefreshMiddleware.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Tymon\JWTAuth\Facades\JWTAuth;
+use Tymon\JWTAuth\Exceptions\TokenExpiredException;
+use Tymon\JWTAuth\Exceptions\TokenInvalidException;
+use Tymon\JWTAuth\Exceptions\JWTException;
+
+class JwtRefreshMiddleware
+{
+    public function handle($request, Closure $next)
+    {
+        try {
+            JWTAuth::parseToken()->authenticate();
+        } catch (TokenExpiredException $e) {
+            try {
+                $newToken = JWTAuth::refresh(JWTAuth::getToken());
+                auth()->setToken($newToken);
+
+                $response = $next($request);
+
+                return $response->header('Authorization', 'Bearer ' . $newToken);
+            } catch (\Exception $e) {
+                return response()->json(['message' => 'Session expired, please login again'], 401);
+            }
+        } catch (TokenInvalidException $e) {
+            return response()->json(['message' => 'Invalid token'], 401);
+        } catch (JWTException $e) {
+            return response()->json(['message' => 'Token missing'], 401);
+        }
+
+        return $next($request);
+    }
+}
diff --git a/app/Models/Order.php b/app/Models/Order.php
index d3691c8..029cf35 100644
--- a/app/Models/Order.php
+++ b/app/Models/Order.php
@@ -4,11 +4,13 @@ namespace App\Models;
 
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
 
 class Order extends Model
 {
-    use HasFactory;
-
+    use HasFactory,SoftDeletes;
+    
     protected $fillable = [
         'order_id',
         'mark_no',
diff --git a/app/Models/OrderItem.php b/app/Models/OrderItem.php
index 75cd416..6d37939 100644
--- a/app/Models/OrderItem.php
+++ b/app/Models/OrderItem.php
@@ -4,10 +4,11 @@ namespace App\Models;
 
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
 
 class OrderItem extends Model
 {
-    use HasFactory;
+     use HasFactory, SoftDeletes;
 
     protected $fillable = [
         'order_id',
diff --git a/app/Models/UpdateRequest.php b/app/Models/UpdateRequest.php
new file mode 100644
index 0000000..27e84a4
--- /dev/null
+++ b/app/Models/UpdateRequest.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class UpdateRequest extends Model
+{
+    use HasFactory;
+
+    protected $table = 'update_requests';
+
+    protected $fillable = [
+        'user_id',
+        'data',
+        'status',
+        'admin_note',
+    ];
+
+    protected $casts = [
+        'data' => 'array',   // converts JSON to array automatically
+    ];
+
+    // Relationship: request belongs to a user
+    public function user()
+    {
+        return $this->belongsTo(User::class);
+    }
+}
diff --git a/app/Models/User.php b/app/Models/User.php
index b5df7a5..e67ea2f 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -89,4 +89,11 @@ class User extends Authenticatable implements JWTSubject
     {
         return [];
     }
+public function invoices()
+{
+    return $this->hasMany(\App\Models\Invoice::class, 'customer_id', 'id');
+}
+
+
+
 }
diff --git a/database/migrations/2025_11_24_131305_create_invoice_installments_table.php b/database/migrations/2025_11_24_131305_create_invoice_installments_table.php
index f9e33cc..d1c540f 100644
--- a/database/migrations/2025_11_24_131305_create_invoice_installments_table.php
+++ b/database/migrations/2025_11_24_131305_create_invoice_installments_table.php
@@ -8,23 +8,16 @@ return new class extends Migration
 {
     public function up(): void
     {
-        Schema::create('invoice_installments', function (Blueprint $table) {
-            $table->id();
-
-            $table->unsignedBigInteger('invoice_id');
-            $table->foreign('invoice_id')->references('id')->on('invoices')->onDelete('cascade');
-
-            $table->date('installment_date');
-            $table->string('payment_method')->nullable(); // cash, bank, UPI, cheque, etc
-            $table->string('reference_no')->nullable();
-            $table->decimal('amount', 10, 2);
-
-            $table->timestamps();
+        // Table already exists. Add updates here if needed.
+        Schema::table('invoice_installments', function (Blueprint $table) {
+            // nothing to update
         });
     }
 
     public function down(): void
     {
-        Schema::dropIfExists('invoice_installments');
+        Schema::table('invoice_installments', function (Blueprint $table) {
+            // nothing to rollback
+        });
     }
 };
diff --git a/database/migrations/2025_11_28_182057_add_soft_deletes_to_orders_table.php b/database/migrations/2025_11_28_182057_add_soft_deletes_to_orders_table.php
new file mode 100644
index 0000000..4d837c8
--- /dev/null
+++ b/database/migrations/2025_11_28_182057_add_soft_deletes_to_orders_table.php
@@ -0,0 +1,22 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('order_items', function (Blueprint $table) {
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('order_items', function (Blueprint $table) {
+            $table->dropSoftDeletes();
+        });
+    }
+};
diff --git a/database/migrations/2025_11_29_045236_add_deleted_at_to_order_items_table.php b/database/migrations/2025_11_29_045236_add_deleted_at_to_order_items_table.php
new file mode 100644
index 0000000..660229b
--- /dev/null
+++ b/database/migrations/2025_11_29_045236_add_deleted_at_to_order_items_table.php
@@ -0,0 +1,26 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('order_items', function (Blueprint $table) {
+            if (! Schema::hasColumn('order_items', 'deleted_at')) {
+                $table->softDeletes(); // adds deleted_at (nullable timestamp)
+            }
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('order_items', function (Blueprint $table) {
+            if (Schema::hasColumn('order_items', 'deleted_at')) {
+                $table->dropSoftDeletes(); // drops deleted_at
+            }
+        });
+    }
+};
diff --git a/database/migrations/2025_12_01_063142_add_deleted_at_to_orders_table.php b/database/migrations/2025_12_01_063142_add_deleted_at_to_orders_table.php
new file mode 100644
index 0000000..656e68d
--- /dev/null
+++ b/database/migrations/2025_12_01_063142_add_deleted_at_to_orders_table.php
@@ -0,0 +1,26 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up()
+    {
+        Schema::table('orders', function (Blueprint $table) {
+            $table->softDeletes(); // creates deleted_at column
+        });
+    }
+
+    public function down()
+    {
+        Schema::table('orders', function (Blueprint $table) {
+            $table->dropColumn('deleted_at');
+        });
+    }
+
+};
diff --git a/database/migrations/2025_12_02_055345_create_update_requests_table.php b/database/migrations/2025_12_02_055345_create_update_requests_table.php
new file mode 100644
index 0000000..cb4c527
--- /dev/null
+++ b/database/migrations/2025_12_02_055345_create_update_requests_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateUpdateRequestsTable extends Migration
+{
+    public function up()
+    {
+        Schema::create('update_requests', function (Blueprint $table) {
+            $table->id();
+
+            // The user who is requesting profile update
+            $table->unsignedBigInteger('user_id');
+
+            // JSON data of the requested profile changes
+            $table->json('data')->nullable();
+
+            // pending / approved / rejected
+            $table->enum('status', ['pending', 'approved', 'rejected'])->default('pending');
+
+            // Optional message (admin notes)
+            $table->text('admin_note')->nullable();
+
+            $table->timestamps();
+
+            // Foreign key constraint
+            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
+        });
+    }
+
+    public function down()
+    {
+        Schema::dropIfExists('update_requests');
+    }
+}
diff --git a/public/invoices/invoice-INV-2025-000017.pdf b/public/invoices/invoice-INV-2025-000017.pdf
new file mode 100644
index 0000000..1c25516
Binary files /dev/null and b/public/invoices/invoice-INV-2025-000017.pdf differ
diff --git a/public/invoices/invoice-INV-2025-000019.pdf b/public/invoices/invoice-INV-2025-000019.pdf
new file mode 100644
index 0000000..431b377
Binary files /dev/null and b/public/invoices/invoice-INV-2025-000019.pdf differ
diff --git a/public/invoices/invoice-INV-2025-000023.pdf b/public/invoices/invoice-INV-2025-000023.pdf
new file mode 100644
index 0000000..1519813
Binary files /dev/null and b/public/invoices/invoice-INV-2025-000023.pdf differ
diff --git a/public/profile_upload/profile_1764568863.jpg b/public/profile_upload/profile_1764568863.jpg
new file mode 100644
index 0000000..bdd8e39
Binary files /dev/null and b/public/profile_upload/profile_1764568863.jpg differ
diff --git a/public/profile_upload/profile_1764645094.jpg b/public/profile_upload/profile_1764645094.jpg
new file mode 100644
index 0000000..3c6a162
Binary files /dev/null and b/public/profile_upload/profile_1764645094.jpg differ
diff --git a/resources/views/admin/customers.blade.php b/resources/views/admin/customers.blade.php
index 17162ce..3321dc2 100644
--- a/resources/views/admin/customers.blade.php
+++ b/resources/views/admin/customers.blade.php
@@ -5,6 +5,14 @@
 @section('content')
 
 <style>
+    /* Import Inter font */
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+    
+    body {
+        font-family: 'Inter', sans-serif;
+        overflow-x: hidden; /* Prevent horizontal scroll on body */
+    }
+    
     .glass-card {
         background: rgba(255, 255, 255, 0.95);
         backdrop-filter: blur(20px);
@@ -14,71 +22,171 @@
         overflow: hidden;
     }
     
-    .stats-card {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    /* New Stats Container */
+    .stats-container {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+        gap: 12px;
+        margin: 20px 0;
+    }
+
+    .stat-card {
+        background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
+        padding: 16px;
         border-radius: 12px;
-        padding: 15px;
-        color: white;
-        position: relative;
-        overflow: hidden;
+        border-left: 4px solid #4f46e5;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
         transition: transform 0.3s ease;
-        min-height: 80px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        min-height: 70px;
     }
-    
-    .stats-card:hover {
-        transform: translateY(-3px);
+
+    .stat-card:hover {
+        transform: translateY(-2px);
     }
-    
-    .stats-count {
-        font-size: 1.4rem;
+
+    .stat-card.warning {
+        border-left-color: #f59e0b;
+        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
+    }
+
+    .stat-card.success {
+        border-left-color: #10b981;
+        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
+    }
+
+    .stat-card.danger {
+        border-left-color: #ef4444;
+        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
+    }
+
+    .stat-card.info {
+        border-left-color: #3b82f6;
+        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+    }
+
+    .stat-card.secondary {
+        border-left-color: #8b5cf6;
+        background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
+    }
+
+    .stat-icon {
+        width: 45px;
+        height: 45px;
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(79, 70, 229, 0.1);
+        flex-shrink: 0;
+    }
+
+    .stat-icon i {
+        font-size: 18px;
+        color: #4f46e5;
+    }
+
+    .stat-card.warning .stat-icon {
+        background: rgba(245, 158, 11, 0.1);
+    }
+
+    .stat-card.warning .stat-icon i {
+        color: #f59e0b;
+    }
+
+    .stat-card.success .stat-icon {
+        background: rgba(16, 185, 129, 0.1);
+    }
+
+    .stat-card.success .stat-icon i {
+        color: #10b981;
+    }
+
+    .stat-card.danger .stat-icon {
+        background: rgba(239, 68, 68, 0.1);
+    }
+
+    .stat-card.danger .stat-icon i {
+        color: #ef4444;
+    }
+
+    .stat-card.info .stat-icon {
+        background: rgba(59, 130, 246, 0.1);
+    }
+
+    .stat-card.info .stat-icon i {
+        color: #3b82f6;
+    }
+
+    .stat-card.secondary .stat-icon {
+        background: rgba(139, 92, 246, 0.1);
+    }
+
+    .stat-card.secondary .stat-icon i {
+        color: #8b5cf6;
+    }
+
+    .stat-content {
+        flex: 1;
+    }
+
+    .stat-value {
+        font-size: 22px;
         font-weight: 700;
+        color: #1a202c;
+        line-height: 1.2;
         margin-bottom: 2px;
     }
-    
-    .stats-label {
-        font-size: 0.75rem;
-        opacity: 0.9;
+
+    .stat-label {
+        font-size: 12px;
+        color: #718096;
         font-weight: 500;
+        line-height: 1.3;
     }
     
-    .stats-icon {
-        position: absolute;
-        top: 12px;
-        right: 12px;
-        font-size: 1.2rem;
-        opacity: 0.7;
-    }
-    
+    /* Updated Search Container - Wider with icon on left */
     .search-container {
         background: rgba(255, 255, 255, 0.9);
         border-radius: 10px;
-        padding: 8px 15px;
+        padding: 6px 12px;
         border: 1px solid rgba(0, 0, 0, 0.1);
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-        width: 100%;
+        width: 350px; /* Increased width */
+        display: flex;
+        align-items: center;
     }
     
     .search-input {
         border: none;
         background: transparent;
-        padding: 5px 10px;
+        padding: 4px 8px;
         width: 100%;
-        font-size: 14px;
+        font-size: 13px;
         outline: none;
+        font-family: 'Inter', sans-serif;
+    }
+    
+    .search-input::placeholder {
+        color: #9ca3af;
+        font-size: 13px;
     }
     
     .filter-btn {
         background: rgba(102, 126, 234, 0.1);
         border: 2px solid transparent;
         color: #667eea;
-        padding: 6px 15px;
+        padding: 5px 12px;
         border-radius: 8px;
         font-weight: 600;
         transition: all 0.3s ease;
-        margin: 0 5px;
+        margin: 0 3px;
         text-decoration: none;
         display: inline-block;
-        font-size: 0.8rem;
+        font-size: 0.75rem;
+        font-family: 'Inter', sans-serif;
     }
     
     .filter-btn.active {
@@ -91,45 +199,106 @@
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         border: none;
         border-radius: 8px;
-        padding: 8px 20px;
+        padding: 6px 16px;
         color: white;
         font-weight: 600;
         box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
         transition: all 0.3s ease;
         text-decoration: none;
         display: inline-block;
-        font-size: 0.8rem;
+        font-size: 0.75rem;
+        font-family: 'Inter', sans-serif;
     }
     
+    /* Updated Table Styles - Fixed horizontal scroll */
     .table-glass {
         background: rgba(255, 255, 255, 0.9);
         border-radius: 10px;
         overflow: hidden;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+        font-family: 'Inter', sans-serif;
     }
     
-    .table-header {
+    /* Single gradient for entire header - Blue to Purple */
+    .table thead {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    }
+   
+    .table-header {
         color: white !important;
         font-weight: 600;
-        font-size: 0.9rem;
-        padding: 12px 15px !important;
-        position: relative;
+        font-size: 0.85rem;
+        padding: 14px 12px !important;
         border: none;
+        font-family: 'Inter', sans-serif;
+        position: relative;
+        background: linear-gradient(135deg, #667eea 0%);;
+
     }
     
-    /* Curved borders for table headers */
+    /* Remove individual curved borders */
     .table-header:first-child {
-        border-top-left-radius: 10px;
+        border-top-left-radius: 0;
     }
     
     .table-header:last-child {
+        border-top-right-radius: 0;
+    }
+    
+    /* Apply rounded corners to the entire header container */
+    .table-container thead tr:first-child th:first-child {
+        border-top-left-radius: 10px;
+    }
+    
+    .table-container thead tr:first-child th:last-child {
         border-top-right-radius: 10px;
     }
     
+    /* Updated Table Column Alignment */
     .table > :not(caption) > * > * {
-        padding: 12px 15px;
+        padding: 14px 12px;
         border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        font-size: 14px;
+        font-family: 'Inter', sans-serif;
+        vertical-align: middle;
+    }
+
+    /* Center align specific columns */
+    .table > :not(caption) > * > *:nth-child(2), /* Customer ID */
+    .table > :not(caption) > * > *:nth-child(3), /* Orders */
+    .table > :not(caption) > * > *:nth-child(4), /* Total */
+    .table > :not(caption) > * > *:nth-child(5) { /* Create Date */
+        text-align: center;
+    }
+
+    /* Customer Info column should remain left-aligned */
+    .table > :not(caption) > * > *:first-child {
+        text-align: left;
+    }
+
+    /* Status and Actions columns should remain as is */
+    .table > :not(caption) > * > *:nth-child(6), /* Status */
+    .table > :not(caption) > * > *:nth-child(7) { /* Actions */
+        text-align: center;
+    }
+
+    /* Updated header alignment to match */
+    .table-header:nth-child(2),
+    .table-header:nth-child(3),
+    .table-header:nth-child(4),
+    .table-header:nth-child(5) {
+        text-align: center;
+    }
+
+    /* Customer Info header stays left */
+    .table-header:first-child {
+        text-align: Center;
+    }
+
+    /* Status and Actions headers stay centered */
+    .table-header:nth-child(6),
+    .table-header:nth-child(7) {
+        text-align: center;
     }
     
     .customer-avatar {
@@ -165,7 +334,7 @@
     }
     
     .status-badge {
-        padding: 4px 10px;
+        padding: 5px 10px;
         border-radius: 8px;
         font-size: 0.75rem;
         font-weight: 600;
@@ -203,15 +372,9 @@
         transform: scale(1.05);
     }
     
-    .stats-row {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-        gap: 12px;
-        margin-bottom: 20px;
-    }
-    
     .customer-info-column {
-        min-width: 300px;
+        min-width: 220px;
+        max-width: 220px; /* Added max-width to prevent overflow */
     }
     
     .table tbody tr {
@@ -228,44 +391,28 @@
         color: #6c757d;
     }
     
-    .customer-stats {
-        font-size: 0.75rem;
-        color: #6c757d;
-    }
+    /* Remove customer-stats since we're adding columns */
     
-    /* Enhanced table styling */
+    /* Enhanced table styling - Fixed horizontal scroll */
     .table-container {
         border-radius: 10px;
         overflow: hidden;
+        width: 100%; /* Ensure container takes full width */
     }
     
-    .table-header-container {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        border-radius: 10px 10px 0 0;
-        overflow: hidden;
-    }
-
-    /* Remove horizontal scroll */
+    /* Fix table responsiveness */
     .table-responsive {
-        overflow-x: visible !important;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        width: 100%;
     }
-
-    .container-fluid {
-        overflow-x: hidden;
-    }
-
-    /* Adjust table layout to fit without scroll */
+    
+    /* Ensure table doesn't exceed container */
     .table {
         width: 100%;
-        min-width: auto;
-    }
-
-    /* Ensure proper column sizing */
-    .table th,
-    .table td {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        max-width: 100%;
+        margin-bottom: 0;
+        table-layout: auto; /* Changed to auto for better column distribution */
     }
     
     /* Fix for search and filter section */
@@ -275,21 +422,43 @@
         justify-content: space-between;
         flex-wrap: nowrap;
         gap: 15px;
+        width: 100%;
     }
     
     .search-section {
-        flex: 1;
-        min-width: 300px;
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
     }
     
     .filter-section {
         display: flex;
         align-items: center;
         flex-wrap: nowrap;
-        gap: 8px;
+        gap: 6px;
+        flex-shrink: 0;
     }
 
-    /* ---------- Pagination Styles (Same as Account Dashboard) ---------- */
+    /* New columns styling */
+    .orders-column, .total-column, .customer-id-column, .create-date-column {
+        text-align: center;
+        font-weight: 500;
+        min-width: 80px; /* Added minimum widths for consistency */
+    }
+    
+    .orders-count {
+        font-size: 14px;
+        color: #1a202c;
+        font-weight: 600;
+    }
+    
+    .total-amount {
+        font-size: 14px;
+        color: #10b981;
+        font-weight: 600;
+    }
+
+    /* ---------- Pagination Styles ---------- */
     .pagination-container {
         display: flex;
         justify-content: space-between;
@@ -297,18 +466,23 @@
         margin-top: 15px;
         padding: 12px 0;
         border-top: 1px solid #eef3fb;
+        font-family: 'Inter', sans-serif;
+        width: 100%;
     }
 
     .pagination-info {
         font-size: 13px;
         color: #9ba5bb;
         font-weight: 600;
+        flex-shrink: 0;
     }
 
     .pagination-controls {
         display: flex;
         align-items: center;
         gap: 8px;
+        flex-wrap: wrap;
+        justify-content: flex-end;
     }
 
     .pagination-btn {
@@ -354,6 +528,8 @@
         transition: all 0.3s ease;
         min-width: 36px;
         text-align: center;
+        text-decoration: none;
+        display: inline-block;
     }
 
     .pagination-page-btn:hover {
@@ -372,6 +548,7 @@
         display: flex;
         gap: 4px;
         align-items: center;
+        flex-wrap: wrap;
     }
 
     .pagination-ellipsis {
@@ -422,14 +599,46 @@
         filter: brightness(0) saturate(100%) invert(84%) sepia(8%) saturate(165%) hue-rotate(179deg) brightness(89%) contrast(86%);
     }
 
+    /* Mobile responsive fixes */
+    @media (max-width: 1200px) {
+        .table > :not(caption) > * > * {
+            padding: 12px 8px;
+            font-size: 13px;
+        }
+        
+        .customer-info-column {
+            min-width: 180px;
+            max-width: 180px;
+        }
+    }
+
+    @media (max-width: 992px) {
+        .search-container {
+            width: 280px;
+        }
+        
+        .stats-container {
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
+
     @media (max-width: 768px) {
+        .stats-container {
+            grid-template-columns: repeat(2, 1fr);
+        }
+        
         .search-filter-container {
             flex-direction: column;
             align-items: stretch;
+            gap: 10px;
         }
         
         .search-section {
-            min-width: auto;
+            justify-content: center;
+        }
+        
+        .search-container {
+            width: 100%;
         }
         
         .filter-section {
@@ -446,63 +655,127 @@
         .pagination-controls {
             justify-content: center;
         }
+        
+        .table > :not(caption) > * > * {
+            padding: 10px 6px;
+            font-size: 12px;
+        }
+        
+        .customer-info-column {
+            min-width: 150px;
+            max-width: 150px;
+        }
+        
+        .customer-avatar {
+            width: 32px;
+            height: 32px;
+            font-size: 0.8rem;
+        }
+        
+        .action-btn {
+            width: 26px;
+            height: 26px;
+            font-size: 0.7rem;
+        }
+    }
+
+    @media (max-width: 576px) {
+        .stats-container {
+            grid-template-columns: 1fr;
+        }
+        
+        .table-responsive {
+            font-size: 12px;
+        }
+        
+        .customer-info-column {
+            min-width: 120px;
+            max-width: 120px;
+        }
+        
+        .premium-badge,
+        .regular-badge,
+        .status-badge {
+            font-size: 0.6rem;
+            padding: 2px 6px;
+        }
     }
 </style>
 
 <div class="container-fluid">
-    <!-- Header -->
+    <!-- Header - Removed gradient -->
     <div class="d-flex justify-content-between align-items-center mb-3">
-        <h4 style="color: #2c3e50; font-weight: 700;">Customer List</h4>
+        <h4 style="color: #2c3e50; font-weight: 700; font-family: 'Inter', sans-serif;">Customer List</h4>
     </div>
 
-    <!-- Stats Cards with REAL DATA -->
-    <div class="stats-row">
-        <div class="stats-card">
-            <div class="stats-count">{{ $allCustomers->count() }}</div>
-            <div class="stats-label">Total Customers</div>
-            <i class="bi bi-people-fill stats-icon"></i>
+    <!-- Stats Cards with NEW DESIGN -->
+    <div class="stats-container">
+        <!-- Total Customers -->
+        <div class="stat-card">
+            <div class="stat-icon">
+                <i class="bi bi-people-fill"></i>
+            </div>
+            <div class="stat-content">
+                <div class="stat-value">{{ $allCustomers->count() }}</div>
+                <div class="stat-label">Total Customers</div>
+            </div>
         </div>
         
-        <div class="stats-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
-            <div class="stats-count">
-                @php
-                    $newThisMonth = $allCustomers->filter(function($customer) {
-                        return $customer->created_at->format('Y-m') === now()->format('Y-m');
-                    })->count();
-                @endphp
-                {{ $newThisMonth }}
+        <!-- New This Month -->
+        <div class="stat-card warning">
+            <div class="stat-icon">
+                <i class="bi bi-person-plus"></i>
+            </div>
+            <div class="stat-content">
+                <div class="stat-value">
+                    @php
+                        $newThisMonth = $allCustomers->filter(function($customer) {
+                            return $customer->created_at->format('Y-m') === now()->format('Y-m');
+                        })->count();
+                    @endphp
+                    {{ $newThisMonth }}
+                </div>
+                <div class="stat-label">New This Month</div>
             </div>
-            <div class="stats-label">New This Month</div>
-            <i class="bi bi-person-plus stats-icon"></i>
         </div>
         
-        <div class="stats-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
-            <div class="stats-count">
-                @php
-                    $activeCustomers = $allCustomers->where('status', 'active')->count();
-                @endphp
-                {{ $activeCustomers }}
+        <!-- Active Customers -->
+        <div class="stat-card success">
+            <div class="stat-icon">
+                <i class="bi bi-activity"></i>
+            </div>
+            <div class="stat-content">
+                <div class="stat-value">
+                    @php
+                        $activeCustomers = $allCustomers->where('status', 'active')->count();
+                    @endphp
+                    {{ $activeCustomers }}
+                </div>
+                <div class="stat-label">Active Customers</div>
             </div>
-            <div class="stats-label">Active Customers</div>
-            <i class="bi bi-activity stats-icon"></i>
         </div>
         
-        <div class="stats-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
-            <div class="stats-count">
-                @php
-                    $premiumCount = $allCustomers->where('customer_type', 'premium')->count();
-                @endphp
-                {{ $premiumCount }}
+        <!-- Premium Customers -->
+        <div class="stat-card secondary">
+            <div class="stat-icon">
+                <i class="bi bi-award-fill"></i>
+            </div>
+            <div class="stat-content">
+                <div class="stat-value">
+                    @php
+                        $premiumCount = $allCustomers->where('customer_type', 'premium')->count();
+                    @endphp
+                    {{ $premiumCount }}
+                </div>
+                <div class="stat-label">Premium Customers</div>
             </div>
-            <div class="stats-label">Premium Customers</div>
-            <i class="bi bi-award-fill stats-icon"></i>
         </div>
     </div>
 
-    <!-- Search and Filter Section - FIXED LAYOUT -->
+    <!-- Search and Filter Section -->
     <div class="glass-card p-3 mb-3">
         <div class="search-filter-container">
-            <!-- Search Section -->
+            <!-- Search Section - Wider with icon on left -->
             <div class="search-section">
                 <form method="GET" action="{{ route('admin.customers.index') }}" class="d-flex align-items-center">
                     <div class="search-container">
@@ -511,7 +784,7 @@
                                name="search"
                                value="{{ $search ?? '' }}"
                                class="search-input" 
-                               placeholder="Search Customer Name, Email, or Phone...">
+                               placeholder="Search customers by name, email, or phone...">
                         @if(!empty($status))
                             <input type="hidden" name="status" value="{{ $status }}">
                         @endif
@@ -547,13 +820,15 @@
     <div class="table-container">
         <div class="table-responsive">
             <table class="table table-hover align-middle mb-0">
-                <thead>
+                <thead class="gradient-table-header">
                     <tr>
                         <th class="table-header">Customer Info</th>
                         <th class="table-header">Customer ID</th>
+                        <th class="table-header">Orders</th>
+                        <th class="table-header">Total</th>
                         <th class="table-header">Create Date</th>
                         <th class="table-header">Status</th>
-                        <th class="table-header" width="120">Actions</th>
+                        <th class="table-header" width="100">Actions</th>
                     </tr>
                 </thead>
                 <tbody id="customersTableBody">
@@ -576,20 +851,27 @@
                                         {{ $c->email }}<br>
                                         {{ $c->mobile_no }}
                                     </div>
-                                    <div class="customer-stats mt-1">
-                                        {{ $c->orders->count() }} orders • ₹{{ number_format($c->orders->sum('ttl_amount'), 2) }} total
-                                    </div>
                                 </div>
                             </div>
                         </td>
 
                         <!-- Customer ID -->
-                        <td>
+                        <td class="customer-id-column">
                             <span class="fw-bold text-primary">{{ $c->customer_id }}</span>
                         </td>
 
+                        <!-- Orders Column -->
+                        <td class="orders-column">
+                            <span class="orders-count">{{ $c->orders->count() }}</span>
+                        </td>
+
+                        <!-- Total Column -->
+                        <td class="total-column">
+                            <span class="total-amount">₹{{ number_format($c->orders->sum('ttl_amount'), 2) }}</span>
+                        </td>
+
                         <!-- Create Date -->
-                        <td>
+                        <td class="create-date-column">
                             <span class="text-muted">{{ $c->created_at ? $c->created_at->format('d-m-Y') : '-' }}</span>
                         </td>
 
@@ -604,7 +886,7 @@
 
                         <!-- Actions -->
                         <td>
-                            <div class="d-flex">
+                            <div class="d-flex justify-content-center">
                                 <a href="{{ route('admin.customers.view', $c->id) }}"
                                    class="action-btn" title="View">
                                    <i class="bi bi-eye"></i>
@@ -622,7 +904,7 @@
                     </tr>
                     @empty
                     <tr>
-                        <td colspan="5" class="text-center py-4">
+                        <td colspan="7" class="text-center py-4">
                             <i class="bi bi-people display-4 text-muted d-block mb-2"></i>
                             <span class="text-muted">No customers found.</span>
                         </td>
diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php
index d209de2..c08ec6c 100644
--- a/resources/views/admin/dashboard.blade.php
+++ b/resources/views/admin/dashboard.blade.php
@@ -12,6 +12,7 @@ html, body {
 
 body, .container-fluid { 
   background: #f4f7fc; 
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
 .container-fluid {
@@ -34,6 +35,7 @@ body, .container-fluid {
   letter-spacing: .018em;
   color: #18213e;
   margin-bottom: 2px;
+  font-family: 'Inter', sans-serif;
 }
 
 .dash-title-desc {
@@ -42,6 +44,7 @@ body, .container-fluid {
   margin-bottom: 5px;
   font-weight: 500;
   letter-spacing: .01em;
+  font-family: 'Inter', sans-serif;
 }
 
 /* ===== STATS CARDS - RESPONSIVE GRID ===== */
@@ -127,12 +130,14 @@ body, .container-fluid {
   color:#63709b; 
   font-weight:600; 
   letter-spacing:.28px;
+  font-family: 'Inter', sans-serif;
 }
 
 .stats-value { 
   font-size:1.25rem; 
   font-weight:700; 
   color:#194073;
+  font-family: 'Inter', sans-serif;
 }
 
 .stats-card:hover .stats-icon {
@@ -170,6 +175,7 @@ body, .container-fluid {
   display: flex; 
   align-items: center; 
   gap: 11px;
+  font-family: 'Inter', sans-serif;
 }
 
 .order-mgmt-title i { 
@@ -191,6 +197,7 @@ body, .container-fluid {
   align-items: center; 
   gap: 8px; 
   font-family: inherit;
+  font-family: 'Inter', sans-serif;
 }
 
 .create-order-btn:hover {
@@ -201,7 +208,7 @@ body, .container-fluid {
 .card-body, .order-mgmt-main { 
   background: #fff; 
   border-radius: 0 0 17px 17px; 
-  padding:25px; 
+  padding:20px; 
   margin-top: 15px;
 }
 
@@ -213,7 +220,7 @@ body, .container-fluid {
   margin-top: 15px;
 }
 
-/* ===== TABLE STYLES ===== */
+/* ===== IMPROVED TABLE STYLES ===== */
 .table thead tr {
   background: #feebbe !important;
   border-radius: 12px 12px 0 0;
@@ -226,9 +233,10 @@ body, .container-fluid {
   font-weight: 700; 
   color: #343535; 
   letter-spacing: 0.02em; 
-  font-size:15px;
-  padding-top: 12px; 
-  padding-bottom: 10px;
+  font-size: 15px;
+  padding: 16px 12px;
+  font-family: 'Inter', sans-serif;
+  border-bottom: 2px solid #e9ecef;
 }
 
 .table thead th:first-child  { border-radius: 9px 0 0 0;}
@@ -239,20 +247,24 @@ body, .container-fluid {
   border-radius:9px; 
   box-shadow:0 2px 12px #e2ebf941;
   border-collapse: separate;
-  border-spacing: 0 2px;
+  border-spacing: 0 8px;
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
 }
 
 .table-striped tbody tr {
   background: #fff;
-  border-radius: 6px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
-  margin-bottom: 2px;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
+  margin-bottom: 8px;
   transition: all 0.3s ease;
+  height: 60px;
 }
 
 .table-striped tbody tr:hover {
-  box-shadow: 0 2px 6px rgba(0,0,0,0.08); 
-  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
+  transform: translateY(-2px);
+  background: #f8fafd;
 }
 
 .table-striped tbody tr:nth-of-type(odd) { 
@@ -264,39 +276,110 @@ body, .container-fluid {
 }
 
 .table td {
-  padding: 12px 6px;
+  padding: 14px 12px;
   border: none;
   position: relative;
+  vertical-align: middle;
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  color: #495057;
+  line-height: 1.5;
+  border-bottom: 1px solid #f1f3f4;
 }
 
 .table td:first-child {
-  border-radius: 6px 0 0 6px; 
+  border-radius: 8px 0 0 8px; 
+  border-left: 3px solid transparent;
 }
 
 .table td:last-child {
-  border-radius: 0 6px 6px 0; 
+  border-radius: 0 8px 8px 0; 
 }
 
 .table-responsive { 
   border-radius:10px; 
 }
 
-.badge { 
-  font-size:13px; 
-  font-weight:600; 
-  padding:7px 17px; 
-  border-radius:12px;
+/* ===== UPDATED STATUS BADGE STYLES ===== */
+.badge {
+  padding: 7px 17px !important;
+  border-radius: 20px !important;
+  font-weight: 600 !important;
+  font-size: 13px !important;
+  border: 2px solid transparent !important;
+  min-width: 40px !important;
+  text-align: center !important;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.2 !important;
+  font-family: 'Inter', sans-serif;
+  gap: 6px;
+  width: 110px;
 }
 
-.bg-info { 
-  background-color:#22cbfa!important; 
-  color:#fff!important;
+.status-icon {
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Pending Status - SAME SIZE WITH CLOCK ICON */
+.badge-pending {
+  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
+  color: #d97706 !important;
+  border-color: #f59e0b !important;
+}
+
+/* In Transit Status - SAME SIZE WITH TRUCK ICON */
+.badge-in_transit {
+  background: linear-gradient(135deg, #dbeafe, #93c5fd) !important;
+  color: #1e40af !important;
+  border-color: #3b82f6 !important;
+}
+
+/* Dispatched Status - SAME SIZE WITH BOX ICON */
+.badge-dispatched {
+  background: linear-gradient(135deg, #e9d5ff, #c4b5fd) !important;
+  color: #6b21a8 !important;
+  border-color: #8b5cf6 !important;
+}
+
+/* Delivered Status - SAME SIZE WITH CHECK ICON */
+.badge-delivered {
+  background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
+  color: #065f46 !important;
+  border-color: #10b981 !important;
+}
+
+/* Default badge styles - SAME SIZE */
+.badge.bg-info {
+  background: linear-gradient(135deg, #4cc9f0, #4361ee) !important;
+  color: white !important;
+}
+
+.badge.bg-success {
+  background: linear-gradient(135deg, #4ade80, #22c55e) !important;
+  color: white !important;
+}
+
+.badge.bg-warning {
+  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
+  color: white !important;
+}
+
+.badge.bg-danger {
+  background: linear-gradient(135deg, #f87171, #ef4444) !important;
+  color: white !important;
 }
 
 .form-label { 
   font-weight:600; 
   color:#1d3159; 
   font-size:15px;
+  font-family: 'Inter', sans-serif;
 }
 
 .form-control, .form-select {
@@ -305,6 +388,7 @@ body, .container-fluid {
   background: #f7f9fe;
   border:1.2px solid #c7dbfa; 
   font-weight:500;
+  font-family: 'Inter', sans-serif;
 }
 
 .form-control:focus, .form-select:focus {
@@ -316,6 +400,7 @@ body, .container-fluid {
   color:#2469d6; 
   font-weight:600; 
   text-decoration:underline; 
+  font-family: 'Inter', sans-serif;
 }
 
 /* ===== HORIZONTAL SCROLL CONTAINER ===== */
@@ -327,7 +412,7 @@ body, .container-fluid {
   border-radius: 12px;
   background: #fff;
   box-shadow: 0 2px 10px rgba(0,0,0,0.08);
-  padding: 8px;
+  padding: 12px;
 }
 
 .table-wrapper::-webkit-scrollbar {
@@ -348,7 +433,7 @@ body, .container-fluid {
 }
 
 .table {
-  min-width: 1200px;
+  min-width: 2000px;
   border-radius: 10px;
 }
 
@@ -394,6 +479,7 @@ body, .container-fluid {
   font-size: 1.4rem;
   font-weight: 700;
   margin: 0;
+  font-family: 'Inter', sans-serif;
 }
 
 .create-order-modal .close-btn {
@@ -425,6 +511,7 @@ body, .container-fluid {
   color: #1d3159;
   font-size: 15px;
   margin-bottom: 5px;
+  font-family: 'Inter', sans-serif;
 }
 
 .create-order-modal .form-control,
@@ -435,6 +522,7 @@ body, .container-fluid {
   font-size: 15px;
   font-weight: 500;
   padding: 8px 12px;
+  font-family: 'Inter', sans-serif;
 }
 
 .create-order-modal .form-control:focus,
@@ -449,6 +537,7 @@ body, .container-fluid {
   padding: 10px 20px;
   font-weight: 600;
   border-radius: 8px;
+  font-family: 'Inter', sans-serif;
 }
 
 .create-order-modal .btn-info:hover {
@@ -461,6 +550,7 @@ body, .container-fluid {
   padding: 12px 30px;
   font-weight: 600;
   border-radius: 8px;
+  font-family: 'Inter', sans-serif;
 }
 
 .create-order-modal .btn-success:hover {
@@ -472,6 +562,7 @@ body, .container-fluid {
   border: none;
   color: #000;
   font-weight: 600;
+  font-family: 'Inter', sans-serif;
 }
 
 .create-order-modal .btn-warning:hover {
@@ -481,6 +572,7 @@ body, .container-fluid {
 .create-order-modal .btn-danger {
   background: #dc3545;
   border: none;
+  font-family: 'Inter', sans-serif;
 }
 
 .create-order-modal .btn-danger:hover {
@@ -505,6 +597,7 @@ body, .container-fluid {
   position: sticky;
   top: 0;
   z-index: 10;
+  font-family: 'Inter', sans-serif;
 }
 
 /* ===== ORDER DETAILS MODAL STYLES ===== */
@@ -536,6 +629,7 @@ body, .container-fluid {
   font-weight: 700;
   color: white;
   margin: 0;
+  font-family: 'Inter', sans-serif;
 }
 
 .modal-header .btn-close {
@@ -554,6 +648,7 @@ body, .container-fluid {
   background: #f8fafc;
   max-height: 70vh;
   overflow-y: auto;
+  font-family: 'Inter', sans-serif;
 }
 
 /* ===== PAGINATION STYLES ===== */
@@ -570,6 +665,7 @@ body, .container-fluid {
     font-size: 13px;
     color: #9ba5bb;
     font-weight: 600;
+    font-family: 'Inter', sans-serif;
 }
 
 .pagination-controls {
@@ -593,6 +689,7 @@ body, .container-fluid {
     justify-content: center;
     min-width: 40px;
     height: 32px;
+    font-family: 'Inter', sans-serif;
 }
 
 .pagination-btn:hover:not(:disabled) {
@@ -621,6 +718,7 @@ body, .container-fluid {
     transition: all 0.3s ease;
     min-width: 36px;
     text-align: center;
+    font-family: 'Inter', sans-serif;
 }
 
 .pagination-page-btn:hover {
@@ -645,6 +743,7 @@ body, .container-fluid {
     color: #9ba5bb;
     font-size: 13px;
     padding: 0 4px;
+    font-family: 'Inter', sans-serif;
 }
 
 .pagination-img-btn {
@@ -728,7 +827,7 @@ body, .container-fluid {
   
   .table th,
   .table td {
-    padding: 10px 5px;
+    padding: 12px 8px;
   }
 
   .pagination-container {
@@ -811,7 +910,7 @@ body, .container-fluid {
   
   .table th,
   .table td {
-    padding: 8px 4px;
+    padding: 10px 6px;
   }
   
   .badge {
@@ -913,7 +1012,7 @@ body, .container-fluid {
   
   .table th,
   .table td {
-    padding: 6px 3px;
+    padding: 8px 4px;
   }
   
   .form-control, .form-select {
@@ -1047,67 +1146,80 @@ body, .container-fluid {
           </span>
         </div>
         <div class="card-body table-responsive">
-          <table class="table table-striped table-bordered align-middle text-center">
-            <thead class="table-light">
-              <tr>
-                <th>#</th>
-                <th>Order ID</th>
-                <th>Mark No</th>
-                <th>Origin</th>
-                <th>Destination</th>
-                <th>Total CTN</th>
-                <th>Total QTY</th>
-                <th>Total TTL/QTY</th>
-                <th>Total Amount (₹)</th>
-                <th>Total CBM</th>
-                <th>Total TTL CBM</th>
-                <th>Total KG</th>
-                <th>Total TTL KG</th>
-                <th>Status</th>
-                <th>Date</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody id="ordersTableBody">
-              @forelse($orders as $order)
-              <tr>
-                <td>{{ $order->id }}</td>
-                <td>
-                  <a href="javascript:void(0)"
-                    class="fw-semibold text-primary open-order-modal"
-                    data-id="{{ $order->id }}">
-                    {{ $order->order_id }}
-                  </a>
-                </td>
-
-                  <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>
+          <div class="table-wrapper">
+            <table class="table table-striped table-bordered align-middle text-center">
+              <thead class="table-light">
+                <tr>
+                  <th>#</th>
+                  <th>Order ID</th>
+                  <th>Mark No</th>
+                  <th>Origin</th>
+                  <th>Destination</th>
+                  <th>Total CTN</th>
+                  <th>Total QTY</th>
+                  <th>Total TTL/QTY</th>
+                  <th>Total Amount (₹)</th>
+                  <th>Total CBM</th>
+                  <th>Total TTL CBM</th>
+                  <th>Total KG</th>
+                  <th>Total TTL KG</th>
+                  <th>Status</th>
+                  <th>Date</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody id="ordersTableBody">
+                @forelse($orders as $order)
+                <tr>
+                  <td>{{ $order->id }}</td>
                   <td>
-                    <span class="badge bg-info text-dark">{{ ucfirst($order->status) }}</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 href="javascript:void(0)"
+                      class="fw-semibold text-primary open-order-modal"
+                      data-id="{{ $order->id }}">
+                      {{ $order->order_id }}
                     </a>
                   </td>
-                </tr>
-                @empty
-                <tr>
-                  <td colspan="16" class="text-muted">No orders found</td>
-                </tr>
-                @endforelse
-              </tbody>
-            </table>
+
+                    <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>
+                      <span class="badge badge-{{ $order->status }}">
+                        @if($order->status == 'pending')
+                          <i class="bi bi-clock-fill status-icon"></i>
+                        @elseif($order->status == 'in_transit')
+                          <i class="bi bi-truck status-icon"></i>
+                        @elseif($order->status == 'dispatched')
+                          <i class="bi bi-box-seam status-icon"></i>
+                        @elseif($order->status == 'delivered')
+                          <i class="bi bi-check-circle-fill status-icon"></i>
+                        @endif
+                        {{ ucfirst(str_replace('_', ' ', $order->status)) }}
+                      </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>
 
             <!-- Pagination Controls -->
             <div class="pagination-container">
@@ -1566,7 +1678,13 @@ document.addEventListener('DOMContentLoaded', function() {
                 <td>${order.kg || ''}</td>
                 <td>${order.ttl_kg || ''}</td>
                 <td>
-                    <span class="badge bg-info text-dark">${order.status ? order.status.charAt(0).toUpperCase() + order.status.slice(1) : ''}</span>
+                    <span class="badge badge-${order.status}">
+                        ${order.status === 'pending' ? '<i class="bi bi-clock-fill status-icon"></i>' : ''}
+                        ${order.status === 'in_transit' ? '<i class="bi bi-truck status-icon"></i>' : ''}
+                        ${order.status === 'dispatched' ? '<i class="bi bi-box-seam status-icon"></i>' : ''}
+                        ${order.status === 'delivered' ? '<i class="bi bi-check-circle-fill status-icon"></i>' : ''}
+                        ${order.status ? order.status.charAt(0).toUpperCase() + order.status.slice(1).replace('_', ' ') : ''}
+                    </span>
                 </td>
                 <td>${new Date(order.created_at).toLocaleDateString('en-GB')}</td>
                 <td>
diff --git a/resources/views/admin/invoice.blade.php b/resources/views/admin/invoice.blade.php
index 8582bd9..84aa37a 100644
--- a/resources/views/admin/invoice.blade.php
+++ b/resources/views/admin/invoice.blade.php
@@ -4,1566 +4,1659 @@
 
 @section('content')
 <style>
+    /* Import Inter Font */
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+    
     /*Remove horizontal scroll bar*/
-  html, body {
-    overflow-x: hidden !important;
-}
-
-/* Invoice Management Styles */
-.invoice-management-box {
-  background: #fff; 
-  border-radius: 17px; 
-  box-shadow: 0 7px 38px #dde3fa77, 0 2px 9px #e5e7ff80;
-  margin-bottom: 33px; 
-  margin-top: 10px; 
-}
-
-.invoice-management-bar {
-  display: flex; 
-  justify-content: space-between; 
-  align-items: center;
-  border-radius: 17px 17px 0 0; 
-  background: #fceeb8ff;
-  min-height: 54px; 
-  padding: 15px 26px 10px 22px; 
-  border-bottom: 1.4px solid #e8e2cf;
-  box-shadow: 0 1px 13px #ffe2a888;
-}
-
-.invoice-management-title {
-  font-size: 1.32rem; 
-  font-weight: 800; 
-  color: #2451af; 
-  letter-spacing: .08em;
-  display: flex; 
-  align-items: center; 
-  gap: 11px;
-}
-
-.invoice-management-title i { 
-  font-size: 1.12em; 
-  color: #336ad3; 
-}
-
-/* Tools Row Styling */
-.invoice-tools-row {
-  background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
-  padding: 20px 25px;
-  border-bottom: 1px solid #e2e8f0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 15px;
-  flex-wrap: wrap;
-}
-
-.search-box {
-  display: flex;
-  align-items: center;
-  background: white;
-  border-radius: 10px;
-  padding: 8px 15px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-  border: 1px solid #e2e8f0;
-  min-width: 300px;
-  flex: 1;
-  max-width: 400px;
-}
-
-.search-box i {
-  color: #64748b;
-  margin-right: 10px;
-  font-size: 1.1rem;
-}
-
-.search-box input {
-  border: none;
-  outline: none;
-  background: transparent;
-  width: 100%;
-  font-size: 14px;
-  color: #334155;
-}
-
-.search-box input::placeholder {
-  color: #94a3b8;
-}
-
-.filter-group {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.filter-select {
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  padding: 8px 12px;
-  font-size: 14px;
-  color: #334155;
-  outline: none;
-  min-width: 150px;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.04);
-}
-
-.filter-select:focus {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.create-invoice-btn {
-  background: linear-gradient(90deg, #226ad6, #46b4fd 123%);
-  padding: 10px 24px; 
-  font-weight: 600; 
-  border: none; 
-  border-radius: 9px; 
-  color: #fff;
-  font-size: 14px; 
-  box-shadow: 0 2px 13px #dde7fa42;
-  transition: all 0.3s ease;
-  display: flex; 
-  align-items: center; 
-  gap: 8px; 
-  font-family: inherit;
-  text-decoration: none;
-  white-space: nowrap;
-}
-
-.create-invoice-btn:hover {
-  background: linear-gradient(90deg, #3264f8, #3acfff 140%);
-  box-shadow: 0 4px 25px #5ab8f880;
-  color: #fff;
-  text-decoration: none;
-  transform: translateY(-2px);
-}
-
-.invoice-management-main { 
-  background: #fff; 
-  border-radius: 0 0 17px 17px; 
-  padding: 0;
-}
-
-/* Table Styling - CENTERED CONTENT */
-.table-container {
-  width: 100%;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scroll-behavior: smooth;
-  border-radius: 0 0 17px 17px;
-}
-
-.table-container::-webkit-scrollbar {
-  height: 6px;
-}
-.table-container::-webkit-scrollbar-thumb {
-  background: linear-gradient(90deg, #a7b8ff, #6c8eff);
-  border-radius: 10px;
-}
-.table-container::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(90deg, #5a78ff, #3f63e0);
-}
-.table-container::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 10px;
-}
-
-.table {
-  width: 100%;
-  min-width: 1100px;
-  border-collapse: separate;
-  border-spacing: 0 8px; /* Add gap between rows */
-  margin-bottom: 0;
-}
-
-/* Center all table content */
-.table thead tr {
-  background: #feebbe !important;
-}
-
-.table thead th:first-child {
-    border-top-left-radius: 17px;
-}
-.table thead th:last-child {
-    border-top-right-radius: 17px;
-}
-
-.table thead th {
-  background: transparent !important;
-  border: none;
-  font-weight: 700; 
-  color: #343535; 
-  letter-spacing: 0.02em; 
-  font-size: 13px;
-  padding: 16px 12px;
-  white-space: nowrap;
-  position: relative;
-  border-bottom: 2px solid #e8e2cf;
-  text-align: center !important; /* Center header text */
-  vertical-align: middle;
-}
-
-.table thead th:first-child { 
-  padding-left: 25px;
-}
-.table thead th:last-child { 
-  padding-right: 25px;
-}
-
-/* Soft blue background for ALL table rows */
-.table-striped tbody tr {
-  background: #f0f8ff !important; /* Soft blue background for all rows */
-  transition: all 0.2s ease;
-  border-radius: 12px; /* Rounded corners for each row */
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow for separation */
-}
-
-.table-striped tbody tr:hover {
-  background: #e6f3ff !important; /* Slightly darker blue on hover */
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Enhanced shadow on hover */
-  transform: translateY(-1px); /* Lift effect on hover */
-}
-
-/* Remove striped pattern - all rows same soft blue */
-.table-striped tbody tr:nth-of-type(odd),
-.table-striped tbody tr:nth-of-type(even) { 
-  background: #f0f8ff !important; /* Same soft blue for all rows */
-}
-
-/* Center all table cells with proper spacing */
-.table td {
-  padding: 16px 12px; /* Increased vertical padding */
-  border: none;
-  vertical-align: middle;
-  white-space: nowrap;
-  font-size: 13px;
-  color: #4a5568;
-  text-align: center !important; /* Center all cell content */
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-}
-
-/* First and last cell rounded corners */
-.table td:first-child {
-  padding-left: 25px;
-  font-weight: 600;
-  color: #2d3748;
-  border-top-left-radius: 12px;
-  border-bottom-left-radius: 12px;
-}
-
-.table td:last-child {
-  padding-right: 25px;
-  border-top-right-radius: 12px;
-  border-bottom-right-radius: 12px;
-}
-
-/* Invoice Number with Curved Boxes */
-.invoice-number-cell {
-  display: flex;
-  align-items: center;
-  justify-content: center; /* Center the invoice number */
-  gap: 12px;
-  padding: 8px 0;
-}
-
-.invoice-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: 8px; /* Curved border radius */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 14px;
-  flex-shrink: 0;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-  font-weight: bold;
-  border: 2px solid rgba(255,255,255,0.3); /* Subtle border */
-}
-
-/* Different curved background colors for each invoice */
-.invoice-icon-1 { 
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
-  border-radius: 8px;
-}
-.invoice-icon-2 { 
-  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); 
-  border-radius: 8px;
-}
-.invoice-icon-3 { 
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); 
-  border-radius: 8px;
-}
-.invoice-icon-4 { 
-  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); 
-  border-radius: 8px;
-}
-.invoice-icon-5 { 
-  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); 
-  border-radius: 8px;
-}
-.invoice-icon-6 { 
-  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); 
-  border-radius: 8px;
-}
-.invoice-icon-7 { 
-  background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%); 
-  border-radius: 8px;
-}
-.invoice-icon-8 { 
-  background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%); 
-  border-radius: 8px;
-}
-
-.invoice-number-link {
-  color: #2469d6;
-  font-weight: 600;
-  text-decoration: none;
-  transition: all 0.3s ease;
-  font-size: 13px;
-  text-align: center;
-}
-
-.invoice-number-link:hover {
-  color: #1a4fb3;
-  text-decoration: none;
-}
-
-/* Badge Styling - Centered with custom backgrounds and icons */
-.badge {
-  font-size: 11px !important;
-  font-weight: 600 !important;
-  padding: 6px 12px 6px 8px !important;
-  border-radius: 20px !important;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-  display: inline-flex !important;
-  align-items: center;
-  justify-content: center;
-  background-size: cover !important;
-  background-position: center !important;
-  color: #fff !important;
-  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
-  border: 2px solid transparent !important;
-  min-width: 40px;
-  box-sizing: border-box;
-  line-height: 1.2;
-  gap: 6px;
-}
-
-/* Status icons */
-.status-icon {
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Custom status badge backgrounds with icons */
-.badge-paid { 
-  background: url('/images/status-bg-paid.png') !important;
-}
-
-.badge-pending { 
-  background: url('/images/status-bg-pending.png') !important;
-}
-
-.badge-overdue { 
-  background: url('/images/status-bg-overdue.png') !important;
-}
-
-/* Fallback colors if images don't load - ALL WITH SAME SIZE */
-.badge.badge-paid { 
-  background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
-  color: #065f46 !important;
-  border-color: #10b981 !important;
-  width: 98px;
-}
-
-.badge.badge-pending { 
-  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
-  color: #d97706 !important;
-  border-color: #f59e0b !important;
-}
-
-.badge.badge-overdue { 
-  background: linear-gradient(135deg, #e9d5ff, #c4b5fd) !important;
-  color: #6b21a8 !important;
-  border-color: #8b5cf6 !important;
-}
-
-/* Entry Button - Centered */
-.btn-entry {
-  background: linear-gradient(135deg, #3492f8 55%, #1256cc 110%);
-  border: none;
-  border-radius: 6px;
-  padding: 6px 12px;
-  font-weight: 600;
-  font-size: 12px;
-  transition: all 0.3s ease;
-  box-shadow: 0 1px 4px rgba(52, 146, 248, 0.3);
-  color: white;
-  white-space: nowrap;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  text-decoration: none;
-}
-
-.btn-entry:hover {
-  background: linear-gradient(135deg, #46b4fd 55%, #226ad6 110%);
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(52, 146, 248, 0.4);
-  color: white;
-  text-decoration: none;
-}
-
-/* Amount Styling - Centered */
-.amount-cell {
-  font-weight: 600;
-  color: #194073;
-  font-size: 13px;
-  text-align: center !important;
-}
-
-.gst-cell {
-  font-weight: 500;
-  color: #63709b;
-  font-size: 13px;
-  text-align: center !important;
-}
-
-/* Date Styling - Centered */
-.date-cell {
-  font-size: 12.5px;
-  color: #718096;
-  font-weight: 500;
-  text-align: center !important;
-}
-
-/* Customer Name Styling - Centered */
-.customer-cell {
-  font-weight: 500;
-  color: #2d3748;
-  font-size: 13px;
-  max-width: 120px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: center !important;
-  margin: 0 auto;
-}
-
-/* Modal Styling */
-.modal.fade .modal-dialog {
-  transition: transform 0.3s ease-out;
-  transform: translate(0, -50px);
-}
-
-.modal.show .modal-dialog {
-  transform: none;
-}
-
-.modal-content {
-  border: none;
-  border-radius: 20px;
-  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
-  overflow: hidden;
-}
-
-.modal-header {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-bottom: none;
-  padding: 15px 25px;
-  border-radius: 20px 20px 0 0;
-}
-
-.modal-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: white;
-  margin: 0;
-}
-
-.modal-header .btn-close {
-  filter: invert(1);
-  opacity: 0.8;
-  transition: all 0.3s ease;
-}
-
-.modal-header .btn-close:hover {
-  opacity: 1;
-  transform: rotate(90deg);
-}
-
-.modal-body {
-  padding: 30px;
-  background: #f8fafc;
-  max-height: 70vh;
-  overflow-y: auto;
-}
-
-/* Date Range Picker Styles */
-.date-range-container {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.date-input {
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  padding: 8px 12px;
-  font-size: 14px;
-  color: #334155;
-  outline: none;
-  min-width: 130px;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.04);
-}
-
-.date-input:focus {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.date-separator {
-  color: #64748b;
-  font-weight: 500;
-}
-
-/* Stats Summary - Centered */
-.stats-summary {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 12px;
-  margin: 20px 25px;
-  padding: 0;
-}
-
-.stat-card {
-  background: white;
-  padding: 15px;
-  border-radius: 10px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-  text-align: center;
-  border-left: 3px solid #667eea;
-}
-
-.stat-value {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #2d3748;
-  margin-bottom: 3px;
-  text-align: center;
-}
-
-.stat-label {
-  font-size: 0.85rem;
-  color: #718096;
-  font-weight: 600;
-  text-align: center;
-}
-
-/* Column Headers - Centered */
-.column-header {
-  text-align: center !important;
-  font-weight: 600;
-  color: #2d3748;
-}
-
-/* Remove extra spacing */
-.no-extra-space {
-  margin: 0;
-  padding: 0;
-}
-
-.compact-view {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-}
-
-/* Ensure all content in table is centered */
-.table tbody tr td {
-  text-align: center !important;
-}
-
-.table tbody tr td .invoice-number-cell {
-  justify-content: center;
-}
-
-.table tbody tr td .btn-entry {
-  margin: 0 auto;
-}
-
-/* Empty State - Centered */
-.text-muted {
-  color: #8a9bb9 !important;
-  font-style: italic;
-  padding: 30px !important;
-  text-align: center;
-  font-size: 14px;
-}
-
-/* Card Styling */
-.card {
-  border-radius: 0 0 17px 17px; 
-  border: none; 
-  margin-bottom: 0 !important;
-  box-shadow: none;
-}
-
-.card-header {
-  background: #f8f9fa !important;
-  border-bottom: 1px solid #e9ecef;
-  border-radius: 0 !important;
-  padding: 15px 25px;
-  text-align: center;
-}
-
-.card-header h4 {
-  margin: 0;
-  color: #2451af;
-  font-weight: 700;
-  font-size: 1.3rem;
-  text-align: center;
-}
-
-/* Mobile Responsive Styles */
-.mobile-invoice-card {
-  display: none;
-  background: #f0f8ff;
-  border-radius: 12px;
-  padding: 15px;
-  margin-bottom: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  border-left: 4px solid #667eea;
-}
-
-.mobile-invoice-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #e2e8f0;
-}
-
-.mobile-invoice-number {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.mobile-invoice-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.mobile-invoice-number-text {
-  font-weight: 600;
-  color: #2469d6;
-  font-size: 14px;
-}
-
-.mobile-invoice-status {
-  font-size: 10px !important;
-  padding: 4px 8px 4px 6px !important;
-  min-width: 70px;
-}
-
-.mobile-invoice-details {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
-  margin-bottom: 12px;
-}
-
-.mobile-detail-item {
-  display: flex;
-  flex-direction: column;
-}
-
-.mobile-detail-label {
-  font-size: 11px;
-  color: #718096;
-  margin-bottom: 2px;
-}
-
-.mobile-detail-value {
-  font-size: 13px;
-  font-weight: 500;
-  color: #2d3748;
-}
-
-.mobile-invoice-actions {
-  display: flex;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.mobile-action-btn {
-  flex: 1;
-  text-align: center;
-  padding: 6px 10px;
-  font-size: 12px;
-  border-radius: 6px;
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-}
-
-.mobile-action-btn.view {
-  background: #f0f8ff;
-  color: #2469d6;
-  border: 1px solid #2469d6;
-}
-
-.mobile-action-btn.entry {
-  background: linear-gradient(135deg, #3492f8 55%, #1256cc 110%);
-  color: white;
-  border: none;
-}
-
-/* ---------- Pagination Styles (Same as Account Dashboard) ---------- */
-.pagination-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 15px;
-    padding: 12px 25px;
-    border-top: 1px solid #eef3fb;
-}
-
-.pagination-info {
-    font-size: 13px;
-    color: #9ba5bb;
-    font-weight: 600;
-}
-
-.pagination-controls {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.pagination-btn {
-    background: #fff;
-    border: 1px solid #e3eaf6;
-    color: #1a2951;
-    padding: 8px 12px;
-    border-radius: 6px;
-    font-size: 13px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 40px;
-    height: 32px;
-}
-
-.pagination-btn:hover:not(:disabled) {
-    background: #1a2951;
-    color: white;
-    border-color: #1a2951;
-}
-
-.pagination-btn:disabled {
-    background: #f8fafc;
-    color: #cbd5e0;
-    border-color: #e2e8f0;
-    cursor: not-allowed;
-    opacity: 0.6;
-}
-
-.pagination-page-btn {
-    background: #fff;
-    border: 1px solid #e3eaf6;
-    color: #1a2951;
-    padding: 6px 12px;
-    border-radius: 6px;
-    font-size: 13px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    min-width: 36px;
-    text-align: center;
-}
-
-.pagination-page-btn:hover {
-    background: #1a2951;
-    color: white;
-    border-color: #1a2951;
-}
-
-.pagination-page-btn.active {
-    background: #1a2951;
-    color: white;
-    border-color: #1a2951;
-}
-
-.pagination-pages {
-    display: flex;
-    gap: 4px;
-    align-items: center;
-}
-
-.pagination-ellipsis {
-    color: #9ba5bb;
-    font-size: 13px;
-    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 */
-@media (max-width: 1200px) {
-  .invoice-tools-row {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 15px;
-  }
-  
-  .search-box {
-    max-width: 100%;
-    min-width: auto;
-  }
-  
-  .filter-group {
-    justify-content: space-between;
-    width: 100%;
-  }
-}
-
-@media (max-width: 992px) {
-  .stats-summary {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 768px) {
-  .invoice-management-bar {
-    padding: 12px 20px;
-  }
-  
-  .invoice-tools-row {
-    padding: 15px;
-  }
-  
-  .table th, .table td {
-    font-size: 12px;
-    padding: 12px 8px;
-  }
-  
-  .badge {
-    font-size: 10px !important;
-    padding: 5px 10px 5px 6px !important;
-    min-width: 70px;
-    gap: 4px;
-  }
-  
-  .status-icon {
-    font-size: 10px;
-  }
-  
-  .btn-entry {
-    padding: 4px 8px;
-    font-size: 11px;
-  }
-  
-  .filter-group {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  
-  .filter-select {
-    min-width: auto;
-    width: 100%;
-  }
-  
-  .create-invoice-btn {
-    width: 100%;
-    justify-content: center;
-  }
-  
-  .invoice-icon {
-    width: 28px;
-    height: 28px;
-    font-size: 12px;
-  }
-  
-  /* Show mobile cards and hide table on small screens */
-  .desktop-table {
-    display: none;
-  }
-  
-  .mobile-invoice-card {
-    display: block;
-  }
-  
-  .date-range-container {
-    flex-direction: column;
-    width: 100%;
-  }
-  
-  .date-input {
-    width: 100%;
-  }
-  
-  .stats-summary {
-    grid-template-columns: 1fr;
-    margin: 15px;
-  }
-
-  .pagination-container {
-    flex-direction: column;
-    gap: 10px;
-    align-items: stretch;
-  }
-  
-  .pagination-controls {
-    justify-content: center;
-  }
-}
-
-@media (max-width: 576px) {
-  .invoice-management-title {
-    font-size: 1.1rem;
-  }
-  
-  .card-header h4 {
-    font-size: 1.1rem;
-  }
-  
-  .mobile-invoice-details {
-    grid-template-columns: 1fr;
-  }
-  
-  .mobile-invoice-actions {
-    flex-direction: column;
-  }
-}
+    html, body {
+        overflow-x: hidden !important;
+        font-family: 'Inter', sans-serif !important;
+    }
+
+    /* Invoice Management Styles */
+    .invoice-management-box {
+        background: #fff; 
+        border-radius: 17px; 
+        box-shadow: 0 7px 38px #dde3fa77, 0 2px 9px #e5e7ff80;
+        margin-bottom: 33px; 
+        margin-top: 10px; 
+    }
+
+    .invoice-management-bar {
+        display: flex; 
+        justify-content: space-between; 
+        align-items: center;
+        border-radius: 17px 17px 0 0; 
+        background: #fceeb8ff;
+        min-height: 54px; 
+        padding: 15px 26px 10px 22px; 
+        border-bottom: 1.4px solid #e8e2cf;
+        box-shadow: 0 1px 13px #ffe2a888;
+    }
+
+    .invoice-management-title {
+        font-size: 1.32rem; 
+        font-weight: 800; 
+        color: #2451af; 
+        letter-spacing: .08em;
+        display: flex; 
+        align-items: center; 
+        gap: 11px;
+        font-family: 'Inter', sans-serif;
+    }
+
+    .invoice-management-title i { 
+        font-size: 1.12em; 
+        color: #336ad3; 
+    }
+
+    /* Tools Row Styling */
+    .invoice-tools-row {
+        background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
+        padding: 25px 30px;
+        border-bottom: 1px solid #e2e8f0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 20px;
+        flex-wrap: wrap;
+    }
+
+    .search-box {
+        display: flex;
+        align-items: center;
+        background: white;
+        border-radius: 12px;
+        padding: 10px 18px;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
+        border: 1.5px solid #e2e8f0;
+        min-width: 380px;
+        flex: 1;
+        max-width: 500px;
+        transition: all 0.3s ease;
+        font-family: 'Inter', sans-serif;
+    }
+
+    .search-box:focus-within {
+        border-color: #3b82f6;
+        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
+        transform: translateY(-2px);
+    }
+
+    .search-box i {
+        color: #64748b;
+        margin-right: 12px;
+        font-size: 1.2rem;
+    }
+
+    .search-box input {
+        border: none;
+        outline: none;
+        background: transparent;
+        width: 100%;
+        font-size: 15px;
+        color: #334155;
+        font-family: 'Inter', sans-serif;
+        font-weight: 400;
+    }
+
+    .search-box input::placeholder {
+        color: #94a3b8;
+        font-family: 'Inter', sans-serif;
+    }
+
+    /* .search-btn {
+        background: linear-gradient(90deg, #226ad6, #46b4fd 123%);
+        border: none;
+        border-radius: 8px;
+        padding: 5px 10px;
+        color: white;
+        font-weight: 600;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-left: 3px;
+        font-family: 'Inter', sans-serif;
+        white-space: nowrap;
+    } */
+
+    .search-btn:hover {
+        background: linear-gradient(90deg, #3264f8, #3acfff 140%);
+        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
+        transform: translateY(-1px);
+    }
+
+    .filter-group {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+        flex-wrap: wrap;
+    }
+
+    .filter-select {
+        background: white;
+        border: 1.5px solid #e2e8f0;
+        border-radius: 10px;
+        padding: 10px 15px;
+        font-size: 14px;
+        color: #334155;
+        outline: none;
+        min-width: 160px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+        font-family: 'Inter', sans-serif;
+        font-weight: 400;
+        transition: all 0.3s ease;
+    }
+
+    .filter-select:focus {
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    .create-invoice-btn {
+        background: linear-gradient(90deg, #226ad6, #46b4fd 123%);
+        padding: 12px 28px; 
+        font-weight: 600; 
+        border: none; 
+        border-radius: 10px; 
+        color: #fff;
+        font-size: 15px; 
+        box-shadow: 0 2px 13px #dde7fa42;
+        transition: all 0.3s ease;
+        display: flex; 
+        align-items: center; 
+        gap: 8px; 
+        font-family: 'Inter', sans-serif;
+        text-decoration: none;
+        white-space: nowrap;
+    }
+
+    .create-invoice-btn:hover {
+        background: linear-gradient(90deg, #3264f8, #3acfff 140%);
+        box-shadow: 0 4px 25px #5ab8f880;
+        color: #fff;
+        text-decoration: none;
+        transform: translateY(-2px);
+    }
+
+    .invoice-management-main { 
+        background: #fff; 
+        border-radius: 0 0 17px 17px; 
+        padding: 0;
+    }
+
+    /* Table Styling - CENTERED CONTENT */
+    .table-container {
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        scroll-behavior: smooth;
+        border-radius: 0 0 17px 17px;
+    }
+
+    .table-container::-webkit-scrollbar {
+        height: 8px;
+    }
+    .table-container::-webkit-scrollbar-thumb {
+        background: linear-gradient(90deg, #a7b8ff, #6c8eff);
+        border-radius: 10px;
+    }
+    .table-container::-webkit-scrollbar-thumb:hover {
+        background: linear-gradient(90deg, #5a78ff, #3f63e0);
+    }
+    .table-container::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 10px;
+    }
+
+    .table {
+        width: 100%;
+        min-width: 1200px;
+        border-collapse: separate;
+        border-spacing: 0 12px;
+        margin-bottom: 0;
+        font-family: 'Inter', sans-serif;
+    }
+
+    /* Center all table content */
+    .table thead tr {
+        background: #feebbe !important;
+    }
+
+    .table thead th:first-child {
+        border-top-left-radius: 17px;
+    }
+    .table thead th:last-child {
+        border-top-right-radius: 17px;
+    }
+
+    .table thead th {
+        background: transparent !important;
+        border: none;
+        font-weight: 700; 
+        color: #343535; 
+        letter-spacing: 0.02em; 
+        font-size: 14px;
+        padding: 20px 15px;
+        white-space: nowrap;
+        position: relative;
+        border-bottom: 2px solid #e8e2cf;
+        text-align: center !important;
+        vertical-align: middle;
+        font-family: 'Inter', sans-serif;
+    }
+
+    .table thead th:first-child { 
+        padding-left: 30px;
+    }
+    .table thead th:last-child { 
+        padding-right: 30px;
+    }
+
+    /* Soft blue background for ALL table rows */
+    .table-striped tbody tr {
+        background: #f0f8ff !important;
+        transition: all 0.2s ease;
+        border-radius: 12px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    }
+
+    .table-striped tbody tr:hover {
+        background: #e6f3ff !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        transform: translateY(-1px);
+    }
+
+    /* Remove striped pattern - all rows same soft blue */
+    .table-striped tbody tr:nth-of-type(odd),
+    .table-striped tbody tr:nth-of-type(even) { 
+        background: #f0f8ff !important;
+    }
+
+    /* Center all table cells with proper spacing */
+    .table td {
+        padding: 18px 15px;
+        border: none;
+        vertical-align: middle;
+        white-space: nowrap;
+        font-size: 14px;
+        color: #4a5568;
+        text-align: center !important;
+        border-top: 1px solid transparent;
+        border-bottom: 1px solid transparent;
+        font-family: 'Inter', sans-serif;
+        font-weight: 400;
+    }
+
+    /* First and last cell rounded corners */
+    .table td:first-child {
+        padding-left: 30px;
+        font-weight: 600;
+        color: #2d3748;
+        border-top-left-radius: 12px;
+        border-bottom-left-radius: 12px;
+    }
+
+    .table td:last-child {
+        padding-right: 30px;
+        border-top-right-radius: 12px;
+        border-bottom-right-radius: 12px;
+    }
+
+    /* Invoice Number with Curved Boxes */
+    .invoice-number-cell {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 15px;
+        padding: 10px 0;
+    }
+
+    .invoice-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-size: 16px;
+        flex-shrink: 0;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+        font-weight: bold;
+        border: 2px solid rgba(255,255,255,0.3);
+    }
+
+    /* Different curved background colors for each invoice */
+    .invoice-icon-1 { 
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+        border-radius: 10px;
+    }
+    .invoice-icon-2 { 
+        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); 
+        border-radius: 10px;
+    }
+    .invoice-icon-3 { 
+        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); 
+        border-radius: 10px;
+    }
+    .invoice-icon-4 { 
+        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); 
+        border-radius: 10px;
+    }
+    .invoice-icon-5 { 
+        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); 
+        border-radius: 10px;
+    }
+    .invoice-icon-6 { 
+        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); 
+        border-radius: 10px;
+    }
+    .invoice-icon-7 { 
+        background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%); 
+        border-radius: 10px;
+    }
+    .invoice-icon-8 { 
+        background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%); 
+        border-radius: 10px;
+    }
+
+    .invoice-number-link {
+        color: #2469d6;
+        font-weight: 600;
+        text-decoration: none;
+        transition: all 0.3s ease;
+        font-size: 14px;
+        text-align: center;
+        font-family: 'Inter', sans-serif;
+    }
+
+    .invoice-number-link:hover {
+        color: #1a4fb3;
+        text-decoration: none;
+    }
+
+    /* Badge Styling - Centered with custom backgrounds and icons */
+    .badge {
+        font-size: 12px !important;
+        font-weight: 600 !important;
+        padding: 8px 15px 8px 12px !important;
+        border-radius: 20px !important;
+        text-transform: uppercase;
+        letter-spacing: 0.3px;
+        display: inline-flex !important;
+        align-items: center;
+        justify-content: center;
+        background-size: cover !important;
+        background-position: center !important;
+        color: #fff !important;
+        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+        border: 2px solid transparent !important;
+        min-width: 45px;
+        box-sizing: border-box;
+        line-height: 1.2;
+        gap: 6px;
+        font-family: 'Inter', sans-serif;
+    }
+
+    /* Status icons */
+    .status-icon {
+        font-size: 13px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Custom status badge backgrounds with icons */
+    .badge-paid { 
+        background: url('/images/status-bg-paid.png') !important;
+    }
+
+    .badge-pending { 
+        background: url('/images/status-bg-pending.png') !important;
+    }
+
+    .badge-overdue { 
+        background: url('/images/status-bg-overdue.png') !important;
+    }
+
+    /* Fallback colors if images don't load - ALL WITH SAME SIZE */
+    .badge.badge-paid { 
+        background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
+        color: #065f46 !important;
+        border-color: #10b981 !important;
+        width: 98px;
+    }
+
+    .badge.badge-pending { 
+        background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
+        color: #d97706 !important;
+        border-color: #f59e0b !important;
+    }
+
+    .badge.badge-overdue { 
+        background: linear-gradient(135deg, #e9d5ff, #c4b5fd) !important;
+        color: #6b21a8 !important;
+        border-color: #8b5cf6 !important;
+    }
+
+    /* Entry Button - Centered */
+    .btn-entry {
+        background: linear-gradient(135deg, #3492f8 55%, #1256cc 110%);
+        border: none;
+        border-radius: 8px;
+        padding: 8px 16px;
+        font-weight: 600;
+        font-size: 13px;
+        transition: all 0.3s ease;
+        box-shadow: 0 1px 4px rgba(52, 146, 248, 0.3);
+        color: white;
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        text-decoration: none;
+        font-family: 'Inter', sans-serif;
+    }
+
+    .btn-entry:hover {
+        background: linear-gradient(135deg, #46b4fd 55%, #226ad6 110%);
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(52, 146, 248, 0.4);
+        color: white;
+        text-decoration: none;
+    }
+
+    /* Amount Styling - Centered */
+    .amount-cell {
+        font-weight: 600;
+        color: #194073;
+        font-size: 14px;
+        text-align: center !important;
+        font-family: 'Inter', sans-serif;
+    }
+
+    .gst-cell {
+        font-weight: 500;
+        color: #63709b;
+        font-size: 14px;
+        text-align: center !important;
+        font-family: 'Inter', sans-serif;
+    }
+
+    /* Date Styling - Centered */
+    .date-cell {
+        font-size: 13px;
+        color: #718096;
+        font-weight: 500;
+        text-align: center !important;
+        font-family: 'Inter', sans-serif;
+    }
+
+    /* Customer Name Styling - Centered */
+    .customer-cell {
+        font-weight: 500;
+        color: #2d3748;
+        font-size: 14px;
+        max-width: 120px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: center !important;
+        margin: 0 auto;
+        font-family: 'Inter', sans-serif;
+    }
+
+    /* Modal Styling */
+    .modal.fade .modal-dialog {
+        transition: transform 0.3s ease-out;
+        transform: translate(0, -50px);
+    }
+
+    .modal.show .modal-dialog {
+        transform: none;
+    }
+
+    .modal-content {
+        border: none;
+        border-radius: 20px;
+        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
+        overflow: hidden;
+    }
+
+    .modal-header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-bottom: none;
+        padding: 15px 25px;
+        border-radius: 20px 20px 0 0;
+    }
+
+    .modal-title {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: white;
+        margin: 0;
+        font-family: 'Inter', sans-serif;
+    }
+
+    .modal-header .btn-close {
+        filter: invert(1);
+        opacity: 0.8;
+        transition: all 0.3s ease;
+    }
+
+    .modal-header .btn-close:hover {
+        opacity: 1;
+        transform: rotate(90deg);
+    }
+
+    .modal-body {
+        padding: 30px;
+        background: #f8fafc;
+        max-height: 70vh;
+        overflow-y: auto;
+    }
+
+    /* Date Range Picker Styles */
+    .date-range-container {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .date-input {
+        background: white;
+        border: 1.5px solid #e2e8f0;
+        border-radius: 8px;
+        padding: 10px 12px;
+        font-size: 14px;
+        color: #334155;
+        outline: none;
+        min-width: 140px;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.04);
+        font-family: 'Inter', sans-serif;
+    }
+
+    .date-input:focus {
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    .date-separator {
+        color: #64748b;
+        font-weight: 500;
+        font-family: 'Inter', sans-serif;
+    }
+
+    /* Stats Summary - Centered */
+    .stats-summary {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        gap: 15px;
+        margin: 25px 30px;
+        padding: 0;
+    }
+
+    .stat-card {
+        background: white;
+        padding: 18px;
+        border-radius: 12px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+        text-align: center;
+        border-left: 3px solid #667eea;
+    }
+
+    .stat-value {
+        font-size: 1.6rem;
+        font-weight: 700;
+        color: #2d3748;
+        margin-bottom: 5px;
+        text-align: center;
+        font-family: 'Inter', sans-serif;
+    }
+
+    .stat-label {
+        font-size: 0.9rem;
+        color: #718096;
+        font-weight: 600;
+        text-align: center;
+        font-family: 'Inter', sans-serif;
+    }
+
+    /* Column Headers - Centered */
+    .column-header {
+        text-align: center !important;
+        font-weight: 600;
+        color: #2d3748;
+        font-family: 'Inter', sans-serif;
+    }
+
+    /* Remove extra spacing */
+    .no-extra-space {
+        margin: 0;
+        padding: 0;
+    }
+
+    .compact-view {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+    }
+
+    /* Ensure all content in table is centered */
+    .table tbody tr td {
+        text-align: center !important;
+    }
+
+    .table tbody tr td .invoice-number-cell {
+        justify-content: center;
+    }
+
+    .table tbody tr td .btn-entry {
+        margin: 0 auto;
+    }
+
+    /* Empty State - Centered */
+    .text-muted {
+        color: #8a9bb9 !important;
+        font-style: italic;
+        padding: 30px !important;
+        text-align: center;
+        font-size: 14px;
+        font-family: 'Inter', sans-serif;
+    }
+
+    /* Card Styling */
+    .card {
+        border-radius: 0 0 17px 17px; 
+        border: none; 
+        margin-bottom: 0 !important;
+        box-shadow: none;
+    }
+
+    .card-header {
+        background: #f8f9fa !important;
+        border-bottom: 1px solid #e9ecef;
+        border-radius: 0 !important;
+        padding: 18px 30px;
+        text-align: center;
+    }
+
+    .card-header h4 {
+        margin: 0;
+        color: #2451af;
+        font-weight: 700;
+        font-size: 1.3rem;
+        text-align: center;
+        font-family: 'Inter', sans-serif;
+    }
+
+    /* Mobile Responsive Styles */
+    .mobile-invoice-card {
+        display: none;
+        background: #f0f8ff;
+        border-radius: 12px;
+        padding: 18px;
+        margin-bottom: 15px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        border-left: 4px solid #667eea;
+    }
+
+    .mobile-invoice-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #e2e8f0;
+    }
+
+    .mobile-invoice-number {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .mobile-invoice-icon {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-size: 14px;
+        font-weight: bold;
+    }
+
+    .mobile-invoice-number-text {
+        font-weight: 600;
+        color: #2469d6;
+        font-size: 15px;
+        font-family: 'Inter', sans-serif;
+    }
+
+    .mobile-invoice-status {
+        font-size: 11px !important;
+        padding: 6px 12px 6px 8px !important;
+        min-width: 80px;
+    }
+
+    .mobile-invoice-details {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 12px;
+        margin-bottom: 15px;
+    }
+
+    .mobile-detail-item {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .mobile-detail-label {
+        font-size: 12px;
+        color: #718096;
+        margin-bottom: 3px;
+        font-family: 'Inter', sans-serif;
+    }
+
+    .mobile-detail-value {
+        font-size: 14px;
+        font-weight: 500;
+        color: #2d3748;
+        font-family: 'Inter', sans-serif;
+    }
+
+    .mobile-invoice-actions {
+        display: flex;
+        justify-content: space-between;
+        gap: 10px;
+    }
+
+    .mobile-action-btn {
+        flex: 1;
+        text-align: center;
+        padding: 8px 12px;
+        font-size: 13px;
+        border-radius: 8px;
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        font-family: 'Inter', sans-serif;
+    }
+
+    .mobile-action-btn.view {
+        background: #f0f8ff;
+        color: #2469d6;
+        border: 1px solid #2469d6;
+    }
+
+    .mobile-action-btn.entry {
+        background: linear-gradient(135deg, #3492f8 55%, #1256cc 110%);
+        color: white;
+        border: none;
+    }
+
+    /* ---------- Pagination Styles ---------- */
+    .pagination-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 20px;
+        padding: 15px 30px;
+        border-top: 1px solid #eef3fb;
+    }
+
+    .pagination-info {
+        font-size: 14px;
+        color: #9ba5bb;
+        font-weight: 600;
+        font-family: 'Inter', sans-serif;
+    }
+
+    .pagination-controls {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .pagination-btn {
+        background: #fff;
+        border: 1px solid #e3eaf6;
+        color: #1a2951;
+        padding: 10px 15px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 45px;
+        height: 38px;
+        font-family: 'Inter', sans-serif;
+    }
+
+    .pagination-btn:hover:not(:disabled) {
+        background: #1a2951;
+        color: white;
+        border-color: #1a2951;
+    }
+
+    .pagination-btn:disabled {
+        background: #f8fafc;
+        color: #cbd5e0;
+        border-color: #e2e8f0;
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+
+    .pagination-page-btn {
+        background: #fff;
+        border: 1px solid #e3eaf6;
+        color: #1a2951;
+        padding: 8px 15px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        min-width: 40px;
+        text-align: center;
+        font-family: 'Inter', sans-serif;
+    }
+
+    .pagination-page-btn:hover {
+        background: #1a2951;
+        color: white;
+        border-color: #1a2951;
+    }
+
+    .pagination-page-btn.active {
+        background: #1a2951;
+        color: white;
+        border-color: #1a2951;
+    }
+
+    .pagination-pages {
+        display: flex;
+        gap: 6px;
+        align-items: center;
+    }
+
+    .pagination-ellipsis {
+        color: #9ba5bb;
+        font-size: 14px;
+        padding: 0 6px;
+        font-family: 'Inter', sans-serif;
+    }
+
+    /* Image-based pagination buttons */
+    .pagination-img-btn {
+        background: #fff;
+        border: 1px solid #e3eaf6;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 45px;
+        height: 38px;
+        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: 18px;
+        height: 18px;
+        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 */
+    @media (max-width: 1200px) {
+        .invoice-tools-row {
+            flex-direction: column;
+            align-items: stretch;
+            gap: 20px;
+        }
+        
+        .search-box {
+            max-width: 100%;
+            min-width: auto;
+        }
+        
+        .filter-group {
+            justify-content: space-between;
+            width: 100%;
+        }
+    }
+
+    @media (max-width: 992px) {
+        .stats-summary {
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
+
+    @media (max-width: 768px) {
+        .invoice-management-bar {
+            padding: 15px 20px;
+        }
+        
+        .invoice-tools-row {
+            padding: 20px;
+        }
+        
+        .table th, .table td {
+            font-size: 13px;
+            padding: 15px 10px;
+        }
+        
+        .badge {
+            font-size: 11px !important;
+            padding: 6px 12px 6px 8px !important;
+            min-width: 75px;
+            gap: 4px;
+        }
+        
+        .status-icon {
+            font-size: 11px;
+        }
+        
+        .btn-entry {
+            padding: 6px 12px;
+            font-size: 12px;
+        }
+        
+        .filter-group {
+            flex-direction: column;
+            align-items: stretch;
+        }
+        
+        .filter-select {
+            min-width: auto;
+            width: 100%;
+        }
+        
+        .create-invoice-btn {
+            width: 100%;
+            justify-content: center;
+        }
+        
+        .invoice-icon {
+            width: 32px;
+            height: 32px;
+            font-size: 14px;
+        }
+        
+        /* Show mobile cards and hide table on small screens */
+        .desktop-table {
+            display: none;
+        }
+        
+        .mobile-invoice-card {
+            display: block;
+        }
+        
+        .date-range-container {
+            flex-direction: column;
+            width: 100%;
+        }
+        
+        .date-input {
+            width: 100%;
+        }
+        
+        .stats-summary {
+            grid-template-columns: 1fr;
+            margin: 20px;
+        }
+
+        .pagination-container {
+            flex-direction: column;
+            gap: 12px;
+            align-items: stretch;
+        }
+        
+        .pagination-controls {
+            justify-content: center;
+        }
+    }
+
+    @media (max-width: 576px) {
+        .invoice-management-title {
+            font-size: 1.1rem;
+        }
+        
+        .card-header h4 {
+            font-size: 1.1rem;
+        }
+        
+        .mobile-invoice-details {
+            grid-template-columns: 1fr;
+        }
+        
+        .mobile-invoice-actions {
+            flex-direction: column;
+        }
+        
+        .search-box {
+            min-width: auto;
+            padding: 10px 15px;
+        }
+        
+        .search-btn {
+            padding: 8px 15px;
+            font-size: 13px;
+        }
+    }
 </style>
 
 <div class="container-fluid py-3">
-  <!-- INVOICE MANAGEMENT -->
-  <div class="invoice-management-box">
-    <div class="invoice-management-bar">
-      <span class="invoice-management-title">
-        <i class="bi bi-receipt"></i> Invoice Management
-      </span>
-    </div>
-
-    <!-- TOOLS ROW - Search, Filter, Create Button -->
-    <div class="invoice-tools-row">
-      <!-- Search Box -->
-      <div class="search-box">
-        <i class="bi bi-search"></i>
-        <input type="text" id="invoiceSearch" placeholder="Search by invoice number, customer name...">
-      </div>
-
-      <!-- Filter Group -->
-      <div class="filter-group">
-        <select class="filter-select" id="statusFilter">
-          <option value="">All Status</option>
-          <option value="paid">Paid</option>
-          <option value="pending">Pending</option>
-          <option value="overdue">Overdue</option>
-        </select>
-
-        <!-- Date Range Picker -->
-        <div class="date-range-container">
-          <input type="date" class="date-input" id="startDate">
-          <span class="date-separator">to</span>
-          <input type="date" class="date-input" id="endDate">
+    <!-- INVOICE MANAGEMENT -->
+    <div class="invoice-management-box">
+        <div class="invoice-management-bar">
+            <span class="invoice-management-title">
+                <i class="bi bi-receipt"></i> Invoice Management
+            </span>
         </div>
-      </div>
 
-      <!-- Create Invoice Button -->
-      <a href="{{ route('admin.invoices.create') }}" class="create-invoice-btn">
-        <i class="bi bi-plus-circle"></i> Create Invoice
-      </a>
-    </div>
+        <!-- TOOLS ROW - Search, Filter, Create Button -->
+        <div class="invoice-tools-row">
+            <!-- Search Box with Button -->
+            <div style="display: flex; align-items: center; flex: 1; max-width: 500px; min-width: 380px;">
+                <div class="search-box">
+                    <i class="bi bi-search"></i>
+                    <input type="text" id="invoiceSearch" placeholder="Search by invoice number, customer name...">
+                </div>
+                
+                </button>
+            </div>
 
-    <div class="invoice-management-main no-extra-space">
-      <!-- Quick Stats Summary -->
-      <div class="stats-summary">
-        <div class="stat-card">
-          <div class="stat-value">{{ $invoices->count() }}</div>
-          <div class="stat-label">Total Invoices</div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-value">₹{{ number_format($invoices->sum('final_amount_with_gst'), 2) }}</div>
-          <div class="stat-label">Total Revenue</div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-value">{{ $invoices->where('status', 'paid')->count() }}</div>
-          <div class="stat-label">Paid Invoices</div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-value">{{ $invoices->where('status', 'pending')->count() }}</div>
-          <div class="stat-label">Pending Invoices</div>
-        </div>
-      </div>
+            <!-- Filter Group -->
+            <div class="filter-group">
+                <select class="filter-select" id="statusFilter">
+                    <option value="">All Status</option>
+                    <option value="paid">Paid</option>
+                    <option value="pending">Pending</option>
+                    <option value="overdue">Overdue</option>
+                </select>
 
-      <!-- ALL INVOICES - Desktop Table -->
-      <div class="card shadow-sm desktop-table">
-        <div class="card-header bg-light d-flex justify-content-between align-items-center compact-view">
-          <h4 class="mb-0">All Invoices</h4>
-          <span class="text-muted" style="font-size: 12px;">
-            {{ $invoices->count() }} invoices
-          </span>
-        </div>
-        
-        <div class="card-body p-0">
-          <div class="table-container">
-            <table class="table table-striped align-middle" id="invoicesTable">
-              <thead class="table-light">
-                <tr>
-                  <th class="column-header">#</th>
-                  <th class="column-header">Invoice Number</th>
-                  <th class="column-header">Customer</th>
-                  <th class="column-header">Final Amount</th>
-                  <th class="column-header">GST %</th>
-                  <th class="column-header">Total w/GST</th>
-                  <th class="column-header">Status</th>
-                  <th class="column-header">Invoice Date</th>
-                  <th class="column-header">Due Date</th>
-                  <th class="column-header">Action</th>
-                </tr>
-              </thead>
+                <!-- Date Range Picker -->
+                <div class="date-range-container">
+                    <input type="date" class="date-input" id="startDate">
+                    <span class="date-separator">to</span>
+                    <input type="date" class="date-input" id="endDate">
+                </div>
+            </div>
 
-              <tbody id="invoicesTableBody">
+            <!-- Create Invoice Button -->
+            <!-- <a href="{{ route('admin.invoices.create') }}" class="create-invoice-btn">
+                <i class="bi bi-plus-circle"></i> Create Invoice
+            </a> -->
+        </div>
+
+        <div class="invoice-management-main no-extra-space">
+            <!-- Quick Stats Summary -->
+            <div class="stats-summary">
+                <div class="stat-card">
+                    <div class="stat-value">{{ $invoices->count() }}</div>
+                    <div class="stat-label">Total Invoices</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value">₹{{ number_format($invoices->sum('final_amount_with_gst'), 2) }}</div>
+                    <div class="stat-label">Total Revenue</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value">{{ $invoices->where('status', 'paid')->count() }}</div>
+                    <div class="stat-label">Paid Invoices</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value">{{ $invoices->where('status', 'pending')->count() }}</div>
+                    <div class="stat-label">Pending Invoices</div>
+                </div>
+            </div>
+
+            <!-- ALL INVOICES - Desktop Table -->
+            <div class="card shadow-sm desktop-table">
+                <div class="card-header bg-light d-flex justify-content-between align-items-center compact-view">
+                    <h4 class="mb-0">All Invoices</h4>
+                    <span class="text-muted" style="font-size: 13px;">
+                        {{ $invoices->count() }} invoices
+                    </span>
+                </div>
+                
+                <div class="card-body p-0">
+                    <div class="table-container">
+                        <table class="table table-striped align-middle" id="invoicesTable">
+                            <thead class="table-light">
+                                <tr>
+                                    <th class="column-header">#</th>
+                                    <th class="column-header">Invoice Number</th>
+                                    <th class="column-header">Customer</th>
+                                    <th class="column-header">Final Amount</th>
+                                    <th class="column-header">GST %</th>
+                                    <th class="column-header">Total w/GST</th>
+                                    <th class="column-header">Status</th>
+                                    <th class="column-header">Invoice Date</th>
+                                    <th class="column-header">Due Date</th>
+                                    <th class="column-header">Action</th>
+                                </tr>
+                            </thead>
+
+                            <tbody id="invoicesTableBody">
+                                @php
+                                    $totalInvoices = $invoices->count();
+                                    $sortedInvoices = $invoices->sortByDesc('created_at'); // Latest first
+                                @endphp
+                                
+                                @forelse($sortedInvoices as $i => $invoice)
+                                <tr>
+                                    <td>{{ $totalInvoices - $i }}</td>
+
+                                    <td>
+                                        <div class="invoice-number-cell">
+                                            <div class="invoice-icon invoice-icon-{{ (($totalInvoices - $i) % 8) + 1 }}">
+                                                <i class="bi bi-file-earmark-text"></i>
+                                            </div>
+                                            <a href="#" class="invoice-number-link open-invoice-popup" data-id="{{ $invoice->id }}">
+                                                {{ $invoice->invoice_number }}
+                                            </a>
+                                        </div>
+                                    </td>
+
+                                    <td class="customer-cell">{{ $invoice->customer_name }}</td>
+
+                                    <td class="amount-cell">₹{{ number_format($invoice->final_amount, 2) }}</td>
+                                    <td class="gst-cell">{{ $invoice->gst_percent }}%</td>
+                                    <td class="amount-cell">₹{{ number_format($invoice->final_amount_with_gst, 2) }}</td>
+
+                                    <td>
+                                        <span class="badge badge-{{ $invoice->status }}">
+                                            @if($invoice->status == 'paid')
+                                                <i class="bi bi-check-circle-fill status-icon"></i>
+                                            @elseif($invoice->status == 'pending')
+                                                <i class="bi bi-clock-fill status-icon"></i>
+                                            @elseif($invoice->status == 'overdue')
+                                                <i class="bi bi-exclamation-triangle-fill status-icon"></i>
+                                            @endif
+                                            {{ ucfirst($invoice->status) }}
+                                        </span>
+                                    </td>
+
+                                    <td class="date-cell">{{ $invoice->invoice_date }}</td>
+                                    <td class="date-cell">{{ $invoice->due_date }}</td>
+
+                                    <td>
+                                        <a href="{{ route('admin.invoices.edit', $invoice->id) }}" 
+                                        class="btn-entry">
+                                            <i class="bi bi-pencil"></i> Entry
+                                        </a>
+                                    </td>
+                                </tr>
+                                @empty
+                                <tr>
+                                    <td colspan="10" class="text-muted">No invoices found</td>
+                                </tr>
+                                @endforelse
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+            <!-- ALL INVOICES - Mobile Cards -->
+            <div class="mobile-invoices-container" id="mobileInvoicesContainer">
                 @php
                     $totalInvoices = $invoices->count();
                     $sortedInvoices = $invoices->sortByDesc('created_at'); // Latest first
                 @endphp
                 
                 @forelse($sortedInvoices as $i => $invoice)
-                <tr>
-                  <td>{{ $totalInvoices - $i }}</td>
-
-                  <td>
-                    <div class="invoice-number-cell">
-                      <div class="invoice-icon invoice-icon-{{ (($totalInvoices - $i) % 8) + 1 }}">
-                        <i class="bi bi-file-earmark-text"></i>
-                      </div>
-                      <a href="#" class="invoice-number-link open-invoice-popup" data-id="{{ $invoice->id }}">
-                        {{ $invoice->invoice_number }}
-                      </a>
+                <div class="mobile-invoice-card" data-invoice-id="{{ $invoice->id }}">
+                    <div class="mobile-invoice-header">
+                        <div class="mobile-invoice-number">
+                            <div class="mobile-invoice-icon invoice-icon-{{ (($totalInvoices - $i) % 8) + 1 }}">
+                                <i class="bi bi-file-earmark-text"></i>
+                            </div>
+                            <span class="mobile-invoice-number-text">{{ $invoice->invoice_number }}</span>
+                        </div>
+                        <span class="badge badge-{{ $invoice->status }} mobile-invoice-status">
+                            @if($invoice->status == 'paid')
+                                <i class="bi bi-check-circle-fill status-icon"></i>
+                            @elseif($invoice->status == 'pending')
+                                <i class="bi bi-clock-fill status-icon"></i>
+                            @elseif($invoice->status == 'overdue')
+                                <i class="bi bi-exclamation-triangle-fill status-icon"></i>
+                            @endif
+                            {{ ucfirst($invoice->status) }}
+                        </span>
                     </div>
-                  </td>
-
-                  <td class="customer-cell">{{ $invoice->customer_name }}</td>
-
-                  <td class="amount-cell">₹{{ number_format($invoice->final_amount, 2) }}</td>
-                  <td class="gst-cell">{{ $invoice->gst_percent }}%</td>
-                  <td class="amount-cell">₹{{ number_format($invoice->final_amount_with_gst, 2) }}</td>
-
-                  <td>
-                    <span class="badge badge-{{ $invoice->status }}">
-                      @if($invoice->status == 'paid')
-                        <i class="bi bi-check-circle-fill status-icon"></i>
-                      @elseif($invoice->status == 'pending')
-                        <i class="bi bi-clock-fill status-icon"></i>
-                      @elseif($invoice->status == 'overdue')
-                        <i class="bi bi-exclamation-triangle-fill status-icon"></i>
-                      @endif
-                      {{ ucfirst($invoice->status) }}
-                    </span>
-                  </td>
-
-                  <td class="date-cell">{{ $invoice->invoice_date }}</td>
-                  <td class="date-cell">{{ $invoice->due_date }}</td>
-
-                  <td>
-                    <a href="{{ route('admin.invoices.edit', $invoice->id) }}" 
-                       class="btn-entry">
-                      <i class="bi bi-pencil"></i> Entry
-                    </a>
-                  </td>
-                </tr>
+                    
+                    <div class="mobile-invoice-details">
+                        <div class="mobile-detail-item">
+                            <span class="mobile-detail-label">Customer</span>
+                            <span class="mobile-detail-value">{{ $invoice->customer_name }}</span>
+                        </div>
+                        <div class="mobile-detail-item">
+                            <span class="mobile-detail-label">Amount</span>
+                            <span class="mobile-detail-value">₹{{ number_format($invoice->final_amount, 2) }}</span>
+                        </div>
+                        <div class="mobile-detail-item">
+                            <span class="mobile-detail-label">GST</span>
+                            <span class="mobile-detail-value">{{ $invoice->gst_percent }}%</span>
+                        </div>
+                        <div class="mobile-detail-item">
+                            <span class="mobile-detail-label">Total</span>
+                            <span class="mobile-detail-value">₹{{ number_format($invoice->final_amount_with_gst, 2) }}</span>
+                        </div>
+                        <div class="mobile-detail-item">
+                            <span class="mobile-detail-label">Invoice Date</span>
+                            <span class="mobile-detail-value">{{ $invoice->invoice_date }}</span>
+                        </div>
+                        <div class="mobile-detail-item">
+                            <span class="mobile-detail-label">Due Date</span>
+                            <span class="mobile-detail-value">{{ $invoice->due_date }}</span>
+                        </div>
+                    </div>
+                    
+                    <div class="mobile-invoice-actions">
+                        <a href="#" class="mobile-action-btn view open-invoice-popup" data-id="{{ $invoice->id }}">
+                            <i class="bi bi-eye"></i> View
+                        </a>
+                        <a href="{{ route('admin.invoices.edit', $invoice->id) }}" class="mobile-action-btn entry">
+                            <i class="bi bi-pencil"></i> Entry
+                        </a>
+                    </div>
+                </div>
                 @empty
-                <tr>
-                  <td colspan="10" class="text-muted">No invoices found</td>
-                </tr>
+                <div class="text-muted text-center py-4">No invoices found</div>
                 @endforelse
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
+            </div>
 
-      <!-- ALL INVOICES - Mobile Cards -->
-      <div class="mobile-invoices-container" id="mobileInvoicesContainer">
-        @php
-            $totalInvoices = $invoices->count();
-            $sortedInvoices = $invoices->sortByDesc('created_at'); // Latest first
-        @endphp
-        
-        @forelse($sortedInvoices as $i => $invoice)
-        <div class="mobile-invoice-card" data-invoice-id="{{ $invoice->id }}">
-          <div class="mobile-invoice-header">
-            <div class="mobile-invoice-number">
-              <div class="mobile-invoice-icon invoice-icon-{{ (($totalInvoices - $i) % 8) + 1 }}">
-                <i class="bi bi-file-earmark-text"></i>
-              </div>
-              <span class="mobile-invoice-number-text">{{ $invoice->invoice_number }}</span>
+            <!-- Pagination Controls -->
+            <div class="pagination-container">
+                <div class="pagination-info" id="pageInfo">Showing 1 to {{ $invoices->count() }} of {{ $invoices->count() }} entries</div>
+                <div class="pagination-controls">
+                    <button class="pagination-img-btn" id="prevPageBtn" title="Previous page" disabled>
+                        <!-- Left arrow SVG -->
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </button>
+                    <div class="pagination-pages" id="paginationPages">
+                        <!-- Page numbers will be inserted here -->
+                    </div>
+                    <button class="pagination-img-btn" id="nextPageBtn" title="Next page" disabled>
+                        <!-- Right arrow SVG -->
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </button>
+                </div>
             </div>
-            <span class="badge badge-{{ $invoice->status }} mobile-invoice-status">
-              @if($invoice->status == 'paid')
-                <i class="bi bi-check-circle-fill status-icon"></i>
-              @elseif($invoice->status == 'pending')
-                <i class="bi bi-clock-fill status-icon"></i>
-              @elseif($invoice->status == 'overdue')
-                <i class="bi bi-exclamation-triangle-fill status-icon"></i>
-              @endif
-              {{ ucfirst($invoice->status) }}
-            </span>
-          </div>
-          
-          <div class="mobile-invoice-details">
-            <div class="mobile-detail-item">
-              <span class="mobile-detail-label">Customer</span>
-              <span class="mobile-detail-value">{{ $invoice->customer_name }}</span>
-            </div>
-            <div class="mobile-detail-item">
-              <span class="mobile-detail-label">Amount</span>
-              <span class="mobile-detail-value">₹{{ number_format($invoice->final_amount, 2) }}</span>
-            </div>
-            <div class="mobile-detail-item">
-              <span class="mobile-detail-label">GST</span>
-              <span class="mobile-detail-value">{{ $invoice->gst_percent }}%</span>
-            </div>
-            <div class="mobile-detail-item">
-              <span class="mobile-detail-label">Total</span>
-              <span class="mobile-detail-value">₹{{ number_format($invoice->final_amount_with_gst, 2) }}</span>
-            </div>
-            <div class="mobile-detail-item">
-              <span class="mobile-detail-label">Invoice Date</span>
-              <span class="mobile-detail-value">{{ $invoice->invoice_date }}</span>
-            </div>
-            <div class="mobile-detail-item">
-              <span class="mobile-detail-label">Due Date</span>
-              <span class="mobile-detail-value">{{ $invoice->due_date }}</span>
-            </div>
-          </div>
-          
-          <div class="mobile-invoice-actions">
-            <a href="#" class="mobile-action-btn view open-invoice-popup" data-id="{{ $invoice->id }}">
-              <i class="bi bi-eye"></i> View
-            </a>
-            <a href="{{ route('admin.invoices.edit', $invoice->id) }}" class="mobile-action-btn entry">
-              <i class="bi bi-pencil"></i> Entry
-            </a>
-          </div>
         </div>
-        @empty
-        <div class="text-muted text-center py-4">No invoices found</div>
-        @endforelse
-      </div>
-
-      <!-- Pagination Controls -->
-      <div class="pagination-container">
-          <div class="pagination-info" id="pageInfo">Showing 1 to {{ $invoices->count() }} of {{ $invoices->count() }} entries</div>
-          <div class="pagination-controls">
-              <button class="pagination-img-btn" id="prevPageBtn" title="Previous page" disabled>
-                  <!-- Left arrow SVG -->
-                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  </svg>
-              </button>
-              <div class="pagination-pages" id="paginationPages">
-                  <!-- Page numbers will be inserted here -->
-              </div>
-              <button class="pagination-img-btn" id="nextPageBtn" title="Next page" disabled>
-                  <!-- Right arrow SVG -->
-                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  </svg>
-              </button>
-          </div>
-      </div>
     </div>
-  </div>
 </div>
 
 {{-- POPUP MODAL --}}
 <div class="modal fade" id="invoiceModal" tabindex="-1">
-  <div class="modal-dialog modal-xl modal-dialog-scrollable">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title">Invoice Details</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-      </div>
+    <div class="modal-dialog modal-xl modal-dialog-scrollable">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Invoice Details</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
 
-      <div class="modal-body" id="invoiceModalBody">
-        <p class="text-center text-muted">Loading...</p>
-      </div>
+            <div class="modal-body" id="invoiceModalBody">
+                <p class="text-center text-muted">Loading...</p>
+            </div>
+        </div>
     </div>
-  </div>
 </div>
 
 <script>
 document.addEventListener('DOMContentLoaded', function() {
-  // Pagination state
-  let currentPage = 1;
-  const itemsPerPage = 10;
-  let allInvoices = @json($invoices);
-  let filteredInvoices = [...allInvoices];
+    // Pagination state
+    let currentPage = 1;
+    const itemsPerPage = 10;
+    let allInvoices = @json($invoices);
+    let filteredInvoices = [...allInvoices];
 
-  // Initialize pagination
-  renderTable();
-  updatePaginationControls();
-  
-  // Bind pagination events
-  document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
-  document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);
-
-  // Invoice popup functionality
-  document.addEventListener('click', function(e) {
-    if (e.target.closest('.open-invoice-popup')) {
-      e.preventDefault();
-      const id = e.target.closest('.open-invoice-popup').dataset.id;
-      const modal = new bootstrap.Modal(document.getElementById('invoiceModal'));
-
-      document.getElementById('invoiceModalBody').innerHTML =
-        "<div class='text-center py-4'><div class='spinner-border text-primary' role='status'></div><p class='mt-2 text-muted'>Loading invoice details...</p></div>";
-
-      modal.show();
-
-      fetch(`/admin/invoices/${id}/popup`)
-        .then(res => {
-          if (!res.ok) {
-            throw new Error('Network response was not ok');
-          }
-          return res.text();
-        })
-        .then(html => {
-          document.getElementById('invoiceModalBody').innerHTML = html;
-        })
-        .catch(error => {
-          console.error('Error loading invoice details:', error);
-          document.getElementById('invoiceModalBody').innerHTML = 
-            "<div class='text-center py-4 text-danger'><i class='bi bi-exclamation-triangle fs-1'></i><p class='mt-2'>Failed to load invoice details. Please try again.</p></div>";
-        });
-    }
-  });
-
-  // Search and filter functionality for both desktop and mobile
-  const searchInput = document.getElementById('invoiceSearch');
-  const statusFilter = document.getElementById('statusFilter');
-  const startDateInput = document.getElementById('startDate');
-  const endDateInput = document.getElementById('endDate');
-
-  function filterInvoices() {
-    const searchTerm = searchInput.value.toLowerCase();
-    const statusValue = statusFilter.value;
-    const startDate = startDateInput.value;
-    const endDate = endDateInput.value;
-
-    filteredInvoices = allInvoices.filter(invoice => {
-      let include = true;
-
-      // Search filter
-      if (searchTerm) {
-        const matchesSearch = 
-          invoice.invoice_number.toLowerCase().includes(searchTerm) ||
-          invoice.customer_name.toLowerCase().includes(searchTerm);
-        if (!matchesSearch) include = false;
-      }
-
-      // Status filter
-      if (statusValue && invoice.status !== statusValue) {
-        include = false;
-      }
-
-      // Date filter
-      if (startDate || endDate) {
-        const invoiceDate = new Date(invoice.invoice_date);
-        const start = startDate ? new Date(startDate) : null;
-        const end = endDate ? new Date(endDate) : null;
-        
-        if (start && invoiceDate < start) include = false;
-        if (end && invoiceDate > end) include = false;
-      }
-
-      return include;
-    });
-
-    currentPage = 1;
+    // Initialize pagination
     renderTable();
     updatePaginationControls();
-  }
-
-  // Add event listeners for filtering
-  searchInput.addEventListener('input', filterInvoices);
-  statusFilter.addEventListener('change', filterInvoices);
-  startDateInput.addEventListener('change', filterInvoices);
-  endDateInput.addEventListener('change', filterInvoices);
-
-  // Pagination Functions
-  function goToPreviousPage() {
-    if (currentPage > 1) {
-      currentPage--;
-      renderTable();
-      updatePaginationControls();
-    }
-  }
-
-  function goToNextPage() {
-    const totalPages = Math.ceil(filteredInvoices.length / itemsPerPage);
-    if (currentPage < totalPages) {
-      currentPage++;
-      renderTable();
-      updatePaginationControls();
-    }
-  }
-
-  function updatePaginationControls() {
-    const totalPages = Math.ceil(filteredInvoices.length / itemsPerPage);
-    const prevBtn = document.getElementById('prevPageBtn');
-    const nextBtn = document.getElementById('nextPageBtn');
-    const pageInfo = document.getElementById('pageInfo');
-    const paginationPages = document.getElementById('paginationPages');
     
-    prevBtn.disabled = currentPage === 1;
-    nextBtn.disabled = currentPage === totalPages || totalPages === 0;
-    
-    // Update page info text
-    const startIndex = (currentPage - 1) * itemsPerPage + 1;
-    const endIndex = Math.min(currentPage * itemsPerPage, filteredInvoices.length);
-    pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${filteredInvoices.length} entries`;
-    
-    // Generate page numbers
-    paginationPages.innerHTML = '';
-    
-    if (totalPages <= 7) {
-      // Show all pages
-      for (let i = 1; i <= totalPages; i++) {
-        addPageButton(i, paginationPages);
-      }
-    } else {
-      // Show first page, current page range, and last page
-      addPageButton(1, paginationPages);
-      
-      if (currentPage > 3) {
-        paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
-      }
-      
-      const start = Math.max(2, currentPage - 1);
-      const end = Math.min(totalPages - 1, currentPage + 1);
-      
-      for (let i = start; i <= end; i++) {
-        addPageButton(i, paginationPages);
-      }
-      
-      if (currentPage < totalPages - 2) {
-        paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
-      }
-      
-      addPageButton(totalPages, paginationPages);
-    }
-  }
+    // Bind pagination events
+    document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
+    document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);
 
-  function addPageButton(pageNumber, container) {
-    const button = document.createElement('button');
-    button.className = 'pagination-page-btn';
-    if (pageNumber === currentPage) {
-      button.classList.add('active');
-    }
-    button.textContent = pageNumber;
-    button.addEventListener('click', () => {
-      currentPage = pageNumber;
-      renderTable();
-      updatePaginationControls();
+    // Invoice popup functionality
+    document.addEventListener('click', function(e) {
+        if (e.target.closest('.open-invoice-popup')) {
+            e.preventDefault();
+            const id = e.target.closest('.open-invoice-popup').dataset.id;
+            const modal = new bootstrap.Modal(document.getElementById('invoiceModal'));
+
+            document.getElementById('invoiceModalBody').innerHTML =
+                "<div class='text-center py-4'><div class='spinner-border text-primary' role='status'></div><p class='mt-2 text-muted'>Loading invoice details...</p></div>";
+
+            modal.show();
+
+            fetch(`/admin/invoices/${id}/popup`)
+                .then(res => {
+                    if (!res.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return res.text();
+                })
+                .then(html => {
+                    document.getElementById('invoiceModalBody').innerHTML = html;
+                })
+                .catch(error => {
+                    console.error('Error loading invoice details:', error);
+                    document.getElementById('invoiceModalBody').innerHTML = 
+                        "<div class='text-center py-4 text-danger'><i class='bi bi-exclamation-triangle fs-1'></i><p class='mt-2'>Failed to load invoice details. Please try again.</p></div>";
+                });
+        }
     });
-    container.appendChild(button);
-  }
 
-  // Render Table Function
-  function renderTable() {
-    const tbody = document.getElementById('invoicesTableBody');
-    const mobileContainer = document.getElementById('mobileInvoicesContainer');
-    
-    if (filteredInvoices.length === 0) {
-      tbody.innerHTML = '<tr><td colspan="10" class="text-muted">No invoices found</td></tr>';
-      mobileContainer.innerHTML = '<div class="text-muted text-center py-4">No invoices found</div>';
-      return;
-    }
-    
-    // Calculate pagination
-    const startIndex = (currentPage - 1) * itemsPerPage;
-    const endIndex = startIndex + itemsPerPage;
-    const paginatedItems = filteredInvoices.slice(startIndex, endIndex);
-    
-    // Sort by creation date (newest first)
-    const sortedItems = [...paginatedItems].sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
-    
-    // Render desktop table
-    tbody.innerHTML = '';
-    sortedItems.forEach((invoice, index) => {
-      const displayIndex = filteredInvoices.length - (startIndex + index);
-      const row = document.createElement('tr');
-      row.innerHTML = `
-        <td>${displayIndex}</td>
-        <td>
-          <div class="invoice-number-cell">
-            <div class="invoice-icon invoice-icon-${(displayIndex % 8) + 1}">
-              <i class="bi bi-file-earmark-text"></i>
-            </div>
-            <a href="#" class="invoice-number-link open-invoice-popup" data-id="${invoice.id}">
-              ${invoice.invoice_number}
-            </a>
-          </div>
-        </td>
-        <td class="customer-cell">${invoice.customer_name}</td>
-        <td class="amount-cell">₹${parseFloat(invoice.final_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
-        <td class="gst-cell">${invoice.gst_percent}%</td>
-        <td class="amount-cell">₹${parseFloat(invoice.final_amount_with_gst).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
-        <td>
-          <span class="badge badge-${invoice.status}">
-            ${invoice.status === 'paid' ? '<i class="bi bi-check-circle-fill status-icon"></i>' : ''}
-            ${invoice.status === 'pending' ? '<i class="bi bi-clock-fill status-icon"></i>' : ''}
-            ${invoice.status === 'overdue' ? '<i class="bi bi-exclamation-triangle-fill status-icon"></i>' : ''}
-            ${invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}
-          </span>
-        </td>
-        <td class="date-cell">${invoice.invoice_date}</td>
-        <td class="date-cell">${invoice.due_date}</td>
-        <td>
-          <a href="/admin/invoices/${invoice.id}/edit" class="btn-entry">
-            <i class="bi bi-pencil"></i> Entry
-          </a>
-        </td>
-      `;
-      tbody.appendChild(row);
-    });
-    
-    // Render mobile cards
-    mobileContainer.innerHTML = '';
-    sortedItems.forEach((invoice, index) => {
-      const displayIndex = filteredInvoices.length - (startIndex + index);
-      const card = document.createElement('div');
-      card.className = 'mobile-invoice-card';
-      card.setAttribute('data-invoice-id', invoice.id);
-      card.innerHTML = `
-        <div class="mobile-invoice-header">
-          <div class="mobile-invoice-number">
-            <div class="mobile-invoice-icon invoice-icon-${(displayIndex % 8) + 1}">
-              <i class="bi bi-file-earmark-text"></i>
-            </div>
-            <span class="mobile-invoice-number-text">${invoice.invoice_number}</span>
-          </div>
-          <span class="badge badge-${invoice.status} mobile-invoice-status">
-            ${invoice.status === 'paid' ? '<i class="bi bi-check-circle-fill status-icon"></i>' : ''}
-            ${invoice.status === 'pending' ? '<i class="bi bi-clock-fill status-icon"></i>' : ''}
-            ${invoice.status === 'overdue' ? '<i class="bi bi-exclamation-triangle-fill status-icon"></i>' : ''}
-            ${invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}
-          </span>
-        </div>
-        <div class="mobile-invoice-details">
-          <div class="mobile-detail-item">
-            <span class="mobile-detail-label">Customer</span>
-            <span class="mobile-detail-value">${invoice.customer_name}</span>
-          </div>
-          <div class="mobile-detail-item">
-            <span class="mobile-detail-label">Amount</span>
-            <span class="mobile-detail-value">₹${parseFloat(invoice.final_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span>
-          </div>
-          <div class="mobile-detail-item">
-            <span class="mobile-detail-label">GST</span>
-            <span class="mobile-detail-value">${invoice.gst_percent}%</span>
-          </div>
-          <div class="mobile-detail-item">
-            <span class="mobile-detail-label">Total</span>
-            <span class="mobile-detail-value">₹${parseFloat(invoice.final_amount_with_gst).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span>
-          </div>
-          <div class="mobile-detail-item">
-            <span class="mobile-detail-label">Invoice Date</span>
-            <span class="mobile-detail-value">${invoice.invoice_date}</span>
-          </div>
-          <div class="mobile-detail-item">
-            <span class="mobile-detail-label">Due Date</span>
-            <span class="mobile-detail-value">${invoice.due_date}</span>
-          </div>
-        </div>
-        <div class="mobile-invoice-actions">
-          <a href="#" class="mobile-action-btn view open-invoice-popup" data-id="${invoice.id}">
-            <i class="bi bi-eye"></i> View
-          </a>
-          <a href="/admin/invoices/${invoice.id}/edit" class="mobile-action-btn entry">
-            <i class="bi bi-pencil"></i> Entry
-          </a>
-        </div>
-      `;
-      mobileContainer.appendChild(card);
-    });
-  }
+    // Search and filter functionality for both desktop and mobile
+    const searchInput = document.getElementById('invoiceSearch');
+    const statusFilter = document.getElementById('statusFilter');
+    const startDateInput = document.getElementById('startDate');
+    const endDateInput = document.getElementById('endDate');
+    const searchButton = document.getElementById('searchButton');
 
-  // Add hover effects to table rows
-  document.addEventListener('mouseover', function(e) {
-    if (e.target.closest('tr')) {
-      const row = e.target.closest('tr');
-      if (row.parentElement.tagName === 'TBODY') {
-        row.style.cursor = 'pointer';
-      }
+    function filterInvoices() {
+        const searchTerm = searchInput.value.toLowerCase();
+        const statusValue = statusFilter.value;
+        const startDate = startDateInput.value;
+        const endDate = endDateInput.value;
+
+        filteredInvoices = allInvoices.filter(invoice => {
+            let include = true;
+
+            // Search filter
+            if (searchTerm) {
+                const matchesSearch = 
+                    invoice.invoice_number.toLowerCase().includes(searchTerm) ||
+                    invoice.customer_name.toLowerCase().includes(searchTerm);
+                if (!matchesSearch) include = false;
+            }
+
+            // Status filter
+            if (statusValue && invoice.status !== statusValue) {
+                include = false;
+            }
+
+            // Date filter
+            if (startDate || endDate) {
+                const invoiceDate = new Date(invoice.invoice_date);
+                const start = startDate ? new Date(startDate) : null;
+                const end = endDate ? new Date(endDate) : null;
+                
+                if (start && invoiceDate < start) include = false;
+                if (end && invoiceDate > end) include = false;
+            }
+
+            return include;
+        });
+
+        currentPage = 1;
+        renderTable();
+        updatePaginationControls();
     }
-  });
+
+    // Add event listeners for filtering
+    searchInput.addEventListener('input', filterInvoices);
+    searchButton.addEventListener('click', filterInvoices);
+    statusFilter.addEventListener('change', filterInvoices);
+    startDateInput.addEventListener('change', filterInvoices);
+    endDateInput.addEventListener('change', filterInvoices);
+
+    // Also trigger search on Enter key in search input
+    searchInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+            filterInvoices();
+        }
+    });
+
+    // Pagination Functions
+    function goToPreviousPage() {
+        if (currentPage > 1) {
+            currentPage--;
+            renderTable();
+            updatePaginationControls();
+        }
+    }
+
+    function goToNextPage() {
+        const totalPages = Math.ceil(filteredInvoices.length / itemsPerPage);
+        if (currentPage < totalPages) {
+            currentPage++;
+            renderTable();
+            updatePaginationControls();
+        }
+    }
+
+    function updatePaginationControls() {
+        const totalPages = Math.ceil(filteredInvoices.length / itemsPerPage);
+        const prevBtn = document.getElementById('prevPageBtn');
+        const nextBtn = document.getElementById('nextPageBtn');
+        const pageInfo = document.getElementById('pageInfo');
+        const paginationPages = document.getElementById('paginationPages');
+        
+        prevBtn.disabled = currentPage === 1;
+        nextBtn.disabled = currentPage === totalPages || totalPages === 0;
+        
+        // Update page info text
+        const startIndex = (currentPage - 1) * itemsPerPage + 1;
+        const endIndex = Math.min(currentPage * itemsPerPage, filteredInvoices.length);
+        pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${filteredInvoices.length} entries`;
+        
+        // Generate page numbers
+        paginationPages.innerHTML = '';
+        
+        if (totalPages <= 7) {
+            // Show all pages
+            for (let i = 1; i <= totalPages; i++) {
+                addPageButton(i, paginationPages);
+            }
+        } else {
+            // Show first page, current page range, and last page
+            addPageButton(1, paginationPages);
+            
+            if (currentPage > 3) {
+                paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
+            }
+            
+            const start = Math.max(2, currentPage - 1);
+            const end = Math.min(totalPages - 1, currentPage + 1);
+            
+            for (let i = start; i <= end; i++) {
+                addPageButton(i, paginationPages);
+            }
+            
+            if (currentPage < totalPages - 2) {
+                paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
+            }
+            
+            addPageButton(totalPages, paginationPages);
+        }
+    }
+
+    function addPageButton(pageNumber, container) {
+        const button = document.createElement('button');
+        button.className = 'pagination-page-btn';
+        if (pageNumber === currentPage) {
+            button.classList.add('active');
+        }
+        button.textContent = pageNumber;
+        button.addEventListener('click', () => {
+            currentPage = pageNumber;
+            renderTable();
+            updatePaginationControls();
+        });
+        container.appendChild(button);
+    }
+
+    // Render Table Function
+    function renderTable() {
+        const tbody = document.getElementById('invoicesTableBody');
+        const mobileContainer = document.getElementById('mobileInvoicesContainer');
+        
+        if (filteredInvoices.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="10" class="text-muted">No invoices found</td></tr>';
+            mobileContainer.innerHTML = '<div class="text-muted text-center py-4">No invoices found</div>';
+            return;
+        }
+        
+        // Calculate pagination
+        const startIndex = (currentPage - 1) * itemsPerPage;
+        const endIndex = startIndex + itemsPerPage;
+        const paginatedItems = filteredInvoices.slice(startIndex, endIndex);
+        
+        // Sort by creation date (newest first)
+        const sortedItems = [...paginatedItems].sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+        
+        // Render desktop table
+        tbody.innerHTML = '';
+        sortedItems.forEach((invoice, index) => {
+            const displayIndex = filteredInvoices.length - (startIndex + index);
+            const row = document.createElement('tr');
+            row.innerHTML = `
+                <td>${displayIndex}</td>
+                <td>
+                    <div class="invoice-number-cell">
+                        <div class="invoice-icon invoice-icon-${(displayIndex % 8) + 1}">
+                            <i class="bi bi-file-earmark-text"></i>
+                        </div>
+                        <a href="#" class="invoice-number-link open-invoice-popup" data-id="${invoice.id}">
+                            ${invoice.invoice_number}
+                        </a>
+                    </div>
+                </td>
+                <td class="customer-cell">${invoice.customer_name}</td>
+                <td class="amount-cell">₹${parseFloat(invoice.final_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
+                <td class="gst-cell">${invoice.gst_percent}%</td>
+                <td class="amount-cell">₹${parseFloat(invoice.final_amount_with_gst).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
+                <td>
+                    <span class="badge badge-${invoice.status}">
+                        ${invoice.status === 'paid' ? '<i class="bi bi-check-circle-fill status-icon"></i>' : ''}
+                        ${invoice.status === 'pending' ? '<i class="bi bi-clock-fill status-icon"></i>' : ''}
+                        ${invoice.status === 'overdue' ? '<i class="bi bi-exclamation-triangle-fill status-icon"></i>' : ''}
+                        ${invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}
+                    </span>
+                </td>
+                <td class="date-cell">${invoice.invoice_date}</td>
+                <td class="date-cell">${invoice.due_date}</td>
+                <td>
+                    <a href="/admin/invoices/${invoice.id}/edit" class="btn-entry">
+                        <i class="bi bi-pencil"></i> Entry
+                    </a>
+                </td>
+            `;
+            tbody.appendChild(row);
+        });
+        
+        // Render mobile cards
+        mobileContainer.innerHTML = '';
+        sortedItems.forEach((invoice, index) => {
+            const displayIndex = filteredInvoices.length - (startIndex + index);
+            const card = document.createElement('div');
+            card.className = 'mobile-invoice-card';
+            card.setAttribute('data-invoice-id', invoice.id);
+            card.innerHTML = `
+                <div class="mobile-invoice-header">
+                    <div class="mobile-invoice-number">
+                        <div class="mobile-invoice-icon invoice-icon-${(displayIndex % 8) + 1}">
+                            <i class="bi bi-file-earmark-text"></i>
+                        </div>
+                        <span class="mobile-invoice-number-text">${invoice.invoice_number}</span>
+                    </div>
+                    <span class="badge badge-${invoice.status} mobile-invoice-status">
+                        ${invoice.status === 'paid' ? '<i class="bi bi-check-circle-fill status-icon"></i>' : ''}
+                        ${invoice.status === 'pending' ? '<i class="bi bi-clock-fill status-icon"></i>' : ''}
+                        ${invoice.status === 'overdue' ? '<i class="bi bi-exclamation-triangle-fill status-icon"></i>' : ''}
+                        ${invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}
+                    </span>
+                </div>
+                <div class="mobile-invoice-details">
+                    <div class="mobile-detail-item">
+                        <span class="mobile-detail-label">Customer</span>
+                        <span class="mobile-detail-value">${invoice.customer_name}</span>
+                    </div>
+                    <div class="mobile-detail-item">
+                        <span class="mobile-detail-label">Amount</span>
+                        <span class="mobile-detail-value">₹${parseFloat(invoice.final_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span>
+                    </div>
+                    <div class="mobile-detail-item">
+                        <span class="mobile-detail-label">GST</span>
+                        <span class="mobile-detail-value">${invoice.gst_percent}%</span>
+                    </div>
+                    <div class="mobile-detail-item">
+                        <span class="mobile-detail-label">Total</span>
+                        <span class="mobile-detail-value">₹${parseFloat(invoice.final_amount_with_gst).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span>
+                    </div>
+                    <div class="mobile-detail-item">
+                        <span class="mobile-detail-label">Invoice Date</span>
+                        <span class="mobile-detail-value">${invoice.invoice_date}</span>
+                    </div>
+                    <div class="mobile-detail-item">
+                        <span class="mobile-detail-label">Due Date</span>
+                        <span class="mobile-detail-value">${invoice.due_date}</span>
+                    </div>
+                </div>
+                <div class="mobile-invoice-actions">
+                    <a href="#" class="mobile-action-btn view open-invoice-popup" data-id="${invoice.id}">
+                        <i class="bi bi-eye"></i> View
+                    </a>
+                    <a href="/admin/invoices/${invoice.id}/edit" class="mobile-action-btn entry">
+                        <i class="bi bi-pencil"></i> Entry
+                    </a>
+                </div>
+            `;
+            mobileContainer.appendChild(card);
+        });
+    }
+
+    // Add hover effects to table rows
+    document.addEventListener('mouseover', function(e) {
+        if (e.target.closest('tr')) {
+            const row = e.target.closest('tr');
+            if (row.parentElement.tagName === 'TBODY') {
+                row.style.cursor = 'pointer';
+            }
+        }
+    });
 });
 </script>
 
diff --git a/resources/views/admin/layouts/app.blade.php b/resources/views/admin/layouts/app.blade.php
index e437cc3..5481de3 100644
--- a/resources/views/admin/layouts/app.blade.php
+++ b/resources/views/admin/layouts/app.blade.php
@@ -212,14 +212,21 @@
    <i class="bi bi-bag"></i> Orders
 </a>
 <a href="{{ route('admin.requests') }}" class="{{ request()->routeIs('admin.requests') ? 'active' : '' }}"><i class="bi bi-envelope"></i> Requests</a>
+<li>
+    <a href="{{ route('admin.profile.requests') }}">
+        <i class="bi bi-person-lines-fill"></i>
+        Profile Update Requests
+    </a>
+</li>
+
     <a href="{{ route('admin.staff') }}" class="{{ request()->routeIs('admin.staff') ? 'active' : '' }}"><i class="bi bi-person-badge"></i> Staff</a>
     <a href="{{ route('admin.account') }}" class="{{ request()->routeIs('admin.account') ? 'active' : '' }}"><i class="bi bi-gear"></i> Account</a>
     <a href="{{ route('admin.marklist.index') }}" class="{{ request()->routeIs('admin.marklist.index') ? 'active' : '' }}"><i class="bi bi-list-check"></i> Mark List</a>
 
-    <form method="POST" action="{{ route('admin.logout') }}" class="mt-4 px-3">
+    <!-- <form method="POST" action="{{ route('admin.logout') }}" class="mt-4 px-3">
       @csrf
-     <!-- <button type="submit" class="btn btn-danger w-100"><i class="bi bi-box-arrow-right"></i> Logout</button>-->
-    </form>
+      <button type="submit" class="btn btn-danger w-100"><i class="bi bi-box-arrow-right"></i> Logout</button>
+    </form> -->
   </div>
 
   <div class="main-content">
diff --git a/resources/views/admin/orders_show.blade.php b/resources/views/admin/orders_show.blade.php
index e9c1d8e..2810649 100644
--- a/resources/views/admin/orders_show.blade.php
+++ b/resources/views/admin/orders_show.blade.php
@@ -5,28 +5,96 @@
 @section('content')
 <div class="container py-4">
 
-  {{-- Header --}}
+  {{-- HEADER --}}
   <div class="card shadow-sm rounded-3 border-0">
     <div class="card-body">
+
+      {{-- TOP BAR --}}
       <div class="d-flex justify-content-between align-items-start">
         <div>
-          <h4 class="fw-bold mb-0">Order Details</Details></h4>
+          <h4 class="fw-bold mb-0">Order Details</h4>
           <small class="text-muted">Detailed view of this shipment order</small>
         </div>
         <a href="{{ route('admin.dashboard') }}" class="btn-close"></a>
       </div>
 
+      {{-- ACTION BUTTONS --}}
+      <div class="mt-3 d-flex gap-2">
+
+        {{-- ADD ITEM --}}
+        <button class="btn btn-add-item" data-bs-toggle="modal" data-bs-target="#addItemModal">
+          <i class="fas fa-plus-circle me-2"></i>Add New Item
+        </button>
+
+        {{-- EDIT ORDER --}}
+        @if($order->status === 'pending')
+          <button class="btn btn-edit-order" onclick="document.getElementById('editOrderForm').style.display='block'">
+              <i class="fas fa-edit me-2"></i>Edit Order
+          </button>
+        @else
+          <button class="btn btn-edit-order" disabled><i class="fas fa-edit me-2"></i>Edit Order</button>
+        @endif
+
+        {{-- DELETE ORDER --}}
+        @if($order->status === 'pending')
+        <form action="{{ route('admin.orders.destroy', $order->id) }}"
+              method="POST"
+              onsubmit="return confirm('Delete this entire order?')">
+          @csrf
+          @method('DELETE')
+          <button class="btn btn-delete-order">
+            <i class="fas fa-trash-alt me-2"></i>Delete Order
+          </button>
+        </form>
+        @endif
+
+      </div>
+
       <hr>
 
-      {{-- Customer Info --}}
+      {{-- EDIT ORDER FORM --}}
+      <div id="editOrderForm" class="p-3 bg-light rounded mb-4 shadow-sm" style="display:none;">
+        <h5 class="fw-bold mb-3">Edit Order</h5>
+
+        <form action="{{ route('admin.orders.update', $order->id) }}" method="POST">
+          @csrf
+
+          <div class="row">
+            <div class="col-md-4 mb-3">
+              <label>Mark No</label>
+              <input type="text" name="mark_no" value="{{ $order->mark_no }}" class="form-control custom-input">
+            </div>
+
+            <div class="col-md-4 mb-3">
+              <label>Origin</label>
+              <input type="text" name="origin" value="{{ $order->origin }}" class="form-control custom-input">
+            </div>
+
+            <div class="col-md-4 mb-3">
+              <label>Destination</label>
+              <input type="text" name="destination" value="{{ $order->destination }}" class="form-control custom-input">
+            </div>
+          </div>
+
+          <button class="btn btn-save-changes">Save Changes</button>
+          <button type="button"
+                  class="btn btn-cancel"
+                  onclick="document.getElementById('editOrderForm').style.display='none'">
+            Cancel
+          </button>
+        </form>
+      </div>
+
+      {{-- CUSTOMER INFO --}}
       <div class="row mb-4">
         <div class="col-md-8 d-flex">
           <div class="me-3">
-            <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center" 
+            <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center"
                  style="width:60px; height:60px; font-size:20px;">
               {{ strtoupper(substr($user->customer_name ?? 'U', 0, 1)) }}
             </div>
           </div>
+
           <div>
             <h5 class="mb-0">{{ $user->customer_name ?? 'Unknown Customer' }}</h5>
             <p class="mb-0">{{ $user->company_name ?? 'N/A' }}</p>
@@ -34,13 +102,14 @@
             <p class="mb-0 text-muted">{{ $user->mobile_no ?? '' }}</p>
           </div>
         </div>
+
         <div class="col-md-4 text-end">
           <p class="mb-0">{{ $user->address ?? '' }}</p>
           <small class="text-muted">{{ $user->pincode ?? '' }}</small>
         </div>
       </div>
 
-      {{-- Order Summary --}}
+      {{-- ORDER SUMMARY --}}
       <div class="bg-light rounded p-3 mb-3">
         <div class="row text-center">
           <div class="col-md-3 border-end">
@@ -65,7 +134,7 @@
         </div>
       </div>
 
-      {{-- Origin - Destination --}}
+      {{-- ORIGIN / DESTINATION --}}
       <div class="row text-center mb-4">
         <div class="col-md-6">
           <p class="mb-1 fw-semibold text-muted">Origin</p>
@@ -77,7 +146,7 @@
         </div>
       </div>
 
-      {{-- Order Items Table --}}
+      {{-- ITEMS TABLE --}}
       <div class="table-responsive">
         <table class="table table-bordered align-middle text-center">
           <thead class="table-light">
@@ -88,15 +157,17 @@
               <th>QTY</th>
               <th>TTL/QTY</th>
               <th>Unit</th>
-              <th>Price (₹)</th>
-              <th>TTL Amount (₹)</th>
+              <th>Price</th>
+              <th>Total Amount</th>
               <th>CBM</th>
               <th>TTL CBM</th>
               <th>KG</th>
               <th>TTL KG</th>
               <th>Shop No</th>
+              <th>Actions</th>
             </tr>
           </thead>
+
           <tbody>
             @foreach($order->items as $index => $item)
             <tr>
@@ -113,38 +184,531 @@
               <td>{{ $item->kg }}</td>
               <td>{{ $item->ttl_kg }}</td>
               <td>{{ $item->shop_no }}</td>
+
+              <td>
+                <form action="{{ route('admin.orders.deleteItem', $item->id) }}"
+                      method="POST"
+                      onsubmit="return confirm('Delete this item?')">
+                  @csrf
+                  @method('DELETE')
+                  <button class="btn btn-sm btn-delete-item">
+                    <i class="fas fa-trash"></i>
+                  </button>
+                </form>
+              </td>
             </tr>
             @endforeach
           </tbody>
         </table>
       </div>
 
-      {{-- Totals --}}
+      {{-- TOTALS --}}
       <div class="row text-center mt-4">
         <div class="col-md-3">
           <h6 class="fw-bold text-primary">{{ $order->ctn }}</h6>
-          <small class="text-muted">Total CTN</small>
+          <small>Total CTN</small>
         </div>
 
         <div class="col-md-3">
           <h6 class="fw-bold text-primary">{{ $order->qty }}</h6>
-          <small class="text-muted">Total QTY</small>
+          <small>Total QTY</small>
         </div>
 
         <div class="col-md-3">
           <h6 class="fw-bold text-success">{{ $order->ttl_kg }}</h6>
-          <small class="text-muted">Total TTL KG</small>
+          <small>Total KG</small>
         </div>
 
         <div class="col-md-3">
           <h6 class="fw-bold text-danger">₹{{ number_format($order->ttl_amount, 2) }}</h6>
-          <small class="text-muted">Total Amount</small>
+          <small>Total Amount</small>
         </div>
       </div>
 
     </div>
   </div>
-
 </div>
-@endsection
 
+{{-- ADD ITEM MODAL --}}
+<div class="modal fade" id="addItemModal" tabindex="-1">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content custom-modal">
+
+      <div class="modal-header modal-gradient-header">
+        <h5 class="modal-title text-white"><i class="fas fa-cube me-2"></i>Add Item To Order</h5>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+      </div>
+
+      <form action="{{ route('admin.orders.addItem', $order->id) }}" method="POST">
+        @csrf
+
+        <div class="modal-body">
+
+          {{-- DELETED ITEMS --}}
+          @php
+              $deletedItems = \App\Models\OrderItem::onlyTrashed()
+                  ->where('order_id', $order->id)
+                  ->get();
+          @endphp
+
+          <h5 class="section-title">Deleted Items (Use / Restore)</h5>
+
+          <ul class="list-group mb-3">
+
+            @forelse($deletedItems as $deleted)
+              <li class="list-group-item">
+
+                <div class="d-flex justify-content-between">
+
+                    <div>
+                        <strong>{{ $deleted->description }}</strong><br>
+                        <small>
+                          CTN: {{ $deleted->ctn }},
+                          QTY: {{ $deleted->qty }},
+                          TTL/QTY: {{ $deleted->ttl_qty }},
+                          Unit: {{ $deleted->unit }},
+                          Price: ₹{{ $deleted->price }},
+                          TTL Amt: ₹{{ $deleted->ttl_amount }},
+                          CBM: {{ $deleted->cbm }},
+                          TTL CBM: {{ $deleted->ttl_cbm }},
+                          KG: {{ $deleted->kg }},
+                          TTL KG: {{ $deleted->ttl_kg }},
+                          Shop: {{ $deleted->shop_no }}
+                        </small>
+                    </div>
+
+                    <div class="d-flex gap-2">
+
+                        {{-- Auto-fill button --}}
+                        <button type="button" class="btn btn-sm btn-use-item"
+                          onclick="fillFormFromDeleted({{ json_encode($deleted) }})">
+                          Use This
+                        </button>
+
+                        {{-- Restore --}}
+                        <form action="{{ route('admin.orders.restoreItem', $deleted->id) }}" method="POST">
+                          @csrf
+                          <button class="btn btn-sm btn-restore">Restore</button>
+                        </form>
+
+                    </div>
+
+                </div>
+
+              </li>
+            @empty
+              <li class="list-group-item text-muted">No deleted items.</li>
+            @endforelse
+
+          </ul>
+
+          {{-- ADD FORM --}}
+          <div class="row g-3">
+
+            <div class="col-md-6">
+              <label class="form-label">Description</label>
+              <input type="text" name="description" class="form-control custom-input" required>
+            </div>
+
+            <div class="col-md-3">
+              <label class="form-label">CTN</label>
+              <input type="number" name="ctn" class="form-control custom-input">
+            </div>
+
+            <div class="col-md-3">
+              <label class="form-label">QTY</label>
+              <input type="number" name="qty" class="form-control custom-input">
+            </div>
+
+            <div class="col-md-3">
+              <label class="form-label">TTL QTY</label>
+              <input type="number" name="ttl_qty" class="form-control custom-input">
+            </div>
+
+            <div class="col-md-3">
+              <label class="form-label">Unit</label>
+              <input type="text" name="unit" class="form-control custom-input">
+            </div>
+
+            <div class="col-md-3">
+              <label class="form-label">Price</label>
+              <input type="number" name="price" class="form-control custom-input">
+            </div>
+
+            <div class="col-md-3">
+              <label class="form-label">Total Amount</label>
+              <input type="number" name="ttl_amount" class="form-control custom-input">
+            </div>
+
+            <div class="col-md-3">
+              <label class="form-label">CBM</label>
+              <input type="number" name="cbm" class="form-control custom-input">
+            </div>
+
+            <div class="col-md-3">
+              <label class="form-label">TTL CBM</label>
+              <input type="number" name="ttl_cbm" class="form-control custom-input">
+            </div>
+
+            <div class="col-md-3">
+              <label class="form-label">KG</label>
+              <input type="number" name="kg" class="form-control custom-input">
+            </div>
+
+            <div class="col-md-3">
+              <label class="form-label">TTL KG</label>
+              <input type="number" name="ttl_kg" class="form-control custom-input">
+            </div>
+
+            <div class="col-md-3">
+              <label class="form-label">Shop No</label>
+              <input type="text" name="shop_no" class="form-control custom-input">
+            </div>
+
+          </div>
+
+        </div>
+
+        <div class="modal-footer">
+          <button class="btn btn-modal-close" data-bs-dismiss="modal">Close</button>
+          <button class="btn btn-modal-add">Add Item</button>
+        </div>
+
+      </form>
+
+    </div>
+  </div>
+</div>
+
+{{-- AUTO-FILL SCRIPT --}}
+<script>
+function fillFormFromDeleted(item) {
+    document.querySelector('input[name="description"]').value = item.description;
+    document.querySelector('input[name="ctn"]').value = item.ctn;
+    document.querySelector('input[name="qty"]').value = item.qty;
+    document.querySelector('input[name="ttl_qty"]').value = item.ttl_qty;
+    document.querySelector('input[name="unit"]').value = item.unit;
+    document.querySelector('input[name="price"]').value = item.price;
+    document.querySelector('input[name="ttl_amount"]').value = item.ttl_amount;
+    document.querySelector('input[name="cbm"]').value = item.cbm;
+    document.querySelector('input[name="ttl_cbm"]').value = item.ttl_cbm;
+    document.querySelector('input[name="kg"]').value = item.kg;
+    document.querySelector('input[name="ttl_kg"]').value = item.ttl_kg;
+    document.querySelector('input[name="shop_no"]').value = item.shop_no;
+}
+</script>
+
+<style>
+/* Custom Button Styles */
+.btn-add-item {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    color: white;
+    padding: 12px 24px;
+    border-radius: 10px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.3);
+    position: relative;
+    overflow: hidden;
+}
+
+.btn-add-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px 0 rgba(102, 126, 234, 0.4);
+    color: white;
+}
+
+.btn-add-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    transition: 0.5s;
+}
+
+.btn-add-item:hover::before {
+    left: 100%;
+}
+
+.btn-edit-order {
+    background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
+    border: none;
+    color: white;
+    padding: 12px 24px;
+    border-radius: 10px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px 0 rgba(71, 118, 230, 0.3);
+}
+
+.btn-edit-order:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px 0 rgba(71, 118, 230, 0.4);
+    color: white;
+}
+
+.btn-edit-order:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.btn-delete-order {
+    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
+    border: none;
+    color: white;
+    padding: 12px 24px;
+    border-radius: 10px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px 0 rgba(255, 65, 108, 0.3);
+}
+
+.btn-delete-order:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px 0 rgba(255, 65, 108, 0.4);
+    color: white;
+}
+
+.btn-delete-item {
+    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
+    border: none;
+    color: white;
+    border-radius: 6px;
+    padding: 6px 12px;
+    transition: all 0.3s ease;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-delete-item:hover {
+    transform: scale(1.05);
+    color: white;
+}
+
+/* Form Buttons */
+.btn-save-changes {
+    background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 12px rgba(0, 176, 155, 0.2);
+}
+
+.btn-save-changes:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 20px rgba(0, 176, 155, 0.4);
+    color: white;
+}
+
+.btn-cancel {
+    background: linear-gradient(135deg, #8e9eab 0%, #eef2f3 100%);
+    border: none;
+    color: #2c3e50;
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.btn-cancel:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(142, 158, 171, 0.3);
+}
+
+/* Modal Styles */
+.custom-modal {
+    border-radius: 15px;
+    border: none;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+}
+
+.modal-gradient-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-bottom: none;
+    padding: 20px 25px;
+}
+
+.section-title {
+    color: #2c3e50;
+    font-weight: 600;
+    margin-bottom: 15px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid #667eea;
+}
+
+.custom-input {
+    border: 2px solid #e9ecef;
+    border-radius: 8px;
+    padding: 10px 15px;
+    transition: all 0.3s ease;
+    font-size: 14px;
+}
+
+.custom-input:focus {
+    border-color: #667eea;
+    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
+    transform: translateY(-1px);
+}
+
+.btn-use-item {
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    border: none;
+    color: white;
+    border-radius: 6px;
+    padding: 5px 15px;
+    font-size: 0.875rem;
+    transition: all 0.3s ease;
+    font-weight: 500;
+}
+
+.btn-use-item:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
+    color: white;
+}
+
+.btn-restore {
+    background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
+    border: none;
+    color: white;
+    border-radius: 6px;
+    padding: 5px 15px;
+    font-size: 0.875rem;
+    transition: all 0.3s ease;
+    font-weight: 500;
+}
+
+.btn-restore:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 176, 155, 0.4);
+    color: white;
+}
+
+.btn-modal-close {
+    background: linear-gradient(135deg, #8e9eab 0%, #eef2f3 100%);
+    border: none;
+    color: #2c3e50;
+    padding: 10px 25px;
+    border-radius: 8px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.btn-modal-close:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(142, 158, 171, 0.3);
+}
+
+.btn-modal-add {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    color: white;
+    padding: 10px 25px;
+    border-radius: 8px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.3);
+}
+
+.btn-modal-add:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px 0 rgba(102, 126, 234, 0.4);
+    color: white;
+}
+
+/* Animation for the Add Item Button */
+@keyframes pulse-glow {
+    0% {
+        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
+    }
+}
+
+.btn-add-item {
+    animation: pulse-glow 2s infinite;
+}
+
+/* List group items */
+.list-group-item {
+    border: 1px solid #e9ecef;
+    margin-bottom: 8px;
+    border-radius: 8px !important;
+    transition: all 0.3s ease;
+    padding: 15px;
+}
+
+.list-group-item:hover {
+    border-color: #667eea;
+    transform: translateX(5px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
+}
+
+/* Enhanced table styling */
+.table {
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.table thead th {
+    background: #667eea ;
+    color: white;
+    border: none;
+    padding: 15px 10px;
+    font-weight: 600;
+}
+
+.table tbody tr {
+    transition: all 0.3s ease;
+}
+
+.table tbody tr:hover {
+    background-color: rgba(102, 126, 234, 0.05);
+    transform: translateY(-1px);
+}
+
+/* Badge styling */
+.badge {
+    font-size: 0.85em;
+    padding: 8px 12px;
+    border-radius: 8px;
+}
+
+/* Card enhancements */
+.card {
+    border: none;
+    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .btn-add-item,
+    .btn-edit-order,
+    .btn-delete-order {
+        padding: 10px 15px;
+        font-size: 0.9rem;
+    }
+    
+    .modal-gradient-header {
+        padding: 15px 20px;
+    }
+}
+
+</style>
+
+@endsection
\ No newline at end of file
diff --git a/resources/views/admin/profile_update_requests.blade.php b/resources/views/admin/profile_update_requests.blade.php
new file mode 100644
index 0000000..4797665
--- /dev/null
+++ b/resources/views/admin/profile_update_requests.blade.php
@@ -0,0 +1,111 @@
+@extends('admin.layouts.app')
+
+@section('page-title', 'Profile Update Requests')
+
+@section('content')
+<div class="container-fluid px-0">
+
+    @php
+        $perPage = 5;
+        $currentPage = request()->get('page', 1);
+        $currentPage = max(1, (int)$currentPage);
+        $total = $requests->count();
+        $totalPages = ceil($total / $perPage);
+        $currentItems = $requests->slice(($currentPage - 1) * $perPage, $perPage);
+    @endphp
+
+    <style>
+        .old-value { color: #6b7280; font-weight: 600; }
+        .new-value { color: #111827; font-weight: 700; }
+        .changed { background: #fef3c7; padding: 6px; border-radius: 6px; }
+        .box { padding: 10px 14px; border-radius: 8px; background: #f8fafc; margin-bottom: 10px; }
+        .diff-label { font-size: 13px; font-weight: 700; }
+        .actions { display: flex; gap: 10px; }
+    </style>
+
+    <h4 class="fw-bold my-3">Profile Update Requests ({{ $total }})</h4>
+
+    <div class="card mb-4 shadow-sm">
+        <div class="card-body pb-1">
+
+            <div class="table-responsive custom-table-wrapper">
+                <table class="table align-middle mb-0 custom-table">
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>User</th>
+                            <th>Requested Changes</th>
+                            <th>Status</th>
+                            <th>Requested At</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        @foreach($currentItems as $index => $req)
+                            @php
+                                $user = $req->user;
+                                // FIX: Convert string to array
+                                $newData = is_array($req->data) ? $req->data : json_decode($req->data, true);
+                            @endphp
+
+                            <tr>
+                                <td><strong>{{ ($currentPage - 1) * $perPage + $index + 1 }}</strong></td>
+
+                                <td>
+                                    <strong>{{ $user->customer_name }}</strong><br>
+                                    <small>{{ $user->email }}</small><br>
+                                    <small>ID: {{ $user->customer_id }}</small>
+                                </td>
+
+                                <td>
+                                    @foreach($newData as $key => $newValue)
+                                        @php
+                                            $oldValue = $user->$key ?? '—';
+                                            $changed = $oldValue != $newValue;
+                                        @endphp
+
+                                        <div class="box {{ $changed ? 'changed' : '' }}">
+                                            <span class="diff-label">{{ ucfirst(str_replace('_',' ', $key)) }}:</span><br>
+                                            <span class="old-value">Old: {{ $oldValue }}</span><br>
+                                            <span class="new-value">New: {{ $newValue ?? '—' }}</span>
+                                        </div>
+                                    @endforeach
+                                </td>
+
+                                <td>
+                                    @if($req->status == 'pending')
+                                        <span class="badge badge-pending">Pending</span>
+                                    @elseif($req->status == 'approved')
+                                        <span class="badge badge-approved">Approved</span>
+                                    @else
+                                        <span class="badge badge-rejected">Rejected</span>
+                                    @endif
+                                </td>
+
+                                <td>{{ $req->created_at->format('d M Y, h:i A') }}</td>
+
+                                <td class="actions">
+                                    @if($req->status == 'pending')
+                                        <a href="{{ route('admin.profile.approve', $req->id) }}" class="btn btn-success btn-sm">
+                                           <i class="bi bi-check-circle"></i> Approve
+                                        </a>
+
+                                        <a href="{{ route('admin.profile.reject', $req->id) }}" class="btn btn-danger btn-sm">
+                                           <i class="bi bi-x-circle"></i> Reject
+                                        </a>
+                                    @else
+                                        <span class="text-muted">Completed</span>
+                                    @endif
+                                </td>
+
+                            </tr>
+                        @endforeach
+                    </tbody>
+                </table>
+            </div>
+
+        </div>
+    </div>
+</div>
+@endsection
diff --git a/resources/views/admin/reports.blade.php b/resources/views/admin/reports.blade.php
index b2f37a3..d0d088a 100644
--- a/resources/views/admin/reports.blade.php
+++ b/resources/views/admin/reports.blade.php
@@ -6,20 +6,28 @@
 <style>
     /* ===== GLOBAL RESPONSIVE STYLES ===== */
     html, body {
-    overflow-x: hidden !important;
-    max-width: 100%;
+        overflow-x: hidden !important;
+        max-width: 100%;
     }
-    
+
+    /* Use Inter globally (keeps your existing @import too) */
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-    
+
+    /* Apply Inter globally but keep specificity low so your component styles still work */
+    :root { --admin-font: 'Inter', sans-serif; }
+    body, input, select, textarea, button, table, th, td, .report-container {
+        font-family: var(--admin-font);
+    }
+
     .report-container {
+        
         background: #ffffff;
         padding: 25px;
         border-radius: 16px;
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
         margin: 20px auto;
         max-width: 100%;
-        font-family: 'Inter', sans-serif;
+        /* font-family now coming from :root */
         border: 1px solid #f0f0f0;
     }
 
@@ -69,18 +77,21 @@
     .stats-container {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-        gap: 15px;
+        gap: 12px;
         margin: 20px 0;
     }
 
     .stat-card {
         background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
-        padding: 18px 15px;
+        padding: 16px;
         border-radius: 12px;
         border-left: 4px solid #4f46e5;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
         transition: transform 0.3s ease;
-        text-align: center;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        min-height: 70px;
     }
 
     .stat-card:hover {
@@ -112,7 +123,16 @@
         background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
     }
 
-    
+    .stat-icon {
+        width: 45px;
+        height: 45px;
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(79, 70, 229, 0.1);
+        flex-shrink: 0;
+    }
 
     .stat-icon i {
         font-size: 18px;
@@ -143,9 +163,9 @@
         color: #ef4444;
     }
 
-    /* .stat-card.info .stat-icon {
+    .stat-card.info .stat-icon {
         background: rgba(59, 130, 246, 0.1);
-    } */
+    }
 
     .stat-card.info .stat-icon i {
         color: #3b82f6;
@@ -159,16 +179,20 @@
         color: #8b5cf6;
     }
 
+    .stat-content {
+        flex: 1;
+    }
+
     .stat-value {
         font-size: 22px;
         font-weight: 700;
         color: #1a202c;
-        margin-bottom: 4px;
         line-height: 1.2;
+        margin-bottom: 2px;
     }
 
     .stat-label {
-        font-size: 13px;
+        font-size: 12px;
         color: #718096;
         font-weight: 500;
         line-height: 1.3;
@@ -216,10 +240,10 @@
         border-radius: 8px;
         border: 1.5px solid #e5e7eb;
         background: #ffffff;
-        font-size: 13px;
+        font-size: 14px; /* increased to match global font sizing */
         color: #1f2937;
         transition: all 0.3s ease;
-        font-family: 'Inter', sans-serif;
+        font-family: var(--admin-font);
     }
 
     .filter-control:focus {
@@ -242,12 +266,15 @@
     /* Ensure table takes full width and doesn't wrap */
     .report-table {
         width: 100%;
-        border-collapse: collapse;
+        /* keep your collapse behavior but update spacing to match Orders page */
+        border-collapse: separate;
+        border-spacing: 0;
         min-width: 1200px; /* Minimum width to prevent squeezing */
         table-layout: auto; /* Allow columns to adjust based on content */
+        font-size: 14px; /* unified table font size */
     }
 
-    /* Table header styling - CENTER ALIGNED */
+    /* Table header styling - CENTER ALIGNED (keep your gradient & sticky) */
     .report-table thead {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         position: sticky;
@@ -255,10 +282,11 @@
         z-index: 10;
     }
 
+    /* Adjusted header padding to match Orders spacing */
     .report-table th {
-        padding: 15px 12px;
+        padding: 16px 20px; /* changed from 15px 12px to match Orders' spacing */
         text-align: center; /* Center align header text */
-        font-size: 13px;
+        font-size: 14px;
         font-weight: 600;
         color: white;
         border-bottom: none;
@@ -280,8 +308,8 @@
 
     /* Table cell styling with proper text handling - CENTER ALIGNED */
     .report-table td {
-        padding: 12px;
-        font-size: 13px;
+        padding: 14px 20px; /* changed from 12px to match Orders' td padding */
+        font-size: 14px;    /* unified */
         color: #374151;
         border-bottom: 1px solid #f3f4f6;
         vertical-align: middle;
@@ -292,12 +320,13 @@
         min-width: 120px; /* Minimum column width */
         text-align: center; /* Center align all table data */
     }
-
     /* Specific column width adjustments */
     .report-table th:nth-child(1), /* Order ID */
     .report-table td:nth-child(1) {
-        min-width: 100px;
-        max-width: 150px;
+       min-width: 200px !important;
+    max-width: 200px !important;
+     padding-left: 20px !important;
+   
     }
 
     .report-table th:nth-child(2), /* Shipment ID */
@@ -411,8 +440,12 @@
         z-index: -1;
     }
 
-    .status-badge i {
-        font-size: 8px;
+    /* Status icons */
+    .status-icon {
+        font-size: 11px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         position: relative;
         z-index: 1;
     }
@@ -469,19 +502,18 @@
     }
 
     .data-highlight {
-        font-weight: 600;
+        font-weight: 400;
         color: #1a202c;
         display: flex;
         align-items: center;
         justify-content: center; /* Center content */
         gap: 4px;
-        font-size: 13px;
+        font-size: 14px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         margin: 0 auto; /* Center the highlight container */
     }
-
     .data-highlight i {
         color: #4f46e5;
         font-size: 11px;
@@ -678,7 +710,7 @@
         .stats-container {
             grid-template-columns: repeat(3, 1fr);
         }
-        
+
         .report-table {
             min-width: 1100px;
         }
@@ -688,49 +720,59 @@
         .report-container {
             padding: 15px;
         }
-        
+
         .report-header {
             flex-direction: column;
             text-align: center;
             gap: 12px;
         }
-        
+
         .header-icon {
             width: 50px;
             height: 50px;
         }
-        
+
         .report-title {
             font-size: 20px;
         }
-        
+
         .stats-container {
             grid-template-columns: repeat(2, 1fr);
-            gap: 12px;
+            gap: 10px;
         }
-        
+
         .stat-card {
-            padding: 15px 12px;
+            padding: 14px;
+            gap: 10px;
         }
-        
+
+        .stat-icon {
+            width: 40px;
+            height: 40px;
+        }
+
+        .stat-icon i {
+            font-size: 16px;
+        }
+
         .stat-value {
             font-size: 20px;
         }
-        
+
         .filter-row {
             flex-direction: column;
             align-items: stretch;
             gap: 12px;
         }
-        
+
         .filter-group {
             min-width: 100%;
         }
-        
+
         .report-table {
             min-width: 1000px;
         }
-        
+
         /* Adjust column widths for mobile */
         .report-table th,
         .report-table td {
@@ -743,7 +785,7 @@
             gap: 10px;
             align-items: stretch;
         }
-        
+
         .pagination-controls {
             justify-content: center;
         }
@@ -753,22 +795,22 @@
         .stats-container {
             grid-template-columns: 1fr;
         }
-        
+
         .stat-card {
-            padding: 15px;
+            padding: 12px;
         }
-        
+
         .report-table {
             min-width: 900px;
         }
-        
+
         .report-table th,
         .report-table td {
             min-width: 90px;
             padding: 8px 6px;
             font-size: 12px;
         }
-        
+
         .status-badge {
             font-size: 10px !important;
             padding: 4px 8px 4px 6px !important;
@@ -794,43 +836,55 @@
             <div class="stat-icon">
                 <i class="fas fa-box-open"></i>
             </div>
-            <div class="stat-value" id="totalShipments">{{ count($reports) }}</div>
-            <div class="stat-label">Total Shipments</div>
+            <div class="stat-content">
+                <div class="stat-value" id="totalShipments">{{ count($reports) }}</div>
+                <div class="stat-label">Total Shipments</div>
+            </div>
         </div>
         <div class="stat-card warning">
             <div class="stat-icon">
                 <i class="fas fa-clock"></i>
             </div>
-            <div class="stat-value" id="pendingShipments">0</div>
-            <div class="stat-label">Pending Shipments</div>
+            <div class="stat-content">
+                <div class="stat-value" id="pendingShipments">0</div>
+                <div class="stat-label">Pending Shipments</div>
+            </div>
         </div>
         <div class="stat-card info">
             <div class="stat-icon">
                 <i class="fas fa-truck-moving"></i>
             </div>
-            <div class="stat-value" id="inTransitShipments">0</div>
-            <div class="stat-label">In Transit</div>
+            <div class="stat-content">
+                <div class="stat-value" id="inTransitShipments">0</div>
+                <div class="stat-label">In Transit</div>
+            </div>
         </div>
         <div class="stat-card secondary">
             <div class="stat-icon">
                 <i class="fas fa-shipping-fast"></i>
             </div>
-            <div class="stat-value" id="dispatchedShipments">0</div>
-            <div class="stat-label">Dispatched</div>
+            <div class="stat-content">
+                <div class="stat-value" id="dispatchedShipments">0</div>
+                <div class="stat-label">Dispatched</div>
+            </div>
         </div>
         <div class="stat-card success">
             <div class="stat-icon">
                 <i class="fas fa-check-circle"></i>
             </div>
-            <div class="stat-value" id="deliveredShipments">0</div>
-            <div class="stat-label">Delivered</div>
+            <div class="stat-content">
+                <div class="stat-value" id="deliveredShipments">0</div>
+                <div class="stat-label">Delivered</div>
+            </div>
         </div>
         <div class="stat-card danger">
             <div class="stat-icon">
                 <i class="fas fa-exclamation-triangle"></i>
             </div>
-            <div class="stat-value" id="overdueInvoices">0</div>
-            <div class="stat-label">Overdue Invoices</div>
+            <div class="stat-content">
+                <div class="stat-value" id="overdueInvoices">0</div>
+                <div class="stat-label">Overdue Invoices</div>
+            </div>
         </div>
     </div>
 
@@ -879,24 +933,23 @@
             </div>
         </div>
     </div>
-
     <!-- TABLE SECTION -->
     <div class="table-container">
         <table class="report-table">
             <thead>
                 <tr>
-                    <th><i class="fas fa-hashtag"></i> Order ID</th>
-                    <th><i class="fas fa-barcode"></i> Shipment ID</th>
-                    <th><i class="fas fa-building"></i> Company Name</th>
-                    <th><i class="fas fa-user"></i> User Name</th>
+                    <th>Order ID</th>
+                    <th>Shipment ID</th>
+                    <th>Company Name</th>
+                    <th>User Name</th>
                     <th><i class="fas fa-map-marker-alt"></i> Origin</th>
                     <th><i class="fas fa-location-arrow"></i> Destination</th>
-                    <th><i class="fas fa-calendar"></i> Date</th>
-                    <th><i class="fas fa-file-invoice"></i> Invoice ID</th>
-                    <th><i class="fas fa-calendar-day"></i> Invoice Date</th>
-                    <th><i class="fas fa-money-bill-wave"></i> Invoice Amount</th>
-                    <th><i class="fas fa-receipt"></i> Invoice Status</th>
-                    <th><i class="fas fa-shipping-fast"></i> Shipment Status</th>
+                    <th>Date</th>
+                    <th>Invoice ID</th>
+                    <th>Invoice Date</th>
+                    <th>Invoice Amount</th>
+                    <th>Invoice Status</th>
+                    <th>Shipment Status</th>
                 </tr>
             </thead>
             <tbody id="reportTableBody">
@@ -904,13 +957,11 @@
                     <tr data-status="{{ $r->shipment_status }}" data-invoice-status="{{ strtolower($r->invoice_status) }}" data-company="{{ $r->company_name ?? '' }}" data-date="{{ $r->shipment_date }}">
                         <td>
                             <span class="data-highlight" title="{{ $r->order_id }}">
-                                <i class="fas fa-hashtag"></i>
                                 {{ $r->order_id }}
                             </span>
                         </td>
                         <td>
                             <span class="data-highlight" title="{{ $r->shipment_id }}">
-                                <i class="fas fa-barcode"></i>
                                 {{ $r->shipment_id }}
                             </span>
                         </td>
@@ -919,9 +970,10 @@
                         <td>
                             <span class="data-highlight" title="{{ $r->origin }}">
                                 <i class="fas fa-map-marker-alt"></i>
-                                {{ $r->origin }}
+                                {{ $r->origin ?? '-' }}
                             </span>
                         </td>
+
                         <td>
                             <span class="data-highlight" title="{{ $r->destination }}">
                                 <i class="fas fa-location-arrow"></i>
@@ -931,31 +983,43 @@
                         <td>{{ \Carbon\Carbon::parse($r->shipment_date)->format('d/m/Y') }}</td>
                         <td>
                             <span class="data-highlight" title="{{ $r->invoice_number }}">
-                                <i class="fas fa-file-invoice"></i>
                                 {{ $r->invoice_number }}
                             </span>
                         </td>
                         <td>{{ \Carbon\Carbon::parse($r->invoice_date)->format('d/m/Y') }}</td>
                         <td>
                             <span class="data-highlight" title="₹{{ number_format($r->final_amount) }}">
-                                <i class="fas fa-rupee-sign"></i>
-                                {{ number_format($r->final_amount) }}
+                                ₹{{ number_format($r->final_amount) }}
                             </span>
                         </td>
                         <td>
-                            @php $ist = strtolower($r->invoice_status); @endphp
+                            @php $ist = strtolower($r->invoice_status ?? ''); @endphp
                             <span class="status-badge 
                                 @if($ist === 'paid') status-paid
                                 @elseif($ist === 'pending') status-pending
                                 @elseif($ist === 'overdue') status-overdue
                                 @endif">
-                                <i class="fas fa-circle"></i>
+                                @if($ist === 'paid')
+                                    <i class="bi bi-check-circle-fill status-icon"></i>
+                                @elseif($ist === 'pending')
+                                    <i class="bi bi-clock-fill status-icon"></i>
+                                @elseif($ist === 'overdue')
+                                    <i class="bi bi-exclamation-triangle-fill status-icon"></i>
+                                @endif
                                 {{ ucfirst($ist) }}
                             </span>
                         </td>
                         <td>
                             <span class="status-badge ship-{{ $r->shipment_status }}">
-                                <i class="fas fa-circle"></i>
+                                @if($r->shipment_status === 'pending')
+                                    <i class="bi bi-clock-fill status-icon"></i>
+                                @elseif($r->shipment_status === 'in_transit')
+                                    <i class="bi bi-truck status-icon"></i>
+                                @elseif($r->shipment_status === 'dispatched')
+                                    <i class="bi bi-send-fill status-icon"></i>
+                                @elseif($r->shipment_status === 'delivered')
+                                    <i class="bi bi-check-circle-fill status-icon"></i>
+                                @endif
                                 {{ ucfirst(str_replace('_',' ', $r->shipment_status)) }}
                             </span>
                         </td>
@@ -999,7 +1063,6 @@
         </div>
     </div>
 </div>
-
 <script>
     // Pagination state
     let currentPage = 1;
@@ -1007,32 +1070,68 @@
     let allReports = @json($reports);
     let filteredReports = [...allReports];
 
+    // Status icon helper functions
+    function getInvoiceStatusIcon(status) {
+        switch(status) {
+            case 'paid':
+                return '<i class="bi bi-check-circle-fill status-icon"></i>';
+            case 'pending':
+                return '<i class="bi bi-clock-fill status-icon"></i>';
+            case 'overdue':
+                return '<i class="bi bi-exclamation-triangle-fill status-icon"></i>';
+            default:
+                return '';
+        }
+    }
+
+    function getShipmentStatusIcon(status) {
+        switch(status) {
+            case 'pending':
+                return '<i class="bi bi-clock-fill status-icon"></i>';
+            case 'in_transit':
+                return '<i class="bi bi-truck status-icon"></i>';
+            case 'dispatched':
+                return '<i class="bi bi-send-fill status-icon"></i>';
+            case 'delivered':
+                return '<i class="bi bi-check-circle-fill status-icon"></i>';
+            default:
+                return '';
+        }
+    }
+
     document.addEventListener('DOMContentLoaded', function() {
         // Initialize statistics and pagination
         updateStatistics();
         renderTable();
         updatePaginationControls();
-        
+
         // Set default dates for demo purposes
         const today = new Date();
         const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
-        
+
         const formatDate = (date) => {
             return date.toISOString().split('T')[0];
         };
-        
-        document.getElementById('fromDate').value = formatDate(lastMonth);
-        document.getElementById('toDate').value = formatDate(today);
+
+        if (document.getElementById('fromDate')) document.getElementById('fromDate').value = formatDate(lastMonth);
+        if (document.getElementById('toDate')) document.getElementById('toDate').value = formatDate(today);
 
         // Add event listeners for filters
-        document.getElementById('fromDate').addEventListener('change', filterTable);
-        document.getElementById('toDate').addEventListener('change', filterTable);
-        document.getElementById('companyFilter').addEventListener('change', filterTable);
-        document.getElementById('statusFilter').addEventListener('change', filterTable);
+        const fd = document.getElementById('fromDate');
+        const td = document.getElementById('toDate');
+        const cf = document.getElementById('companyFilter');
+        const sf = document.getElementById('statusFilter');
+
+        if(fd) fd.addEventListener('change', filterTable);
+        if(td) td.addEventListener('change', filterTable);
+        if(cf) cf.addEventListener('change', filterTable);
+        if(sf) sf.addEventListener('change', filterTable);
 
         // Bind pagination events
-        document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
-        document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);
+        const prevBtn = document.getElementById('prevPageBtn');
+        const nextBtn = document.getElementById('nextPageBtn');
+        if(prevBtn) prevBtn.addEventListener('click', goToPreviousPage);
+        if(nextBtn) nextBtn.addEventListener('click', goToNextPage);
 
         function updateStatistics() {
             const rows = document.querySelectorAll('#reportTableBody tr');
@@ -1046,7 +1145,7 @@
             rows.forEach(row => {
                 // Skip if row is hidden or empty state
                 if (row.style.display === 'none' || row.querySelector('.empty-state')) return;
-                
+
                 totalShipments++;
 
                 // Count shipment statuses
@@ -1055,19 +1154,25 @@
                 if (status === 'in_transit') inTransitShipments++;
                 if (status === 'dispatched') dispatchedShipments++;
                 if (status === 'delivered') deliveredShipments++;
-                
+
                 // Count invoice statuses
                 const invoiceStatus = row.getAttribute('data-invoice-status');
                 if (invoiceStatus === 'overdue') overdueInvoices++;
             });
 
             // Update statistics cards
-            document.getElementById('totalShipments').textContent = totalShipments;
-            document.getElementById('pendingShipments').textContent = pendingShipments;
-            document.getElementById('inTransitShipments').textContent = inTransitShipments;
-            document.getElementById('dispatchedShipments').textContent = dispatchedShipments;
-            document.getElementById('deliveredShipments').textContent = deliveredShipments;
-            document.getElementById('overdueInvoices').textContent = overdueInvoices;
+            const elTotal = document.getElementById('totalShipments');
+            if(elTotal) elTotal.textContent = totalShipments;
+            const elPending = document.getElementById('pendingShipments');
+            if(elPending) elPending.textContent = pendingShipments;
+            const elInTransit = document.getElementById('inTransitShipments');
+            if(elInTransit) elInTransit.textContent = inTransitShipments;
+            const elDispatched = document.getElementById('dispatchedShipments');
+            if(elDispatched) elDispatched.textContent = dispatchedShipments;
+            const elDelivered = document.getElementById('deliveredShipments');
+            if(elDelivered) elDelivered.textContent = deliveredShipments;
+            const elOverdue = document.getElementById('overdueInvoices');
+            if(elOverdue) elOverdue.textContent = overdueInvoices;
         }
 
         // Pagination Functions
@@ -1094,18 +1199,18 @@
             const nextBtn = document.getElementById('nextPageBtn');
             const pageInfo = document.getElementById('pageInfo');
             const paginationPages = document.getElementById('paginationPages');
-            
-            prevBtn.disabled = currentPage === 1;
-            nextBtn.disabled = currentPage === totalPages || totalPages === 0;
-            
+
+            if(prevBtn) prevBtn.disabled = currentPage === 1;
+            if(nextBtn) nextBtn.disabled = currentPage === totalPages || totalPages === 0;
+
             // Update page info text
             const startIndex = (currentPage - 1) * itemsPerPage + 1;
             const endIndex = Math.min(currentPage * itemsPerPage, filteredReports.length);
-            pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${filteredReports.length} entries`;
-            
+            if(pageInfo) pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${filteredReports.length} entries`;
+
             // Generate page numbers
-            paginationPages.innerHTML = '';
-            
+            if(paginationPages) paginationPages.innerHTML = '';
+
             if (totalPages <= 7) {
                 // Show all pages
                 for (let i = 1; i <= totalPages; i++) {
@@ -1114,27 +1219,28 @@
             } else {
                 // Show first page, current page range, and last page
                 addPageButton(1, paginationPages);
-                
+
                 if (currentPage > 3) {
-                    paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
+                    if(paginationPages) paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
                 }
-                
+
                 const start = Math.max(2, currentPage - 1);
                 const end = Math.min(totalPages - 1, currentPage + 1);
-                
+
                 for (let i = start; i <= end; i++) {
                     addPageButton(i, paginationPages);
                 }
-                
+
                 if (currentPage < totalPages - 2) {
-                    paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
+                    if(paginationPages) paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
                 }
-                
+
                 addPageButton(totalPages, paginationPages);
             }
         }
 
         function addPageButton(pageNumber, container) {
+            if(!container) return;
             const button = document.createElement('button');
             button.className = 'pagination-page-btn';
             if (pageNumber === currentPage) {
@@ -1152,8 +1258,9 @@
         // Render Table Function
         function renderTable() {
             const tbody = document.getElementById('reportTableBody');
+            if(!tbody) return;
             tbody.innerHTML = '';
-            
+
             if (filteredReports.length === 0) {
                 tbody.innerHTML = `
                     <tr>
@@ -1170,12 +1277,12 @@
                 `;
                 return;
             }
-            
+
             // Calculate pagination
             const startIndex = (currentPage - 1) * itemsPerPage;
             const endIndex = startIndex + itemsPerPage;
             const paginatedItems = filteredReports.slice(startIndex, endIndex);
-            
+
             paginatedItems.forEach(report => {
                 const ist = (report.invoice_status || '').toLowerCase();
                 const row = document.createElement('tr');
@@ -1183,46 +1290,42 @@
                 row.setAttribute('data-invoice-status', ist);
                 row.setAttribute('data-company', report.company_name || '');
                 row.setAttribute('data-date', report.shipment_date);
-                
+
                 row.innerHTML = `
                     <td>
                         <span class="data-highlight" title="${report.order_id}">
-                            <i class="fas fa-hashtag"></i>
-                            ${report.order_id}
+                            ${report.order_id || '-'}
                         </span>
                     </td>
                     <td>
                         <span class="data-highlight" title="${report.shipment_id}">
-                            <i class="fas fa-barcode"></i>
-                            ${report.shipment_id}
+                            ${report.shipment_id || '-'}
                         </span>
                     </td>
                     <td title="${report.company_name || '-'}">${report.company_name || '-'}</td>
                     <td title="${report.customer_name || '-'}">${report.customer_name || '-'}</td>
                     <td>
-                        <span class="data-highlight" title="${report.origin}">
+                        <span class="data-highlight" title="${report.origin || '-'}">
                             <i class="fas fa-map-marker-alt"></i>
-                            ${report.origin}
+                            ${report.origin || '-'}
                         </span>
                     </td>
                     <td>
-                        <span class="data-highlight" title="${report.destination}">
+                        <span class="data-highlight" title="${report.destination || '-'}">
                             <i class="fas fa-location-arrow"></i>
-                            ${report.destination}
+                            ${report.destination || '-'}
                         </span>
                     </td>
-                    <td>${new Date(report.shipment_date).toLocaleDateString('en-GB')}</td>
+                    <td>${report.shipment_date ? new Date(report.shipment_date).toLocaleDateString('en-GB') : '-'}</td>
                     <td>
-                        <span class="data-highlight" title="${report.invoice_number}">
-                            <i class="fas fa-file-invoice"></i>
-                            ${report.invoice_number}
+                        <span class="data-highlight" title="${report.invoice_number || '-'}">
+                            ${report.invoice_number || '-'}
                         </span>
                     </td>
-                    <td>${new Date(report.invoice_date).toLocaleDateString('en-GB')}</td>
+                    <td>${report.invoice_date ? new Date(report.invoice_date).toLocaleDateString('en-GB') : '-'}</td>
                     <td>
-                        <span class="data-highlight" title="₹${Number(report.final_amount).toLocaleString('en-IN')}">
-                            <i class="fas fa-rupee-sign"></i>
-                            ${Number(report.final_amount).toLocaleString('en-IN')}
+                        <span class="data-highlight" title="₹${Number(report.final_amount || 0).toLocaleString('en-IN')}">
+                            ₹${Number(report.final_amount || 0).toLocaleString('en-IN')}
                         </span>
                     </td>
                     <td>
@@ -1230,14 +1333,14 @@
                             ${ist === 'paid' ? 'status-paid' : ''}
                             ${ist === 'pending' ? 'status-pending' : ''}
                             ${ist === 'overdue' ? 'status-overdue' : ''}">
-                            <i class="fas fa-circle"></i>
-                            ${ist.charAt(0).toUpperCase() + ist.slice(1)}
+                            ${getInvoiceStatusIcon(ist)}
+                            ${ist ? ist.charAt(0).toUpperCase() + ist.slice(1) : '-'}
                         </span>
                     </td>
                     <td>
-                        <span class="status-badge ship-${report.shipment_status}">
-                            <i class="fas fa-circle"></i>
-                            ${report.shipment_status.charAt(0).toUpperCase() + report.shipment_status.slice(1).replace('_', ' ')}
+                        <span class="status-badge ship-${report.shipment_status || ''}">
+                            ${getShipmentStatusIcon(report.shipment_status)}
+                            ${report.shipment_status ? (report.shipment_status.charAt(0).toUpperCase() + report.shipment_status.slice(1)).replace('_',' ') : '-'}
                         </span>
                     </td>
                 `;
@@ -1246,10 +1349,10 @@
         }
 
         function filterTable() {
-            const fromDate = document.getElementById('fromDate').value;
-            const toDate = document.getElementById('toDate').value;
-            const companyFilter = document.getElementById('companyFilter').value;
-            const statusFilter = document.getElementById('statusFilter').value;
+            const fromDate = document.getElementById('fromDate')?.value;
+            const toDate = document.getElementById('toDate')?.value;
+            const companyFilter = document.getElementById('companyFilter')?.value;
+            const statusFilter = document.getElementById('statusFilter')?.value;
 
             filteredReports = allReports.filter(report => {
                 let include = true;
@@ -1285,13 +1388,13 @@
             updateStatistics();
         }
 
-        // Add hover effects to table rows
+        // Add hover effects to table rows (for rows present initially in DOM — dynamic rows handled in renderTable)
         const tableRows = document.querySelectorAll('.report-table tbody tr');
         tableRows.forEach(row => {
             row.addEventListener('mouseenter', function() {
                 this.style.transform = 'translateY(-2px)';
             });
-            
+
             row.addEventListener('mouseleave', function() {
                 this.style.transform = 'translateY(0)';
             });
diff --git a/resources/views/admin/requests.blade.php b/resources/views/admin/requests.blade.php
index 180cfcc..cab3f38 100644
--- a/resources/views/admin/requests.blade.php
+++ b/resources/views/admin/requests.blade.php
@@ -365,7 +365,22 @@
                                     @elseif($req->status == 'rejected')<span class="badge badge-rejected"><i class="bi bi-x-circle-fill status-icon"></i>Rejected</span>
                                     @else<span class="badge badge-pending"><i class="bi bi-clock-fill status-icon"></i>Pending</span>@endif
                                 </td>
-                                <td>N/A</td>
+                                <td>
+                                    @if($req->status == 'pending')
+                                        <a href="{{ route('admin.requests.approve', $req->id) }}" 
+                                        class="btn btn-success btn-sm">
+                                            <i class="bi bi-check-circle"></i> Approve
+                                        </a>
+
+                                        <a href="{{ route('admin.requests.reject', $req->id) }}" 
+                                        class="btn btn-danger btn-sm">
+                                            <i class="bi bi-x-circle"></i> Reject
+                                        </a>
+                                    @else
+                                        <span class="text-muted">No Action</span>
+                                    @endif
+                                </td>
+
                             </tr>
                         @empty
                             <tr><td colspan="11" class="text-center text-muted py-4">No records found.</td></tr>
diff --git a/routes/api.php b/routes/api.php
index cb77329..2df36b1 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -4,17 +4,44 @@ use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\RequestController;
 use App\Http\Controllers\UserAuthController;
 use App\Http\Controllers\MarkListController;
+use App\Http\Controllers\User\UserOrderController;
+use App\Http\Controllers\User\UserProfileController;
+
 
 //user send request
 Route::post('/signup-request', [RequestController::class, 'usersignup']);
 
 //login / logout
 Route::post('/user/login', [UserAuthController::class, 'login']);
-Route::post('/user/logout', [UserAuthController::class, 'logout'])->middleware('auth:api');
-
 
 
 Route::middleware(['auth:api'])->group(function () {
-    Route::get('/show-mark-list', [MarkListController::class, 'showmarklist']);     // Fetch all marks by user
-    Route::post('/add-mark-no', [MarkListController::class, 'addmarkno']);    // Create new mark
+
+    Route::post('/user/logout', [UserAuthController::class, 'logout']);
+
+    // Marklist
+    Route::get('/show-mark-list', [MarkListController::class, 'showmarklist']);
+    Route::post('/add-mark-no', [MarkListController::class, 'addmarkno']);
+
+    // Orders
+    Route::get('/user/order-summary', [UserOrderController::class, 'orderSummary']);
+    Route::get('/user/orders', [UserOrderController::class, 'allOrders']);
+    Route::get('/user/order/{order_id}/details', [UserOrderController::class, 'orderDetails']);
+    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::get('/user/invoice/{invoice_id}/details', [UserOrderController::class, 'invoiceDetails']);
+
+    // Invoice List
+    Route::get('/user/invoices', [UserOrderController::class, 'allInvoices']);
+    Route::get('/user/invoice/{invoice_id}/installments', [UserOrderController::class, 'invoiceInstallmentsById']);
+
+    // Profile
+    
+
+    Route::get('/user/profile', [UserProfileController::class, 'profile']);
+    Route::post('/user/profile-image', [UserProfileController::class, 'updateProfileImage']);
+    Route::post('/user/profile-update-request', [UserProfileController::class, 'updateProfileRequest']);
+
+    // Route::post('/user/profile/update', [UserProfileController::class, 'updateProfile']);
 });
diff --git a/routes/web.php b/routes/web.php
index 2cac474..f7b2298 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -75,6 +75,20 @@ Route::prefix('admin')
         Route::get('/requests/reject/{id}', [UserRequestController::class, 'reject'])
             ->name('admin.requests.reject');
 
+        // PROFILE UPDATE REQUESTS
+        Route::get('/profile-update-requests', 
+            [UserRequestController::class, 'profileUpdateRequests']
+        )->name('admin.profile.requests');
+
+        Route::get('/profile-update/approve/{id}', 
+            [UserRequestController::class, 'approveProfileUpdate']
+        )->name('admin.profile.approve');
+
+        Route::get('/profile-update/reject/{id}', 
+            [UserRequestController::class, 'rejectProfileUpdate']
+        )->name('admin.profile.reject');
+
+
 
         // ---------------------------
         // MARK LIST
@@ -113,23 +127,59 @@ Route::prefix('admin')
 
         Route::get('/orders/view/{id}', [AdminOrderController::class, 'popup'])
             ->name('admin.orders.popup');
-
-
+            
         // ---------------------------
-        // SHIPMENTS
+            // ORDERS (FIXED ROUTES)
+            // ---------------------------
+
+            // Add item to order
+            Route::post('/orders/{order}/item', [AdminOrderController::class, 'addItem'])
+                ->name('admin.orders.addItem');
+
+            // Delete item from order
+            Route::delete('/orders/item/{id}', [AdminOrderController::class, 'deleteItem'])
+                ->name('admin.orders.deleteItem');
+
+            // Restore deleted item
+            Route::post('/orders/item/{id}/restore', [AdminOrderController::class, 'restoreItem'])
+                ->name('admin.orders.restoreItem');
+
+            // Update main order fields
+            Route::post('/orders/{id}/update', [AdminOrderController::class, 'update'])
+                ->name('admin.orders.update');
+
+            // Delete full order
+            Route::delete('/orders/{id}/delete', [AdminOrderController::class, 'destroy'])
+                ->name('admin.orders.destroy');
+                
+        // ---------------------------
+        // SHIPMENTS (FIXED ROUTES)
         // ---------------------------
         Route::get('/shipments', [ShipmentController::class, 'index'])
             ->name('admin.shipments');
 
-        Route::post('/shipments/store', [ShipmentController::class, 'store'])
+        Route::post('/shipments', [ShipmentController::class, 'store'])
             ->name('admin.shipments.store');
 
         Route::post('/shipments/update-status', [ShipmentController::class, 'updateStatus'])
             ->name('admin.shipments.updateStatus');
 
+        // Get shipment orders for modal (AJAX)
+        Route::get('/shipments/{id}/orders', [ShipmentController::class, 'getShipmentOrders'])
+            ->name('admin.shipments.orders');
+
+        // Get shipment details for edit (AJAX)
         Route::get('/shipments/{id}', [ShipmentController::class, 'show'])
             ->name('admin.shipments.show');
 
+        // Shipment Update
+        Route::put('/shipments/{id}', [ShipmentController::class, 'update'])
+            ->name('admin.shipments.update');
+
+        // Shipment Delete
+        Route::delete('/shipments/{id}', [ShipmentController::class, 'destroy'])
+            ->name('admin.shipments.destroy');
+
 
         // ---------------------------
         // INVOICES
@@ -149,8 +199,7 @@ Route::prefix('admin')
         Route::post('/invoices/{invoice}/installments', [AdminInvoiceController::class, 'storeInstallment'])
             ->name('admin.invoice.installment.store');
 
-        Route::post('/invoices/{id}/installment', [AdminInvoiceController::class, 'storeInstallment'])
-        ->name('admin.invoice.installment.store');
+       
 
         Route::delete('/installment/{id}', [AdminInvoiceController::class, 'deleteInstallment'])
         ->name('admin.invoice.installment.delete');