changes of shipment
This commit is contained in:
divya abdar
@@ -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">
|
||||
|
||||
@@ -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-hover: 0 15px 35px rgba(0,0,0,0.12);
|
||||
--border-radius: 12px;
|
||||
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--card-shadow: 0 3px 10px rgba(0,0,0,0.05);
|
||||
--card-shadow-hover: 0 6px 16px rgba(0,0,0,0.10);
|
||||
--border-radius: 8px;
|
||||
--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); }
|
||||
60% { transform: translateY(-50%) translateY(-4px); }
|
||||
40% { transform: translateY(-50%) translateY(-5px); }
|
||||
60% { transform: translateY(-50%) translateY(-2px); }
|
||||
}
|
||||
|
||||
.dashboard-subtitle {
|
||||
color: #64748b;
|
||||
font-size: 1rem;
|
||||
max-width: 500px;
|
||||
font-size: 0.8rem;
|
||||
max-width: 380px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.5;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
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;
|
||||
/* 🔔 GLOBAL NEW MESSAGE COUNTER */
|
||||
.global-notify {
|
||||
margin: 0 auto 0.75rem auto;
|
||||
max-width: 320px;
|
||||
padding: 0.35rem 0.7rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(15,23,42,0.03);
|
||||
border: 1px dashed #cbd5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
|
||||
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;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.78rem;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.stat-content p {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
.global-notify-badge {
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
min-width: 18px;
|
||||
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;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 0.6rem;
|
||||
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;
|
||||
border-radius: 16px;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.1rem 0.45rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ========= COMPACT TICKET CARD ========= */
|
||||
.ticket-item {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 0.6rem;
|
||||
border: 1px solid #f1f5f9;
|
||||
border-radius: 6px;
|
||||
padding: 0.4rem 0.6rem;
|
||||
margin-bottom: 0.3rem;
|
||||
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;
|
||||
margin-bottom: 0.5rem;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.ticket-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
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;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
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;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 0.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.ticket-time {
|
||||
font-size: 0.75rem;
|
||||
color: #94a3b8;
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 0.1rem;
|
||||
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;
|
||||
height: 12px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -314,18 +279,18 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 0.6rem;
|
||||
border-top: 1px dashed #f1f5f9;
|
||||
margin-top: 0.4rem;
|
||||
padding-top: 0.3rem;
|
||||
border-top: 1px dashed #e5e7eb;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 0.25rem 0.7rem;
|
||||
border-radius: 50px;
|
||||
font-size: 0.7rem;
|
||||
padding: 0.14rem 0.45rem;
|
||||
border-radius: 999px;
|
||||
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;
|
||||
border-radius: 25px;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
font-size: 0.7rem;
|
||||
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;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 2.8rem;
|
||||
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;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.5;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 1rem;
|
||||
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;
|
||||
border-radius: 16px;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.12rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
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;
|
||||
right: 0.75rem;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 0.45rem;
|
||||
right: 0.5rem;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: #ef4444;
|
||||
border-radius: 50%;
|
||||
border: 2px solid white;
|
||||
@@ -425,53 +391,52 @@
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(1.15); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chat-dashboard {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.ticket-header {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.ticket-footer {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.chat-btn {
|
||||
justify-content: center;
|
||||
}
|
||||
50% { opacity: 0.5; transform: scale(1.1); }
|
||||
}
|
||||
|
||||
/* इथे आता inner scroll नाही */
|
||||
.tickets-list {
|
||||
max-height: 55vh;
|
||||
overflow-y: auto;
|
||||
padding-right: 0.4rem;
|
||||
/* flex: 1; काढला, overflow काढला, parent + body scroll वापरेल */
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.tickets-list::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
.tickets-list::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.tickets-list::-webkit-scrollbar-thumb {
|
||||
background: var(--primary-gradient);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chat-dashboard {
|
||||
padding: 0.6rem;
|
||||
}
|
||||
|
||||
.tickets-container {
|
||||
/* max-height काढलेले, mobile वरही outer scroll */
|
||||
}
|
||||
|
||||
.ticket-header {
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.ticket-footer {
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.chat-btn {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -484,29 +449,10 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon stat-total">💬</div>
|
||||
<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>
|
||||
<!-- 🔔 GLOBAL NEW MESSAGES NOTIFICATION -->
|
||||
<div id="globalNewMessageBox" class="global-notify d-none">
|
||||
<span>New messages:</span>
|
||||
<span id="globalNewMessageCount" class="global-notify-badge">0</span>
|
||||
</div>
|
||||
|
||||
<!-- Tickets Container -->
|
||||
@@ -552,15 +498,15 @@
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
|
||||
@php
|
||||
$lastMsg = $ticket->messages()->latest()->first();
|
||||
@endphp
|
||||
|
||||
|
||||
<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,21 +571,51 @@ 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}`);
|
||||
if (!badge) return;
|
||||
const ticketId = event.ticket_id;
|
||||
|
||||
let count = parseInt(badge.innerText || 0);
|
||||
badge.innerText = count + 1;
|
||||
badge.classList.remove('d-none');
|
||||
// 1) UPDATE PER-TICKET BADGE
|
||||
const badge = document.getElementById(`badge-${ticketId}`);
|
||||
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>
|
||||
@endsection
|
||||
@endsection
|
||||
|
||||
@@ -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>
|
||||
@@ -692,8 +725,7 @@ body {
|
||||
$isPdf = Str::endsWith($msg->file_path, '.pdf');
|
||||
$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);
|
||||
@@ -710,8 +742,7 @@ body {
|
||||
} catch (Exception $e) {
|
||||
$fileSize = 'Unknown';
|
||||
}
|
||||
|
||||
// Determine file class
|
||||
|
||||
if ($isImage) {
|
||||
$fileClass = 'image-file';
|
||||
$fileIcon = '🖼️';
|
||||
@@ -744,9 +775,9 @@ body {
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
@endif
|
||||
|
||||
<a href="{{ asset('storage/'.$msg->file_path) }}"
|
||||
target="_blank"
|
||||
|
||||
<a href="{{ asset('storage/'.$msg->file_path) }}"
|
||||
target="_blank"
|
||||
class="file-item {{ $fileClass }}"
|
||||
title="{{ $fileName }}">
|
||||
<div class="file-icon">
|
||||
@@ -758,7 +789,7 @@ body {
|
||||
</div>
|
||||
<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"
|
||||
<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" />
|
||||
</svg>
|
||||
</div>
|
||||
@@ -789,10 +820,11 @@ 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>
|
||||
|
||||
|
||||
<div class="file-upload-btn">
|
||||
<input type="file" id="fileInput">
|
||||
<label for="fileInput" title="Attach file">
|
||||
@@ -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 fileSize = formatFileSize(file.size);
|
||||
|
||||
fileNameDisplay.textContent = `${fileName} (${fileSize})`;
|
||||
const name = file.name;
|
||||
const size = formatFileSize(file.size);
|
||||
fileNameDisplay.textContent = `${name} (${size})`;
|
||||
fileNameDisplay.style.display = 'block';
|
||||
clearFileBtn.style.display = 'block';
|
||||
}
|
||||
@@ -886,40 +915,26 @@ function formatFileSize(bytes) {
|
||||
}
|
||||
|
||||
function getFileIcon(fileType, fileName) {
|
||||
if (fileType.startsWith('image/')) {
|
||||
return '🖼️';
|
||||
} else if (fileType.startsWith('video/')) {
|
||||
return '🎬';
|
||||
} else if (fileName.endsWith('.pdf')) {
|
||||
return '📄';
|
||||
} else if (fileName.match(/\.(doc|docx|txt)$/i)) {
|
||||
return '📝';
|
||||
} else {
|
||||
return '📎';
|
||||
}
|
||||
if (fileType.startsWith('image/')) return '🖼️';
|
||||
if (fileType.startsWith('video/')) return '🎬';
|
||||
if (fileName.endsWith('.pdf')) return '📄';
|
||||
if (fileName.match(/\.(doc|docx|txt)$/i)) return '📝';
|
||||
return '📎';
|
||||
}
|
||||
|
||||
function getFileClass(fileType, fileName) {
|
||||
if (fileType.startsWith('image/')) {
|
||||
return 'image-file';
|
||||
} else if (fileType.startsWith('video/')) {
|
||||
return 'video-file';
|
||||
} else if (fileName.endsWith('.pdf')) {
|
||||
return 'pdf-file';
|
||||
} else if (fileName.match(/\.(doc|docx|txt)$/i)) {
|
||||
return 'document-file';
|
||||
} else {
|
||||
return 'other-file';
|
||||
}
|
||||
if (fileType.startsWith('image/')) return 'image-file';
|
||||
if (fileType.startsWith('video/')) return 'video-file';
|
||||
if (fileName.endsWith('.pdf')) return 'pdf-file';
|
||||
if (fileName.match(/\.(doc|docx|txt)$/i)) return 'document-file';
|
||||
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) => {
|
||||
console.log("[SEND] Message sent:", response);
|
||||
.then(() => {
|
||||
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,67 +990,69 @@ 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);
|
||||
|
||||
// Check if it's image or video for preview
|
||||
const isImage = (msg.file_type || '').startsWith('image');
|
||||
const isVideo = (msg.file_type || '').startsWith('video');
|
||||
const fileClass= getFileClass(msg.file_type || '', fileName);
|
||||
const isImage = (msg.file_type || '').startsWith('image');
|
||||
const isVideo = (msg.file_type || '').startsWith('video');
|
||||
|
||||
html += `<div class="file-preview">`;
|
||||
|
||||
if (isImage) {
|
||||
html += `
|
||||
<img src="${fileUrl}"
|
||||
class="rounded mt-2"
|
||||
<img src="${fileUrl}"
|
||||
class="rounded mt-2"
|
||||
style="max-width:210px;"
|
||||
alt="${fileName}">
|
||||
`;
|
||||
} else if (isVideo) {
|
||||
html += `
|
||||
<video src="${fileUrl}"
|
||||
controls
|
||||
class="mt-2 rounded"
|
||||
<video src="${fileUrl}"
|
||||
controls
|
||||
class="mt-2 rounded"
|
||||
style="max-width:200px;">
|
||||
</video>
|
||||
`;
|
||||
}
|
||||
|
||||
html += `
|
||||
<a href="${fileUrl}"
|
||||
target="_blank"
|
||||
<a href="${fileUrl}"
|
||||
target="_blank"
|
||||
class="file-item ${fileClass}"
|
||||
title="${fileName}">
|
||||
<div class="file-icon">
|
||||
${fileIcon}
|
||||
</div>
|
||||
<div class="file-icon">${fileIcon}</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">${fileName}</div>
|
||||
<div class="file-size">${fileSize}</div>
|
||||
</div>
|
||||
<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" />
|
||||
<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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
html += `
|
||||
<small class="mt-2">Just now</small>
|
||||
</div>
|
||||
`;
|
||||
html += `<small class="mt-2">Just now</small></div>`;
|
||||
|
||||
document
|
||||
.querySelector("#chatBox .chat-box-inner")
|
||||
@@ -1043,4 +1062,4 @@ waitForEcho(() => {
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@endsection
|
||||
|
||||
@@ -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;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
justify-content: space-between;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shipment-total-item {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
padding: 15px 10px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.shipment-total-label {
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shipment-total-value {
|
||||
font-weight: 800;
|
||||
font-size: 20px;
|
||||
font-size: 18px;
|
||||
color: #1e293b;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
@@ -873,6 +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>
|
||||
|
||||
Reference in New Issue
Block a user