매출 달력

일별 메뉴별 식수·매출과 전주 동요일 대비 증감률

{MENUS.map(m => ( {m.name} ))}

{/* Calendar grid: 7 days + weekly column */}

{/* header row */} {headers.map((h,i)=>(

{h}

))}

주간종합

{/* week rows */} {weeks.map((w, wi) => ( {w.days.map((day, di) => { if (!day) return

; const isWeekend = di === 0 || di === 6; const isToday = day.d === today; const isFuture = day.d > today; const dayColor = di===0?'#dc2626':di===6?'#3b82f6':'#0f172a'; return (

{day.d}{isToday && 오늘} {day.growth !== null && day.totalAmount > 0 && ( = 0 ? '#dcfce7' : '#fee2e2', color: parseFloat(day.growth) >= 0 ? '#15803d' : '#b91c1c', }}>{parseFloat(day.growth) >= 0 ? '▲' : '▼'} {Math.abs(parseFloat(day.growth))}% )}

{/* aligned menu rows */} {MENU_NAMES.map(mn => { const it = day.items.find(i => i.name === mn); const meta = MENU_BY_NAME[mn]; return (

{mn} {it?it.count:'·'} {it?fmt(it.amount):'·'}

); })} {/* daily total */} {day.totalAmount > 0 && (

총 {day.totalCount} {fmt(day.totalAmount)}

)}

); })} {/* weekly summary */} ))}

{/* Below: month total strip */}

); } function WeeklyCell({ summary, fmt }) { if (summary.count === 0) return

; return (

주간합계 {summary.growth !== null && ( = 0 ? '#15803d' : '#b91c1c', color: '#fff', }}>{parseFloat(summary.growth) >= 0 ? '▲' : '▼'} {Math.abs(parseFloat(summary.growth))}% )}

{MENU_NAMES.map(mn => { const it = summary.items[mn]; const meta = MENU_BY_NAME[mn]; return (

{mn} {it?it.count:'·'} {it?fmt(it.amount):'·'}

); })}

총 {summary.count} {fmt(summary.amount)}

); } // 월 합계 띠 function MonthTotalStrip() { const totals = MENU_NAMES.map(mn => { let count = 0, amount = 0; Object.values(CALENDAR).forEach(day => { const it = day.items.find(i => i.name === mn); if (it) { count += it.count; amount += it.amount; } }); return { name:mn, count, amount, ...MENU_BY_NAME[mn] }; }); const monthCount = totals.reduce((s,t)=>s+t.count, 0); const monthAmount = totals.reduce((s,t)=>s+t.amount, 0); return (

5월 메뉴별 총합

17일까지 누적

총 식수 {monthCount.toLocaleString()}식 총 매출 {monthAmount.toLocaleString()}원

{totals.map(t => (

{t.name} {(t.count/monthCount*100).toFixed(0)}%

{t.count.toLocaleString()}식

{t.amount.toLocaleString()}원

))}

); } // ─── 업체 통계 ─── function CompanyStatsView() { const [search, setSearch] = React.useState(''); const [groupFilter, setGroupFilter] = React.useState('all'); const [minCount, setMinCount] = React.useState(''); const [maxCount, setMaxCount] = React.useState(''); const [sortBy, setSortBy] = React.useState('total_amount'); const [sortDir, setSortDir] = React.useState('desc'); const uniqueGroups = [...new Set(COMPANIES.map(c => c.group.split('-')[0]).filter(g => g !== '-'))].sort(); const filtered = COMPANIES.filter(c => { if (search && !c.name.toLowerCase().includes(search.toLowerCase())) return false; if (groupFilter === 'set' && c.group === '-') return false; if (groupFilter === 'unset' && c.group !== '-') return false; if (groupFilter !== 'all' && groupFilter !== 'set' && groupFilter !== 'unset') { if (!c.group.startsWith(groupFilter + '-')) return false; } const total = getCompanyTotalCount(c); if (minCount && total < parseInt(minCount)) return false; if (maxCount && total > parseInt(maxCount)) return false; return true; }); const sorted = [...filtered].sort((a,b)=>{ let av, bv; if (sortBy === 'total_amount') { av = getCompanyTotalAmount(a); bv = getCompanyTotalAmount(b); } else if (sortBy === 'total_count') { av = getCompanyTotalCount(a); bv = getCompanyTotalCount(b); } else if (sortBy === 'name') { return sortDir==='asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name); } else if (sortBy === 'group') { const ag = a.group === '-' ? '999' : a.group; const bg = b.group === '-' ? '999' : b.group; return sortDir==='asc' ? ag.localeCompare(bg, undefined, {numeric:true}) : bg.localeCompare(ag, undefined, {numeric:true}); } return sortDir === 'asc' ? av - bv : bv - av; }); const totalCounts = MENU_NAMES.map(m => sorted.reduce((s,c)=>s+(c.counts[m]||0), 0)); const totalAmounts = MENU_NAMES.map(m => sorted.reduce((s,c)=>s+getCompanyAmount(c,m), 0)); const grandCount = totalCounts.reduce((a,b)=>a+b, 0); const grandAmount = totalAmounts.reduce((a,b)=>a+b, 0); const toggleSort = key => { if (sortBy === key) setSortDir(d => d==='asc'?'desc':'asc'); else { setSortBy(key); setSortDir('desc'); } }; return (

