Mina Choi
c32ee300e6
- 백엔드 GET /v1/statistics/summary: 회사/내견적 스코프, 최근 6개월 파생 집계(저장 X, DDL 0) - 지표: 총절감/절감률/낙찰률/앵커도달률/마감수/재견적라운드 + 월별추이·마감결과분해·참여율·유형별(협상/견적)·카테고리·카드빈도 - 프론트 recharts+shadcn Chart, 사이드바 통계 nav, /statistics Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
70 lines
3.2 KiB
TypeScript
70 lines
3.2 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 { 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 { wonCompact, pct, signedWonCompact } from './fmt';
|
|
import type { StatData } from './types';
|
|
|
|
// 통계 본문. KPI 요약 + 절감 분석 + 성사/프로세스 + 카드 효과. scope(회사/내견적)별로 동일 레이아웃.
|
|
export function StatisticsView({ data }: { data: StatData }) {
|
|
const k = data.kpi;
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* 임팩트 요약 KPI */}
|
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 xl: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>
|
|
|
|
{/* 절감 분석 */}
|
|
<div className="grid gap-4 lg:grid-cols-3">
|
|
<Panel
|
|
title="월별 절감 추이"
|
|
subtitle="목표가 대비 절감액 · 막대에 마우스를 올리면 절감률"
|
|
className="lg:col-span-2"
|
|
>
|
|
<SavingsTrendChart data={data.trend} />
|
|
</Panel>
|
|
<Panel title="마감 결과" subtitle="낙찰 vs 개찰 사유 4종">
|
|
<OutcomeChart data={data.outcome} />
|
|
</Panel>
|
|
</div>
|
|
|
|
{/* 성사 · 프로세스 */}
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|
<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 lg:grid-cols-2">
|
|
<Panel title="카테고리별 절감" subtitle="어디서 절감이 났나">
|
|
<CategoryChart data={data.categories} />
|
|
</Panel>
|
|
<Panel title="협상카드 효과" subtitle="유형별 사용빈도 + 사용 직후 평균 제시가 하락">
|
|
<CardEffectChart data={data.cards} />
|
|
</Panel>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|