Cargo Dashboard
No delayed shipments.
';
return;
}
container.innerHTML = delayedShipments.map(s => {
const daysLate = Math.round((new Date() - new Date(s.ETA)) / (1000 * 60 * 60 * 24));
return `
${s.ID}
${s.Origin} to ${s.Destination}${daysLate}d late
`
}).join('');
}
function renderStatusChart() {
const statusCounts = shipmentsData.reduce((acc, s) => { acc[s.Status] = (acc[s.Status] || 0) + 1; return acc; }, {});
const ctx = document.getElementById('cgd-status-chart').getContext('2d');
if(statusChart) statusChart.destroy();
statusChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: Object.keys(statusCounts),
datasets: [{ data: Object.values(statusCounts), backgroundColor: ['#0369a1', '#f59e0b', '#64748b', '#16a34a', '#dc2626'] }]
},
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } }
});
}
function renderShipmentsTable() {
const table = document.getElementById('shipments-table');
table.innerHTML = `
| Shipment ID | Origin | Destination | Carrier | Status | Est. Arrival | Actual Arrival | Actions |
|---|
${shipmentsData.map(s => `
|
|
|
|
|
|
|
|
`).join('')}
`;
}
function addShipment() {
const eta = new Date();
eta.setDate(eta.getDate() + 14);
shipmentsData.unshift({ id: Date.now(), ID: `SHP-${Math.floor(10000+Math.random()*90000)}`, Origin: 'Los Angeles, USA', Destination: 'New York, USA', Carrier: CARRIERS[0], Status: 'In Transit', ETA: eta.toISOString().split('T')[0], ActualArrival: null });
processAndRenderAll();
}
function handleTableEvents(e) {
const target = e.target; if (!target) return;
const id = parseInt(target.closest('tr')?.dataset.id); if (!id) return;
if (target.classList.contains('remove-shipment-btn')) {
shipmentsData = shipmentsData.filter(s => s.id !== id);
} else if (target.tagName === 'INPUT' || target.tagName === 'SELECT') {
const key = target.dataset.key;
const item = shipmentsData.find(s => s.id === id);
if(item) item[key] = target.value;
}
processAndRenderAll();
}
document.getElementById('cgd-add-shipment-btn').addEventListener('click', addShipment);
document.getElementById('shipments-table').addEventListener('change', handleTableEvents);
document.getElementById('shipments-table').addEventListener('click', handleTableEvents);
function initialize() {
const createDate = (offsetDays) => { const d = new Date("2025-07-12"); d.setDate(d.getDate() - offsetDays); return d.toISOString().split('T')[0]; };
shipmentsData = [
{ id: 1, ID: 'USA-83491', Origin: 'Long Beach, CA', Destination: 'Chicago, IL', Carrier: 'UPS', Status: 'In Transit', ETA: createDate(-5), ActualArrival: null },
{ id: 2, ID: 'USA-83492', Origin: 'Newark, NJ', Destination: 'Miami, FL', Carrier: 'FedEx', Status: 'Delivered', ETA: createDate(10), ActualArrival: createDate(9) },
{ id: 3, ID: 'USA-83493', Origin: 'Houston, TX', Destination: 'Denver, CO', Carrier: 'Maersk', Status: 'At Port', ETA: createDate(-2), ActualArrival: null },
{ id: 4, ID: 'USA-83494', Origin: 'Seattle, WA', Destination: 'Dallas, TX', Carrier: 'UPS', Status: 'Delayed', ETA: createDate(2), ActualArrival: null },
{ id: 5, ID: 'USA-83495', Origin: 'Chicago, IL', Destination: 'Atlanta, GA', Carrier: 'FedEx', Status: 'Delivered', ETA: createDate(15), ActualArrival: createDate(16) },
];
processAndRenderAll();
}
initialize();
});