{/* 필터 바 */}

{[ { v:'all', l:'전체' }, { v:'set', l:'설정' }, { v:'unset', l:'미설정' }, ...uniqueGroups.map(g => ({ v:g, l:g })), ].map(opt => ( setGroupFilter(opt.v)}>{opt.l} ))}

setMinCount(e.target.value)} placeholder="최소" style={inp(70)}/> ~ setMaxCount(e.target.value)} placeholder="최대" style={inp(70)}/>

setSearch(e.target.value)} placeholder="업체명 검색" style={{ padding:'7px 10px 7px 28px', fontSize:12, color:'#0f172a', width:200, border:'1px solid #e2e8f0', borderRadius:5, outline:'none', background:'#fff', }}/>

정렬: {[ { k:'total_amount', l:'매출' }, { k:'total_count', l:'식수' }, { k:'name', l:'업체명' }, { k:'group', l:'그룹' }, ].map(s => ( ))}

{sorted.length}개 업체 {(search || groupFilter !== 'all' || minCount || maxCount) && ( )}

{/* 와이드 테이블 */}

{/* group header row */} {/* sub-column row */} {MENU_NAMES.map((m,i) => ( ))} {MENU_NAMES.map((m,i) => ( ))} {MENU_NAMES.map((m,i) => ( ))} {sorted.map((c, idx) => ( ))} {sorted.length === 0 && ( )} {/* 합계 푸터 */} {sorted.length > 0 && ( {MENU_NAMES.map(m => ( ))} {totalCounts.map((t,i) => ( ))} {totalAmounts.map((t,i) => ( ))} )}

#	그룹	업체명	설정 단가	식수 (개)	매출 (원)
#	그룹	업체명	{m}	{m}	총	{m}	총
조건에 맞는 업체가 없습니다.
합계 ({sorted.length}개사)			{DEFAULT_PRICES[m].toLocaleString()}	{t.toLocaleString()}	{grandCount.toLocaleString()}	{t.toLocaleString()}	{grandAmount.toLocaleString()}

); } function CompanyRow({ idx, c }) { const totalCount = getCompanyTotalCount(c); const totalAmount = getCompanyTotalAmount(c); const empty = totalCount === 0; return ( {idx} {c.group !== '-' ? c.group : —} {c.name} {c.isMember && 회원} {/* 설정 단가 */} {MENU_NAMES.map(m => { const isCustom = m in c.custom; return ( {isCustom && 설정} {getCustomPrice(c,m).toLocaleString()} ); })} {/* 식수 */} {MENU_NAMES.map(m => { const v = c.counts[m] || 0; return 0 ? '#0f172a' : '#cbd5e1', fontWeight: v>0 ? 700 : 400 }}>{v>0 ? v.toLocaleString() : '·'}; })} {totalCount.toLocaleString()} {/* 매출 */} {MENU_NAMES.map(m => { const v = getCompanyAmount(c, m); return 0 ? '#0f172a' : '#cbd5e1' }}>{v>0 ? v.toLocaleString() : '·'}; })} {totalAmount.toLocaleString()} ); } const thGroup = (bg, fg) => ({ padding:'8px 14px', fontSize:11, fontWeight:800, color:fg, background:bg, borderBottom:'1px solid #e2e8f0', borderLeft:'1px solid #e2e8f0', textAlign:'center', }); const thMenu = (meta, isFirst, isLast, isTotal, _) => ({ padding:'7px 8px', fontSize:11, fontWeight:700, textAlign:'right', borderLeft: isFirst ? '2px solid #e2e8f0' : '1px solid #f1f5f9', borderRight: isLast ? '2px solid #e2e8f0' : 'none', background: isTotal ? '#f8fafc' : '#fff', }); const thStickyL = (left, w, bg) => ({ padding:'10px 14px', fontSize:11, fontWeight:800, color:'#475569', textAlign:'left', background:bg, borderBottom:'1px solid #e2e8f0', position:'sticky', left, minWidth:w, zIndex:2, }); const tdStickyL = (left, w, bg, color, fw) => ({ padding:'10px 14px', fontSize:12, color, fontWeight:fw, textAlign:'left', background:bg, position:'sticky', left, minWidth:w, zIndex:1, borderRight:'1px solid #f1f5f9', }); const tdNum = () => ({ padding:'9px 8px', textAlign:'right', fontSize:11, fontVariantNumeric:'tabular-nums', borderLeft:'1px solid #f8fafc', }); const inp = w => ({ padding:'5px 8px', fontSize:11, color:'#0f172a', width:w, border:'1px solid #e2e8f0', borderRadius:4, outline:'none', background:'#fff', }); function FilterGroup({ label, children }) { return (

{label}

{children}

); } function Chip({ active, onClick, children }) { return ; } // ─── 공통 컴포넌트 (Overview) ─── function MegaKPI({ total, delta, prevTotal, compareLabel }) { const up = delta >= 0; return (

