This commit is contained in:
Utkarsh Khedkar
2025-12-25 11:38:02 +05:30
parent ebb263cd36
commit 10af713fa1
2 changed files with 110 additions and 141 deletions

View File

@@ -323,6 +323,7 @@
overflow-x: auto;
width: 100%;
-webkit-overflow-scrolling: touch;
}
.table {
@@ -337,6 +338,7 @@
.table thead tr {
background: linear-gradient(135deg, #2c3e50, #34495e) !important;
border-bottom: 2px solid #1a252f;
border-radius:16px 16px 0 0 !important;
}
.table thead th {
@@ -353,6 +355,7 @@
font-family: 'Inter', sans-serif;
font-size: 13px;
min-width: 100px;
}
/* Curve the first and last header cells */
@@ -515,9 +518,9 @@
/* Default fallback badge classes */
.badge.bg-secondary {
background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
color: #495057 !important;
border-color: #dee2e6 !important;
background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
color: #065f46 !important;
border-color: #10b981 !important;
}
.badge.bg-info {

View File

@@ -1827,32 +1827,8 @@
<th>Amount ()</th>
</tr>
</thead>
<tbody>
@forelse($availableOrders as $order)
<tr>
<td>
<input type="checkbox" name="order_ids[]" value="{{ $order->id }}">
</td>
<td>
<a href="#" class="text-primary fw-bold">{{ $order->order_id }}</a>
</td>
<td>{{ $order->origin }}</td>
<td>{{ $order->destination }}</td>
<td>{{ $order->ctn }}</td>
<td>{{ $order->qty }}</td>
<td>{{ $order->ttl_qty }}</td>
<td>{{ $order->cbm }}</td>
<td>{{ $order->ttl_cbm }}</td>
<td>{{ $order->kg }}</td>
<td>{{ $order->ttl_kg }}</td>
<td class="fw-bold text-success">{{ number_format($order->ttl_amount, 2) }}</td>
</tr>
@empty
<tr>
<td colspan="12" class="text-muted text-center py-4">No available orders to add to shipment</td>
</tr>
@endforelse
<tbody id="modalOrdersTableBody">
<!-- Orders will be loaded here via JavaScript -->
</tbody>
</table>
</div>
@@ -2063,46 +2039,51 @@
</div>
<script>
// Pagination state
// Pagination state for main table
let currentPage = 1;
const itemsPerPage = 10;
let allShipments = @json($shipments);
let filteredShipments = [...allShipments];
// ==================== CREATE SHIPMENT MODAL PAGINATION ====================
// Modal pagination state
let modalCurrentPage = 1;
const modalItemsPerPage = 10;
// IMPORTANT: सर्व orders एकाच decending order मध्ये
// प्रथम सर्व orders ला एकत्रित decending order मध्ये sort करा
// Order ID च्या क्रमाने sort करा (KNT-25-00000041, KNT-25-00000040, etc.)
let allAvailableOrders = @json($availableOrders);
// Sort all orders in descending order by order_id (newest first)
// Order ID च्या क्रमाने sort करा (KNT-25-00000041, KNT-25-00000040, etc.)
allAvailableOrders.sort((a, b) => {
// Extract the number from order_id (e.g., "KNT-25-00000041" -> 41)
const extractNumber = (orderId) => {
const match = orderId.match(/\d+$/);
return match ? parseInt(match[0]) : 0;
};
const numA = extractNumber(a.order_id);
const numB = extractNumber(b.order_id);
// Descending order (highest number first)
return numB - numA;
});
// Sort all orders in descending order by order_id (newest/highest number first)
// This function extracts the numeric part from order_id for proper sorting
function sortOrdersInDescending(orders) {
return orders.sort((a, b) => {
// Extract the number from order_id (e.g., "KNT-25-00000041" -> 41)
const extractNumber = (orderId) => {
if (!orderId) return 0;
const match = orderId.match(/\d+$/);
return match ? parseInt(match[0]) : 0;
};
const numA = extractNumber(a.order_id);
const numB = extractNumber(b.order_id);
// Descending order (highest number first)
return numB - numA;
});
}
// Initialize pagination on page load
// Initialize modal pagination when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
// Initialize main table pagination
renderTable();
updatePaginationControls();
// Bind pagination events
// Bind main pagination events
document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);
// Status Filter Functionality
// Status Filter Functionality for main table
const statusFilter = document.getElementById('statusFilter');
const searchInput = document.getElementById('searchInput');
const carrierFilter = document.getElementById('carrierFilter');
@@ -2130,7 +2111,7 @@ document.addEventListener('DOMContentLoaded', function() {
if (!matchesSearch) include = false;
}
// Carrier filter (you can add carrier data attribute if needed)
// Carrier filter
if (selectedCarrier !== 'all') {
// Add carrier filtering logic here if you have carrier data
}
@@ -2148,9 +2129,8 @@ document.addEventListener('DOMContentLoaded', function() {
searchInput.addEventListener('input', filterShipments);
carrierFilter.addEventListener('change', filterShipments);
// Update status filter appearance based on selection
// Update status filter appearance
statusFilter.addEventListener('change', function() {
// Update data-status attribute for CSS styling
if (this.value === 'all') {
this.removeAttribute('data-status');
} else {
@@ -2161,35 +2141,69 @@ document.addEventListener('DOMContentLoaded', function() {
// Initialize filter on page load
filterShipments();
// Modal pagination initialization
initModalPagination();
// Initialize modal when create shipment modal is shown
const createShipmentModal = document.getElementById('createShipmentModal');
if (createShipmentModal) {
createShipmentModal.addEventListener('show.bs.modal', function() {
// Sort orders in descending order
allAvailableOrders = sortOrdersInDescending(@json($availableOrders));
// Reset to first page
modalCurrentPage = 1;
renderModalTable();
updateModalPaginationControls();
});
}
});
// Modal Pagination Functions
function initModalPagination() {
renderModalTable();
updateModalPaginationControls();
// ==================== MODAL PAGINATION FUNCTIONS ====================
function renderModalTable() {
const tbody = document.getElementById('modalOrdersTableBody');
// Bind modal pagination events
document.getElementById('modalPrevPageBtn').addEventListener('click', goToModalPreviousPage);
document.getElementById('modalNextPageBtn').addEventListener('click', goToModalNextPage);
}
function goToModalPreviousPage() {
if (modalCurrentPage > 1) {
modalCurrentPage--;
renderModalTable();
updateModalPaginationControls();
}
}
function goToModalNextPage() {
const totalPages = Math.ceil(allAvailableOrders.length / modalItemsPerPage);
if (modalCurrentPage < totalPages) {
modalCurrentPage++;
renderModalTable();
updateModalPaginationControls();
if (allAvailableOrders.length === 0) {
tbody.innerHTML = `
<tr>
<td colspan="12" class="text-muted text-center py-4">
<i class="bi bi-search display-6 d-block mb-3"></i>
No available orders to add to shipment
</td>
</tr>
`;
return;
}
// Calculate pagination
const startIndex = (modalCurrentPage - 1) * modalItemsPerPage;
const endIndex = startIndex + modalItemsPerPage;
// Get orders for current page
const paginatedItems = allAvailableOrders.slice(startIndex, endIndex);
// Render table rows
tbody.innerHTML = '';
paginatedItems.forEach((order, index) => {
const row = document.createElement('tr');
row.innerHTML = `
<td>
<input type="checkbox" name="order_ids[]" value="${order.id}">
</td>
<td>
<a href="#" class="text-primary fw-bold">${order.order_id}</a>
</td>
<td>${order.origin}</td>
<td>${order.destination}</td>
<td>${order.ctn}</td>
<td>${order.qty}</td>
<td>${order.ttl_qty}</td>
<td>${order.cbm}</td>
<td>${order.ttl_cbm}</td>
<td>${order.kg}</td>
<td>${order.ttl_kg}</td>
<td class="fw-bold text-success">${parseFloat(order.ttl_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
`;
tbody.appendChild(row);
});
}
function updateModalPaginationControls() {
@@ -2202,7 +2216,7 @@ function updateModalPaginationControls() {
prevBtn.disabled = modalCurrentPage === 1;
nextBtn.disabled = modalCurrentPage === totalPages || totalPages === 0;
// Update page info text
// Update page info text - Showing 1 to 10 of 14 entries
const startIndex = (modalCurrentPage - 1) * modalItemsPerPage + 1;
const endIndex = Math.min(modalCurrentPage * modalItemsPerPage, allAvailableOrders.length);
pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${allAvailableOrders.length} entries`;
@@ -2253,58 +2267,24 @@ function addModalPageButton(pageNumber, container) {
container.appendChild(button);
}
function renderModalTable() {
const tbody = document.getElementById('modalOrdersTableBody');
if (allAvailableOrders.length === 0) {
tbody.innerHTML = `
<tr>
<td colspan="12" class="text-muted text-center py-4">
<i class="bi bi-search display-6 d-block mb-3"></i>
No available orders to add to shipment
</td>
</tr>
`;
return;
function goToModalPreviousPage() {
if (modalCurrentPage > 1) {
modalCurrentPage--;
renderModalTable();
updateModalPaginationControls();
}
// Calculate pagination - पेजवर दाखवायचे orders
const startIndex = (modalCurrentPage - 1) * modalItemsPerPage;
const endIndex = startIndex + modalItemsPerPage;
// IMPORTANT: सर्व orders आधीच sorted आहेत (descending order मध्ये)
// फक्त current page चे orders घ्या
const paginatedItems = allAvailableOrders.slice(startIndex, endIndex);
// Render table rows
tbody.innerHTML = '';
paginatedItems.forEach((order, index) => {
const globalIndex = startIndex + index + 1;
const row = document.createElement('tr');
row.innerHTML = `
<td>
<input type="checkbox" name="order_ids[]" value="${order.id}">
</td>
<td>
<a href="#" class="text-primary fw-bold">${order.order_id}</a>
</td>
<td>${order.origin}</td>
<td>${order.destination}</td>
<td>${order.ctn}</td>
<td>${order.qty}</td>
<td>${order.ttl_qty}</td>
<td>${order.cbm}</td>
<td>${order.ttl_cbm}</td>
<td>${order.kg}</td>
<td>${order.ttl_kg}</td>
<td class="fw-bold text-success">${parseFloat(order.ttl_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
`;
tbody.appendChild(row);
});
}
// Main Pagination Functions
function goToModalNextPage() {
const totalPages = Math.ceil(allAvailableOrders.length / modalItemsPerPage);
if (modalCurrentPage < totalPages) {
modalCurrentPage++;
renderModalTable();
updateModalPaginationControls();
}
}
// ==================== MAIN TABLE PAGINATION FUNCTIONS ====================
function goToPreviousPage() {
if (currentPage > 1) {
currentPage--;
@@ -2542,7 +2522,6 @@ function openShipmentDetails(id) {
.then(data => {
// Format date properly
const shipmentDate = new Date(data.shipment.shipment_date);
// <div class="shipment-info-value">${data.shipment.shipment_id}</div>
const formattedDate = shipmentDate.toLocaleDateString('en-GB', {
day: '2-digit',
@@ -2743,19 +2722,6 @@ function openShipmentOrderDetails(orderId) {
});
}
// Reset modal pagination when modal is shown
document.addEventListener('DOMContentLoaded', function() {
const createShipmentModal = document.getElementById('createShipmentModal');
if (createShipmentModal) {
createShipmentModal.addEventListener('show.bs.modal', function() {
// Reset to first page
modalCurrentPage = 1;
renderModalTable();
updateModalPaginationControls();
});
}
});
</script>
<!-- SHIPMENT ORDER DETAILS MODAL - UPDATED TO EDGE-TO-EDGE -->