Chat UI Changes

resources/views/admin/chat_support.blade.php

@@ -10,10 +10,10 @@
         --danger-gradient: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
         --warning-gradient: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
         --info-gradient: linear-gradient(135deg, #56ccf2 0%, #2f80ed 100%);
-        --card-shadow: 0 8px 25px rgba(0,0,0,0.08);
+        --card-shadow: 0 3px 10px rgba(0,0,0,0.05);
-        --card-shadow-hover: 0 15px 35px rgba(0,0,0,0.12);
+        --card-shadow-hover: 0 6px 16px rgba(0,0,0,0.10);
-        --border-radius: 12px;
+        --border-radius: 8px;
-        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     * {
@@ -23,24 +23,24 @@
     .chat-dashboard {
         min-height: 100vh;
         background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-        padding: 1.5rem;
+        padding: 0.75rem;
         font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     }
 
     .dashboard-header {
         text-align: center;
-        margin-bottom: 2rem;
+        margin-bottom: 1rem;
         position: relative;
     }
 
     .dashboard-title {
-        font-size: clamp(2rem, 4vw, 3rem);
+        font-size: clamp(1.4rem, 2.5vw, 2rem);
         font-weight: 800;
         background: var(--primary-gradient);
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent;
-        margin: 0 0 0.75rem 0;
+        margin: 0 0 0.4rem 0;
         position: relative;
         display: inline-block;
     }
@@ -48,143 +48,106 @@
     .dashboard-title::before {
         content: '💬';
         position: absolute;
-        left: -2.5rem;
+        left: -1.6rem;
         top: 50%;
         transform: translateY(-50%);
-        font-size: 2rem;
+        font-size: 1.3rem;
         animation: bounce 2s infinite;
     }
 
     @keyframes bounce {
         0%, 20%, 50%, 80%, 100% { transform: translateY(-50%) translateY(0); }
-        40% { transform: translateY(-50%) translateY(-8px); }
+        40% { transform: translateY(-50%) translateY(-5px); }
-        60% { transform: translateY(-50%) translateY(-4px); }
+        60% { transform: translateY(-50%) translateY(-2px); }
     }
 
     .dashboard-subtitle {
         color: #64748b;
-        font-size: 1rem;
+        font-size: 0.8rem;
-        max-width: 500px;
+        max-width: 380px;
         margin: 0 auto;
-        line-height: 1.5;
+        line-height: 1.3;
     }
 
-    .stats-grid {
+    /* 🔔 GLOBAL NEW MESSAGE COUNTER */
-        display: grid;
+    .global-notify {
-        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        margin: 0 auto 0.75rem auto;
-        gap: 1rem;
+        max-width: 320px;
-        margin-bottom: 2rem;
+        padding: 0.35rem 0.7rem;
-    }
+        border-radius: 999px;
-
+        background: rgba(15,23,42,0.03);
-    .stat-card {
+        border: 1px dashed #cbd5f5;
-        background: rgba(255, 255, 255, 0.95);
-        backdrop-filter: blur(15px);
-        border-radius: var(--border-radius);
-        padding: 1.25rem 1.5rem;
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        border: 1px solid rgba(255, 255, 255, 0.3);
-        box-shadow: var(--card-shadow);
-        transition: var(--transition);
-        position: relative;
-        overflow: hidden;
-    }
-
-    .stat-card::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 3px;
-        background: var(--primary-gradient);
-        transform: scaleX(0);
-        transition: transform 0.3s ease;
-    }
-
-    .stat-card:hover {
-        transform: translateY(-4px);
-        box-shadow: var(--card-shadow-hover);
-    }
-
-    .stat-card:hover::before {
-        transform: scaleX(1);
-    }
-
-    .stat-icon {
-        width: 55px;
-        height: 55px;
-        border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 1.5rem;
+        gap: 0.4rem;
-        box-shadow: 0 6px 20px rgba(0,0,0,0.1);
+        font-size: 0.78rem;
-        flex-shrink: 0;
-    }
-
-    .stat-total { background: var(--primary-gradient); color: white; }
-    .stat-open  { background: var(--success-gradient); color: white; }
-    .stat-closed{ background: var(--danger-gradient); color: white; }
-
-    .stat-content h3 {
-        font-size: 2rem;
-        font-weight: 800;
-        margin: 0 0 0.125rem 0;
         color: #1e293b;
     }
 
-    .stat-content p {
+    .global-notify-badge {
-        margin: 0;
+        background: #ef4444;
-        color: #64748b;
+        color: #fff;
-        font-size: 0.9rem;
+        min-width: 18px;
-        font-weight: 500;
+        padding: 0 0.35rem;
+        height: 18px;
+        border-radius: 999px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.7rem;
+        font-weight: 700;
+        box-shadow: 0 0 0 2px rgba(254, 226, 226, 0.8);
+    }
+
+    .global-notify.d-none {
+        display: none;
     }
 
     .tickets-container {
         background: rgba(255, 255, 255, 0.95);
-        backdrop-filter: blur(15px);
+        backdrop-filter: blur(12px);
         border-radius: var(--border-radius);
-        padding: 1.5rem;
+        padding: 0.75rem 0.9rem;
         box-shadow: var(--card-shadow);
         border: 1px solid rgba(255, 255, 255, 0.3);
+        /* max-height / overflow काढले, जेणेकरून बाहेरचा page scroll वापरला जाईल */
+        display: block;
     }
 
     .tickets-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 1.5rem;
+        margin-bottom: 0.6rem;
-        padding-bottom: 1rem;
+        padding-bottom: 0.45rem;
         border-bottom: 1px solid #f1f5f9;
     }
 
     .tickets-title {
-        font-size: 1.4rem;
+        font-size: 1rem;
         font-weight: 700;
         color: #1e293b;
         display: flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: 0.3rem;
     }
 
     .tickets-count {
         background: var(--primary-gradient);
         color: white;
-        padding: 0.2rem 0.6rem;
+        padding: 0.1rem 0.45rem;
-        border-radius: 16px;
+        border-radius: 12px;
-        font-size: 0.8rem;
+        font-size: 0.7rem;
         font-weight: 600;
     }
 
-    /* ========= COMPACT TICKET CARD ========= */
     .ticket-item {
         background: white;
-        border-radius: 10px;
+        border-radius: 6px;
-        padding: 0.75rem 1rem;
+        padding: 0.4rem 0.6rem;
-        margin-bottom: 0.6rem;
+        margin-bottom: 0.3rem;
-        border: 1px solid #f1f5f9;
+        border: 1px solid #e5e7eb;
         transition: var(--transition);
         position: relative;
         overflow: hidden;
@@ -196,16 +159,16 @@
         left: 0;
         top: 0;
         bottom: 0;
-        width: 3px;
+        width: 2px;
         background: var(--primary-gradient);
         transform: scaleY(0);
         transition: var(--transition);
     }
 
     .ticket-item:hover {
-        transform: translateY(-2px);
+        transform: translateY(-1px);
         box-shadow: var(--card-shadow-hover);
-        border-color: rgba(102, 126, 234, 0.15);
+        border-color: rgba(102, 126, 234, 0.35);
     }
 
     .ticket-item:hover::before {
@@ -215,23 +178,23 @@
     .ticket-header {
         display: flex;
         align-items: flex-start;
-        gap: 0.6rem;
+        gap: 0.4rem;
-        margin-bottom: 0.5rem;
+        margin-bottom: 0.25rem;
     }
 
     .ticket-avatar {
-        width: 40px;
+        width: 26px;
-        height: 40px;
+        height: 26px;
-        border-radius: 10px;
+        border-radius: 6px;
         background: var(--info-gradient);
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 1rem;
+        font-size: 0.75rem;
         font-weight: 700;
         color: white;
         flex-shrink: 0;
-        box-shadow: 0 6px 16px rgba(86, 204, 242, 0.25);
+        box-shadow: 0 3px 8px rgba(86, 204, 242, 0.25);
         position: relative;
         overflow: hidden;
     }
@@ -244,7 +207,7 @@
         width: 100%;
         height: 100%;
         background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
-        transition: left 0.5s;
+        transition: left 0.4s;
     }
 
     .ticket-item:hover .ticket-avatar::after {
@@ -257,27 +220,27 @@
     }
 
     .ticket-name {
-        font-size: 0.95rem;
+        font-size: 0.8rem;
         font-weight: 700;
         color: #1e293b;
-        margin: 0 0 0.15rem 0;
+        margin: 0 0 0.08rem 0;
         display: flex;
         align-items: center;
-        gap: 0.4rem;
+        gap: 0.25rem;
     }
 
     .unread-count {
         background: #ef4444;
         color: white;
-        min-width: 20px;
+        min-width: 16px;
-        height: 20px;
+        height: 16px;
-        border-radius: 50%;
+        border-radius: 999px;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 0.7rem;
+        font-size: 0.6rem;
         font-weight: 700;
-        box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4);
+        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
         animation: pulse 2s infinite;
     }
 
@@ -288,25 +251,27 @@
 
     .ticket-preview {
         color: #64748b;
-        font-size: 0.8rem;
+        font-size: 0.7rem;
-        line-height: 1.4;
+        line-height: 1.25;
-        margin-bottom: 0.25rem;
+        margin-bottom: 0.1rem;
-        display: flex;
-        align-items: center;
-        gap: 0.4rem;
-    }
-
-    .ticket-time {
-        font-size: 0.75rem;
-        color: #94a3b8;
         display: flex;
         align-items: center;
         gap: 0.25rem;
+        max-height: 1.8em;
+        overflow: hidden;
+    }
+
+    .ticket-time {
+        font-size: 0.65rem;
+        color: #94a3b8;
+        display: flex;
+        align-items: center;
+        gap: 0.18rem;
     }
 
     .ticket-time svg {
-        width: 12px;
+        width: 10px;
-        height: 12px;
+        height: 10px;
         flex-shrink: 0;
     }
 
@@ -314,18 +279,18 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding-top: 0.6rem;
+        padding-top: 0.3rem;
-        border-top: 1px dashed #f1f5f9;
+        border-top: 1px dashed #e5e7eb;
-        margin-top: 0.4rem;
+        margin-top: 0.2rem;
     }
 
     .status-badge {
-        padding: 0.25rem 0.7rem;
+        padding: 0.14rem 0.45rem;
-        border-radius: 50px;
+        border-radius: 999px;
-        font-size: 0.7rem;
+        font-size: 0.6rem;
         font-weight: 700;
         text-transform: uppercase;
-        letter-spacing: 0.3px;
+        letter-spacing: 0.2px;
     }
 
     .status-open  { background: var(--success-gradient); color: white; }
