Account Section UI Changes
This commit is contained in:
Utkarsh Khedkar
@@ -541,6 +541,139 @@
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
||||
/* ---------- Pagination Styles (Same as Account Dashboard) ---------- */
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
padding: 12px 0;
|
||||
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: 1024px) {
|
||||
.stats-container {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
@@ -604,6 +737,16 @@
|
||||
min-width: 100px;
|
||||
padding: 10px 8px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@@ -833,12 +976,42 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination Controls -->
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-info" id="pageInfo">Showing 1 to {{ min(10, count($reports)) }} of {{ count($reports) }} 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" {{ count($reports) > 10 ? '' : '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>
|
||||
|
||||
<script>
|
||||
// Pagination state
|
||||
let currentPage = 1;
|
||||
const itemsPerPage = 10;
|
||||
let allReports = @json($reports);
|
||||
let filteredReports = [...allReports];
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize statistics
|
||||
// Initialize statistics and pagination
|
||||
updateStatistics();
|
||||
renderTable();
|
||||
updatePaginationControls();
|
||||
|
||||
// Set default dates for demo purposes
|
||||
const today = new Date();
|
||||
@@ -857,6 +1030,10 @@
|
||||
document.getElementById('companyFilter').addEventListener('change', filterTable);
|
||||
document.getElementById('statusFilter').addEventListener('change', filterTable);
|
||||
|
||||
// Bind pagination events
|
||||
document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
|
||||
document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);
|
||||
|
||||
function updateStatistics() {
|
||||
const rows = document.querySelectorAll('#reportTableBody tr');
|
||||
let totalShipments = 0;
|
||||
@@ -893,62 +1070,218 @@
|
||||
document.getElementById('overdueInvoices').textContent = overdueInvoices;
|
||||
}
|
||||
|
||||
// Pagination Functions
|
||||
function goToPreviousPage() {
|
||||
if (currentPage > 1) {
|
||||
currentPage--;
|
||||
renderTable();
|
||||
updatePaginationControls();
|
||||
}
|
||||
}
|
||||
|
||||
function goToNextPage() {
|
||||
const totalPages = Math.ceil(filteredReports.length / itemsPerPage);
|
||||
if (currentPage < totalPages) {
|
||||
currentPage++;
|
||||
renderTable();
|
||||
updatePaginationControls();
|
||||
}
|
||||
}
|
||||
|
||||
function updatePaginationControls() {
|
||||
const totalPages = Math.ceil(filteredReports.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, filteredReports.length);
|
||||
pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${filteredReports.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('reportTableBody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
if (filteredReports.length === 0) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="12">
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">
|
||||
<i class="fas fa-inbox"></i>
|
||||
</div>
|
||||
<h3>No Shipping Reports Found</h3>
|
||||
<p>There are no shipping reports matching your current filters</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Calculate pagination
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
const paginatedItems = filteredReports.slice(startIndex, endIndex);
|
||||
|
||||
paginatedItems.forEach(report => {
|
||||
const ist = (report.invoice_status || '').toLowerCase();
|
||||
const row = document.createElement('tr');
|
||||
row.setAttribute('data-status', report.shipment_status);
|
||||
row.setAttribute('data-invoice-status', ist);
|
||||
row.setAttribute('data-company', report.company_name || '');
|
||||
row.setAttribute('data-date', report.shipment_date);
|
||||
|
||||
row.innerHTML = `
|
||||
<td>
|
||||
<span class="data-highlight" title="${report.order_id}">
|
||||
<i class="fas fa-hashtag"></i>
|
||||
${report.order_id}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="data-highlight" title="${report.shipment_id}">
|
||||
<i class="fas fa-barcode"></i>
|
||||
${report.shipment_id}
|
||||
</span>
|
||||
</td>
|
||||
<td title="${report.company_name || '-'}">${report.company_name || '-'}</td>
|
||||
<td title="${report.customer_name || '-'}">${report.customer_name || '-'}</td>
|
||||
<td>
|
||||
<span class="data-highlight" title="${report.origin}">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
${report.origin}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="data-highlight" title="${report.destination}">
|
||||
<i class="fas fa-location-arrow"></i>
|
||||
${report.destination}
|
||||
</span>
|
||||
</td>
|
||||
<td>${new Date(report.shipment_date).toLocaleDateString('en-GB')}</td>
|
||||
<td>
|
||||
<span class="data-highlight" title="${report.invoice_number}">
|
||||
<i class="fas fa-file-invoice"></i>
|
||||
${report.invoice_number}
|
||||
</span>
|
||||
</td>
|
||||
<td>${new Date(report.invoice_date).toLocaleDateString('en-GB')}</td>
|
||||
<td>
|
||||
<span class="data-highlight" title="₹${Number(report.final_amount).toLocaleString('en-IN')}">
|
||||
<i class="fas fa-rupee-sign"></i>
|
||||
${Number(report.final_amount).toLocaleString('en-IN')}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="status-badge
|
||||
${ist === 'paid' ? 'status-paid' : ''}
|
||||
${ist === 'pending' ? 'status-pending' : ''}
|
||||
${ist === 'overdue' ? 'status-overdue' : ''}">
|
||||
<i class="fas fa-circle"></i>
|
||||
${ist.charAt(0).toUpperCase() + ist.slice(1)}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="status-badge ship-${report.shipment_status}">
|
||||
<i class="fas fa-circle"></i>
|
||||
${report.shipment_status.charAt(0).toUpperCase() + report.shipment_status.slice(1).replace('_', ' ')}
|
||||
</span>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
function filterTable() {
|
||||
const fromDate = document.getElementById('fromDate').value;
|
||||
const toDate = document.getElementById('toDate').value;
|
||||
const companyFilter = document.getElementById('companyFilter').value;
|
||||
const statusFilter = document.getElementById('statusFilter').value;
|
||||
|
||||
const rows = document.querySelectorAll('#reportTableBody tr');
|
||||
let visibleCount = 0;
|
||||
|
||||
rows.forEach(row => {
|
||||
// Skip empty state row
|
||||
if (row.querySelector('.empty-state')) return;
|
||||
|
||||
let showRow = true;
|
||||
filteredReports = allReports.filter(report => {
|
||||
let include = true;
|
||||
|
||||
// Date filter
|
||||
if (fromDate && toDate) {
|
||||
const rowDate = row.getAttribute('data-date');
|
||||
if (rowDate) {
|
||||
const shipmentDate = new Date(rowDate);
|
||||
const from = new Date(fromDate);
|
||||
const to = new Date(toDate);
|
||||
to.setHours(23, 59, 59, 999); // End of day
|
||||
const reportDate = new Date(report.shipment_date);
|
||||
const from = new Date(fromDate);
|
||||
const to = new Date(toDate);
|
||||
to.setHours(23, 59, 59, 999);
|
||||
|
||||
if (shipmentDate < from || shipmentDate > to) {
|
||||
showRow = false;
|
||||
}
|
||||
if (reportDate < from || reportDate > to) {
|
||||
include = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Company filter
|
||||
if (companyFilter) {
|
||||
const companyName = row.getAttribute('data-company');
|
||||
if (companyName !== companyFilter) {
|
||||
showRow = false;
|
||||
}
|
||||
if (companyFilter && report.company_name !== companyFilter) {
|
||||
include = false;
|
||||
}
|
||||
|
||||
// Status filter
|
||||
if (statusFilter && row.getAttribute('data-status') !== statusFilter) {
|
||||
showRow = false;
|
||||
if (statusFilter && report.shipment_status !== statusFilter) {
|
||||
include = false;
|
||||
}
|
||||
|
||||
// Show/hide row
|
||||
row.style.display = showRow ? '' : 'none';
|
||||
if (showRow) visibleCount++;
|
||||
return include;
|
||||
});
|
||||
|
||||
// Show empty state if no rows visible
|
||||
const emptyState = document.querySelector('.empty-state');
|
||||
if (emptyState) {
|
||||
const emptyRow = emptyState.closest('tr');
|
||||
emptyRow.style.display = visibleCount === 0 ? '' : 'none';
|
||||
}
|
||||
|
||||
// Update statistics with filtered data
|
||||
currentPage = 1;
|
||||
renderTable();
|
||||
updatePaginationControls();
|
||||
updateStatistics();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user