Account Section UI Changes
This commit is contained in:
Utkarsh Khedkar
@@ -917,6 +917,151 @@
|
||||
.shipment-row.visible {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
/* ---------- Pagination Styles (Same as Account Dashboard) ---------- */
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
padding: 12px 25px;
|
||||
border-top: 1px solid #eef3fb;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
font-size: 13px;
|
||||
color: #9ba5bb;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
background: #fff;
|
||||
border: 1px solid #e3eaf6;
|
||||
color: #1a2951;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.pagination-btn:hover:not(:disabled) {
|
||||
background: #1a2951;
|
||||
color: white;
|
||||
border-color: #1a2951;
|
||||
}
|
||||
|
||||
.pagination-btn:disabled {
|
||||
background: #f8fafc;
|
||||
color: #cbd5e0;
|
||||
border-color: #e2e8f0;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.pagination-page-btn {
|
||||
background: #fff;
|
||||
border: 1px solid #e3eaf6;
|
||||
color: #1a2951;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 36px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination-page-btn:hover {
|
||||
background: #1a2951;
|
||||
color: white;
|
||||
border-color: #1a2951;
|
||||
}
|
||||
|
||||
.pagination-page-btn.active {
|
||||
background: #1a2951;
|
||||
color: white;
|
||||
border-color: #1a2951;
|
||||
}
|
||||
|
||||
.pagination-pages {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pagination-ellipsis {
|
||||
color: #9ba5bb;
|
||||
font-size: 13px;
|
||||
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 {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid py-4">
|
||||
@@ -1153,6 +1298,28 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination Controls -->
|
||||
<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>
|
||||
<!-- Left arrow SVG -->
|
||||
<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">
|
||||
<!-- Page numbers will be inserted here -->
|
||||
</div>
|
||||
<button class="pagination-img-btn" id="nextPageBtn" title="Next page" disabled>
|
||||
<!-- Right arrow SVG -->
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@@ -1185,12 +1352,25 @@
|
||||
<!-- MODAL LOAD SCRIPT (AJAX) -->
|
||||
<!-- ========================= -->
|
||||
<script>
|
||||
// Status Filter Functionality
|
||||
// Pagination state
|
||||
let currentPage = 1;
|
||||
const itemsPerPage = 10;
|
||||
let allShipments = @json($shipments);
|
||||
let filteredShipments = [...allShipments];
|
||||
|
||||
// Initialize pagination on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
renderTable();
|
||||
updatePaginationControls();
|
||||
|
||||
// Bind pagination events
|
||||
document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
|
||||
document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);
|
||||
|
||||
// Status Filter Functionality
|
||||
const statusFilter = document.getElementById('statusFilter');
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const carrierFilter = document.getElementById('carrierFilter');
|
||||
const shipmentRows = document.querySelectorAll('.shipment-row');
|
||||
|
||||
// Function to filter shipments
|
||||
function filterShipments() {
|
||||
@@ -1198,48 +1378,34 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
const searchTerm = searchInput.value.toLowerCase();
|
||||
const selectedCarrier = carrierFilter.value;
|
||||
|
||||
shipmentRows.forEach(row => {
|
||||
const status = row.getAttribute('data-status');
|
||||
const shipmentId = row.getAttribute('data-shipment-id').toLowerCase();
|
||||
const origin = row.cells[2].textContent.toLowerCase();
|
||||
const destination = row.cells[3].textContent.toLowerCase();
|
||||
|
||||
let statusMatch = selectedStatus === 'all' || status === selectedStatus;
|
||||
let searchMatch = searchTerm === '' ||
|
||||
shipmentId.includes(searchTerm) ||
|
||||
origin.includes(searchTerm) ||
|
||||
destination.includes(searchTerm);
|
||||
let carrierMatch = selectedCarrier === 'all'; // You can add carrier data attribute if needed
|
||||
filteredShipments = allShipments.filter(shipment => {
|
||||
let include = true;
|
||||
|
||||
if (statusMatch && searchMatch && carrierMatch) {
|
||||
row.classList.remove('hidden');
|
||||
row.classList.add('visible');
|
||||
} else {
|
||||
row.classList.add('hidden');
|
||||
row.classList.remove('visible');
|
||||
// Status filter
|
||||
if (selectedStatus !== 'all' && shipment.status !== selectedStatus) {
|
||||
include = false;
|
||||
}
|
||||
|
||||
// Search filter
|
||||
if (searchTerm) {
|
||||
const matchesSearch =
|
||||
shipment.shipment_id.toLowerCase().includes(searchTerm) ||
|
||||
shipment.origin.toLowerCase().includes(searchTerm) ||
|
||||
shipment.destination.toLowerCase().includes(searchTerm);
|
||||
if (!matchesSearch) include = false;
|
||||
}
|
||||
|
||||
// Carrier filter (you can add carrier data attribute if needed)
|
||||
if (selectedCarrier !== 'all') {
|
||||
// Add carrier filtering logic here if you have carrier data
|
||||
}
|
||||
|
||||
return include;
|
||||
});
|
||||
|
||||
// Show message if no results
|
||||
const visibleRows = document.querySelectorAll('.shipment-row:not(.hidden)');
|
||||
const noResultsRow = document.querySelector('.shipment-row[colspan]');
|
||||
|
||||
if (visibleRows.length === 0 && !noResultsRow) {
|
||||
// Add no results message
|
||||
const tbody = document.getElementById('shipmentsTableBody');
|
||||
const noResultsHtml = `
|
||||
<tr>
|
||||
<td colspan="11" class="text-center py-5 text-muted">
|
||||
<i class="bi bi-search display-4 d-block mb-3"></i>
|
||||
No shipments found matching your criteria
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
tbody.innerHTML = noResultsHtml;
|
||||
} else if (visibleRows.length > 0 && noResultsRow) {
|
||||
// Remove no results message
|
||||
noResultsRow.remove();
|
||||
}
|
||||
currentPage = 1;
|
||||
renderTable();
|
||||
updatePaginationControls();
|
||||
}
|
||||
|
||||
// Event listeners for filters
|
||||
@@ -1251,6 +1417,171 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
filterShipments();
|
||||
});
|
||||
|
||||
// Pagination Functions
|
||||
function goToPreviousPage() {
|
||||
if (currentPage > 1) {
|
||||
currentPage--;
|
||||
renderTable();
|
||||
updatePaginationControls();
|
||||
}
|
||||
}
|
||||
|
||||
function goToNextPage() {
|
||||
const totalPages = Math.ceil(filteredShipments.length / itemsPerPage);
|
||||
if (currentPage < totalPages) {
|
||||
currentPage++;
|
||||
renderTable();
|
||||
updatePaginationControls();
|
||||
}
|
||||
}
|
||||
|
||||
function updatePaginationControls() {
|
||||
const totalPages = Math.ceil(filteredShipments.length / itemsPerPage);
|
||||
const prevBtn = document.getElementById('prevPageBtn');
|
||||
const nextBtn = document.getElementById('nextPageBtn');
|
||||
const pageInfo = document.getElementById('pageInfo');
|
||||
const paginationPages = document.getElementById('paginationPages');
|
||||
|
||||
prevBtn.disabled = currentPage === 1;
|
||||
nextBtn.disabled = currentPage === totalPages || totalPages === 0;
|
||||
|
||||
// Update page info text
|
||||
const startIndex = (currentPage - 1) * itemsPerPage + 1;
|
||||
const endIndex = Math.min(currentPage * itemsPerPage, filteredShipments.length);
|
||||
pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${filteredShipments.length} entries`;
|
||||
|
||||
// Generate page numbers
|
||||
paginationPages.innerHTML = '';
|
||||
|
||||
if (totalPages <= 7) {
|
||||
// Show all pages
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
addPageButton(i, paginationPages);
|
||||
}
|
||||
} else {
|
||||
// Show first page, current page range, and last page
|
||||
addPageButton(1, paginationPages);
|
||||
|
||||
if (currentPage > 3) {
|
||||
paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
|
||||
}
|
||||
|
||||
const start = Math.max(2, currentPage - 1);
|
||||
const end = Math.min(totalPages - 1, currentPage + 1);
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
addPageButton(i, paginationPages);
|
||||
}
|
||||
|
||||
if (currentPage < totalPages - 2) {
|
||||
paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
|
||||
}
|
||||
|
||||
addPageButton(totalPages, paginationPages);
|
||||
}
|
||||
}
|
||||
|
||||
function addPageButton(pageNumber, container) {
|
||||
const button = document.createElement('button');
|
||||
button.className = 'pagination-page-btn';
|
||||
if (pageNumber === currentPage) {
|
||||
button.classList.add('active');
|
||||
}
|
||||
button.textContent = pageNumber;
|
||||
button.addEventListener('click', () => {
|
||||
currentPage = pageNumber;
|
||||
renderTable();
|
||||
updatePaginationControls();
|
||||
});
|
||||
container.appendChild(button);
|
||||
}
|
||||
|
||||
// Render Table Function
|
||||
function renderTable() {
|
||||
const tbody = document.getElementById('shipmentsTableBody');
|
||||
|
||||
if (filteredShipments.length === 0) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="11" class="text-center py-5 text-muted">
|
||||
<i class="bi bi-search display-4 d-block mb-3"></i>
|
||||
No shipments found matching your criteria
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
// 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));
|
||||
|
||||
// Render table rows
|
||||
tbody.innerHTML = '';
|
||||
sortedItems.forEach((shipment, index) => {
|
||||
const displayIndex = filteredShipments.length - (startIndex + index);
|
||||
const row = document.createElement('tr');
|
||||
row.className = 'shipment-row';
|
||||
row.setAttribute('data-status', shipment.status);
|
||||
row.setAttribute('data-shipment-id', shipment.shipment_id);
|
||||
|
||||
row.innerHTML = `
|
||||
<td class="fw-bold">${displayIndex}</td>
|
||||
<td>
|
||||
<a href="#" class="text-primary fw-bold" onclick="openShipmentDetails(${shipment.id})">
|
||||
${shipment.shipment_id}
|
||||
</a>
|
||||
</td>
|
||||
<td>${shipment.origin}</td>
|
||||
<td>${shipment.destination}</td>
|
||||
<td><span class="badge bg-light text-dark">${shipment.total_qty}</span></td>
|
||||
<td><span class="badge bg-light text-dark">${shipment.total_kg} kg</span></td>
|
||||
<td><span class="badge bg-light text-dark">${shipment.total_cbm} CBM</span></td>
|
||||
<td class="fw-bold text-success">₹${parseFloat(shipment.total_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
|
||||
<td>
|
||||
<span class="badge badge-${shipment.status}">
|
||||
${shipment.status.charAt(0).toUpperCase() + shipment.status.slice(1).replace('_', ' ')}
|
||||
</span>
|
||||
</td>
|
||||
<td>${new Date(shipment.shipment_date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</td>
|
||||
<td>
|
||||
<div class="action-container">
|
||||
<button type="button" class="btn-edit-status" onclick="toggleStatusDropdown(this, ${shipment.id})" title="Edit Status">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
<div class="status-dropdown" id="statusDropdown-${shipment.id}">
|
||||
<form action="/admin/shipments/update-status" method="POST" class="status-form">
|
||||
<input type="hidden" name="_token" value="{{ csrf_token() }}">
|
||||
<input type="hidden" name="shipment_id" value="${shipment.id}">
|
||||
<button type="submit" name="status" value="pending" class="status-option pending">
|
||||
<span class="status-indicator pending"></span>
|
||||
Pending
|
||||
</button>
|
||||
<button type="submit" name="status" value="in_transit" class="status-option in_transit">
|
||||
<span class="status-indicator in_transit"></span>
|
||||
In Transit
|
||||
</button>
|
||||
<button type="submit" name="status" value="dispatched" class="status-option dispatched">
|
||||
<span class="status-indicator dispatched"></span>
|
||||
Dispatched
|
||||
</button>
|
||||
<button type="submit" name="status" value="delivered" class="status-option delivered">
|
||||
<span class="status-indicator delivered"></span>
|
||||
Delivered
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
function openShipmentDetails(id) {
|
||||
let modal = new bootstrap.Modal(document.getElementById('shipmentDetailsModal'));
|
||||
let content = document.getElementById('shipmentDetailsContent');
|
||||
|
||||
Reference in New Issue
Block a user