@@ -335,86 +300,87 @@
         background: var(--primary-gradient);
         color: white;
         border: none;
-        padding: 0.45rem 0.9rem;
+        padding: 0.25rem 0.6rem;
-        border-radius: 25px;
+        border-radius: 999px;
         font-weight: 600;
-        font-size: 0.8rem;
+        font-size: 0.7rem;
-        display: flex;
+        display: inline-flex;
         align-items: center;
-        gap: 0.4rem;
+        gap: 0.25rem;
         text-decoration: none;
         transition: var(--transition);
-        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25);
+        box-shadow: 0 3px 10px rgba(102, 126, 234, 0.25);
+        white-space: nowrap;
     }
 
     .chat-btn:hover {
         transform: translateY(-1px);
-        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.35);
+        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35);
         color: white;
     }
 
     .chat-btn::after {
         content: '→';
-        transition: margin-left 0.3s ease;
+        transition: margin-left 0.25s ease;
         margin-left: 0;
     }
 
     .chat-btn:hover::after {
-        margin-left: 0.4rem;
+        margin-left: 0.18rem;
     }
 
     .empty-state {
         text-align: center;
-        padding: 2.5rem 1.5rem;
+        padding: 1.6rem 1rem;
         background: rgba(255, 255, 255, 0.6);
         border-radius: var(--border-radius);
         border: 2px dashed #e2e8f0;
     }
 
     .empty-icon {
-        font-size: 4rem;
+        font-size: 2.8rem;
-        margin-bottom: 1.5rem;
+        margin-bottom: 0.9rem;
         display: block;
         animation: float 3s ease-in-out infinite;
     }
 
     @keyframes float {
         0%, 100% { transform: translateY(0px); }
-        50% { transform: translateY(-15px); }
+        50% { transform: translateY(-8px); }
     }
 
     .empty-title {
-        font-size: 1.4rem;
+        font-size: 1.05rem;
         font-weight: 700;
         color: #1e293b;
-        margin-bottom: 0.75rem;
+        margin-bottom: 0.4rem;
     }
 
     .empty-subtitle {
         color: #64748b;
-        font-size: 1rem;
+        font-size: 0.85rem;
-        margin-bottom: 1.5rem;
+        margin-bottom: 1rem;
-        line-height: 1.5;
+        line-height: 1.35;
     }
 
     .ticket-id {
-        background: rgba(102, 126, 234, 0.1);
+        background: rgba(102, 126, 234, 0.08);
         color: #667eea;
-        padding: 0.2rem 0.75rem;
+        padding: 0.12rem 0.5rem;
-        border-radius: 16px;
+        border-radius: 999px;
-        font-size: 0.75rem;
+        font-size: 0.65rem;
         font-weight: 600;
         display: inline-flex;
         align-items: center;
-        gap: 0.25rem;
+        gap: 0.18rem;
     }
 
     .new-message-dot {
         position: absolute;
-        top: 0.75rem;
+        top: 0.45rem;
-        right: 0.75rem;
+        right: 0.5rem;
-        width: 10px;
+        width: 7px;
-        height: 10px;
+        height: 7px;
         background: #ef4444;
         border-radius: 50%;
         border: 2px solid white;
@@ -425,27 +391,46 @@
 
     @keyframes blink {
         0%, 100% { opacity: 1; transform: scale(1); }
-        50% { opacity: 0.5; transform: scale(1.15); }
+        50% { opacity: 0.5; transform: scale(1.1); }
+    }
+
+    /* इथे आता inner scroll नाही */
+    .tickets-list {
+        /* flex: 1; काढला, overflow काढला, parent + body scroll वापरेल */
+        padding-right: 0; 
+    }
+
+    .tickets-list::-webkit-scrollbar {
+        width: 3px;
+    }
+
+    .tickets-list::-webkit-scrollbar-track {
+        background: #f1f5f9;
+        border-radius: 6px;
+    }
+
+    .tickets-list::-webkit-scrollbar-thumb {
+        background: var(--primary-gradient);
+        border-radius: 6px;
     }
 
     @media (max-width: 768px) {
         .chat-dashboard {
-            padding: 1rem;
+            padding: 0.6rem;
         }
 
-        .stats-grid {
+        .tickets-container {
-            grid-template-columns: 1fr;
+            /* max-height काढलेले, mobile वरही outer scroll */
-            gap: 0.75rem;
         }
 
         .ticket-header {
             flex-direction: column;
-            gap: 0.75rem;
+            gap: 0.35rem;
         }
 
         .ticket-footer {
             flex-direction: column;
-            gap: 0.75rem;
+            gap: 0.35rem;
             align-items: stretch;
         }
 
@@ -453,26 +438,6 @@
             justify-content: center;
         }
     }
-
-    .tickets-list {
-        max-height: 55vh;
-        overflow-y: auto;
-        padding-right: 0.4rem;
-    }
-
-    .tickets-list::-webkit-scrollbar {
-        width: 5px;
-    }
-
-    .tickets-list::-webkit-scrollbar-track {
-        background: #f1f5f9;
-        border-radius: 8px;
-    }
-
-    .tickets-list::-webkit-scrollbar-thumb {
-        background: var(--primary-gradient);
-        border-radius: 8px;
-    }
 </style>
 
 <div class="chat-dashboard">
@@ -484,29 +449,10 @@
         </p>
     </div>
 
-    <!-- Stats Cards -->
+    <!-- 🔔 GLOBAL NEW MESSAGES NOTIFICATION -->
-    <div class="stats-grid">
+    <div id="globalNewMessageBox" class="global-notify d-none">
-        <div class="stat-card">
+        <span>New messages:</span>
-            <div class="stat-icon stat-total">💬</div>
+        <span id="globalNewMessageCount" class="global-notify-badge">0</span>
-            <div class="stat-content">
-                <h3>{{ $tickets->count() }}</h3>
-                <p>Total Conversations</p>
-            </div>
-        </div>
-        <div class="stat-card">
-            <div class="stat-icon stat-open">📈</div>
-            <div class="stat-content">
-                <h3>{{ $tickets->where('status', 'open')->count() }}</h3>
-                <p>Active Tickets</p>
-            </div>
-        </div>
-        <div class="stat-card">
-            <div class="stat-icon stat-closed">✅</div>
-            <div class="stat-content">
-                <h3>{{ $tickets->where('status', 'closed')->count() }}</h3>
-                <p>Resolved Tickets</p>
-            </div>
-        </div>
     </div>
 
     <!-- Tickets Container -->
@@ -560,7 +506,7 @@
                                 <div class="ticket-preview">
                                     @if($lastMsg)
                                         @if($lastMsg->message)
-                                            {{ Str::limit($lastMsg->message, 55) }}
+                                            {{ Str::limit($lastMsg->message, 45) }}
                                         @elseif(Str::startsWith($lastMsg->file_type, 'image'))
                                             📷 Photo shared
                                         @else
@@ -581,7 +527,6 @@
                                     </div>
                                 @endif
                             </div>
-                            <div class="ticket-id">#{{ $ticket->id }}</div>
                         </div>
 
                         <div class="ticket-footer">
@@ -626,20 +571,50 @@ function waitForEcho(callback, retries = 40) {
 waitForEcho(() => {
     console.log('[ADMIN LIST] Listening for new messages...');
 
+    const globalBox   = document.getElementById('globalNewMessageBox');
+    const globalCount = document.getElementById('globalNewMessageCount');
+    let totalNewMessages = 0;
+
     window.Echo.private('admin.chat')
         .listen('.NewChatMessage', (event) => {
 
             // only USER → ADMIN messages
             if (event.sender_type !== 'App\\Models\\User') return;
 
-            const badge = document.getElementById(`badge-${event.ticket_id}`);
+            const ticketId = event.ticket_id;
-            if (!badge) return;
 
-            let count = parseInt(badge.innerText || 0);
+            // 1) UPDATE PER-TICKET BADGE
-            badge.innerText = count + 1;
+            const badge = document.getElementById(`badge-${ticketId}`);
-            badge.classList.remove('d-none');
+            if (badge) {
+                let count = parseInt(badge.innerText || 0);
+                badge.innerText = count + 1;
+                badge.classList.remove('d-none');
+            }
 
-            console.log('[ADMIN LIST] Badge updated for ticket', event.ticket_id);
+            // 2) UPDATE GLOBAL NEW MESSAGE COUNTER
+            totalNewMessages++;
+            if (globalBox && globalCount) {
+                globalBox.classList.remove('d-none');
+                globalCount.innerText = totalNewMessages;
+            }
+
+            // 3) त्या ticket ला यादीत सर्वात वर आणा आणि स्क्रोल करा
+            const listContainer = document.querySelector('.tickets-list');
+            const ticketEl = document.querySelector(`.ticket-item[data-ticket-id="${ticketId}"]`);
+
+            if (listContainer && ticketEl) {
+                if (ticketEl.previousElementSibling) {
+                    listContainer.insertBefore(ticketEl, listContainer.firstElementChild);
+                }
+
+                const topOffset = ticketEl.offsetTop;
+                window.scrollTo({
+                    top: listContainer.offsetTop + topOffset - 20,
+                    behavior: 'smooth'
+                });
+            }
+
+            console.log('[ADMIN LIST] Badge/global counter updated for ticket', ticketId);
         });
 });
 </script>

resources/views/admin/shipments.blade.php

@@ -964,8 +964,8 @@
         display: table-row;
     }
 
-    /* ---------- Pagination Styles (Same as Account Dashboard) ---------- */
+    /* ---------- Pagination Styles ---------- */
-    .pagination-container {
+    .pagination-container, .modal-pagination-container {
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -974,19 +974,19 @@
         border-top: 1px solid #eef3fb;
     }
 
-    .pagination-info {
+    .pagination-info, .modal-pagination-info {
         font-size: 13px;
         color: #9ba5bb;
         font-weight: 600;
     }
 
-    .pagination-controls {
+    .pagination-controls, .modal-pagination-controls {
         display: flex;
         align-items: center;
         gap: 8px;
     }
 
-    .pagination-btn {
+    .pagination-btn, .modal-pagination-btn {
         background: #fff;
         border: 1px solid #e3eaf6;
         color: #1a2951;
@@ -1003,13 +1003,13 @@
         height: 32px;
     }
 
-    .pagination-btn:hover:not(:disabled) {
+    .pagination-btn:hover:not(:disabled), .modal-pagination-btn:hover:not(:disabled) {
         background: #1a2951;
         color: white;
         border-color: #1a2951;
     }
 
-    .pagination-btn:disabled {
+    .pagination-btn:disabled, .modal-pagination-btn:disabled {
         background: #f8fafc;
         color: #cbd5e0;
         border-color: #e2e8f0;
@@ -1017,7 +1017,7 @@
         opacity: 0.6;
     }
 
-    .pagination-page-btn {
+    .pagination-page-btn, .modal-pagination-page-btn {
         background: #fff;
         border: 1px solid #e3eaf6;
         color: #1a2951;
@@ -1031,13 +1031,13 @@
         text-align: center;
     }
 
-    .pagination-page-btn:hover {
+    .pagination-page-btn:hover, .modal-pagination-page-btn:hover {
         background: #1a2951;
         color: white;
         border-color: #1a2951;
     }
 
-    .pagination-page-btn.active {
+    .pagination-page-btn.active, .modal-pagination-page-btn.active {
         background: #1a2951;
         color: white;
         border-color: #1a2951;
@@ -1055,56 +1055,14 @@
         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%);
-    }
-
     @media (max-width: 768px) {
-        .pagination-container {
+        .pagination-container, .modal-pagination-container {
             flex-direction: column;
             gap: 10px;
             align-items: stretch;
         }
         
-        .pagination-controls {
+        .pagination-controls, .modal-pagination-controls {
             justify-content: center;
         }
     }
@@ -1205,7 +1163,7 @@
                                         <th>Amount (₹)</th>
                                     </tr>
                                 </thead>
-                                <tbody>
+                                <tbody id="modalOrdersTableBody">
                                     @forelse($availableOrders as $order)
                                     <tr>
                                         <td>
@@ -1233,6 +1191,29 @@
                                 </tbody>
                             </table>
                         </div>
+                        
+                        <!-- Modal Pagination -->
+                        <div class="modal-pagination-container" id="modalPaginationContainer">
+                            <div class="modal-pagination-info" id="modalPageInfo">
+                                Showing 1 to {{ min(10, count($availableOrders)) }} of {{ count($availableOrders) }} entries
+                            </div>
+                            <div class="modal-pagination-controls">
+                                <button class="modal-pagination-btn" id="modalPrevPageBtn" title="Previous page" disabled>
+                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                    </svg>
+                                </button>
+                                <div class="pagination-pages" id="modalPaginationPages">
+                                    <!-- Pages will be generated here by JavaScript -->
+                                </div>
+                                <button class="modal-pagination-btn" id="modalNextPageBtn" title="Next page" {{ count($availableOrders) <= 10 ? 'disabled' : '' }}>
+                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+
                         <div class="d-flex justify-content-end mt-4 mb-2">
                             <button type="button" class="btn-cancel me-3" data-bs-dismiss="modal">Cancel</button>
                             <button type="submit" class="btn-create">
@@ -1352,14 +1333,14 @@
             <div class="pagination-container">
                 <div class="pagination-info" id="pageInfo">Showing 1 to {{ $shipments->count() }} of {{ $shipments->count() }} entries</div>
                 <div class="pagination-controls">
-                    <button class="pagination-img-btn" id="prevPageBtn" title="Previous page" disabled>
+                    <button class="pagination-btn" id="prevPageBtn" title="Previous page" disabled>
                         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                         </svg>
                     </button>
                     <div class="pagination-pages" id="paginationPages">
                         </div>
-                    <button class="pagination-img-btn" id="nextPageBtn" title="Next page" disabled>
+                    <button class="pagination-btn" id="nextPageBtn" title="Next page" disabled>
                         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                         </svg>
@@ -1393,21 +1374,35 @@
 </div>
 
 <script>
-// Pagination state
+// Main Pagination state
 let currentPage = 1;
 const itemsPerPage = 10;
 let allShipments = @json($shipments);
 let filteredShipments = [...allShipments];
 
-// Initialize pagination on page load
+// Modal Pagination state
+let modalCurrentPage = 1;
+const modalItemsPerPage = 10;
+let modalAllOrders = @json($availableOrders);
+
+// Initialize both paginations on page load
 document.addEventListener('DOMContentLoaded', function() {
+    // Initialize main table pagination
     renderTable();
     updatePaginationControls();
     
-    // Bind pagination events
+    // Initialize modal pagination
+    renderModalTable();
+    updateModalPaginationControls();
+    
+    // Bind main pagination events
     document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
     document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);
     
+    // Bind modal pagination events
+    document.getElementById('modalPrevPageBtn').addEventListener('click', goToModalPreviousPage);
+    document.getElementById('modalNextPageBtn').addEventListener('click', goToModalNextPage);
+
     // Status Filter Functionality
     const statusFilter = document.getElementById('statusFilter');
     const searchInput = document.getElementById('searchInput');
@@ -1436,7 +1431,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 if (!matchesSearch) include = false;
             }
 
-            // Carrier filter (you can add carrier data attribute if needed)
+            // Carrier filter
             if (selectedCarrier !== 'all') {
                 // Add carrier filtering logic here if you have carrier data
             }
@@ -1458,7 +1453,26 @@ document.addEventListener('DOMContentLoaded', function() {
     filterShipments();
 });
 
-// Pagination Functions
+// Helper function to extract numeric part from order ID
+function extractOrderNumber(orderId) {
+    if (!orderId) return 0;
+    
+    // Try to find numbers in the order ID
+    const matches = orderId.match(/\d+/g);
+    if (matches && matches.length > 0) {
+        // Take the last sequence of numbers (often the actual order number)
+        return parseInt(matches[matches.length - 1]);
+    }
+    
+    // Fallback: try to convert the whole string
+    const num = parseInt(orderId.replace(/\D/g, ''));
+    return isNaN(num) ? 0 : num;
+}
+
+// ====================================
+// MAIN PAGINATION FUNCTIONS
+// ====================================
+
 function goToPreviousPage() {
     if (currentPage > 1) {
         currentPage--;
@@ -1497,11 +1511,11 @@ function updatePaginationControls() {
     if (totalPages <= 7) {
         // Show all pages
         for (let i = 1; i <= totalPages; i++) {
-            addPageButton(i, paginationPages);
+            addPageButton(i, paginationPages, currentPage);
         }
     } else {
         // Show first page, current page range, and last page
-        addPageButton(1, paginationPages);
+        addPageButton(1, paginationPages, currentPage);
         
         if (currentPage > 3) {
             paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
@@ -1511,18 +1525,18 @@ function updatePaginationControls() {
         const end = Math.min(totalPages - 1, currentPage + 1);
         
         for (let i = start; i <= end; i++) {
-            addPageButton(i, paginationPages);
+            addPageButton(i, paginationPages, currentPage);
         }
         
         if (currentPage < totalPages - 2) {
             paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
         }
         
-        addPageButton(totalPages, paginationPages);
+        addPageButton(totalPages, paginationPages, currentPage);
     }
 }
 
-function addPageButton(pageNumber, container) {
+function addPageButton(pageNumber, container, currentPage) {
     const button = document.createElement('button');
     button.className = 'pagination-page-btn';
     if (pageNumber === currentPage) {
@@ -1537,7 +1551,93 @@ function addPageButton(pageNumber, container) {
     container.appendChild(button);
 }
 
-// Render Table Function
+// ====================================
+// MODAL PAGINATION FUNCTIONS
+// ====================================
+
+function goToModalPreviousPage() {
+    if (modalCurrentPage > 1) {
+        modalCurrentPage--;
+        renderModalTable();
+        updateModalPaginationControls();
+    }
+}
+
+function goToModalNextPage() {
+    const totalPages = Math.ceil(modalAllOrders.length / modalItemsPerPage);
+    if (modalCurrentPage < totalPages) {
+        modalCurrentPage++;
+        renderModalTable();
+        updateModalPaginationControls();
+    }
+}
+
+function updateModalPaginationControls() {
+    const totalPages = Math.ceil(modalAllOrders.length / modalItemsPerPage);
+    const prevBtn = document.getElementById('modalPrevPageBtn');
+    const nextBtn = document.getElementById('modalNextPageBtn');
+    const pageInfo = document.getElementById('modalPageInfo');
+    const paginationPages = document.getElementById('modalPaginationPages');
+    
+    prevBtn.disabled = modalCurrentPage === 1;
+    nextBtn.disabled = modalCurrentPage === totalPages || totalPages === 0;
+    
+    // Update page info text - Order count correctly
+    const startIndex = (modalCurrentPage - 1) * modalItemsPerPage + 1;
+    const endIndex = Math.min(modalCurrentPage * modalItemsPerPage, modalAllOrders.length);
+    pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${modalAllOrders.length} entries`;
+    
+    // Generate page numbers
+    paginationPages.innerHTML = '';
+    
+    if (totalPages <= 7) {
+        // Show all pages
+        for (let i = 1; i <= totalPages; i++) {
+            addModalPageButton(i, paginationPages);
+        }
+    } else {
+        // Show first page, current page range, and last page
+        addModalPageButton(1, paginationPages);
+        
+        if (modalCurrentPage > 3) {
+            paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
+        }
+        
+        const start = Math.max(2, modalCurrentPage - 1);
+        const end = Math.min(totalPages - 1, modalCurrentPage + 1);
+        
+        for (let i = start; i <= end; i++) {
+            addModalPageButton(i, paginationPages);
+        }
+        
+        if (modalCurrentPage < totalPages - 2) {
+            paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
+        }
+        
+        addModalPageButton(totalPages, paginationPages);
+    }
+}
+
+function addModalPageButton(pageNumber, container) {
+    const button = document.createElement('button');
+    button.className = 'modal-pagination-page-btn';
+    if (pageNumber === modalCurrentPage) {
+        button.classList.add('active');
+    }
+    button.textContent = pageNumber;
+    button.addEventListener('click', () => {
+        modalCurrentPage = pageNumber;
+        renderModalTable();
+        updateModalPaginationControls();
+    });
+    container.appendChild(button);
+}
+
+// ====================================
+// RENDER FUNCTIONS
+// ====================================
+
+// Render Main Table Function
 function renderTable() {
     const tbody = document.getElementById('shipmentsTableBody');
     
@@ -1556,15 +1656,27 @@ function renderTable() {
     // Calculate pagination
     const startIndex = (currentPage - 1) * itemsPerPage;
     const endIndex = startIndex + itemsPerPage;
-    const paginatedItems = filteredShipments.slice(startIndex, endIndex);
     
-    // Sort by creation date (newest first)
+    // Sort by order_id in DESCENDING order (largest number first)
-    const sortedItems = [...paginatedItems].sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+    const sortedItems = [...filteredShipments].sort((a, b) => {
+        // Extract numeric part from order_id for comparison
+        const numA = extractOrderNumber(a.shipment_id);
+        const numB = extractOrderNumber(b.shipment_id);
+        return numB - numA; // DESCENDING order
+    });
+    
+    const paginatedItems = sortedItems.slice(startIndex, endIndex);
+    
+    // Calculate reverse index starting from total count
+    const totalCount = filteredShipments.length;
+    const reverseStartIndex = totalCount - (currentPage - 1) * itemsPerPage;
     
     // Render table rows
     tbody.innerHTML = '';
-    sortedItems.forEach((shipment, index) => {
+    paginatedItems.forEach((shipment, index) => {
-        const displayIndex = filteredShipments.length - (startIndex + index);
+        // Calculate display number in reverse order
+        const displayNumber = reverseStartIndex - index;
+        
         const row = document.createElement('tr');
         row.className = 'shipment-row';
         row.setAttribute('data-status', shipment.status);
@@ -1577,7 +1689,7 @@ function renderTable() {
         };
 
         row.innerHTML = `
-            <td class="fw-bold">${displayIndex}</td>
+            <td class="fw-bold">${displayNumber}</td>
             <td>
                 <a href="#" class="text-primary fw-bold" onclick="openShipmentDetails(${shipment.id})">
                     ${shipment.shipment_id}
@@ -1603,7 +1715,6 @@ function renderTable() {
                 </a>
             </td>
 
-       
             <td>
                 <div class="action-container">
                     <button type="button" class="btn-edit-status" onclick="toggleStatusDropdown(this, ${shipment.id})" title="Edit Status">
@@ -1642,9 +1753,71 @@ function renderTable() {
     });
 }
 
-// --------------------------------------------------------------------
+// Render Modal Table Function
+function renderModalTable() {
+    const tbody = document.getElementById('modalOrdersTableBody');
+    
+    if (modalAllOrders.length === 0) {
+        tbody.innerHTML = `
+            <tr>
+                <td colspan="12" class="text-muted text-center py-4">No available orders to add to shipment</td>
+            </tr>
+        `;
+        return;
+    }
+    
+    // Calculate pagination
+    const startIndex = (modalCurrentPage - 1) * modalItemsPerPage;
+    const endIndex = startIndex + modalItemsPerPage;
+    
+    // Sort by order_id in DESCENDING order (largest number first)
+    const sortedItems = [...modalAllOrders].sort((a, b) => {
+        // Extract numeric part from order_id for comparison
+        const numA = extractOrderNumber(a.order_id);
+        const numB = extractOrderNumber(b.order_id);
+        return numB - numA; // DESCENDING order
+    });
+    
+    const paginatedItems = sortedItems.slice(startIndex, endIndex);
+    
+    // Calculate reverse index starting from total count
+    const totalCount = modalAllOrders.length;
+    const reverseStartIndex = totalCount - (modalCurrentPage - 1) * modalItemsPerPage;
+    
+    // Render table rows
+    tbody.innerHTML = '';
+    paginatedItems.forEach((order, index) => {
+        // Calculate display number in reverse order
+        const displayNumber = reverseStartIndex - index;
+        
+        tbody.innerHTML += `
+            <tr>
+                <td>
+                    <input type="checkbox" name="order_ids[]" value="${order.id}">
+                </td>
+                <td>
+                    <a href="#" class="text-primary fw-bold">${order.order_id}</a>
+                </td>
+                <td>${order.origin}</td>
+                <td>${order.destination}</td>
+                <td>${order.ctn}</td>
+                <td>${order.qty}</td>
+                <td>${order.ttl_qty}</td>
+                <td>${order.cbm}</td>
+                <td>${order.ttl_cbm}</td>
+                <td>${order.kg}</td>
+                <td>${order.ttl_kg}</td>
+                <td class="fw-bold text-success">₹${parseFloat(order.ttl_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
+            </tr>
+        `;
+    });
+}
+
+// ====================================
+// OTHER FUNCTIONS
+// ====================================
+
 // Function: Open Consolidated Shipment Details Modal 
-// --------------------------------------------------------------------
 function openShipmentDetails(id) {
     let modal = new bootstrap.Modal(document.getElementById('shipmentDetailsModal'));
     let content = document.getElementById('shipmentDetailsContent');