);
default: return null;
}
}
const panelW = isMobile ? '100%' : '460px';
return (
<>
{/* Header */}
Daily Intelligence Report
{shortDate}
{yr} · {trips} trips · {coRows.length} companies active
{/* Quick KPIs */}
{[[C(rev),'Revenue','#EA580C'],[C(profit),profit>=0?'Profit':'Loss',profit>=0?'#16A34A':'#DC2626'],[trips+' trips','Activity','#2563EB']].map(([v,l,c])=>(
))}
{/* Tab bar */}
{PANEL_TABS.map(t=>(
))}
{/* Tab content */}
{/* Footer */}
);
}
// ── Week View ─────────────────────────────────────────────────────────────────
function CalWeekView({ weekStart, dayMap, metric, metricDef, maxVal, todayISO, selDay, onSelectDay }) {
const days = [];
for (let i = 0; i < 7; i++) {
const d = new Date(weekStart);
d.setDate(d.getDate() + i);
const key = d.toISOString().slice(0,10);
days.push({ d, key, data: dayMap[key]||null, dow: d.getDay(), dn: d.getDate() });
}
return (
{days.map(({d,key,data,dow,dn})=>{
const val = data ? metricDef.fn(data) : 0;
const c = calHeat(maxVal > 0 ? val/maxVal : 0);
const isToday = key===todayISO, isSel=key===selDay, hasData=data&&val>0;
return (
hasData&&onSelectDay(isSel?null:key)}
onMouseEnter={e=>{if(!isSel){e.currentTarget.style.transform='scale(1.03)';e.currentTarget.style.boxShadow='0 3px 12px rgba(0,0,0,.09)';}}}
onMouseLeave={e=>{if(!isSel){e.currentTarget.style.transform='';e.currentTarget.style.boxShadow='';}}}>
{CAL_DAYS[dow].slice(0,3)}
{dn}{isToday&&}
{hasData&&
{fmtCompact(val,metric)}
}
{data&&data.trips>0&&
{data.trips} trips
}
);
})}
);
}
// ── Day View ──────────────────────────────────────────────────────────────────
function CalDayView({ date, dayMap, todayISO, onNav, onOpenPanel }) {
const C = window.fmtCur;
const d = dayMap[date];
const [yr,mo,dy_] = date.split('-');
const dow = CAL_DAYS[new Date(date).getDay()];
const monthName = CAL_MONTHS[+mo-1];
const isToday = date===todayISO;
const profit = d ? d.rev-d.purchVal : 0;
return (
{dow}, {monthName} {+dy_}
{isToday&&
Today
}
{d ? (
{[['Revenue',C(d.rev),'#EA580C'],['Purchase',C(d.purchVal),'#78350F'],['Profit',C(profit),profit>=0?'#16A34A':'#DC2626'],['Trips',d.trips,'#2563EB'],['Tons Sold',window.formatQuantity(d.soldTons)+' T','#374151'],['Tons Bought',window.formatQuantity(d.purchTons)+' T','#374151'],['Transfers',d.transfers,'#7C3AED'],['Margin',d.rev>0?((profit/d.rev)*100).toFixed(1)+'%':'—','#6B7280']].map(([l,v,c])=>(
))}
) : (
No Activity
No records found for {dow}, {monthName} {+dy_}
)}
);
}
// ── Main Calendar Page ────────────────────────────────────────────────────────
function GroupCalendarPage() {
const today = new Date();
const todayISO = today.toISOString().slice(0,10);
const C = window.fmtCur;
const { navigate: calNav } = React.useContext(window.AppCtx) || {};
const [viewMode, setViewMode] = cSt('month');
const [year, setYear] = cSt(today.getFullYear());
const [month, setMonth] = cSt(today.getMonth());
const [weekStart, setWeekStart] = cSt(()=>{ const d=new Date(today); d.setDate(d.getDate()-d.getDay()); return d; });
const [dayViewDate, setDayViewDate] = cSt(todayISO);
const [selDay, setSelDay] = cSt(null);
const [panelOpen, setPanelOpen] = cSt(false);
const [panelDate, setPanelDate] = cSt(null);
const [hovDay, setHovDay] = cSt(null);
const [hovPos, setHovPos] = cSt({x:0,y:0,bottom:0});
const [metric, setMetric] = cSt('rev');
const [showFilters, setShowFilters] = cSt(false);
const [, setTick] = cSt(0);
const [winW, setWinW] = cSt(window.innerWidth);
const [fCo,setFCo] = cSt('');
const [fMat,setFMat] = cSt('');
const [fVend,setFVend] = cSt('');
const [fCust,setFCust] = cSt('');
const [fCrush,setFCrush] = cSt('');
cEf(()=>{
const unsub = Store.on(()=>setTick(t=>t+1));
const onR = ()=>setWinW(window.innerWidth);
window.addEventListener('resize',onR);
return ()=>{ unsub(); window.removeEventListener('resize',onR); };
},[]);
const isMobile = winW < 640;
const isTablet = winW < 960;
const activeFilterCount = [fCo,fMat,fVend,fCust,fCrush].filter(Boolean).length;
const companies = Store.all('companies');
const materials = Store.all('materials');
const vendors = Store.all('vendors');
const customers = Store.all('customers');
const crushers = Store.all('crushers');
const allS = Store.all('salesOrders');
const allP = Store.all('purchases');
const allT = Store.all('transportEntries');
const allTr = Store.all('internalTransfers');
const allD = Store.all('dieselRecords');
const allSR = Store.all('settlementRecords');
const allVS = Store.all('vendorSettlements');
const allSM = Store.all('stockMovements');
const allDB = Store.all('debrisMovements');
const filtS = cMemo(()=>{ let d=allS; if(fCo)d=d.filter(s=>s.companyId===fCo); if(fMat)d=d.filter(s=>s.materialId===fMat); if(fCust)d=d.filter(s=>s.customerId===fCust); return d; },[allS,fCo,fMat,fCust]);
const filtP = cMemo(()=>{ let d=allP; if(fCo)d=d.filter(p=>p.companyId===fCo); if(fVend)d=d.filter(p=>p.vendorId===fVend); if(fMat)d=d.filter(p=>(p.items||[]).some(i=>i.materialId===fMat)||p.materialId===fMat); if(fCrush)d=d.filter(p=>(p.items||[]).some(i=>i.crusherSite===fCrush)); return d; },[allP,fCo,fVend,fMat,fCrush]);
const filtT = cMemo(()=>{ let d=allT; if(fCo)d=d.filter(t=>t.companyId===fCo); return d; },[allT,fCo]);
const filtTr = cMemo(()=>{ let d=allTr; if(fCo)d=d.filter(t=>t.sourceCompanyId===fCo||t.destCompanyId===fCo); return d; },[allTr,fCo]);
const dayMap = cMemo(()=>{
const map={};
const g=d=>{ if(!d)return null; if(!map[d])map[d]={rev:0,purchVal:0,soldTons:0,purchTons:0,trips:0,transfers:0,diesel:0,dieselLitres:0,dieselCount:0,dieselTransAlloc:0,dieselVendAlloc:0,transSettCount:0,transSettGross:0,transSettDiesel:0,transSettNet:0,transSettPaid:0,transSettOut:0,vendSettCount:0,vendSettGross:0,vendSettDiesel:0,vendSettNet:0,vendSettPaid:0,vendSettOut:0,stockMoveCount:0,stockMoveQty:0,stockMoveYards:0,stockMoveMats:0,debrisMovCount:0,debrisMovQty:0,debrisMovRev:0,debrisMovCusts:0}; return map[d]; };
filtS.forEach(s =>{ const m=g(s.date); if(!m)return; m.rev+=window.gAmt(s); m.soldTons+=parseFloat(s.quantity)||0; m.trips++; });
filtP.forEach(p =>{ const m=g(p.date); if(!m)return; m.purchVal+=window.gAmt(p); m.purchTons+=(p.items&&p.items.length)?p.items.reduce((a,i)=>a+(parseFloat(i.quantity)||0),0):(parseFloat(p.quantity)||0); m.trips++; });
filtT.forEach(t =>{ const m=g(t.date); if(!m)return; m.trips++; });
filtTr.forEach(t=>{ const m=g(t.date); if(!m)return; m.transfers++; });
allD.forEach(d =>{ const m=g(d.periodStart||d.date); if(!m)return; m.diesel+=d.amount||0; m.dieselLitres+=parseFloat(d.litres)||0; m.dieselCount++; const role=d.dieselAllocRole||''; if(role==='Vendor')m.dieselVendAlloc+=d.amount||0; else if(role==='Transport')m.dieselTransAlloc+=d.amount||0; else if(role==='Split'){m.dieselTransAlloc+=(d.transportAllocAmount||0);m.dieselVendAlloc+=(d.vendorAllocAmount||0);} });
allSR.forEach(s =>{ const m=g(s.createdDate||s.periodFrom); if(!m)return; m.transSettCount++; m.transSettGross+=s.grossFreight||0; m.transSettDiesel+=s.dieselDeduction||0; m.transSettNet+=s.netPayable||0; m.transSettPaid+=s.amountPaid||0; m.transSettOut+=s.outstandingBalance||0; });
allVS.forEach(s =>{ const m=g(s.createdDate||s.periodFrom); if(!m)return; m.vendSettCount++; m.vendSettGross+=s.grossPurchaseAmount||0; m.vendSettDiesel+=s.dieselDeduction||0; m.vendSettNet+=s.netPayable||0; m.vendSettPaid+=s.amountPaid||0; m.vendSettOut+=s.outstandingBalance||0; });
allSM.forEach(s =>{ const m=g(s.date); if(!m)return; if(s.type==='Opening')return; m.stockMoveCount++; m.stockMoveQty+=parseFloat(s.quantity)||0; if(s.stockyardId&&map[s.date]){const yd=s.stockyardId;if(!m._sy)m._sy=new Set();m._sy.add(yd);m.stockMoveYards=m._sy.size;} if(s.materialId){if(!m._sm)m._sm=new Set();m._sm.add(s.materialId);m.stockMoveMats=m._sm.size;} });
allDB.forEach(d =>{ const m=g(d.date); if(!m)return; m.debrisMovCount++; m.debrisMovQty+=parseFloat(d.quantity)||0; m.debrisMovRev+=parseFloat(d.netAmount)||0; if(d.customerName){if(!m._dc)m._dc=new Set();m._dc.add(d.customerName);m.debrisMovCusts=m._dc.size;} });
return map;
},[filtS,filtP,filtT,filtTr,allD,allSR,allVS,allSM,allDB]);
const daysInMonth = new Date(year,month+1,0).getDate();
const firstDow = new Date(year,month,1).getDay();
const metricDef = CAL_METRICS.find(m=>m.id===metric)||CAL_METRICS[0];
const monthDays = cMemo(()=>{
const days=[];
for(let d=1;d<=daysInMonth;d++){
const key=`${year}-${String(month+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
days.push({d,key,data:dayMap[key]||null});
}
return days;
},[year,month,daysInMonth,dayMap]);
const maxVal = cMemo(()=>{
if(viewMode==='month'){
const vals=monthDays.map(d=>d.data?metricDef.fn(d.data):0);
return Math.max(...vals,0.001);
}
if(viewMode==='week'){
const vals=[];
for(let i=0;i<7;i++){ const d=new Date(weekStart); d.setDate(d.getDate()+i); const data=dayMap[d.toISOString().slice(0,10)]; if(data)vals.push(metricDef.fn(data)); }
return Math.max(...vals,0.001);
}
const allVals=Object.values(dayMap).map(d=>metricDef.fn(d));
return Math.max(...allVals,0.001);
},[viewMode,monthDays,weekStart,dayMap,metric]);
const summary = cMemo(()=>monthDays.reduce((acc,{data:d})=>{
if(!d)return acc;
acc.rev+=d.rev; acc.purchVal+=d.purchVal; acc.soldTons+=d.soldTons;
acc.purchTons+=d.purchTons; acc.trips+=d.trips; acc.transfers+=d.transfers; acc.active++;
return acc;
},{rev:0,purchVal:0,soldTons:0,purchTons:0,trips:0,transfers:0,active:0}),[monthDays]);
const topDays = cMemo(()=>[...monthDays].filter(d=>d.data&&metricDef.fn(d.data)>0).sort((a,b)=>metricDef.fn(b.data)-metricDef.fn(a.data)).slice(0,5),[monthDays,metric]);
function openPanel(key) { setPanelDate(key); setPanelOpen(true); }
function closePanel() { setPanelOpen(false); }
const CAL_NAV_MAP = { transSett:'transportsettlement', vendSett:'vendorsettlement', dieselCal:'diesel', stockMov:'stockyard', debrisMov:'debris' };
function handleDayClick(key) {
if (!key) { setSelDay(null); closePanel(); return; }
setSelDay(key);
if (CAL_NAV_MAP[metric] && calNav) {
calNav(CAL_NAV_MAP[metric], { filterDate: key });
} else {
openPanel(key);
}
}
function goPrev() {
if(viewMode==='month'){ if(month===0){setMonth(11);setYear(y=>y-1);}else setMonth(m=>m-1); }
if(viewMode==='week'){ const d=new Date(weekStart); d.setDate(d.getDate()-7); setWeekStart(new Date(d)); }
if(viewMode==='day'){ const d=new Date(dayViewDate); d.setDate(d.getDate()-1); setDayViewDate(d.toISOString().slice(0,10)); }
}
function goNext() {
if(viewMode==='month'){ if(month===11){setMonth(0);setYear(y=>y+1);}else setMonth(m=>m+1); }
if(viewMode==='week'){ const d=new Date(weekStart); d.setDate(d.getDate()+7); setWeekStart(new Date(d)); }
if(viewMode==='day'){ const d=new Date(dayViewDate); d.setDate(d.getDate()+1); setDayViewDate(d.toISOString().slice(0,10)); }
}
function goToday() {
setYear(today.getFullYear()); setMonth(today.getMonth());
setWeekStart(()=>{ const d=new Date(today); d.setDate(d.getDate()-d.getDay()); return d; });
setDayViewDate(todayISO);
}
function clearFilters(){ setFCo('');setFMat('');setFVend('');setFCust('');setFCrush(''); }
const yearOpts=[]; for(let y=today.getFullYear()-4;y<=today.getFullYear()+2;y++) yearOpts.push(y);
const cellH = isMobile?46:isTablet?66:84;
const cellPad = isMobile?'5px 4px 4px':'10px 10px 8px';
const numSz = isMobile?11:13;
const valSz = isMobile?9:11;
const weekEndDate = new Date(weekStart); weekEndDate.setDate(weekEndDate.getDate()+6);
const navLabel = viewMode==='month' ? `${CAL_MONTHS[month]} ${year}` :
viewMode==='week' ? `${CAL_MONTHS[weekStart.getMonth()].slice(0,3)} ${weekStart.getDate()} – ${CAL_MONTHS[weekEndDate.getMonth()].slice(0,3)} ${weekEndDate.getDate()}, ${weekEndDate.getFullYear()}` :
(()=>{ const [yr_,mo_,dy__]=dayViewDate.split('-'); return `${CAL_MONTHS[+mo_-1]} ${+dy__}, ${yr_}`; })();
const cardSt = {background:'#fff',borderRadius:isMobile?12:16,boxShadow:'0 1px 3px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.04)',marginBottom:14};
return (
<>
{/* ── HEADER CARD ───────────────────────────────────────────────── */}
{/* Title row */}
OM Group Calendar
Operational Intelligence · Click any day to open full report
{['month','week','day'].map(v=>(
))}
{/* Navigation row */}
{navLabel}
{viewMode==='month'&&<>
}
{/* Filter panel */}
{showFilters&&(
{[[fCo,setFCo,'All Companies',companies],[fMat,setFMat,'All Materials',materials],[fVend,setFVend,'All Vendors',vendors],[fCust,setFCust,'All Customers',customers],[fCrush,setFCrush,'All Crushers',crushers]].map(([val,setter,ph,opts])=>(
))}
{activeFilterCount>0&&
}
{activeFilterCount>0&&
{activeFilterCount} filter{activeFilterCount>1?'s':''} active — heatmap and drill-downs reflect filtered data only
}
)}
{/* Monthly summary pills */}
{viewMode==='month'&&(
{[['Rev',C(summary.rev),'#EA580C'],['Purchase',C(summary.purchVal),'#78350F'],['Profit',C(summary.rev-summary.purchVal),(summary.rev-summary.purchVal)>=0?'#16A34A':'#DC2626'],['Trips',summary.trips,'#2563EB'],['Sold',window.formatQuantity(summary.soldTons)+'T','#374151'],['Tfrs',summary.transfers,'#7C3AED'],['Days',summary.active,'#6B7280']].map(([lbl,val,col])=>(
))}
)}
{/* ── CALENDAR VIEW CARD ────────────────────────────────────────── */}
{viewMode==='month'&&(
<>
{CAL_DAYS.map(d=>(
{isMobile?d[0]:d}
))}
{Array.from({length:firstDow}).map((_,i)=>
)}
{monthDays.map(({d,key,data})=>{
const val=data?metricDef.fn(data):0;
const c =calHeat(maxVal>0?val/maxVal:0);
const isToday=key===todayISO, isSel=key===selDay, hasData=data&&val>0;
const compact=hasData&&!isMobile?fmtCompact(val,metric):null;
return (
hasData&&handleDayClick(isSel?null:key)}
onMouseEnter={e=>{
if(!isSel){e.currentTarget.style.transform='scale(1.025)';e.currentTarget.style.boxShadow='0 4px 14px rgba(0,0,0,.1)';}
if(data&&!isMobile){const r=e.currentTarget.getBoundingClientRect();setHovPos({x:r.left+r.width/2,y:r.top,bottom:r.bottom});setHovDay(key);}
}}
onMouseLeave={e=>{if(!isSel){e.currentTarget.style.transform='';e.currentTarget.style.boxShadow='';}setHovDay(null);}}>
{d}{isToday&&}
{compact&&
{compact}
}
{data&&data.trips>0&&!isMobile&&
{data.trips}
}
);
})}
Less
{[0,0.04,0.2,0.4,0.65,0.85,1].map((v,i)=>{ const hc=calHeat(v); return
; })}
More
)}
{viewMode==='week'&&(
<>
Less
{[0,0.04,0.2,0.4,0.65,0.85,1].map((v,i)=>{ const hc=calHeat(v); return
; })}
More
)}
{viewMode==='day'&&(
{ const d=new Date(dayViewDate); d.setDate(d.getDate()+offset); setDayViewDate(d.toISOString().slice(0,10)); }}
onOpenPanel={()=>openPanel(dayViewDate)}
/>
)}
{/* ── TOP BUSIEST DAYS ──────────────────────────────────────────── */}
{viewMode==='month'&&topDays.length>0&&(
Top Busiest Days
by {metricDef.label}
{CAL_MONTHS[month]} {year}
{topDays.map(({d,key,data},i)=>{
const val=metricDef.fn(data);
const pct=maxVal>0?val/maxVal*100:0;
const RANK=['#EA580C','#C2410C','#9A3412','#78350F','#6B7280'];
const c=calHeat(val/maxVal);
return (
handleDayClick(key)}
onMouseEnter={e=>e.currentTarget.style.background='#FFF7ED'}
onMouseLeave={e=>e.currentTarget.style.background=''}>
{d}
{CAL_DAYS[new Date(key).getDay()]}
{!isMobile&&
{CAL_MONTHS[month].slice(0,3)} {d}
}
{metricDef.fmt(val)}
);
})}
)}
{/* ── HOVER TOOLTIP ─────────────────────────────────────────────── */}
{hovDay&&dayMap[hovDay]&&!isMobile&&!panelOpen&&(
)}
{/* ── SLIDE-OVER PANEL ──────────────────────────────────────────── */}
{panelOpen&&panelDate&&(
)}
);
}
window.GroupCalendarPage = GroupCalendarPage;