이번달 누적 매출

{(total/10000).toLocaleString(undefined, {maximumFractionDigits:0})} 만원 {up?'▲':'▼'} {Math.abs(delta)}%

{compareLabel} {(prevTotal/10000).toLocaleString(undefined,{maximumFractionDigits:0})}만원

); } function MiniKPI({ label, value, delta, deltaUnit='%', icon, color }) { const up = delta >= 0; return (

{label}

{value}

{up?'▲':'▼'} {Math.abs(delta)}{deltaUnit}전월대비

); } function Card({ title, subtitle, action, children, pillBg, pillFg, pillText }) { return (

{title} {pillText && {pillText}}

{subtitle &&

{subtitle}

}

{action && }

{children}

); } function DailyChart({ values, prev }) { const max = Math.max(...values, ...prev); const days = ['목','금','토','일','월','화','수','목','금','토','일','월','화','수','목','금','토']; return (

{values.map((v, i)=>{ const h = (v/max)*100; const ph = (prev[i]/max)*100; const isWeekend = i % 7 === 2 || i % 7 === 3; return (

{v>0 && (

{v}

)}

); })}

{values.map((v,i)=>(

{i+1}
{days[i]}

))}

); } const Legend = ({ color, label }) => ( {label} ); function PaymentMethodBars({ data }) { const total = data.reduce((a,b)=>a+b.amount,0); return (

{/* 통합 비율 바 */}

{data.map(c =>

{c.share >= 10 && {c.share}%}

)}

{data.map(c=>(

{c.label} {(c.amount/10000).toFixed(0)}만 {c.share}%

))}

합계 {total.toLocaleString()}원

); } function DeliveryGroupGrid({ groups }) { const totalAmount = groups.reduce((s,g)=>s+g.amount, 0); const maxAmount = Math.max(...groups.map(g=>g.amount)); return (

{groups.map(g => { const amountDelta = g.prevAmount > 0 ? ((g.amount - g.prevAmount) / g.prevAmount * 100) : null; const orderDelta = g.prevOrders > 0 ? ((g.orders - g.prevOrders) / g.prevOrders * 100) : null; const isNew = g.prevAmount === 0; const up = (amountDelta ?? 0) >= 0; return (

{/* heat indicator */}

{g.id === 0 ? '?' : g.id} {g.name}

{isNew && NEW}

{(g.amount/10000).toLocaleString(undefined, {maximumFractionDigits:0})} 만원 {amountDelta !== null && ( {up ? '▲' : '▼'} {Math.abs(amountDelta).toFixed(1)}% )}

s+gg.companies,0)*100).toFixed(0)}%`}/>

); })}

); } function DGStat({ label, value, sub, delta }) { const up = (delta ?? 0) >= 0; return (

{label}

{value}

{sub &&

{sub}

} {delta !== undefined && delta !== null && (

{up?'▲':'▼'} {Math.abs(delta).toFixed(1)}% 전월

)}

); } function TopCompanyTable({ rows }) { const max = Math.max(...rows.map(r=>r.amount)); return (

{rows.map((r, i) => (

#{i+1}

{r.name} · {r.members}명

{(r.amount/10000).toFixed(0)}만

0?'#16a34a':r.delta<0?'#dc2626':'#94a3b8' }}> {r.delta>0?'▲':r.delta<0?'▼':'—'} {r.delta!==0 ? Math.abs(r.delta)+'%' : '변동없음'}

))}

); } window.SalesPage = SalesPage;