:root{
--ink:#0f2540; --sub:#5b6b82; --line:#e3e8f0; --pink:#e0117a; --purple:#8b2fd6; --bg:#f4f7fb;
}
*{box-sizing:border-box}
body{
margin:0; padding:40px 16px; background:var(--bg);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
color:var(--ink);
}
/* ---------- Card ---------- */
.ddd-case-card{
max-width:640px; margin:0 auto; background:#fff; border-radius:20px;
padding:24px; box-shadow:0 20px 40px -20px rgba(20,40,80,.25);
}
.ddd-manual-sheet{
border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fbfcfe;
}
.ddd-sheet-toolbar{
display:flex; justify-content:space-between; align-items:center;
background:linear-gradient(90deg,#005f8f,#0091c2); color:#fff; padding:10px 14px; font-size:13px;
}
.ddd-sheet-meta{
display:flex; gap:14px; flex-wrap:wrap; padding:8px 14px; font-size:11px;
color:var(--sub); border-bottom:1px solid var(--line);
}
.ddd-logistics-layout{display:flex}
.ddd-dispatch-sidebar{
width:110px; flex:0 0 auto; border-right:1px solid var(--line); padding:10px;
display:flex; flex-direction:column; gap:8px; font-size:11px; font-weight:600; color:var(--ink);
}
.ddd-dispatch-sidebar span{background:#eef2f8; border-radius:8px; padding:6px 8px}
.ddd-sheet-grid{
flex:1; display:grid; grid-template-columns:repeat(5,1fr);
font-size:11px;
}
.ddd-sheet-grid span{
padding:7px 8px; border-bottom:1px solid var(--line); border-right:1px solid var(--line);
}
.ddd-sheet-grid span:nth-child(-n+5){background:linear-gradient(90deg,#005f8f,#0091c2); color:#fff; font-weight:600}
.ddd-sheet-grid span:nth-last-child(-n+5){font-weight:700; background:#eef2f8}
.ddd-sheet-alerts{display:flex; gap:8px; flex-wrap:wrap; padding:10px 14px}
.ddd-sheet-alerts span{
display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
background:#fdeaf3; color:var(--pink); border-radius:999px; padding:5px 10px 5px 6px;
}
.ddd-sheet-alerts span::before{
content:"i"; width:14px; height:14px; border-radius:50%; background:var(--pink); color:#fff;
font-size:9px; display:flex; align-items:center; justify-content:center; font-style:normal;
}
.ddd-route-panel{display:flex; justify-content:space-between; padding:10px 14px; font-size:11px; font-weight:600}
.ddd-route-panel span{position:relative; padding-left:16px}
.ddd-route-panel span::before{
content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:10px; height:10px; border-radius:50%; border:2px solid var(--pink);
}
.ddd-sheet-tabs{display:flex; gap:4px; padding:10px 14px 0}
.ddd-sheet-tabs button{
border:1px solid var(--line); background:#fff; border-radius:8px 8px 0 0;
padding:6px 12px; font-size:12px; cursor:pointer; color:var(--sub);
}
.ddd-sheet-tabs button.is-active{
background:linear-gradient(90deg,var(--pink),var(--purple)); color:#fff; border-color:transparent;
}
.ddd-manual-sheet > p{margin:0; padding:10px 14px 14px; font-size:12px; color:var(--sub)}
Delivery Report.xlsx
A1:E18 =SUM copied from 5 city tabs Last edited 9 days ago
Month Shipments Early On Time Late
January 18,420 10,806 3,651 3,963
February 19,735 11,614 3,916 4,205
March 20,112 11,782 4,006 4,324
Total 58,267 34,202 11,573 12,492
Delayed update Copied filters No live exceptions
Warehouse In Transit Delivered Exception
Data
Report
Dashboard
Copied filters, monthly tables, and delayed exception tracking.
(function () {
// ---------- Data for the 3 sheet tabs (Data / Report / Dashboard) ----------
var workbookSheetViews = {
logistics: {
data: ["Month","Shipments","Early","On Time","Late",
"January","18,420","10,806","3,651","3,963",
"February","19,735","11,614","3,916","4,205",
"March","20,112","11,782","4,006","4,324",
"Total","58,267","34,202","11,573","12,492"],
report: ["Metric","January","February","March","Quarter",
"Early Rate","58.7%","58.8%","58.6%","58.7%",
"On-Time Rate","19.8%","19.8%","19.9%","19.9%",
"Late Rate","21.5%","21.3%","21.5%","21.4%",
"Avg Delivery","3.1 days","3.0 days","3.2 days","3.1 days"],
dashboard: ["KPI","Value","Target","Variance","Status",
"Early Deliveries","58.7%","55.0%","+3.7%","Good",
"On-Time Deliveries","19.9%","25.0%","-5.1%","Watch",
"Late Deliveries","21.4%","20.0%","+1.4%","Risk",
"Avg Delivery Days","3.1","3.0","+0.1","Watch"]
}
};
function renderWorkbookSheet(card, tabName) {
var caseKey = card.dataset.case;
var grid = card.querySelector(".ddd-sheet-grid");
var values = workbookSheetViews[caseKey] && workbookSheetViews[caseKey][tabName];
if (!grid || !values) return;
grid.innerHTML = values.map(function (v) { return "
" + v + " "; }).join("");
}
// Tabs: click swaps the grid data — this is the only click behavior left on the card
document.querySelectorAll(".ddd-sheet-tabs button").forEach(function (button) {
button.addEventListener("click", function (event) {
event.preventDefault();
var card = button.closest(".ddd-manual-stage");
if (!card) return;
button.parentElement.querySelectorAll("button").forEach(function (tab) {
tab.classList.toggle("is-active", tab === button);
});
renderWorkbookSheet(card, button.dataset.sheetTab);
});
});
})();
