{/* Sub-toggle */}
{[
{ id: "compliance", label: "Compliance", icon: "shield", count: null },
{ id: "production", label: "Production", icon: "trending", count: PRODUCTION.length },
{ id: "reports", label: "Reports", icon: "list", count: REPORTS.length },
].map(opt => {
const active = view === opt.id;
return (
setView(opt.id)} style={{
display: "inline-flex", alignItems: "center", gap: 6, padding: "6px 14px", borderRadius: 9999,
border: "none", cursor: "pointer", fontFamily: "inherit", fontSize: 13, fontWeight: 500,
background: active ? "#fff" : "transparent",
color: active ? "rgb(26,27,37)" : "rgb(106,115,131)",
boxShadow: active ? "0 1px 2px rgba(15,23,42,.08)" : "none",
transition: "background 120ms, color 120ms"
}}>
{opt.count}
)}
);
})}
Export
Submit Today's Report
{view === "compliance" && <>
{/* Compliance metrics + AI insights */}
{/* Compliance */}
Reporting Compliance
Last 30 days
{/* Donut */}
{/* Metrics */}
Submitted vs Expected
{onTime + late} / {total}
{/* AI Insights */}
{pctOnTime}% on-time submission rate trending up. 2 risks and 1 delay flagged in the last 14 days — pile-driving refusal in north section is the most actionable.
{/* Calendar heatmap + selected day */}
Compliance Calendar
{["January","February","March","April","May","June","July","August","September","October","November","December"][month]} {year}
setMonth(Math.max(0, month - 1))} />
setMonth(Math.min(11, month + 1))} />
}
{view === "production" &&
}
{view === "reports" && <>
{/* Toolbar */}
{}} icon="calendar" />
{filtered.length} of {REPORTS.length}
{/* Reports table */}
Date
Report
Submitted By
Time
Status
AI Highlight
{filtered.map((r, i) => {
const tone = STATUS_TONES_DR[r.status];
return (
e.currentTarget.style.background = "rgb(248,248,251)"}
onMouseLeave={e => e.currentTarget.style.background = "#fff"}
onClick={() => setSelectedDate(r.date)}>
{formatShortDate(r.date)}
{r.weekday}
{r.title}
{r.summary || No report submitted }
{r.time || "—"}
{r.time && r.status === "Late" &&
+{lateBy(r.expected, r.time)}
}
{r.ai ? (
) : — }
View
}
{["Sun","Mon","Tue","Wed","Thu","Fri","Sat"].map(d => (
{d}
))}
{cells.map((d, i) => {
if (d === null) return
;
const r = reportFor(d);
const iso = `${year}-${String(month+1).padStart(2,"0")}-${String(d).padStart(2,"0")}`;
const future = isFuture(d);
const weekend = isWeekend(i);
const isSel = iso === selectedDate;
let bg = "#fff", fg = "rgb(26,27,37)", border = "1px solid rgb(239,240,242)", dot = null;
if (future) { bg = "rgb(252,252,253)"; fg = "rgb(163,172,186)"; }
else if (weekend && !r) { bg = "rgb(248,248,251)"; fg = "rgb(163,172,186)"; }
else if (r) {
const t = STATUS_TONES_DR[r.status];
bg = t.bg; fg = t.fg; dot = t.dot;
border = `1px solid ${t.dot}33`;
}
if (isSel) border = "2px solid rgb(83,74,255)";
return (
r && onSelect(iso)} disabled={!r} style={{
aspectRatio: "1 / 1", borderRadius: 8, padding: 6, background: bg, border, cursor: r ? "pointer" : "default",
display: "flex", flexDirection: "column", alignItems: "flex-start", justifyContent: "space-between",
fontFamily: "inherit", color: fg, position: "relative", overflow: "hidden"
}}
title={r ? `${r.title} — ${STATUS_TONES_DR[r.status].label}` : ""}>
{d}
{dot &&
{r && (
)}
);
})}
);
};
const DayDetail = ({ date, reports }) => {
const r = reports.find(x => x.date === date);
if (!r) {
return (
{r.weekday}, {formatShortDate(r.date)}
{r.title}
{r.status === "Missed" ? (
No report was submitted for this day. Reminder sent to {r.by.name}.
) : (
<>
Submitted {r.time}
{r.status === "Late" &&
+{lateBy(r.expected, r.time)} late }
{r.ai && (
)}
{r.summary}
View Full Report
Open in Drive
)}
);
};
// =================================================================
// PRODUCTION VIEW
// =================================================================
const PROD_AI_FLAGS = {
"Material Delay": { tone: "warning", icon: "archive", text: "Material wait — supplier slipped delivery; crew rotated to predrill" },
"Crew Idle": { tone: "warning", icon: "user", text: "Idle hours logged — labor cost without pile output" },
"Weather Stand-down": { tone: "info", icon: "alert", text: "Site closed for safety — high winds and lightning" },
"Owner Delay": { tone: "warning", icon: "user", text: "Owner walkthrough cut into rig start time" },
"Equipment Down": { tone: "danger", icon: "alert", text: "Pile-driving rig 2 hydraulic line failure — 3hr downtime" },
"Geotech Refusal": { tone: "danger", icon: "alert", text: "Subsurface refusal flagged — predrill required for ~12% of remaining piles" },
"Scope Change": { tone: "info", icon: "file", text: "Drove CO-013 (predrill scope) — 2 weeks added to plan" },
"Weather": { tone: "info", icon: "alertCircle", text: "Wind gusts paused crane work for 1 hour" },
"Crew Transition": { tone: "info", icon: "user", text: "Shift-change overlap caused brief slowdown" },
};
const ProductionView = ({ selectedDate, setSelectedDate }) => {
const totalExp = PRODUCTION.reduce((s, p) => s + p.expected, 0);
const totalAch = PRODUCTION.reduce((s, p) => s + p.achieved, 0);
const greenDays = PRODUCTION.filter(p => prodStatus(p) === "Green").length;
const yellowDays = PRODUCTION.filter(p => prodStatus(p) === "Yellow").length;
const redDays = PRODUCTION.filter(p => prodStatus(p) === "Red").length;
const noneDays = PRODUCTION.filter(p => prodStatus(p) === "None").length;
const overall = Math.round(totalAch / totalExp * 100);
// 7-day rolling avg for trendline (most recent 7)
const recent7 = PRODUCTION.slice(0, 7);
const recent7Avg = Math.round(recent7.reduce((s, p) => s + p.achieved, 0) / recent7.length);
const sel = PRODUCTION.find(p => p.date === selectedDate) || PRODUCTION[0];
// Sorted oldest → newest for the bar chart
const chartData = [...PRODUCTION].sort((a, b) => a.date.localeCompare(b.date));
const maxBar = Math.max(...chartData.map(d => Math.max(d.expected, d.achieved))) * 1.1;
return (
{/* Y axis label */}
{Math.round(max)}
{Math.round(max * 0.5)}
0
{/* Bars */}
{/* Target line */}
Target 80
{data.map(d => {
const status = prodStatus(d);
const tone = PROD_TONES[status];
const expH = (d.expected / max) * 100;
const achH = (d.achieved / max) * 100;
const isSel = d.date === selectedDate;
return (
onSelect(d.date)} style={{
flex: 1, height: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end",
cursor: "pointer", position: "relative", minWidth: 0
}}
title={`${formatShortDate(d.date)}: ${d.achieved}/${d.expected} ${d.unit}`}>
{/* Expected outline */}
{/* Achieved fill */}
);
})}
{/* X labels */}
{data.map(d => (
{d.date.slice(5).replace("-", "/")}
))}