Frontend dashboard, shipment, invoice , customer
This commit is contained in:
divya abdar
@@ -6,20 +6,28 @@
|
||||
<style>
|
||||
/* ===== GLOBAL RESPONSIVE STYLES ===== */
|
||||
html, body {
|
||||
overflow-x: hidden !important;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Use Inter globally (keeps your existing @import too) */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
|
||||
/* Apply Inter globally but keep specificity low so your component styles still work */
|
||||
:root { --admin-font: 'Inter', sans-serif; }
|
||||
body, input, select, textarea, button, table, th, td, .report-container {
|
||||
font-family: var(--admin-font);
|
||||
}
|
||||
|
||||
.report-container {
|
||||
|
||||
background: #ffffff;
|
||||
padding: 25px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
|
||||
margin: 20px auto;
|
||||
max-width: 100%;
|
||||
font-family: 'Inter', sans-serif;
|
||||
/* font-family now coming from :root */
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
@@ -69,18 +77,21 @@
|
||||
.stats-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 15px;
|
||||
gap: 12px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
|
||||
padding: 18px 15px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid #4f46e5;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.3s ease;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-height: 70px;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
@@ -112,7 +123,16 @@
|
||||
background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
|
||||
}
|
||||
|
||||
|
||||
.stat-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(79, 70, 229, 0.1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-icon i {
|
||||
font-size: 18px;
|
||||
@@ -143,9 +163,9 @@
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* .stat-card.info .stat-icon {
|
||||
.stat-card.info .stat-icon {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
} */
|
||||
}
|
||||
|
||||
.stat-card.info .stat-icon i {
|
||||
color: #3b82f6;
|
||||
@@ -159,16 +179,20 @@
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #1a202c;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
color: #718096;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
@@ -216,10 +240,10 @@
|
||||
border-radius: 8px;
|
||||
border: 1.5px solid #e5e7eb;
|
||||
background: #ffffff;
|
||||
font-size: 13px;
|
||||
font-size: 14px; /* increased to match global font sizing */
|
||||
color: #1f2937;
|
||||
transition: all 0.3s ease;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: var(--admin-font);
|
||||
}
|
||||
|
||||
.filter-control:focus {
|
||||
@@ -242,12 +266,15 @@
|
||||
/* Ensure table takes full width and doesn't wrap */
|
||||
.report-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
/* keep your collapse behavior but update spacing to match Orders page */
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
min-width: 1200px; /* Minimum width to prevent squeezing */
|
||||
table-layout: auto; /* Allow columns to adjust based on content */
|
||||
font-size: 14px; /* unified table font size */
|
||||
}
|
||||
|
||||
/* Table header styling - CENTER ALIGNED */
|
||||
/* Table header styling - CENTER ALIGNED (keep your gradient & sticky) */
|
||||
.report-table thead {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
position: sticky;
|
||||
@@ -255,10 +282,11 @@
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Adjusted header padding to match Orders spacing */
|
||||
.report-table th {
|
||||
padding: 15px 12px;
|
||||
padding: 16px 20px; /* changed from 15px 12px to match Orders' spacing */
|
||||
text-align: center; /* Center align header text */
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
border-bottom: none;
|
||||
@@ -280,8 +308,8 @@
|
||||
|
||||
/* Table cell styling with proper text handling - CENTER ALIGNED */
|
||||
.report-table td {
|
||||
padding: 12px;
|
||||
font-size: 13px;
|
||||
padding: 14px 20px; /* changed from 12px to match Orders' td padding */
|
||||
font-size: 14px; /* unified */
|
||||
color: #374151;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
vertical-align: middle;
|
||||
@@ -292,12 +320,13 @@
|
||||
min-width: 120px; /* Minimum column width */
|
||||
text-align: center; /* Center align all table data */
|
||||
}
|
||||
|
||||
/* Specific column width adjustments */
|
||||
.report-table th:nth-child(1), /* Order ID */
|
||||
.report-table td:nth-child(1) {
|
||||
min-width: 100px;
|
||||
max-width: 150px;
|
||||
min-width: 200px !important;
|
||||
max-width: 200px !important;
|
||||
padding-left: 20px !important;
|
||||
|
||||
}
|
||||
|
||||
.report-table th:nth-child(2), /* Shipment ID */
|
||||
@@ -411,8 +440,12 @@
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.status-badge i {
|
||||
font-size: 8px;
|
||||
/* Status icons */
|
||||
.status-icon {
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -469,19 +502,18 @@
|
||||
}
|
||||
|
||||
.data-highlight {
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
color: #1a202c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; /* Center content */
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 auto; /* Center the highlight container */
|
||||
}
|
||||
|
||||
.data-highlight i {
|
||||
color: #4f46e5;
|
||||
font-size: 11px;
|
||||
@@ -678,7 +710,7 @@
|
||||
.stats-container {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
|
||||
.report-table {
|
||||
min-width: 1100px;
|
||||
}
|
||||
@@ -688,49 +720,59 @@
|
||||
.report-container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
|
||||
.report-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
|
||||
.header-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
|
||||
.report-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
.stats-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
.stat-card {
|
||||
padding: 15px 12px;
|
||||
padding: 14px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
.stat-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.stat-icon i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
.filter-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
|
||||
.filter-group {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.report-table {
|
||||
min-width: 1000px;
|
||||
}
|
||||
|
||||
|
||||
/* Adjust column widths for mobile */
|
||||
.report-table th,
|
||||
.report-table td {
|
||||
@@ -743,7 +785,7 @@
|
||||
gap: 10px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
.pagination-controls {
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -753,22 +795,22 @@
|
||||
.stats-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
.stat-card {
|
||||
padding: 15px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
|
||||
.report-table {
|
||||
min-width: 900px;
|
||||
}
|
||||
|
||||
|
||||
.report-table th,
|
||||
.report-table td {
|
||||
min-width: 90px;
|
||||
padding: 8px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
.status-badge {
|
||||
font-size: 10px !important;
|
||||
padding: 4px 8px 4px 6px !important;
|
||||
@@ -794,43 +836,55 @@
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-box-open"></i>
|
||||
</div>
|
||||
<div class="stat-value" id="totalShipments">{{ count($reports) }}</div>
|
||||
<div class="stat-label">Total Shipments</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value" id="totalShipments">{{ count($reports) }}</div>
|
||||
<div class="stat-label">Total Shipments</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card warning">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-clock"></i>
|
||||
</div>
|
||||
<div class="stat-value" id="pendingShipments">0</div>
|
||||
<div class="stat-label">Pending Shipments</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value" id="pendingShipments">0</div>
|
||||
<div class="stat-label">Pending Shipments</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card info">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-truck-moving"></i>
|
||||
</div>
|
||||
<div class="stat-value" id="inTransitShipments">0</div>
|
||||
<div class="stat-label">In Transit</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value" id="inTransitShipments">0</div>
|
||||
<div class="stat-label">In Transit</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card secondary">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-shipping-fast"></i>
|
||||
</div>
|
||||
<div class="stat-value" id="dispatchedShipments">0</div>
|
||||
<div class="stat-label">Dispatched</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value" id="dispatchedShipments">0</div>
|
||||
<div class="stat-label">Dispatched</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card success">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
</div>
|
||||
<div class="stat-value" id="deliveredShipments">0</div>
|
||||
<div class="stat-label">Delivered</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value" id="deliveredShipments">0</div>
|
||||
<div class="stat-label">Delivered</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card danger">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</div>
|
||||
<div class="stat-value" id="overdueInvoices">0</div>
|
||||
<div class="stat-label">Overdue Invoices</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value" id="overdueInvoices">0</div>
|
||||
<div class="stat-label">Overdue Invoices</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -879,24 +933,23 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TABLE SECTION -->
|
||||
<div class="table-container">
|
||||
<table class="report-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><i class="fas fa-hashtag"></i> Order ID</th>
|
||||
<th><i class="fas fa-barcode"></i> Shipment ID</th>
|
||||
<th><i class="fas fa-building"></i> Company Name</th>
|
||||
<th><i class="fas fa-user"></i> User Name</th>
|
||||
<th>Order ID</th>
|
||||
<th>Shipment ID</th>
|
||||
<th>Company Name</th>
|
||||
<th>User Name</th>
|
||||
<th><i class="fas fa-map-marker-alt"></i> Origin</th>
|
||||
<th><i class="fas fa-location-arrow"></i> Destination</th>
|
||||
<th><i class="fas fa-calendar"></i> Date</th>
|
||||
<th><i class="fas fa-file-invoice"></i> Invoice ID</th>
|
||||
<th><i class="fas fa-calendar-day"></i> Invoice Date</th>
|
||||
<th><i class="fas fa-money-bill-wave"></i> Invoice Amount</th>
|
||||
<th><i class="fas fa-receipt"></i> Invoice Status</th>
|
||||
<th><i class="fas fa-shipping-fast"></i> Shipment Status</th>
|
||||
<th>Date</th>
|
||||
<th>Invoice ID</th>
|
||||
<th>Invoice Date</th>
|
||||
<th>Invoice Amount</th>
|
||||
<th>Invoice Status</th>
|
||||
<th>Shipment Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="reportTableBody">
|
||||
@@ -904,13 +957,11 @@
|
||||
<tr data-status="{{ $r->shipment_status }}" data-invoice-status="{{ strtolower($r->invoice_status) }}" data-company="{{ $r->company_name ?? '' }}" data-date="{{ $r->shipment_date }}">
|
||||
<td>
|
||||
<span class="data-highlight" title="{{ $r->order_id }}">
|
||||
<i class="fas fa-hashtag"></i>
|
||||
{{ $r->order_id }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="data-highlight" title="{{ $r->shipment_id }}">
|
||||
<i class="fas fa-barcode"></i>
|
||||
{{ $r->shipment_id }}
|
||||
</span>
|
||||
</td>
|
||||
@@ -919,9 +970,10 @@
|
||||
<td>
|
||||
<span class="data-highlight" title="{{ $r->origin }}">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
{{ $r->origin }}
|
||||
{{ $r->origin ?? '-' }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="data-highlight" title="{{ $r->destination }}">
|
||||
<i class="fas fa-location-arrow"></i>
|
||||
@@ -931,31 +983,43 @@
|
||||
<td>{{ \Carbon\Carbon::parse($r->shipment_date)->format('d/m/Y') }}</td>
|
||||
<td>
|
||||
<span class="data-highlight" title="{{ $r->invoice_number }}">
|
||||
<i class="fas fa-file-invoice"></i>
|
||||
{{ $r->invoice_number }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ \Carbon\Carbon::parse($r->invoice_date)->format('d/m/Y') }}</td>
|
||||
<td>
|
||||
<span class="data-highlight" title="₹{{ number_format($r->final_amount) }}">
|
||||
<i class="fas fa-rupee-sign"></i>
|
||||
{{ number_format($r->final_amount) }}
|
||||
₹{{ number_format($r->final_amount) }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
@php $ist = strtolower($r->invoice_status); @endphp
|
||||
@php $ist = strtolower($r->invoice_status ?? ''); @endphp
|
||||
<span class="status-badge
|
||||
@if($ist === 'paid') status-paid
|
||||
@elseif($ist === 'pending') status-pending
|
||||
@elseif($ist === 'overdue') status-overdue
|
||||
@endif">
|
||||
<i class="fas fa-circle"></i>
|
||||
@if($ist === 'paid')
|
||||
<i class="bi bi-check-circle-fill status-icon"></i>
|
||||
@elseif($ist === 'pending')
|
||||
<i class="bi bi-clock-fill status-icon"></i>
|
||||
@elseif($ist === 'overdue')
|
||||
<i class="bi bi-exclamation-triangle-fill status-icon"></i>
|
||||
@endif
|
||||
{{ ucfirst($ist) }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="status-badge ship-{{ $r->shipment_status }}">
|
||||
<i class="fas fa-circle"></i>
|
||||
@if($r->shipment_status === 'pending')
|
||||
<i class="bi bi-clock-fill status-icon"></i>
|
||||
@elseif($r->shipment_status === 'in_transit')
|
||||
<i class="bi bi-truck status-icon"></i>
|
||||
@elseif($r->shipment_status === 'dispatched')
|
||||
<i class="bi bi-send-fill status-icon"></i>
|
||||
@elseif($r->shipment_status === 'delivered')
|
||||
<i class="bi bi-check-circle-fill status-icon"></i>
|
||||
@endif
|
||||
{{ ucfirst(str_replace('_',' ', $r->shipment_status)) }}
|
||||
</span>
|
||||
</td>
|
||||
@@ -999,7 +1063,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Pagination state
|
||||
let currentPage = 1;
|
||||
@@ -1007,32 +1070,68 @@
|
||||
let allReports = @json($reports);
|
||||
let filteredReports = [...allReports];
|
||||
|
||||
// Status icon helper functions
|
||||
function getInvoiceStatusIcon(status) {
|
||||
switch(status) {
|
||||
case 'paid':
|
||||
return '<i class="bi bi-check-circle-fill status-icon"></i>';
|
||||
case 'pending':
|
||||
return '<i class="bi bi-clock-fill status-icon"></i>';
|
||||
case 'overdue':
|
||||
return '<i class="bi bi-exclamation-triangle-fill status-icon"></i>';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function getShipmentStatusIcon(status) {
|
||||
switch(status) {
|
||||
case 'pending':
|
||||
return '<i class="bi bi-clock-fill status-icon"></i>';
|
||||
case 'in_transit':
|
||||
return '<i class="bi bi-truck status-icon"></i>';
|
||||
case 'dispatched':
|
||||
return '<i class="bi bi-send-fill status-icon"></i>';
|
||||
case 'delivered':
|
||||
return '<i class="bi bi-check-circle-fill status-icon"></i>';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize statistics and pagination
|
||||
updateStatistics();
|
||||
renderTable();
|
||||
updatePaginationControls();
|
||||
|
||||
|
||||
// Set default dates for demo purposes
|
||||
const today = new Date();
|
||||
const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
|
||||
|
||||
|
||||
const formatDate = (date) => {
|
||||
return date.toISOString().split('T')[0];
|
||||
};
|
||||
|
||||
document.getElementById('fromDate').value = formatDate(lastMonth);
|
||||
document.getElementById('toDate').value = formatDate(today);
|
||||
|
||||
if (document.getElementById('fromDate')) document.getElementById('fromDate').value = formatDate(lastMonth);
|
||||
if (document.getElementById('toDate')) document.getElementById('toDate').value = formatDate(today);
|
||||
|
||||
// Add event listeners for filters
|
||||
document.getElementById('fromDate').addEventListener('change', filterTable);
|
||||
document.getElementById('toDate').addEventListener('change', filterTable);
|
||||
document.getElementById('companyFilter').addEventListener('change', filterTable);
|
||||
document.getElementById('statusFilter').addEventListener('change', filterTable);
|
||||
const fd = document.getElementById('fromDate');
|
||||
const td = document.getElementById('toDate');
|
||||
const cf = document.getElementById('companyFilter');
|
||||
const sf = document.getElementById('statusFilter');
|
||||
|
||||
if(fd) fd.addEventListener('change', filterTable);
|
||||
if(td) td.addEventListener('change', filterTable);
|
||||
if(cf) cf.addEventListener('change', filterTable);
|
||||
if(sf) sf.addEventListener('change', filterTable);
|
||||
|
||||
// Bind pagination events
|
||||
document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
|
||||
document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);
|
||||
const prevBtn = document.getElementById('prevPageBtn');
|
||||
const nextBtn = document.getElementById('nextPageBtn');
|
||||
if(prevBtn) prevBtn.addEventListener('click', goToPreviousPage);
|
||||
if(nextBtn) nextBtn.addEventListener('click', goToNextPage);
|
||||
|
||||
function updateStatistics() {
|
||||
const rows = document.querySelectorAll('#reportTableBody tr');
|
||||
@@ -1046,7 +1145,7 @@
|
||||
rows.forEach(row => {
|
||||
// Skip if row is hidden or empty state
|
||||
if (row.style.display === 'none' || row.querySelector('.empty-state')) return;
|
||||
|
||||
|
||||
totalShipments++;
|
||||
|
||||
// Count shipment statuses
|
||||
@@ -1055,19 +1154,25 @@
|
||||
if (status === 'in_transit') inTransitShipments++;
|
||||
if (status === 'dispatched') dispatchedShipments++;
|
||||
if (status === 'delivered') deliveredShipments++;
|
||||
|
||||
|
||||
// Count invoice statuses
|
||||
const invoiceStatus = row.getAttribute('data-invoice-status');
|
||||
if (invoiceStatus === 'overdue') overdueInvoices++;
|
||||
});
|
||||
|
||||
// Update statistics cards
|
||||
document.getElementById('totalShipments').textContent = totalShipments;
|
||||
document.getElementById('pendingShipments').textContent = pendingShipments;
|
||||
document.getElementById('inTransitShipments').textContent = inTransitShipments;
|
||||
document.getElementById('dispatchedShipments').textContent = dispatchedShipments;
|
||||
document.getElementById('deliveredShipments').textContent = deliveredShipments;
|
||||
document.getElementById('overdueInvoices').textContent = overdueInvoices;
|
||||
const elTotal = document.getElementById('totalShipments');
|
||||
if(elTotal) elTotal.textContent = totalShipments;
|
||||
const elPending = document.getElementById('pendingShipments');
|
||||
if(elPending) elPending.textContent = pendingShipments;
|
||||
const elInTransit = document.getElementById('inTransitShipments');
|
||||
if(elInTransit) elInTransit.textContent = inTransitShipments;
|
||||
const elDispatched = document.getElementById('dispatchedShipments');
|
||||
if(elDispatched) elDispatched.textContent = dispatchedShipments;
|
||||
const elDelivered = document.getElementById('deliveredShipments');
|
||||
if(elDelivered) elDelivered.textContent = deliveredShipments;
|
||||
const elOverdue = document.getElementById('overdueInvoices');
|
||||
if(elOverdue) elOverdue.textContent = overdueInvoices;
|
||||
}
|
||||
|
||||
// Pagination Functions
|
||||
@@ -1094,18 +1199,18 @@
|
||||
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;
|
||||
|
||||
|
||||
if(prevBtn) prevBtn.disabled = currentPage === 1;
|
||||
if(nextBtn) 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`;
|
||||
|
||||
if(pageInfo) pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${filteredReports.length} entries`;
|
||||
|
||||
// Generate page numbers
|
||||
paginationPages.innerHTML = '';
|
||||
|
||||
if(paginationPages) paginationPages.innerHTML = '';
|
||||
|
||||
if (totalPages <= 7) {
|
||||
// Show all pages
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
@@ -1114,27 +1219,28 @@
|
||||
} else {
|
||||
// Show first page, current page range, and last page
|
||||
addPageButton(1, paginationPages);
|
||||
|
||||
|
||||
if (currentPage > 3) {
|
||||
paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
|
||||
if(paginationPages) 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>';
|
||||
if(paginationPages) paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
|
||||
}
|
||||
|
||||
|
||||
addPageButton(totalPages, paginationPages);
|
||||
}
|
||||
}
|
||||
|
||||
function addPageButton(pageNumber, container) {
|
||||
if(!container) return;
|
||||
const button = document.createElement('button');
|
||||
button.className = 'pagination-page-btn';
|
||||
if (pageNumber === currentPage) {
|
||||
@@ -1152,8 +1258,9 @@
|
||||
// Render Table Function
|
||||
function renderTable() {
|
||||
const tbody = document.getElementById('reportTableBody');
|
||||
if(!tbody) return;
|
||||
tbody.innerHTML = '';
|
||||
|
||||
|
||||
if (filteredReports.length === 0) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
@@ -1170,12 +1277,12 @@
|
||||
`;
|
||||
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');
|
||||
@@ -1183,46 +1290,42 @@
|
||||
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}
|
||||
${report.order_id || '-'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="data-highlight" title="${report.shipment_id}">
|
||||
<i class="fas fa-barcode"></i>
|
||||
${report.shipment_id}
|
||||
${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}">
|
||||
<span class="data-highlight" title="${report.origin || '-'}">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
${report.origin}
|
||||
${report.origin || '-'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="data-highlight" title="${report.destination}">
|
||||
<span class="data-highlight" title="${report.destination || '-'}">
|
||||
<i class="fas fa-location-arrow"></i>
|
||||
${report.destination}
|
||||
${report.destination || '-'}
|
||||
</span>
|
||||
</td>
|
||||
<td>${new Date(report.shipment_date).toLocaleDateString('en-GB')}</td>
|
||||
<td>${report.shipment_date ? 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 class="data-highlight" title="${report.invoice_number || '-'}">
|
||||
${report.invoice_number || '-'}
|
||||
</span>
|
||||
</td>
|
||||
<td>${new Date(report.invoice_date).toLocaleDateString('en-GB')}</td>
|
||||
<td>${report.invoice_date ? 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 class="data-highlight" title="₹${Number(report.final_amount || 0).toLocaleString('en-IN')}">
|
||||
₹${Number(report.final_amount || 0).toLocaleString('en-IN')}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
@@ -1230,14 +1333,14 @@
|
||||
${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)}
|
||||
${getInvoiceStatusIcon(ist)}
|
||||
${ist ? 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 class="status-badge ship-${report.shipment_status || ''}">
|
||||
${getShipmentStatusIcon(report.shipment_status)}
|
||||
${report.shipment_status ? (report.shipment_status.charAt(0).toUpperCase() + report.shipment_status.slice(1)).replace('_',' ') : '-'}
|
||||
</span>
|
||||
</td>
|
||||
`;
|
||||
@@ -1246,10 +1349,10 @@
|
||||
}
|
||||
|
||||
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 fromDate = document.getElementById('fromDate')?.value;
|
||||
const toDate = document.getElementById('toDate')?.value;
|
||||
const companyFilter = document.getElementById('companyFilter')?.value;
|
||||
const statusFilter = document.getElementById('statusFilter')?.value;
|
||||
|
||||
filteredReports = allReports.filter(report => {
|
||||
let include = true;
|
||||
@@ -1285,13 +1388,13 @@
|
||||
updateStatistics();
|
||||
}
|
||||
|
||||
// Add hover effects to table rows
|
||||
// Add hover effects to table rows (for rows present initially in DOM — dynamic rows handled in renderTable)
|
||||
const tableRows = document.querySelectorAll('.report-table tbody tr');
|
||||
tableRows.forEach(row => {
|
||||
row.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-2px)';
|
||||
});
|
||||
|
||||
|
||||
row.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0)';
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user