changes of shipment

resources/views/admin/account.blade.php

@@ -1021,6 +1021,153 @@ tr:hover td{ background:#fbfdff; }
     align-items: center;
     flex-wrap: wrap;
 }
+/* नवीन responsive styles */
+@media (max-width:980px){
+  .account-container { 
+    padding: 20px !important;
+    margin: 0 auto;
+  }
+  
+  .panel-card { 
+    min-width:100% !important;
+    padding: 18px !important;
+  }
+  
+  .search-row input{ 
+    width:220px !important;
+  }
+  
+  .pagination-container { 
+    flex-direction: column; 
+    gap: 10px; 
+    align-items: stretch; 
+    margin-right: 0 !important;
+  }
+  
+  .combined-filters-row { 
+    flex-direction: column; 
+    align-items: stretch; 
+  }
+  
+  .filter-group1, 
+  .filter-group2, 
+  .filter-group3, 
+  .filter-group4 { 
+    width: 100% !important; 
+  }
+}
+
+@media (max-width:768px){
+  body {
+    overflow-x: hidden;
+  }
+  
+  .account-container {
+    padding: 15px !important;
+  }
+  
+  .account-header { 
+    padding: 18px !important; 
+  }
+  
+  .top-actions { 
+    flex-direction: column; 
+    align-items: stretch; 
+    gap: 10px;
+  }
+  
+  .top-actions .left { 
+    justify-content: center; 
+  }
+  
+  .account-panels {
+    gap: 15px;
+  }
+  
+  .search-row input {
+    width: 100% !important;
+    max-width: 300px;
+  }
+  
+  /* pagination adjustments for mobile */
+  .pagination-controls,
+  .pagination-controls1,
+  .pagination-controls2 {
+    margin-right: 0 !important;
+    justify-content: center;
+  }
+  
+  .pagination-container {
+    margin-right: 0 !important;
+  }
+}
+
+/* Zoom out specific fix */
+@media screen and (max-width: 1200px) {
+  .account-container {
+    padding: 20px;
+    max-width: 95%;
+  }
+  
+  .payment-block {
+    min-width: 100%;
+  }
+}
+
+/* Extra small screens */
+@media screen and (max-width: 576px) {
+  .account-container {
+    padding: 10px;
+  }
+  
+  .account-header h2 {
+    font-size: 22px;
+  }
+  
+  .panel-card {
+    padding: 15px;
+    min-height: auto;
+  }
+  
+  .pagination-container {
+    padding: 10px 0;
+  }
+  
+  .pagination-info {
+    font-size: 12px;
+  }
+}
+
+/* Prevent horizontal scroll on very small screens */
+@media screen and (max-width: 400px) {
+  body {
+    min-width: 320px;
+  }
+  
+  .account-container {
+    padding: 10px 5px;
+  }
+  
+  .table-responsive {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* Fix for sidebar gap on zoom out */
+html, body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+/* Ensure all containers are properly constrained */
+.container, .container-fluid, .account-container {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+
+
 </style>
 
 <div class="account-container">

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/chat_window.blade.php

@@ -4,6 +4,7 @@
 
 @section('content')
 <style>
+/* ... तुझा existing complete CSS जसाच्या तसा ठेव ... */
 :root {
     --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     --primary-soft: rgba(102, 126, 234, 0.12);
@@ -643,6 +644,32 @@ body {
         max-width: 100px;
     }
 }
+.header-notify {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    color: #cbd5f5;
+}
+
+.header-notify-badge {
+    min-width: 18px;
+    height: 18px;
+    border-radius: 999px;
+    background: #ef4444;
+    color: #fff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    font-weight: 700;
+    box-shadow: 0 0 0 2px rgba(15,23,42,0.8);
+}
+
+.header-notify.d-none {
+    display: none;
+}
 </style>
 
 <div class="chat-container">
@@ -662,6 +689,12 @@ body {
                     </div>
                 </div>
                 <div class="header-actions">
+                    {{-- per‑ticket new message notification --}}
+                    <div id="ticketNotifyBox" class="header-notify d-none">
+                        New messages:
+                        <span id="ticketNotifyCount" class="header-notify-badge">0</span>
+                    </div>
+
                     <span class="status-badge {{ $ticket->status === 'open' ? 'open' : 'closed' }}">
                         {{ ucfirst($ticket->status) }}
                     </span>
@@ -693,7 +726,6 @@ body {
                                 $isDocument = in_array(Str::lower(Str::afterLast($msg->file_path, '.')), ['doc', 'docx', 'txt']);
                                 $fileName = basename($msg->file_path);
 
-                                // Get file size from storage if possible
                                 $fileSize = 'N/A';
                                 try {
                                     $fullPath = storage_path('app/public/' . $msg->file_path);
@@ -711,7 +743,6 @@ body {
                                     $fileSize = 'Unknown';
                                 }
 
-                                // Determine file class
                                 if ($isImage) {
                                     $fileClass = 'image-file';
                                     $fileIcon = '🖼️';
@@ -789,7 +820,8 @@ body {
                     <div class="file-name-display" id="fileNameDisplay"></div>
                     <button class="clear-file-btn" id="clearFileBtn" title="Remove file">
                         <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M6 18L18 6M6 6l12 12"/>
                         </svg>
                     </button>
 
@@ -823,8 +855,6 @@ body {
 @section('scripts')
 <script>
 const CURRENT_ADMIN_ID = {{ auth('admin')->id() }};
-
-// ✅ Make current admin ID available to JS
 console.log("CHAT WINDOW: script loaded");
 
 // -------------------------------
@@ -859,13 +889,12 @@ const fileInput = document.getElementById('fileInput');
 const fileNameDisplay = document.getElementById('fileNameDisplay');
 const clearFileBtn = document.getElementById('clearFileBtn');
 
-fileInput.addEventListener('change', function(e) {
+fileInput.addEventListener('change', function() {
     if (this.files.length > 0) {
         const file = this.files[0];
-        const fileName = file.name;
+        const name = file.name;
-        const fileSize = formatFileSize(file.size);
+        const size = formatFileSize(file.size);
-        
+        fileNameDisplay.textContent = `${name} (${size})`;
-        fileNameDisplay.textContent = `${fileName} (${fileSize})`;
         fileNameDisplay.style.display = 'block';
         clearFileBtn.style.display = 'block';
     }
@@ -886,40 +915,26 @@ function formatFileSize(bytes) {
 }
 
 function getFileIcon(fileType, fileName) {
-    if (fileType.startsWith('image/')) {
+    if (fileType.startsWith('image/')) return '🖼️';
-        return '🖼️';
+    if (fileType.startsWith('video/')) return '🎬';
-    } else if (fileType.startsWith('video/')) {
+    if (fileName.endsWith('.pdf'))     return '📄';
-        return '🎬';
+    if (fileName.match(/\.(doc|docx|txt)$/i)) return '📝';
-    } else if (fileName.endsWith('.pdf')) {
+    return '📎';
-        return '📄';
-    } else if (fileName.match(/\.(doc|docx|txt)$/i)) {
-        return '📝';
-    } else {
-        return '📎';
-    }
 }
 
 function getFileClass(fileType, fileName) {
-    if (fileType.startsWith('image/')) {
+    if (fileType.startsWith('image/')) return 'image-file';
-        return 'image-file';
+    if (fileType.startsWith('video/')) return 'video-file';
-    } else if (fileType.startsWith('video/')) {
+    if (fileName.endsWith('.pdf'))     return 'pdf-file';
-        return 'video-file';
+    if (fileName.match(/\.(doc|docx|txt)$/i)) return 'document-file';
-    } else if (fileName.endsWith('.pdf')) {
+    return 'other-file';
-        return 'pdf-file';
-    } else if (fileName.match(/\.(doc|docx|txt)$/i)) {
-        return 'document-file';
-    } else {
-        return 'other-file';
-    }
 }
 
 // -------------------------------
 // SEND MESSAGE
 // -------------------------------
 document.getElementById("sendBtn").addEventListener("click", function () {
-    console.log("[SEND] Attempting to send message...");
+    let msg  = document.getElementById("messageInput").value;
-
-    let msg = document.getElementById("messageInput").value;
     let file = document.getElementById("fileInput").files[0];
 
     if (!msg.trim() && !file) {
@@ -937,8 +952,7 @@ document.getElementById("sendBtn").addEventListener("click", function () {
         body: formData
     })
         .then(res => res.json())
-        .then((response) => {
+        .then(() => {
-            console.log("[SEND] Message sent:", response);
             document.getElementById("messageInput").value = "";
             document.getElementById("fileInput").value = "";
             fileNameDisplay.style.display = 'none';
@@ -957,15 +971,18 @@ document.getElementById("messageInput").addEventListener("keypress", function(e)
 
 // -------------------------------
 // LISTEN FOR REALTIME MESSAGE
-// ----------------------------
+// -------------------------------
 waitForEcho(() => {
     const ticketId = "{{ $ticket->id }}";
 
+    const notifyBox   = document.getElementById('ticketNotifyBox');
+    const notifyCount = document.getElementById('ticketNotifyCount');
+    let ticketNewCount = 0;
+
     console.log("[ECHO] Subscribing to PRIVATE channel:", `ticket.${ticketId}`);
 
     window.Echo.private(`ticket.${ticketId}`)
         .listen(".NewChatMessage", (event) => {
-
             console.log("%c[REALTIME RECEIVED]", "color: blue; font-weight: bold;", event);
 
             const msg = event;
@@ -973,21 +990,28 @@ waitForEcho(() => {
                 msg.sender_type === 'App\\Models\\Admin' &&
                 msg.sender_id === CURRENT_ADMIN_ID;
 
+            // जर message admin ने पाठवला असेल तर त्या साठी notification वाढवायची गरज नाही
+            if (!isMine) {
+                ticketNewCount++;
+                if (notifyBox && notifyCount) {
+                    notifyBox.classList.remove('d-none');
+                    notifyCount.textContent = ticketNewCount;
+                }
+            }
+
             let html = `
                 <div class="message ${isMine ? 'admin' : 'user'}">
                     ${msg.message ? `<div>${msg.message}</div>` : ''}
             `;
 
             if (msg.file_path) {
-                const fileUrl = `/storage/${msg.file_path}`;
+                const fileUrl  = `/storage/${msg.file_path}`;
                 const fileName = msg.file_path.split('/').pop();
                 const fileSize = msg.file_size ? formatFileSize(msg.file_size) : 'Unknown';
                 const fileIcon = getFileIcon(msg.file_type || '', fileName);
-                const fileClass = getFileClass(msg.file_type || '', fileName);
+                const fileClass= getFileClass(msg.file_type || '', fileName);
-
+                const isImage  = (msg.file_type || '').startsWith('image');
-                // Check if it's image or video for preview
+                const isVideo  = (msg.file_type || '').startsWith('video');
-                const isImage = (msg.file_type || '').startsWith('image');
-                const isVideo = (msg.file_type || '').startsWith('video');
 
                 html += `<div class="file-preview">`;
 
@@ -1013,9 +1037,7 @@ waitForEcho(() => {
                        target="_blank"
                        class="file-item ${fileClass}"
                        title="${fileName}">
-                        <div class="file-icon">
+                        <div class="file-icon">${fileIcon}</div>
-                            ${fileIcon}
-                        </div>
                         <div class="file-info">
                             <div class="file-name">${fileName}</div>
                             <div class="file-size">${fileSize}</div>
@@ -1023,17 +1045,14 @@ waitForEcho(() => {
                         <div class="file-download-btn">
                             <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                      d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                                      d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                             </svg>
                         </div>
                     </a>
                 </div>`;
             }
 
-            html += `
+            html += `<small class="mt-2">Just now</small></div>`;
-                <small class="mt-2">Just now</small>
-                </div>
-            `;
 
             document
                 .querySelector("#chatBox .chat-box-inner")

resources/views/admin/shipments.blade.php

@@ -734,17 +734,24 @@
         text-decoration: underline;
     }
     
-    /* Shipment Details Modal */
+    /* Shipment Details Modal - EDGE-TO-EDGE STYLING */
+    .modal-xl.edge-to-edge {
+        max-width: 95vw !important;
+        width: 95vw !important;
+        margin: 1vh auto !important;
+    }
+    
     .shipment-details-header {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         color: white;
         border: none;
-        padding: 25px 30px 15px;
+        padding: 25px 35px 15px;
         border-radius: 20px 20px 0 0;
     }
     
     .shipment-details-body {
-        padding: 40px 45px;
+        padding: 30px 35px;
+        width: 100%;
     }
     
     .shipment-info-row {
@@ -824,47 +831,63 @@
         border-bottom-right-radius: 10px;
     }
     
-    /* Shipment Totals Section */
+    /* Shipment Totals Section - SINGLE ROW ON DESKTOP */
     .shipment-totals {
         margin-top: 25px;
-        padding: 25px;
+        padding: 25px 20px;
         background: linear-gradient(135deg, #f8fafc, #e2e8f0);
         border-radius: 12px;
         box-shadow: 0 4px 6px rgba(0,0,0,0.05);
         border-left: 4px solid #4361ee;
+        width: 100%;
     }
     
     .shipment-totals-row {
-        display: flex;
+        display: grid;
-        flex-wrap: wrap;
+        grid-template-columns: repeat(8, 1fr);
-        gap: 20px;
+        gap: 12px;
-        justify-content: space-between;
+        justify-content: center;
+        align-items: stretch;
+        width: 100%;
     }
     
     .shipment-total-item {
-        flex: 1;
-        min-width: 150px;
         text-align: center;
-        padding: 15px;
+        padding: 15px 10px;
         background: white;
         border-radius: 10px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 1;
     }
     
     .shipment-total-label {
         font-weight: 600;
         color: #64748b;
-        font-size: 12px;
+        font-size: 11px;
         margin-bottom: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
+        line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
     }
     
     .shipment-total-value {
         font-weight: 800;
-        font-size: 20px;
+        font-size: 18px;
         color: #1e293b;
         line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
     }
     
     .total-amount {
@@ -873,6 +896,7 @@
         padding: 10px;
         border-radius: 8px;
         border: 2px solid #10b981;
+        width: 100%;
     }
     
     .total-quantity {
@@ -881,6 +905,7 @@
         padding: 10px;
         border-radius: 8px;
         border: 2px solid #0ea5e9;
+        width: 100%;
     }
     
     .total-weight {
@@ -889,6 +914,7 @@
         padding: 10px;
         border-radius: 8px;
         border: 2px solid #8b5cf6;
+        width: 100%;
     }
     
     .total-cbm {
@@ -897,6 +923,7 @@
         padding: 10px;
         border-radius: 8px;
         border: 2px solid #ef4444;
+        width: 100%;
     }
     
     .total-ctn {
@@ -905,6 +932,7 @@
         padding: 10px;
         border-radius: 8px;
         border: 2px solid #f59e0b;
+        width: 100%;
     }
     
     .total-ttl-cbm {
@@ -913,6 +941,7 @@
         padding: 10px;
         border-radius: 8px;
         border: 2px solid #8b5cf6;
+        width: 100%;
     }
     
     .total-ttl-kg {
@@ -921,6 +950,7 @@
         padding: 10px;
         border-radius: 8px;
         border: 2px solid #14b8a6;
+        width: 100%;
     }
     
     /* Animation for loading */
@@ -1097,6 +1127,36 @@
         filter: brightness(0) saturate(100%) invert(84%) sepia(8%) saturate(165%) hue-rotate(179deg) brightness(89%) contrast(86%);
     }
 
+    /* RESPONSIVE DESIGN FOR TABLET/MOBILE */
+    @media (max-width: 1200px) {
+        .modal-xl.edge-to-edge {
+            max-width: 96vw !important;
+            width: 96vw !important;
+            margin: 2vh auto !important;
+        }
+        
+        .shipment-totals-row {
+            grid-template-columns: repeat(4, 1fr);
+            gap: 15px;
+        }
+    }
+    
+    @media (max-width: 992px) {
+        .modal-xl.edge-to-edge {
+            max-width: 95vw !important;
+            width: 95vw !important;
+            margin: 2.5vh auto !important;
+        }
+        
+        .shipment-details-body {
+            padding: 20px 25px;
+        }
+        
+        .shipment-totals-row {
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+    
     @media (max-width: 768px) {
         .pagination-container {
             flex-direction: column;
@@ -1107,6 +1167,67 @@
         .pagination-controls {
             justify-content: center;
         }
+        
+        .modal-xl.edge-to-edge {
+            max-width: 100vw !important;
+            width: 100vw !important;
+            margin: 0 !important;
+            height: 100vh !important;
+            max-height: 100vh !important;
+        }
+        
+        .shipment-details-body {
+            padding: 15px 20px;
+        }
+        
+        .shipment-info-row {
+            flex-direction: column;
+            gap: 15px;
+            padding: 15px;
+        }
+        
+        .shipment-info-item {
+            padding: 10px 0;
+        }
+        
+        .shipment-totals {
+            padding: 20px 15px;
+        }
+        
+        .shipment-totals-row {
+            grid-template-columns: repeat(2, 1fr);
+            gap: 12px;
+        }
+        
+        .shipment-total-item {
+            padding: 12px 8px;
+        }
+        
+        .shipment-total-label {
+            font-size: 10px;
+        }
+        
+        .shipment-total-value {
+            font-size: 16px;
+        }
+    }
+    
+    @media (max-width: 576px) {
+        .shipment-totals-row {
+            grid-template-columns: 1fr;
+            gap: 10px;
+        }
+        
+        .modal-xl.edge-to-edge .modal-content {
+            border-radius: 0;
+            height: 100vh;
+            overflow-y: auto;
+        }
+        
+        .shipment-details-header {
+            padding: 20px 25px 15px;
+            border-radius: 0;
+        }
     }
 </style>
 
@@ -1371,7 +1492,7 @@
 
     {{-- SHIPMENT DETAILS MODAL --}}
     <div class="modal fade" id="shipmentDetailsModal" tabindex="-1">
-        <div class="modal-dialog modal-xl modal-dialog-scrollable">
+        <div class="modal-dialog modal-xl edge-to-edge modal-dialog-scrollable">
             <div class="modal-content">
                 <div class="modal-header shipment-details-header">
                     <h5 class="modal-title fw-bold"><i class="bi bi-box-seam me-2"></i>Consolidated Shipment Details</h5>