kent-logistics/Kent-logistics-Laravel
SHA256
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chat UI Changes

Browse Source
This commit is contained in:
Utkarsh Khedkar
2025-12-19 16:20:43 +05:30
parent 8a0d122e2c
commit e455c271c4
2 changed files with 452 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

327
resources/views/admin/shipments.blade.php
View File

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