81 lines
4.3 KiB
TypeScript
81 lines
4.3 KiB
TypeScript
import { Award, Percent, RefreshCw, Target, TrendingDown, CircleCheckBig } from 'lucide-react';
|
|
import { Panel } from './components/Panel';
|
|
import { StatTile } from './components/StatTile';
|
|
import { SavingsTrendChart } from './components/SavingsTrendChart';
|
|
import { MarkupTrendChart } from './components/MarkupTrendChart';
|
|
import { OutcomeChart } from './components/OutcomeChart';
|
|
import { ParticipationChart } from './components/ParticipationChart';
|
|
import { TypeSplitChart } from './components/TypeSplitChart';
|
|
import { CategoryChart } from './components/CategoryChart';
|
|
import { CardEffectChart } from './components/CardEffectChart';
|
|
import { CardTop5 } from './components/CardTop5';
|
|
import { wonCompact, pct, signedWonCompact } from './fmt';
|
|
import { fillMonths } from './months';
|
|
import type { StatData } from './types';
|
|
import { useLabels } from '@/features/settings/useCompanySettings';
|
|
|
|
// 통계 본문. KPI 요약 + 절감 분석 + 성사/프로세스 + 카드 효과. scope(회사/내견적)별로 동일 레이아웃.
|
|
export function StatisticsView({ data }: { data: StatData }) {
|
|
const label = useLabels(); // 회사 설정 용어(카테고리 등)
|
|
const k = data.kpi;
|
|
// 월별 차트는 최근 6개월 축을 고정한다(데이터 없는 달은 0) — 한 점만 찍히던 현상 방지.
|
|
const trend = fillMonths(data.trend, (month) => ({ month, savings: 0, rate: 0 }));
|
|
const markupTrend = fillMonths(data.markupTrend, (month) => ({ month, rate: 0 }));
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* 임팩트 요약 KPI — 6열은 초광폭(2xl)에서만. xl 구간은 사이드바 빼면 타일이 ~170px 로 눌려
|
|
라벨·증감칩이 여러 줄로 깨진다 → 3열 유지. */}
|
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 2xl:grid-cols-6">
|
|
<StatTile
|
|
label="총 절감액 (목표가 대비)"
|
|
value={wonCompact(k.totalSavings)}
|
|
icon={TrendingDown}
|
|
tone="emerald"
|
|
delta={{ text: `${signedWonCompact(k.savingsDeltaMoM)} 전월비`, good: k.savingsDeltaMoM >= 0 }}
|
|
/>
|
|
<StatTile label="평균 절감률" value={pct(k.savingsRate)} icon={Percent} tone="emerald" />
|
|
<StatTile label="낙찰률" value={pct(k.awardRate)} icon={Award} tone="blue" />
|
|
<StatTile label="평균 앵커 도달률" value={pct(k.anchorReachRate)} icon={Target} tone="purple" />
|
|
<StatTile label="마감 견적" value={`${k.closedCount}건`} icon={CircleCheckBig} tone="zinc" />
|
|
<StatTile label="평균 재견적 라운드" value={k.regenAvgRound.toFixed(1)} icon={RefreshCw} tone="amber" />
|
|
</div>
|
|
|
|
{/* 월별 추이 2종 — 같은 성격이라 동일 폭(1:1) */}
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|
<Panel title="월별 절감 추이" subtitle="목표가 대비 절감액 · 막대에 마우스를 올리면 절감률">
|
|
<SavingsTrendChart data={trend} />
|
|
</Panel>
|
|
<Panel title="월별 인상억제율" subtitle="재협상: 직전 라운드 투찰가 대비 인하율">
|
|
<MarkupTrendChart data={markupTrend} />
|
|
</Panel>
|
|
</div>
|
|
|
|
{/* 성사 · 프로세스 */}
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
<Panel title="마감 결과" subtitle="낙찰 vs 개찰 사유 4종">
|
|
<OutcomeChart data={data.outcome} />
|
|
</Panel>
|
|
<Panel title="협력사 참여" subtitle="초대 세션 대비 응찰·미응찰·거부">
|
|
<ParticipationChart data={data.participation} />
|
|
</Panel>
|
|
<Panel title="유형별 성과" subtitle="협상(1:1) vs 견적(1:N) 낙찰률">
|
|
<TypeSplitChart data={data.typeSplit} />
|
|
</Panel>
|
|
</div>
|
|
|
|
{/* 카테고리 · 카드 */}
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
<Panel title={`${label('category')}별 절감`} subtitle="어디서 절감이 났나">
|
|
<CategoryChart data={data.categories} />
|
|
</Panel>
|
|
<Panel title="협상카드 효과" subtitle="유형별 사용빈도 + 사용 직후 평균 제시가 하락">
|
|
<CardEffectChart data={data.cards} />
|
|
</Panel>
|
|
<Panel title="협상카드 성공률 TOP 5" subtitle="사용 이력 있는 카드 · 사용 세션 중 타결 비율">
|
|
<CardTop5 />
|
|
</Panel>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|