Account and Shipment Changes
This commit is contained in:
Utkarsh Khedkar
@@ -63,7 +63,6 @@
|
||||
--hover-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* UPDATED: Search Bar Styles - White Background */
|
||||
.search-shipment-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -90,69 +89,9 @@
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.search-input-container:focus-within {
|
||||
border-color: #4361ee;
|
||||
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
|
||||
}
|
||||
|
||||
.search-shipment-bar input {
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.search-shipment-bar input::placeholder {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* UPDATED: Search Button - White with Blue Icon by default, Gradient on hover */
|
||||
.search-button {
|
||||
background: white;
|
||||
color: #4361ee;
|
||||
border: none;
|
||||
padding: 12px 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 600;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-radius: 0 10px 10px 0;
|
||||
min-width: 100px;
|
||||
justify-content: center;
|
||||
border-left: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.search-input-group {
|
||||
border: 1px solid #d1d5db !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 4px !important;
|
||||
background: #ffffff !important;
|
||||
}
|
||||
.search-button:hover {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 16px;
|
||||
color: #4361ee;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-button:hover .search-icon {
|
||||
color: white;
|
||||
.search-shipment-bar > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.search-shipment-bar input,
|
||||
@@ -215,27 +154,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
/* VIEW BUTTON STYLING */
|
||||
.btn-view {
|
||||
background: linear-gradient(135deg, #4cc9f0, #4361ee) !important;
|
||||
border: none !important;
|
||||
border-radius: 10px !important;
|
||||
padding: 8px 14px !important;
|
||||
color: white !important;
|
||||
box-shadow: 0 4px 12px rgba(67, 97, 238, 0.35) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.btn-view:hover {
|
||||
transform: translateY(-2px) scale(1.05) !important;
|
||||
background: linear-gradient(135deg, #3a56d4, #4cc9f0) !important;
|
||||
box-shadow: 0 8px 20px rgba(67, 97, 238, 0.5) !important;
|
||||
}
|
||||
|
||||
.btn-view i {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
|
||||
/* Card Styles */
|
||||
.card {
|
||||
border: none;
|
||||
@@ -325,8 +244,8 @@
|
||||
.table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* UPDATED: Status Badge Styles - ALL SAME SIZE WITH ICONS */
|
||||
|
||||
/* UPDATED: Status Badge Styles - ALL SAME SIZE */
|
||||
.badge {
|
||||
padding: 7px 17px !important;
|
||||
border-radius: 20px !important;
|
||||
@@ -339,15 +258,7 @@
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
/* Status icons */
|
||||
.status-icon {
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Pending Status - SAME SIZE WITH CLOCK ICON */
|
||||
/* Pending Status - SAME SIZE */
|
||||
.badge-pending {
|
||||
background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
|
||||
color: #d97706 !important;
|
||||
@@ -355,7 +266,7 @@
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
/* In Transit Status - SAME SIZE WITH TRUCK ICON */
|
||||
/* In Transit Status - SAME SIZE */
|
||||
.badge-in_transit {
|
||||
background: linear-gradient(135deg, #dbeafe, #93c5fd) !important;
|
||||
color: #1e40af !important;
|
||||
@@ -363,7 +274,7 @@
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
/* Dispatched Status - SAME SIZE WITH BOX ICON */
|
||||
/* Dispatched Status - SAME SIZE */
|
||||
.badge-dispatched {
|
||||
background: linear-gradient(135deg, #e9d5ff, #c4b5fd) !important;
|
||||
color: #6b21a8 !important;
|
||||
@@ -371,7 +282,7 @@
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
/* Delivered Status - SAME SIZE WITH CHECK ICON */
|
||||
/* Delivered Status - SAME SIZE */
|
||||
.badge-delivered {
|
||||
background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
|
||||
color: #065f46 !important;
|
||||
@@ -536,66 +447,6 @@
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
/* NEW: View Button Styles - Icon Only */
|
||||
.btn-view {
|
||||
background: #4361ee;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-view::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
transition: all 0.3s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn-view:hover::before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.btn-view i {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-view:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.btn-view:hover i {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Action buttons container */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal-content {
|
||||
border-radius: 20px;
|
||||
@@ -830,9 +681,6 @@
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
color: #4361ee !important;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.text-primary:hover {
|
||||
@@ -840,7 +688,7 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Shipment Details Modal - UPDATED TO MATCH SECOND CODE */
|
||||
/* Shipment Details Modal */
|
||||
.shipment-details-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
@@ -930,7 +778,7 @@
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
/* Shipment Totals Section - UPDATED */
|
||||
/* Shipment Totals Section */
|
||||
.shipment-totals {
|
||||
margin-top: 25px;
|
||||
padding: 25px;
|
||||
@@ -1214,48 +1062,8 @@
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Edit Form Styles */
|
||||
.edit-shipment-form {
|
||||
background: #f8fafc;
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
border-left: 4px solid #4361ee;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background: linear-gradient(135deg, #48bb78, #38a169);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-save:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
|
||||
}
|
||||
|
||||
.btn-cancel-edit {
|
||||
background: #f7fafc;
|
||||
color: #718096;
|
||||
border: 1px solid #cbd5e0;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
padding: 10px 20px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-cancel-edit:hover {
|
||||
background: #edf2f7;
|
||||
color: #4a5568;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div class="container-fluid py-4">
|
||||
|
||||
{{-- SUCCESS / ERROR MESSAGES --}}
|
||||
@@ -1420,7 +1228,6 @@
|
||||
<th>Status</th>
|
||||
<th>Date</th>
|
||||
<th>Action</th>
|
||||
<th>View</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@@ -1433,15 +1240,16 @@
|
||||
{{-- REVERSE INDEX: सर्वात वरच्या shipment ला सर्वात मोठा क्रमांक --}}
|
||||
<td class="fw-bold">{{ $totalShipments - $loop->index }}</td>
|
||||
<td>
|
||||
<a href="#" class="text-primary fw-bold" onclick="openShipmentDetails({{ $ship->id }})">
|
||||
<a href="#" class="text-primary fw-bold"
|
||||
onclick="openShipmentDetails({{ $ship->id }})">
|
||||
{{ $ship->shipment_id }}
|
||||
</a>
|
||||
</td>
|
||||
<td>{{ $ship->origin }}</td>
|
||||
<td>{{ $ship->destination }}</td>
|
||||
<td>{{ $ship->total_qty }}</td>
|
||||
<td>{{ $ship->total_kg }} kg</td>
|
||||
<td>{{ $ship->total_cbm }} CBM</td>
|
||||
<td><span class="badge bg-light text-dark">{{ $ship->total_qty }}</span></td>
|
||||
<td><span class="badge bg-light text-dark">{{ $ship->total_kg }} kg</span></td>
|
||||
<td><span class="badge bg-light text-dark">{{ $ship->total_cbm }} CBM</span></td>
|
||||
<td class="fw-bold text-success">₹{{ number_format($ship->total_amount, 2) }}</td>
|
||||
<td>
|
||||
<span class="badge badge-{{ $ship->status }}">
|
||||
@@ -1478,12 +1286,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="{{ route('admin.shipments.view', ['id' => $ship->id, 'mode' => 'edit']) }}"
|
||||
class="btn btn-view">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
@@ -1521,29 +1323,29 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- ============================= -->
|
||||
<!-- SHIPMENT DETAILS MODAL -->
|
||||
<!-- ============================= -->
|
||||
<div class="modal fade" id="shipmentDetailsModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-xl modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header shipment-details-header">
|
||||
<h5 class="modal-title fw-bold"><i class="bi bi-box-seam me-2"></i>Consolidated Shipment Details</h5>
|
||||
<button class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
|
||||
<!-- ============================= -->
|
||||
<!-- SHIPMENT DETAILS MODAL -->
|
||||
<!-- ============================= -->
|
||||
<div class="modal fade" id="shipmentDetailsModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-xl modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header shipment-details-header">
|
||||
<h5 class="modal-title fw-bold"><i class="bi bi-box-seam me-2"></i>Consolidated Shipment Details</h5>
|
||||
<button class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body shipment-details-body" id="shipmentDetailsContent">
|
||||
<div class="text-center py-4 loading">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
<div class="modal-body shipment-details-body" id="shipmentDetailsContent">
|
||||
<div class="text-center py-4 loading">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p class="mt-2 text-muted">Loading shipment details...</p>
|
||||
</div>
|
||||
<p class="mt-2 text-muted">Loading shipment details...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ========================= -->
|
||||
@@ -1775,19 +1577,11 @@ function renderTable() {
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="/admin/shipments/view/${shipment.id}?mode=edit"
|
||||
class="btn btn-view"
|
||||
title="Edit Shipment">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
// Function to open shipment details modal
|
||||
function openShipmentDetails(id) {
|
||||
let modal = new bootstrap.Modal(document.getElementById('shipmentDetailsModal'));
|
||||
let content = document.getElementById('shipmentDetailsContent');
|
||||
@@ -1958,15 +1752,11 @@ function toggleStatusDropdown(button, shipmentId) {
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
document.addEventListener('click', function closeDropdown(e) {
|
||||
// allow clicking links normally
|
||||
if (e.target.closest('a')) return;
|
||||
|
||||
if (!button.contains(e.target) && !dropdown.contains(e.target)) {
|
||||
dropdown.classList.remove('show');
|
||||
document.removeEventListener('click', closeDropdown);
|
||||
}
|
||||
}, { once: true });
|
||||
|
||||
if (!button.contains(e.target) && !dropdown.contains(e.target)) {
|
||||
dropdown.classList.remove('show');
|
||||
document.removeEventListener('click', closeDropdown);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Auto-close dropdown after form submission
|
||||
|
||||
Reference in New Issue
Block a user