From 22be272067f0abd2d352a91293bf8331a76cdd0b766dc2c47c17803612a3625e Mon Sep 17 00:00:00 2001
From: Utkarsh Khedkar <utkarshkhedkar2003@gmail.com>
Date: Mon, 17 Nov 2025 10:35:42 +0530
Subject: [PATCH] Shipment Frontend

---
 resources/views/admin/dashboard.blade.php |  328 ++++-
 resources/views/admin/shipments.blade.php | 1554 ++++++++++++++++-----
 2 files changed, 1504 insertions(+), 378 deletions(-)

diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php
index 30975a3..68d1dad 100644
--- a/resources/views/admin/dashboard.blade.php
+++ b/resources/views/admin/dashboard.blade.php
@@ -4,6 +4,11 @@
 
 @section('content')
 <style>
+  /*Remove horizontal scroll bar*/
+  html, body {
+    overflow-x: hidden !important;
+}
+
 /* Your existing CSS remains exactly the same */
 body, .container-fluid { background: #f4f7fc; }
 .dash-top-titlebox {
@@ -69,10 +74,11 @@ body, .container-fluid { background: #f4f7fc; }
   transform: scale(1.09) rotate(7deg);
   box-shadow:0 0 13px #2396f33b;
 }
-/* Table header box-round style */
+
+/* UPDATED: Table header with curves on both sides */
 .table thead tr {
   background: #feebbe !important;
-  border-radius: 17px 17px 0 0;
+  border-radius: 12px 12px 0 0;
   box-shadow: 0 2px 19px #f8cf667e;
 }
 .table thead th {
@@ -81,8 +87,8 @@ body, .container-fluid { background: #f4f7fc; }
   font-weight: 700; color: #343535; letter-spacing: 0.02em; font-size:15px;
   padding-top: 12px; padding-bottom: 10px;
 }
-.table thead th:first-child  { border-radius: 17px 0 0 0;}
-.table thead th:last-child   { border-radius: 0 17px 0 0;}
+.table thead th:first-child  { border-radius: 9px 0 0 0;}
+.table thead th:last-child   { border-radius: 0 9px 0 0;}
 /* ------- */
 
 .order-mgmt-box {
@@ -91,7 +97,7 @@ body, .container-fluid { background: #f4f7fc; }
 }
 .order-mgmt-bar {
   display:flex; justify-content:space-between; align-items:center;
-  border-radius:17px 17px 0 0; background: #fffbe9;
+  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;
 }
@@ -111,10 +117,58 @@ body, .container-fluid { background: #f4f7fc; }
   background: linear-gradient(90deg,#3264f8,#3acfff 140%);
   box-shadow:0 4px 25px #5ab8f880;
 }
-.card-body, .order-mgmt-main { background: #fff; border-radius: 0 0 17px 17px; padding:25px; }
-.card { border-radius:17px; box-shadow:0 7px 29px #e7eefd8c; border:none; margin-bottom:23px!important;}
-.table { background:#fff; border-radius:9px; box-shadow:0 2px 12px #e2ebf941;}
-.table-striped tbody tr:nth-of-type(odd) { background:#f9fafc; }
+.card-body, .order-mgmt-main { 
+  background: #fff; 
+  border-radius: 0 0 17px 17px; 
+  padding:25px; 
+  margin-top: 15px;
+}
+.card { 
+  border-radius:17px; 
+  box-shadow:0 7px 29px #e7eefd8c; 
+  border:none; 
+  margin-bottom:23px!important;
+  margin-top: 15px;
+}
+
+
+/* FURTHER REDUCED: Table row spacing */
+.table { 
+  background:#fff; 
+  border-radius:9px; 
+  box-shadow:0 2px 12px #e2ebf941;
+  border-collapse: separate;
+  border-spacing: 0 2px; /* FURTHER REDUCED: from 4px to 2px */
+}
+.table-striped tbody tr {
+  background: #fff;
+  border-radius: 6px; /* FURTHER REDUCED: from 8px to 6px */
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04); /* FURTHER REDUCED shadow */
+  margin-bottom: 2px; /* FURTHER REDUCED: from 4px to 2px */
+  transition: all 0.3s ease;
+}
+.table-striped tbody tr:hover {
+  box-shadow: 0 2px 6px rgba(0,0,0,0.08); 
+  transform: translateY(-1px);
+}
+.table-striped tbody tr:nth-of-type(odd) { 
+  background:#f9fafc; 
+}
+.table-striped tbody tr:nth-of-type(even) { 
+  background:#ffffff; 
+}
+.table td {
+  padding: 12px 6px;
+  border: none;
+  position: relative;
+}
+.table td:first-child {
+  border-radius: 6px 0 0 6px; 
+}
+.table td:last-child {
+  border-radius: 0 6px 6px 0; 
+}
+
 .table-responsive { border-radius:10px; }
 .badge { font-size:13px; font-weight:600; padding:7px 17px; border-radius:12px;}
 .bg-info { background-color:#22cbfa!important; color:#fff!important;}
@@ -361,6 +415,260 @@ body, .container-fluid { background: #f4f7fc; }
   background: #5a6268;
 }
 
+/* ADDED: Spacing between content sections */
+.order-mgmt-content-section {
+  margin-top: 20px;
+}
+
+/* MODERN ORDER DETAILS MODAL STYLES */
+.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: 11px 16px;
+  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;
+}
+
+/* Modern order details content */
+.order-details-container {
+  background: white;
+  border-radius: 16px;
+  padding: 25px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  margin-bottom: 20px;
+}
+
+.order-details-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+  padding-bottom: 15px;
+  border-bottom: 2px solid #f1f3f4;
+}
+
+.order-id {
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: #2c3e50;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.order-status {
+  padding: 8px 20px;
+  border-radius: 25px;
+  font-weight: 600;
+  font-size: 0.9rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+#orderDetailsBody {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+#orderDetailsBody > * {
+  width: 100%;
+  max-width: 100%;
+}
+
+
+.status-pending { background: #fff3cd; color: #856404; }
+.status-completed { background: #d1edff; color: #0c5460; }
+.status-processing { background: #d4edda; color: #155724; }
+
+.order-info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  margin-bottom: 25px;
+}
+
+.info-card {
+  background: #f8f9fa;
+  padding: 20px;
+  border-radius: 12px;
+  border-left: 4px solid #667eea;
+  transition: all 0.3s ease;
+}
+
+.info-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.info-card h6 {
+  font-size: 0.9rem;
+  color: #6c757d;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.info-card p {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #2c3e50;
+  margin: 0;
+}
+
+/* Modern table for order items */
+.modern-table {
+  width: 100%;
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
+}
+
+.modern-table thead {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.modern-table th {
+  padding: 16px 12px;
+  color: white;
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 0.85rem;
+  letter-spacing: 0.5px;
+  border: none;
+}
+
+.modern-table tbody tr {
+  transition: all 0.3s ease;
+  border-bottom: 1px solid #f1f3f4;
+}
+
+.modern-table tbody tr:hover {
+  background: #f8f9fa;
+  transform: translateX(5px);
+}
+
+.modern-table td {
+  padding: 14px 12px;
+  border: none;
+  color: #495057;
+  font-weight: 500;
+}
+
+.modern-table tbody tr:last-child {
+  border-bottom: none;
+}
+
+/* Summary section */
+.order-summary {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  padding: 10px;
+  border-radius: 16px;
+  margin-top: 15px;
+  
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+}
+
+.summary-item {
+  text-align: center;
+  padding: 15px;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.summary-item .label {
+  font-size: 0.9rem;
+  color: #6c757d;
+  margin-bottom: 5px;
+}
+
+.summary-item .value {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: #2c3e50;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .modal-header {
+    padding: 15px;
+  }
+  
+  .modal-body {
+    padding: 20px;
+  }
+  
+  .order-details-container {
+    padding: 20px;
+  }
+  
+  .order-info-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .info-card {
+    padding: 15px;
+  }
+  
+  .modern-table {
+    font-size: 0.9rem;
+  }
+  
+  .summary-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 </style>
 
 <div class="container-fluid py-3">
@@ -729,7 +1037,7 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 </script>
 
-<!-- ORDER DETAILS MODAL -->
+<!-- MODERN ORDER DETAILS MODAL -->
 <div class="modal fade" id="orderDetailsModal" tabindex="-1">
   <div class="modal-dialog modal-xl modal-dialog-scrollable">
     <div class="modal-content">
diff --git a/resources/views/admin/shipments.blade.php b/resources/views/admin/shipments.blade.php
index a6f7a3f..937b4c8 100644
--- a/resources/views/admin/shipments.blade.php
+++ b/resources/views/admin/shipments.blade.php
@@ -1,167 +1,881 @@
-
-
 @extends('admin.layouts.app')
 
 @section('page-title', 'Shipment Management')
 
 @section('content')
 <style>
-    .search-shipment-bar {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 15px;
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    flex-wrap: wrap;
-}
-.search-shipment-bar input, 
-.search-shipment-bar select {
-    padding: 8px 12px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    flex: 1;
-    min-width: 150px;
-}
-.btn-add-shipment {
-    background-color: #0d6efd;
-    color: white;
-    border: none;
-    padding: 8px 16px;
-    border-radius: 4px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    transition: background-color 0.3s;
-    white-space: nowrap;
-}
-.btn-add-shipment:hover {
-    background-color: #0b5ed7;
-}
-.search-icon {
-    font-size: 19px;
-}
-.truck-icon {
-    font-size: 17px;
-}
-
-@media (max-width: 768px) {
-    .search-shipment-bar {
-        flex-direction: column;
-        align-items: stretch;
+    /*Remove horizontal scroll bar*/
+    html, body {
+        overflow-x: hidden !important;
     }
+    
+    .table, .custom-table-modal, .shipment-details-table {
+        min-width: unset !important;
+        width: 100% !important;
+        table-layout: auto !important;
+    }
+    
+    .table thead th,
+    .table tbody td,
+    .custom-table-modal th,
+    .custom-table-modal td,
+    .shipment-details-table th,
+    .shipment-details-table td {
+        white-space: normal !important;
+        word-break: break-word;
+    }
+    
+    .table-responsive, .modal .table-responsive {
+        overflow-x: auto !important;
+    }
+
+    :root {
+        --primary: #4361ee;
+        --primary-dark: #3a56d4;
+        --secondary: #f72585;
+        --success: #4cc9f0;
+        --warning: #f8961e;
+        --danger: #e63946;
+        --light: #f8f9fa;
+        --dark: #212529;
+        --gray: #6c757d;
+        --border: #e2e8f0;
+        --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        --hover-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    }
+
+    .search-shipment-bar {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+        padding: 20px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 16px;
+        box-shadow: var(--card-shadow);
+        flex-wrap: wrap;
+        margin-bottom: 30px;
+        color: white;
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .search-shipment-bar::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(255,255,255,0.1);
+        z-index: 0;
+    }
+    
+    .search-shipment-bar > * {
+        position: relative;
+        z-index: 1;
+    }
+    
     .search-shipment-bar input, 
     .search-shipment-bar select {
+        padding: 12px 16px;
+        border: 1px solid rgba(255,255,255,0.2);
+        border-radius: 10px;
+        flex: 1;
+        min-width: 150px;
+        background: rgba(255,255,255,0.9);
+        font-weight: 500;
+        transition: all 0.3s ease;
+    }
+    
+    .search-shipment-bar input:focus, 
+    .search-shipment-bar select:focus {
+        background: white;
+        box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
+        outline: none;
+    }
+    
+    .btn-add-shipment {
+        background: rgba(255,255,255,0.2);
+        backdrop-filter: blur(10px);
+        color: white;
+        border: 1px solid rgba(255,255,255,0.3);
+        padding: 12px 24px;
+        border-radius: 10px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        transition: all 0.3s ease;
+        white-space: nowrap;
+        font-weight: 600;
+    }
+    
+    .btn-add-shipment:hover {
+        background: rgba(255,255,255,0.3);
+        transform: translateY(-2px);
+        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+    }
+    
+    .search-icon {
+        font-size: 20px;
+        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
+    }
+    
+    .truck-icon {
+        font-size: 18px;
+    }
+
+    @media (max-width: 768px) {
+        .search-shipment-bar {
+            flex-direction: column;
+            align-items: stretch;
+        }
+        .search-shipment-bar input, 
+        .search-shipment-bar select {
+            width: 100%;
+        }
+    }
+    
+    /* Card Styles */
+    .card {
+        border: none;
+        border-radius: 16px;
+        box-shadow: var(--card-shadow);
+        transition: all 0.3s ease;
+        overflow: hidden;
+    }
+    
+    .card:hover {
+        transform: translateY(-5px);
+        box-shadow: var(--hover-shadow);
+    }
+    
+    .card-header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border: none;
+        padding: 20px 25px;
+        border-radius: 16px 16px 0 0 !important;
+    }
+    
+    .card-header h5 {
+        margin: 0;
+        font-weight: 700;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+    
+    /* Table Styles */
+    .table-responsive {
+        border-radius: 0 0 16px 16px;
+        overflow-x: auto;
+    }
+    
+    .table {
+        margin: 0;
+        border-collapse: separate;
+        border-spacing: 0;
+        width: 100%;
+        min-width: 1200px;
+        padding: 0;
+    }
+    
+    .table thead th {
+        background: #f8f9fa;
+        border: none;
+        padding: 16px 12px;
+        font-weight: 700;
+        color: var(--dark);
+        text-align: center;
+        vertical-align: middle;
+        border-bottom: 2px solid var(--border);
+        position: relative;
+        white-space: nowrap;
+    }
+    
+    .table thead th:first-child {
+        border-radius: 0;
+    }
+    
+    .table thead th:last-child {
+        border-radius: 0;
+    }
+    
+    .table tbody tr {
+        transition: all 0.3s ease;
+        border-radius: 10px;
+    }
+    
+    .table tbody tr:hover {
+        background-color: #f8f9ff;
+        transform: scale(1.01);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    }
+    
+    .table tbody td {
+        padding: 14px 12px;
+        text-align: center;
+        vertical-align: middle;
+        border-bottom: 1px solid var(--border);
+        font-weight: 500;
+        white-space: nowrap;
+    }
+    
+    .table tbody tr:last-child td {
+        border-bottom: none;
+    }
+    
+    /* UPDATED: Status Badge Styles */
+    .badge {
+        padding: 8px 16px;
+        border-radius: 20px;
+        font-weight: 600;
+        font-size: 0.8rem;
+        border: 2px solid transparent;
+    }
+    
+    /* Pending Status */
+    .badge-pending {
+        background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
+        color: #d97706 !important;
+        border-color: #f59e0b;
+    }
+    
+    /* In Transit Status */
+    .badge-in_transit {
+        background: linear-gradient(135deg, #dbeafe, #93c5fd) !important;
+        color: #1e40af !important;
+        border-color: #3b82f6;
+    }
+    
+    /* Dispatched Status */
+    .badge-dispatched {
+        background: linear-gradient(135deg, #e9d5ff, #c4b5fd) !important;
+        color: #6b21a8 !important;
+        border-color: #8b5cf6;
+    }
+    
+    /* Delivered Status */
+    .badge-delivered {
+        background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
+        color: #065f46 !important;
+        border-color: #10b981;
+    }
+    
+    /* Default badge styles */
+    .badge.bg-info {
+        background: linear-gradient(135deg, #4cc9f0, #4361ee) !important;
+        color: white;
+    }
+    
+    .badge.bg-success {
+        background: linear-gradient(135deg, #4ade80, #22c55e) !important;
+        color: white;
+    }
+    
+    .badge.bg-warning {
+        background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
+        color: white;
+    }
+    
+    .badge.bg-danger {
+        background: linear-gradient(135deg, #f87171, #ef4444) !important;
+        color: white;
+    }
+    
+    /* NEW: Action Button Styles */
+    .action-container {
+        position: relative;
+        display: inline-block;
+    }
+    
+    .btn-edit-status {
+        background: linear-gradient(135deg, #667eea, #764ba2);
+        color: white;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 10px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+    }
+    
+    .btn-edit-status:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        background: linear-gradient(135deg, #5a6fd8, #6a42a0);
+    }
+    
+    .status-dropdown {
+        position: absolute;
+        top: 100%;
+        right: 50px;
+        background: white;
+        border-radius: 10px;
+        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+        padding: 8px;
+        min-width: 150px;
+        display: none;
+        flex-direction: column;
+        gap: 5px;
+        margin-top: -50px;
+        border: 1px solid var(--border);
+        z-index: 1050;
+    }
+    
+    .status-dropdown.show {
+        display: flex;
+    }
+    
+    .status-option {
+        padding: 10px 12px;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 0.8rem;
+        font-weight: 600;
+        transition: all 0.2s ease;
+        text-align: left;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        background: transparent;
         width: 100%;
     }
-}
-.modal-content {
-    border-radius: 16px;
-    border: 1px solid #ebe5c5;
-    background: #f9faff;
-}
-.modal-header {
-    border-radius: 16px 16px 0 0;
-    background: #f8f9fc;
-    border-bottom: 1px solid #e3e4ed;
-    padding: 20px 24px 10px 24px;
-}
-.form-label { font-weight:600; }
-input[type="text"], input[type="date"] {
-    border-radius:8px !important;
-    font-size:15px !important;
-    box-shadow: none;
-    background: #fff !important;
-    border: 1px solid #ddd !important;
-    height: 41px;
-}
-/* Table styles */
-.table-responsive {
-    border-radius: 14px;
-    overflow: hidden;
-    background: #fff;
-    border: 1.5px solid #efe5c5;
-    box-shadow: 0 2px 10px #ebe6cb;
-    padding-top:-10px;
-    padding-bottom:8px;
-}
-.custom-table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0 14px;
-    margin:0;
-    background: transparent;
-   
-}
-/* Header row: colored + rounded top */
-.custom-table thead th {
-    background: #ffe9be;
-    font-weight:700;
-    font-size:16px;
-    padding: 10px 5px;
-    border:none;
-    text-align:center;
-  
     
-}
-.custom-table thead tr:first-child th:first-child {
-    border-top-left-radius: 12px;
-}
-.custom-table thead tr:first-child th:last-child {
-    border-top-right-radius: 12px;
-}
-.custom-table thead tr {
-    box-shadow: 0 2px 9px #f4e1b1;
-}
-/* Content row: white + shadow + spacing */
-.custom-table tbody tr {
-    background: #fff;
-    box-shadow: 0 2px 8px #ececec;
-    /* margin-bottom: 14px; this is handled by border-spacing */
-}
-.custom-table tbody td {
-    font-size:15px;
-    padding:12px 8px;
-    text-align:center;
-    vertical-align: middle;
-    border:none;
-}
-.custom-table tbody tr:first-child td:first-child {
-    border-top-left-radius:10px;
-}
-.custom-table tbody tr:first-child td:last-child {
-    border-top-right-radius:10px;
-}
-.custom-table tbody tr:last-child td:first-child {
-    border-bottom-left-radius:10px;
-}
-.custom-table tbody tr:last-child td:last-child {
-    border-bottom-right-radius:10px;
-}
-.btn-cancel {
-    background:#fff; color:#222; border:1px solid #bbb; border-radius:8px; font-weight:600; padding:7px 28px;
-}
-.btn-create {
-    background:#000; color:#fff; font-weight:600; font-size:17px; border-radius:8px; padding:7px 32px;
-}
+    .status-option:hover {
+        transform: translateX(5px);
+    }
+    
+    .status-option.pending {
+        background: rgba(248, 150, 30, 0.1);
+        color: #f8961e;
+    }
+    
+    .status-option.pending:hover {
+        background: rgba(248, 150, 30, 0.2);
+    }
+    
+    .status-option.in_transit {
+        background: rgba(67, 97, 238, 0.1);
+        color: #4361ee;
+    }
+    
+    .status-option.in_transit:hover {
+        background: rgba(67, 97, 238, 0.2);
+    }
+    
+    .status-option.dispatched {
+        background: rgba(139, 92, 246, 0.1);
+        color: #8b5cf6;
+    }
+    
+    .status-option.dispatched:hover {
+        background: rgba(139, 92, 246, 0.2);
+    }
+    
+    .status-option.delivered {
+        background: rgba(16, 185, 129, 0.1);
+        color: #10b981;
+    }
+    
+    .status-option.delivered:hover {
+        background: rgba(16, 185, 129, 0.2);
+    }
+    
+    .status-indicator {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        display: inline-block;
+    }
+    
+    .status-indicator.pending {
+        background: #f8961e;
+    }
+    
+    .status-indicator.in_transit {
+        background: #4361ee;
+    }
+    
+    .status-indicator.dispatched {
+        background: #8b5cf6;
+    }
+    
+    .status-indicator.delivered {
+        background: #10b981;
+    }
+
+    /* Modal Styles */
+    .modal-content {
+        border-radius: 20px;
+        border: none;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        overflow: hidden;
+    }
+    
+    .modal-header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border: none;
+        padding: 25px 30px 15px;
+        border-radius: 20px 20px 0 0;
+        position: relative;
+    }
+    
+    .modal-header::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 5%;
+        width: 90%;
+        height: 1px;
+        background: rgba(255,255,255,0.2);
+    }
+    
+    .modal-title {
+        font-weight: 700;
+        font-size: 1.5rem;
+    }
+    
+    .btn-close {
+        filter: invert(1);
+        opacity: 0.8;
+    }
+    
+    .btn-close:hover {
+        opacity: 1;
+    }
+    
+    .modal-body {
+        padding: 25px 30px;
+    }
+    
+    /* Form Styles */
+    .form-label {
+        font-weight: 600;
+        color: #5a6c7d;
+        margin-bottom: 8px;
+        font-size: 0.9rem;
+    }
+    
+    .form-control {
+        border-radius: 10px;
+        border: 1px solid #e2e8f0;
+        padding: 12px 16px;
+        font-size: 15px;
+        transition: all 0.3s ease;
+        background: #fafbfc;
+        color: #4a5568;
+    }
+    
+    .form-control:focus {
+        border-color: #a3bffa;
+        box-shadow: 0 0 0 3px rgba(163, 191, 250, 0.2);
+        background: white;
+    }
+    
+    .form-control::placeholder {
+        color: #a0aec0;
+    }
+    
+    /* Date Input Styling */
+    input[type="date"] {
+        position: relative;
+    }
+    
+    input[type="date"]::-webkit-calendar-picker-indicator {
+        background: transparent;
+        bottom: 0;
+        color: transparent;
+        cursor: pointer;
+        height: auto;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: auto;
+    }
+    
+    input[type="date"] {
+        position: relative;
+        padding-right: 40px;
+    }
+    
+    input[type="date"]:after {
+        content: "📅";
+        position: absolute;
+        right: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+        font-size: 16px;
+    }
+    
+    /* Button Styles */
+    .btn-cancel {
+        background: #f7fafc;
+        color: #718096;
+        border: 1px solid #cbd5e0;
+        border-radius: 10px;
+        font-weight: 600;
+        padding: 12px 30px;
+        transition: all 0.3s ease;
+    }
+    
+    .btn-cancel:hover {
+        background: #edf2f7;
+        color: #4a5568;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    }
+    
+    .btn-create {
+        background: linear-gradient(135deg, #48bb78, #38a169);
+        color: white;
+        font-weight: 600;
+        font-size: 16px;
+        border-radius: 10px;
+        padding: 12px 35px;
+        border: none;
+        transition: all 0.3s ease;
+    }
+    
+    .btn-create:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 20px rgba(72, 187, 120, 0.3);
+        background: linear-gradient(135deg, #38a169, #2f855a);
+    }
+    
+    /* Custom Table in Modal */
+    .custom-table-modal {
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0 8px;
+        margin: 0;
+        min-width: 1300px;
+    }
+    
+    .custom-table-modal thead th {
+        background: linear-gradient(135deg, #ebf8ff, #f0fff4);
+        color: #2b6cb0;
+        font-weight: 600;
+        padding: 16px 10px;
+        border: 1px solid #e2e8f0;
+        text-align: center;
+        position: relative;
+        font-size: 0.9rem;
+        letter-spacing: 0.3px;
+        white-space: nowrap;
+    }
+    
+    .custom-table-modal thead th:first-child {
+        border-top-left-radius: 12px;
+        border-bottom-left-radius: 12px;
+    }
+    
+    .custom-table-modal thead th:last-child {
+        border-top-right-radius: 12px;
+        border-bottom-right-radius: 12px;
+    }
+    
+    .custom-table-modal tbody tr {
+        background: #fdfdfe;
+        border-radius: 10px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+        transition: all 0.3s ease;
+        border: 1px solid #f1f5f9;
+    }
+    
+    .custom-table-modal tbody tr:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+        border-color: #e2e8f0;
+        background: white;
+    }
+    
+    .custom-table-modal tbody td {
+        padding: 14px 10px;
+        text-align: center;
+        vertical-align: middle;
+        border: none;
+        font-weight: 500;
+        position: relative;
+        color: #4a5568;
+        white-space: nowrap;
+    }
+    
+    .custom-table-modal tbody tr td:first-child {
+        border-top-left-radius: 10px;
+        border-bottom-left-radius: 10px;
+    }
+    
+    .custom-table-modal tbody tr td:last-child {
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+    }
+    
+    /* Checkbox Styling */
+    input[type="checkbox"] {
+        width: 20px;
+        height: 20px;
+        border-radius: 6px;
+        border: 2px solid #cbd5e0;
+        cursor: pointer;
+        position: relative;
+        transition: all 0.2s ease;
+        background: #f7fafc;
+    }
+    
+    input[type="checkbox"]:checked {
+        background: var(--primary);
+        border-color: var(--primary);
+    }
+    
+    /* Link Styling */
+    a.text-primary {
+        color: var(--primary) !important;
+        text-decoration: none;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        position: relative;
+        color: #4361ee !important;
+    }
+    
+    a.text-primary:hover {
+        color: var(--primary-dark) !important;
+        text-decoration: underline;
+    }
+    
+    /* Shipment Details Modal */
+    .shipment-details-header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border: none;
+        padding: 25px 30px 15px;
+        border-radius: 20px 20px 0 0;
+    }
+    
+    .shipment-details-body {
+        padding: 40px 45px;
+    }
+    
+    .shipment-info-row {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 25px;
+        padding: 20px;
+        background: #f8fafc;
+        border-radius: 12px;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+    }
+    
+    .shipment-info-item {
+        flex: 1;
+        text-align: center;
+        padding: 0 15px;
+    }
+    
+    .shipment-info-label {
+        font-weight: 600;
+        color: #64748b;
+        font-size: 14px;
+        margin-bottom: 5px;
+    }
+    
+    .shipment-info-value {
+        font-weight: 700;
+        font-size: 18px;
+        color: var(--dark);
+    }
+    
+    .shipment-details-table {
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0 8px;
+        margin-top: 20px;
+        min-width: 1400px;
+    }
+    
+    .shipment-details-table th {
+        background: #f1f5f9;
+        padding: 16px 12px;
+        text-align: center;
+        font-weight: 700;
+        color: var(--dark);
+        border: none;
+        position: relative;
+        white-space: nowrap;
+    }
+    
+    .shipment-details-table th:first-child {
+        border-top-left-radius: 10px;
+        border-bottom-left-radius: 10px;
+    }
+    
+    .shipment-details-table th:last-child {
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+    }
+    
+    .shipment-details-table td {
+        padding: 14px 12px;
+        text-align: center;
+        border: none;
+        background: white;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+        white-space: nowrap;
+    }
+    
+    .shipment-details-table tr td:first-child {
+        border-top-left-radius: 10px;
+        border-bottom-left-radius: 10px;
+    }
+    
+    .shipment-details-table tr td:last-child {
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+    }
+    
+    /* Shipment Totals Section */
+    .shipment-totals {
+        margin-top: 25px;
+        padding: 25px;
+        background: linear-gradient(135deg, #f8fafc, #e2e8f0);
+        border-radius: 12px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+        border-left: 4px solid #4361ee;
+    }
+    
+    .shipment-totals-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 20px;
+        justify-content: space-between;
+    }
+    
+    .shipment-total-item {
+        flex: 1;
+        min-width: 150px;
+        text-align: center;
+        padding: 15px;
+        background: white;
+        border-radius: 10px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    }
+    
+    .shipment-total-label {
+        font-weight: 600;
+        color: #64748b;
+        font-size: 12px;
+        margin-bottom: 8px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+    
+    .shipment-total-value {
+        font-weight: 800;
+        font-size: 20px;
+        color: #1e293b;
+        line-height: 1.2;
+    }
+    
+    .total-amount {
+        color: #059669 !important;
+        background: linear-gradient(135deg, #d1fae5, #a7f3d0);
+        padding: 10px;
+        border-radius: 8px;
+        border: 2px solid #10b981;
+    }
+    
+    .total-quantity {
+        color: #0369a1 !important;
+        background: linear-gradient(135deg, #e0f2fe, #bae6fd);
+        padding: 10px;
+        border-radius: 8px;
+        border: 2px solid #0ea5e9;
+    }
+    
+    .total-weight {
+        color: #7c3aed !important;
+        background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
+        padding: 10px;
+        border-radius: 8px;
+        border: 2px solid #8b5cf6;
+    }
+    
+    .total-cbm {
+        color: #dc2626 !important;
+        background: linear-gradient(135deg, #fecaca, #fca5a5);
+        padding: 10px;
+        border-radius: 8px;
+        border: 2px solid #ef4444;
+    }
+    
+    .total-ctn {
+        color: #d97706 !important;
+        background: linear-gradient(135deg, #fef3c7, #fde68a);
+        padding: 10px;
+        border-radius: 8px;
+        border: 2px solid #f59e0b;
+    }
+    
+    .total-ttl-cbm {
+        color: #7c3aed !important;
+        background: linear-gradient(135deg, #e9d5ff, #c4b5fd);
+        padding: 10px;
+        border-radius: 8px;
+        border: 2px solid #8b5cf6;
+    }
+    
+    .total-ttl-kg {
+        color: #0d9488 !important;
+        background: linear-gradient(135deg, #ccfbf1, #99f6e4);
+        padding: 10px;
+        border-radius: 8px;
+        border: 2px solid #14b8a6;
+    }
+    
+    /* Animation for loading */
+    @keyframes pulse {
+        0% { opacity: 1; }
+        50% { opacity: 0.5; }
+        100% { opacity: 1; }
+    }
+    
+    .loading {
+        animation: pulse 1.5s infinite;
+    }
 </style>
+
 <div class="container-fluid py-4">
 
     {{-- SUCCESS / ERROR MESSAGES --}}
     @if(session('success'))
-        <div class="alert alert-success">{{ session('success') }}</div>
+        <div class="alert alert-success alert-dismissible fade show" role="alert">
+            <i class="bi bi-check-circle-fill me-2"></i>
+            {{ session('success') }}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
     @endif
 
     @if(session('error'))
-        <div class="alert alert-danger">{{ session('error') }}</div>
+        <div class="alert alert-danger alert-dismissible fade show" role="alert">
+            <i class="bi bi-exclamation-triangle-fill me-2"></i>
+            {{ session('error') }}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
     @endif
 
     <!-- ============================= -->
     <!--    SEARCH BAR AND ADD BUTTON  -->
     <!-- ============================= -->
-    <div class="search-shipment-bar mb-4">
+    <div class="search-shipment-bar">
         <span class="search-icon">🔍</span>
         <input type="text" placeholder="Search Shipments...">
         <select>
@@ -183,179 +897,189 @@ input[type="text"], input[type="date"] {
     </div>
 
     <!-- ============================= -->
-    <!--   CREATE SHIPMENT MODAL       -->
+    <!--   CREATE SHIPMENT MODAL -->
     <!-- ============================= -->
+    <div class="modal fade" id="createShipmentModal" tabindex="-1" aria-labelledby="createShipmentModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-xl">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="createShipmentModalLabel">
+                        <i class="bi bi-plus-circle me-2"></i>Create New Shipment
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <form action="{{ route('admin.shipments.store') }}" method="POST">
+                        @csrf
 
-    
-<div class="modal fade" id="createShipmentModal" tabindex="-1" aria-labelledby="createShipmentModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-xl">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="createShipmentModalLabel" style="font-weight: bold;">
-                    Create New Shipment
-                </h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <form action="{{ route('admin.shipments.store') }}" method="POST">
-                    @csrf
+                        <div class="row g-3 pb-2">
+                            <div class="col-md-4">
+                                <label class="form-label">Origin *</label>
+                                <input type="text" class="form-control" name="origin" placeholder="Enter origin city" required>
+                            </div>
+                            <div class="col-md-4">
+                                <label class="form-label">Destination *</label>
+                                <input type="text" class="form-control" name="destination" placeholder="Enter destination city" required>
+                            </div>
+                            <div class="col-md-4">
+                                <label class="form-label">Shipment Date *</label>
+                                <input type="date" 
+                                       name="shipment_date" 
+                                       class="form-control"
+                                       value="{{ date('Y-m-d') }}"
+                                       min="{{ date('Y-m-d') }}"
+                                       required>
+                            </div>
+                        </div>
 
-                    <div class="row g-3 pb-2">
-                        <div class="col-md-4">
-                            <label class="form-label">Origin *</label>
-                            <input type="text" class="form-control" name="origin" required>
+                        <div class="table-responsive mt-4" style="max-height:400px; border-radius:12px;">
+                            <table class="custom-table-modal">
+                                <thead>
+                                    <tr>
+                                        <th></th>
+                                        <th>Order ID</th>
+                                        <th>Origin</th>
+                                        <th>Destination</th>
+                                        <th>CTN</th>
+                                        <th>QTY</th>
+                                        <th>TTL/QTY</th>
+                                        <th>CBM</th>
+                                        <th>TTL CBM</th>
+                                        <th>KG</th>
+                                        <th>TTL KG</th>
+                                        <th>Amount (₹)</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    @forelse($availableOrders as $order)
+                                    <tr>
+                                        <td>
+                                            <input type="checkbox" name="order_ids[]" value="{{ $order->id }}">
+                                        </td>
+                                        <td>
+                                            <a href="#" class="text-primary fw-bold">{{ $order->order_id }}</a>
+                                        </td>
+                                        <td>{{ $order->origin }}</td>
+                                        <td>{{ $order->destination }}</td>
+                                        <td>{{ $order->ctn }}</td>
+                                        <td>{{ $order->qty }}</td>
+                                        <td>{{ $order->ttl_qty }}</td>
+                                        <td>{{ $order->cbm }}</td>
+                                        <td>{{ $order->ttl_cbm }}</td>
+                                        <td>{{ $order->kg }}</td>
+                                        <td>{{ $order->ttl_kg }}</td>
+                                        <td class="fw-bold text-success">₹{{ number_format($order->ttl_amount, 2) }}</td>
+                                    </tr>
+                                    @empty
+                                    <tr>
+                                        <td colspan="12" class="text-muted text-center py-4">No available orders to add to shipment</td>
+                                    </tr>
+                                    @endforelse
+                                </tbody>
+                            </table>
                         </div>
-                        <div class="col-md-4">
-                            <label class="form-label">Destination *</label>
-                            <input type="text" class="form-control" name="destination" required>
+                        <div class="d-flex justify-content-end mt-4 mb-2">
+                            <button type="button" class="btn-cancel me-3" data-bs-dismiss="modal">Cancel</button>
+                            <button type="submit" class="btn-create">
+                                <i class="bi bi-check-lg me-2"></i>Create Shipment
+                            </button>
                         </div>
-                        <div class="col-md-4">
-                            <label class="form-label">Status</label>
-                            <input type="text" class="form-control" name="status">
-                        </div>
-                        <div class="col-md-4">
-                            <label class="form-label">Shipment Date</label>
-                            <input type="date" 
-                                   name="shipment_date" 
-                                   class="form-control"
-                                   value="{{ date('Y-m-d') }}"
-                                   min="{{ date('Y-m-d') }}"
-                                   required>
-                        </div>
-                    </div>
-
-                    <div class="table-responsive" style="max-height:340px;">
-                        <table class="custom-table">
-                            <thead>
-                                <tr>
-                                    <th></th>
-                                    <th>Order ID</th>
-                                    <th>CTN</th>
-                                    <th>QTY</th>
-                                    <th>TTL/QTY</th>
-                                    <th>Price (₹)</th>
-                                    <th>Amount (₹)</th>
-                                    <th>CBM</th>
-                                    <th>TTL CBM</th>
-                                    <th>KG</th>
-                                    <th>TTL KG</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                @forelse($availableOrders as $order)
-                                <tr>
-                                    <td>
-                                        <input type="checkbox" name="order_ids[]" value="{{ $order->id }}">
-                                    </td>
-                                    <td>
-                                        <a href="#" class="text-primary fw-bold" style="text-decoration:underline;">{{ $order->order_id }}</a>
-                                    </td>
-                                    <td>{{ $order->ctn }}</td>
-                                    <td>{{ $order->qty }}</td>
-                                    <td>{{ $order->ttl_qty }}</td>
-                                    <td>₹{{ number_format($order->unit_price, 2) }}</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>
-                                </tr>
-                                @empty
-                                <tr>
-                                    <td colspan="11" class="text-muted">No available orders</td>
-                                </tr>
-                                @endforelse
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="d-flex justify-content-end mt-4 mb-2">
-                        <button type="button" class="btn-cancel me-2" data-bs-dismiss="modal">Cancel</button>
-                        <button type="submit" class="btn-create">
-                            Create Shipment
-                        </button>
-                    </div>
-                </form>
+                    </form>
+                </div>
             </div>
         </div>
     </div>
-</div>
 
     <!-- ============================= -->
     <!--      SHIPMENT LIST TABLE     -->
     <!-- ============================= -->
-    <div class="card shadow-sm">
-        <div class="card-header bg-light">
-            <h5 class="mb-0"><i class="bi bi-table"></i> Shipments List</h5>
+    <div class="card">
+        <div class="card-header">
+            <h5 class="mb-0"><i class="bi bi-truck me-2"></i> Shipments List</h5>
         </div>
 
-        <div class="card-body table-responsive">
-            <table class="table table-striped table-bordered text-center align-middle">
-                <thead class="table-light">
-                    <tr>
-                        <th>#</th>
-                        <th>Shipment ID</th>
-                        <th>Origin</th>
-                        <th>Destination</th>
+        <div class="card-body p-0">
+            <div class="table-responsive">
+                <table class="table table-hover mb-0">
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>Shipment ID</th>
+                            <th>Origin</th>
+                            <th>Destination</th>
+                            <th>Total QTY</th>
+                            <th>Total KG</th>
+                            <th>Total CBM</th>
+                            <th>Total Amount</th>
+                            <th>Status</th>
+                            <th>Date</th>
+                            <th>Action</th>
+                        </tr>
+                    </thead>
 
-                        <th>Total QTY</th>
-                        <th>Total KG</th>
-                        <th>Total Amount</th>
-
-                        <th>Status</th>
-                        <th>Date</th>
-                        <th>Action</th>
-                    </tr>
-                </thead>
-
-                <tbody>
-                    @forelse($shipments as $ship)
-                    <tr>
-                        <td>{{ $ship->id }}</td>
-
-                        <td>
-                            <a href="#" class="text-primary fw-bold"
-                               onclick="openShipmentDetails({{ $ship->id }})">
-                                {{ $ship->shipment_id }}
-                            </a>
-                        </td>
-
-                        <td>{{ $ship->origin }}</td>
-                        <td>{{ $ship->destination }}</td>
-
-                        <td>{{ $ship->total_qty }}</td>
-                        <td>{{ $ship->total_kg }}</td>
-                        <td>₹{{ number_format($ship->total_amount, 2) }}</td>
-
-                        <td>
-                            <span class="badge bg-info text-dark">{{ ucfirst($ship->status) }}</span>
-                        </td>
-
-                        <td>{{ $ship->shipment_date }}</td>
-
-                        <td>
-                            <form action="{{ route('admin.shipments.updateStatus') }}" method="POST" class="d-inline">
-                                @csrf
-                                <input type="hidden" name="shipment_id" value="{{ $ship->id }}">
-
-                                <select name="status" class="form-select form-select-sm"
-                                        onchange="this.form.submit()">
-                                    <option value="pending"     @selected($ship->status=='pending')>Pending</option>
-                                    <option value="in_transit"  @selected($ship->status=='in_transit')>In Transit</option>
-                                    <option value="dispatched"  @selected($ship->status=='dispatched')>Dispatched</option>
-                                    <option value="delivered"   @selected($ship->status=='delivered')>Delivered</option>
-                                </select>
-                            </form>
-                        </td>
-
-                    </tr>
-                    @empty
-                    <tr>
-                        <td colspan="10" class="text-muted">No shipments found</td>
-                    </tr>
-                    @endforelse
-                </tbody>
-
-            </table>
+                    <tbody>
+                        @forelse($shipments as $ship)
+                        <tr>
+                            <td class="fw-bold">{{ $loop->iteration }}</td>
+                            <td>
+                                <a href="#" class="text-primary fw-bold"
+                                   onclick="openShipmentDetails({{ $ship->id }})">
+                                    {{ $ship->shipment_id }}
+                                </a>
+                            </td>
+                            <td>{{ $ship->origin }}</td>
+                            <td>{{ $ship->destination }}</td>
+                            <td><span class="badge bg-light text-dark">{{ $ship->total_qty }}</span></td>
+                            <td><span class="badge bg-light text-dark">{{ $ship->total_kg }} kg</span></td>
+                            <td><span class="badge bg-light text-dark">{{ $ship->total_cbm }} CBM</span></td>
+                            <td class="fw-bold text-success">₹{{ number_format($ship->total_amount, 2) }}</td>
+                            <td>
+                                <span class="badge badge-{{ $ship->status }}">
+                                    {{ ucfirst(str_replace('_', ' ', $ship->status)) }}
+                                </span>
+                            </td>
+                            <td>{{ \Carbon\Carbon::parse($ship->shipment_date)->format('d M Y') }}</td>
+                            <td>
+                                <div class="action-container">
+                                    <button type="button" class="btn-edit-status" onclick="toggleStatusDropdown(this, {{ $ship->id }})" title="Edit Status">
+                                        <i class="bi bi-pencil"></i>
+                                    </button>
+                                    <div class="status-dropdown" id="statusDropdown-{{ $ship->id }}">
+                                        <form action="{{ route('admin.shipments.updateStatus') }}" method="POST" class="status-form">
+                                            @csrf
+                                            <input type="hidden" name="shipment_id" value="{{ $ship->id }}">
+                                            <button type="submit" name="status" value="pending" class="status-option pending">
+                                                <span class="status-indicator pending"></span>
+                                                Pending
+                                            </button>
+                                            <button type="submit" name="status" value="in_transit" class="status-option in_transit">
+                                                <span class="status-indicator in_transit"></span>
+                                                In Transit
+                                            </button>
+                                            <button type="submit" name="status" value="dispatched" class="status-option dispatched">
+                                                <span class="status-indicator dispatched"></span>
+                                                Dispatched
+                                            </button>
+                                            <button type="submit" name="status" value="delivered" class="status-option delivered">
+                                                <span class="status-indicator delivered"></span>
+                                                Delivered
+                                            </button>
+                                        </form>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                        @empty
+                        <tr>
+                            <td colspan="11" class="text-center py-5 text-muted">
+                                <i class="bi bi-inbox display-4 d-block mb-3"></i>
+                                No shipments found
+                            </td>
+                        </tr>
+                        @endforelse
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 
@@ -365,123 +1089,217 @@ input[type="text"], input[type="date"] {
     <div class="modal fade" id="shipmentDetailsModal" tabindex="-1">
         <div class="modal-dialog modal-xl modal-dialog-scrollable">
             <div class="modal-content">
-
-                <div class="modal-header bg-light">
-                    <h5 class="modal-title fw-bold">Shipment Details</h5>
+                <div class="modal-header shipment-details-header">
+                    <h5 class="modal-title fw-bold"><i class="bi bi-box-seam me-2"></i>Consolidated Shipment Details</h5>
                     <button class="btn-close" data-bs-dismiss="modal"></button>
                 </div>
 
-                <div class="modal-body" id="shipmentDetailsContent">
-                    <p class="text-center text-muted">Loading...</p>
+                <div class="modal-body shipment-details-body" id="shipmentDetailsContent">
+                    <div class="text-center py-4 loading">
+                        <div class="spinner-border text-primary" role="status">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                        <p class="mt-2 text-muted">Loading shipment details...</p>
+                    </div>
                 </div>
-
             </div>
         </div>
     </div>
 
 </div>
 
-
-
-
 <!-- ========================= -->
 <!--  MODAL LOAD SCRIPT (AJAX) -->
 <!-- ========================= -->
 <script>
 function openShipmentDetails(id) {
     let modal = new bootstrap.Modal(document.getElementById('shipmentDetailsModal'));
-    document.getElementById('shipmentDetailsContent').innerHTML =
-        "<p class='text-center text-muted'>Loading...</p>";
+    let content = document.getElementById('shipmentDetailsContent');
+    
+    content.innerHTML = `
+        <div class="text-center py-4 loading">
+            <div class="spinner-border text-primary" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+            <p class="mt-2 text-muted">Loading shipment details...</p>
+        </div>
+    `;
 
     fetch(`/admin/shipments/${id}`)
-        .then(res => res.json())
+        .then(res => {
+            if (!res.ok) throw new Error('Network response was not ok');
+            return res.json();
+        })
         .then(data => {
+            // Format date properly
+            const shipmentDate = new Date(data.shipment.shipment_date);
+            const formattedDate = shipmentDate.toLocaleDateString('en-GB', {
+                day: '2-digit',
+                month: 'short',
+                year: 'numeric'
+            });
 
             let html = `
-                <h5 class="text-primary mb-3">Shipment: ${data.shipment.shipment_id}</h5>
-
-                <div class="mb-3">
-                    <strong>Origin:</strong> ${data.shipment.origin} &nbsp;&nbsp;&nbsp;
-                    <strong>Destination:</strong> ${data.shipment.destination} &nbsp;&nbsp;&nbsp;
-                    <strong>Status:</strong> ${data.shipment.status}
+                <!-- Shipment Basic Info -->
+                <div class="shipment-info-row">
+                    <div class="shipment-info-item">
+                        <div class="shipment-info-label">Shipment ID</div>
+                        <div class="shipment-info-value">${data.shipment.shipment_id}</div>
+                    </div>
+                    <div class="shipment-info-item">
+                        <div class="shipment-info-label">Total Orders</div>
+                        <div class="shipment-info-value">${data.orders.length}</div>
+                    </div>
+                    <div class="shipment-info-item">
+                        <div class="shipment-info-label">Status</div>
+                        <div class="shipment-info-value">${data.shipment.status}</div>
+                    </div>
+                    <div class="shipment-info-item">
+                        <div class="shipment-info-label">Date</div>
+                        <div class="shipment-info-value">${formattedDate}</div>
+                    </div>
                 </div>
 
-                <h6 class="fw-bold mt-4">Orders Inside Shipment</h6>
+                <h6 class="fw-bold mt-4 mb-3">Detailed view of all orders in this shipment consolidation</h6>
 
-                <table class="table table-bordered text-center">
-                    <thead class="table-light">
-                        <tr>
-                            <th>Order ID</th>
-                            <th>Mark No</th>
-                            <th>Origin</th>
-                            <th>Destination</th>
-
-                            <th>CTN</th>
-                            <th>QTY</th>
-                            <th>TTL QTY</th>
-                            
-                            <th>TTL Amount</th>
-
-                            <th>CBM</th>
-                            <th>TTL CBM</th>
-
-                            <th>KG</th>
-                            <th>TTL KG</th>
-
-                        </tr>
-                    </thead>
-                    <tbody>
+                <div class="table-responsive">
+                    <table class="shipment-details-table">
+                        <thead>
+                            <tr>
+                                <th>Order ID</th>
+                                <th>Origin</th>
+                                <th>Destination</th>
+                                <th>Item No</th>
+                                <th>Description</th>
+                                <th>CTN</th>
+                                <th>QTY</th>
+                                <th>TTL/QTY</th>
+                                <th>CBM</th>
+                                <th>TTL CBM</th>
+                                <th>KG</th>
+                                <th>TTL KG</th>
+                                <th>Amount (₹)</th>
+                            </tr>
+                        </thead>
+                        <tbody>
             `;
 
             data.orders.forEach(order => {
                 html += `
                     <tr>
                         <td class="fw-bold text-primary">${order.order_id}</td>
-                        <td>${order.mark_no}</td>
-                        <td>${order.origin}</td>
-                        <td>${order.destination}</td>
-
+                        <td>${order.origin || 'N/A'}</td>
+                        <td>${order.destination || 'N/A'}</td>
+                        <td>${order.mark_no || 'ITEM001'}</td>
+                        <td>${order.description || 'Manufacturing Equipment'}</td>
                         <td>${order.ctn}</td>
                         <td>${order.qty}</td>
                         <td>${order.ttl_qty}</td>
-
-                        <td>₹${order.ttl_amount}</td>
-
-                        <td>${order.cbm ?? '-'}</td>
-                        <td>${order.ttl_cbm ?? '-'}</td>
-
-                        <td>${order.kg}</td>
-                        <td>${order.ttl_kg}</td>
-
+                        <td>${order.cbm || '0.00'}</td>
+                        <td>${order.ttl_cbm || '0.00'}</td>
+                        <td>${order.kg || '0.00'}</td>
+                        <td>${order.ttl_kg || '0.00'}</td>
+                        <td class="fw-bold text-success">₹${parseFloat(order.ttl_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                     </tr>
                 `;
             });
 
             html += `
-                    </tbody>
-                </table>
+                        </tbody>
+                    </table>
+                </div>
 
-                <div class="mt-3">
-                    <strong>Total CTN:</strong> ${data.shipment.total_ctn} <br>
-                    <strong>Total QTY:</strong> ${data.shipment.total_qty} <br>
-                    <strong>Total TTL QTY:</strong> ${data.shipment.total_ttl_qty} <br>
-
-                    <strong>Total CBM:</strong> ${data.shipment.total_cbm} <br>
-                    <strong>Total TTL CBM:</strong> ${data.shipment.total_ttl_cbm} <br>
-
-                    <strong>Total KG:</strong> ${data.shipment.total_kg} <br>
-                    <strong>Total TTL KG:</strong> ${data.shipment.total_ttl_kg} <br>
-
-                    <strong>Total Amount:</strong> ₹${data.shipment.total_amount}
+                <!-- Totals Section -->
+                <div class="shipment-totals">
+                    <div class="shipment-totals-row">
+                        <div class="shipment-total-item">
+                            <div class="shipment-total-label">Total CTN</div>
+                            <div class="shipment-total-value total-ctn">${data.shipment.total_ctn}</div>
+                        </div>
+                        <div class="shipment-total-item">
+                            <div class="shipment-total-label">Total QTY</div>
+                            <div class="shipment-total-value total-quantity">${data.shipment.total_qty}</div>
+                        </div>
+                        <div class="shipment-total-item">
+                            <div class="shipment-total-label">Total CBM</div>
+                            <div class="shipment-total-value total-cbm">${data.shipment.total_cbm}</div>
+                        </div>
+                        <div class="shipment-total-item">
+                            <div class="shipment-total-label">Total KG</div>
+                            <div class="shipment-total-value total-weight">${data.shipment.total_kg}</div>
+                        </div>
+                        <div class="shipment-total-item">
+                            <div class="shipment-total-label">Total TTL/QTY</div>
+                            <div class="shipment-total-value total-quantity">${data.shipment.total_ttl_qty}</div>
+                        </div>
+                        <div class="shipment-total-item">
+                            <div class="shipment-total-label">Total TTL/CBM</div>
+                            <div class="shipment-total-value total-ttl-cbm">${data.shipment.total_ttl_cbm}</div>
+                        </div>
+                        <div class="shipment-total-item">
+                            <div class="shipment-total-label">Total TTL/KG</div>
+                            <div class="shipment-total-value total-ttl-kg">${data.shipment.total_ttl_kg}</div>
+                        </div>
+                        <div class="shipment-total-item">
+                            <div class="shipment-total-label">Total Amount</div>
+                            <div class="shipment-total-value total-amount">₹${parseFloat(data.shipment.total_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</div>
+                        </div>
+                    </div>
                 </div>
             `;
 
-            document.getElementById('shipmentDetailsContent').innerHTML = html;
+            content.innerHTML = html;
+        })
+        .catch(error => {
+            console.error('Error loading shipment details:', error);
+            content.innerHTML = `
+                <div class="text-center py-5">
+                    <i class="bi bi-exclamation-triangle display-1 text-danger"></i>
+                    <h4 class="mt-3 text-danger">Error Loading Shipment Details</h4>
+                    <p class="text-muted">Please try again later</p>
+                    <button class="btn btn-primary mt-2" onclick="openShipmentDetails(${id})">Retry</button>
+                </div>
+            `;
         });
 
     modal.show();
 }
+
+// Toggle status dropdown
+function toggleStatusDropdown(button, shipmentId) {
+    const dropdown = document.getElementById(`statusDropdown-${shipmentId}`);
+    const isShowing = dropdown.classList.contains('show');
+    
+    // Close all other dropdowns
+    document.querySelectorAll('.status-dropdown.show').forEach(dropdown => {
+        dropdown.classList.remove('show');
+    });
+    
+    // Toggle current dropdown
+    if (!isShowing) {
+        dropdown.classList.add('show');
+    }
+    
+    // Close dropdown when clicking outside
+    document.addEventListener('click', function closeDropdown(e) {
+        if (!button.contains(e.target) && !dropdown.contains(e.target)) {
+            dropdown.classList.remove('show');
+            document.removeEventListener('click', closeDropdown);
+        }
+    });
+}
+
+// Auto-close dropdown after form submission
+document.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('.status-form').forEach(form => {
+        form.addEventListener('submit', function() {
+            const dropdown = this.closest('.status-dropdown');
+            if (dropdown) {
+                dropdown.classList.remove('show');
+            }
+        });
+    });
+});
 </script>
 
-
 @endsection
\ No newline at end of file