319 lines
13 KiB
TypeScript
319 lines
13 KiB
TypeScript
|
import { useMemo, useState } from 'react';
|
|||
|
|
import { Alert, Button, Col, Row, Space, Typography } from 'antd';
|
|||
|
|
import { ProCard } from '@ant-design/pro-components';
|
|||
|
|
import { useQuery } from '@tanstack/react-query';
|
|||
|
|
import {
|
|||
|
|
AreaChart, Area, BarChart, Bar, XAxis, YAxis,
|
|||
|
|
CartesianGrid, Tooltip, ResponsiveContainer, Legend,
|
|||
|
|
} from 'recharts';
|
|||
|
|
import {
|
|||
|
|
IconTrendingUp, IconTrendingDown, IconMinus, IconDownload,
|
|||
|
|
} from '@tabler/icons-react';
|
|||
|
|
import type { ColDef } from '@ag-grid-community/core';
|
|||
|
|
import dayjs from 'dayjs';
|
|||
|
|
import PageContainer from '@/components/common/PageContainer';
|
|||
|
|
import SearchForm from '@/components/common/SearchForm';
|
|||
|
|
import DataGrid from '@/components/common/DataGrid';
|
|||
|
|
import { kpiApi, MonthlySummaryRow, KpiSearchParam } from '@/api/kpi';
|
|||
|
|
import {
|
|||
|
|
COLOR_PRIMARY, COLOR_ERROR, COLOR_SUCCESS,
|
|||
|
|
GRAY, SHADOW, RADIUS,
|
|||
|
|
} from '@/theme/tokens';
|
|||
|
|
|
|||
|
|
const { Text } = Typography;
|
|||
|
|
|
|||
|
|
// ────────────────────────────────────────────────────────
|
|||
|
|
// 유틸
|
|||
|
|
// ────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
const fmt = (v: number) => v.toLocaleString();
|
|||
|
|
const fmtM = (v: number) => `${(v / 1_000_000).toFixed(1)}M`;
|
|||
|
|
|
|||
|
|
function calcPct(curr: number, prev: number): number | null {
|
|||
|
|
if (prev === 0) return null;
|
|||
|
|
return Math.round(((curr - prev) / Math.abs(prev)) * 1000) / 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ────────────────────────────────────────────────────────
|
|||
|
|
// 서브 컴포넌트 — KPI 카드
|
|||
|
|
// ────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
interface KpiCardProps {
|
|||
|
|
label: string;
|
|||
|
|
value: number;
|
|||
|
|
unit?: string;
|
|||
|
|
delta?: number | null;
|
|||
|
|
deltaLabel?: string;
|
|||
|
|
color?: string;
|
|||
|
|
bg?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function KpiCard({ label, value, unit = '원', delta, deltaLabel, color = COLOR_PRIMARY, bg = '#EBF3FF' }: KpiCardProps) {
|
|||
|
|
const renderDelta = () => {
|
|||
|
|
if (delta === null || delta === undefined) return null;
|
|||
|
|
if (delta > 0) return (
|
|||
|
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 2, fontSize: 12, fontWeight: 600, color: COLOR_SUCCESS }}>
|
|||
|
|
<IconTrendingUp size={12} />+{delta.toFixed(1)}%
|
|||
|
|
</span>
|
|||
|
|
);
|
|||
|
|
if (delta < 0) return (
|
|||
|
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 2, fontSize: 12, fontWeight: 600, color: COLOR_ERROR }}>
|
|||
|
|
<IconTrendingDown size={12} />{delta.toFixed(1)}%
|
|||
|
|
</span>
|
|||
|
|
);
|
|||
|
|
return (
|
|||
|
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 2, fontSize: 12, color: GRAY[400] }}>
|
|||
|
|
<IconMinus size={12} />변동없음
|
|||
|
|
</span>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div style={{
|
|||
|
|
background: '#ffffff',
|
|||
|
|
borderRadius: RADIUS.lg,
|
|||
|
|
border: `1px solid ${GRAY[100]}`,
|
|||
|
|
boxShadow: SHADOW.sm,
|
|||
|
|
padding: '24px 28px',
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
gap: 12,
|
|||
|
|
}}>
|
|||
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|||
|
|
<Text style={{ fontSize: 13, fontWeight: 500, color: GRAY[500] }}>{label}</Text>
|
|||
|
|
<div style={{
|
|||
|
|
width: 36, height: 36, borderRadius: 10,
|
|||
|
|
background: bg, color,
|
|||
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|||
|
|
}}>
|
|||
|
|
<IconTrendingUp size={18} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
|
|||
|
|
<span style={{
|
|||
|
|
fontSize: 34, fontWeight: 700, color: GRAY[800], lineHeight: 1,
|
|||
|
|
fontFeatureSettings: "'tnum'", fontVariantNumeric: 'tabular-nums',
|
|||
|
|
}}>
|
|||
|
|
{fmtM(value)}
|
|||
|
|
</span>
|
|||
|
|
<Text style={{ fontSize: 14, color: GRAY[500] }}>{unit}</Text>
|
|||
|
|
</div>
|
|||
|
|
{(delta !== null && delta !== undefined) && (
|
|||
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|||
|
|
{renderDelta()}
|
|||
|
|
{deltaLabel && <Text style={{ fontSize: 12, color: GRAY[400] }}>{deltaLabel}</Text>}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ────────────────────────────────────────────────────────
|
|||
|
|
// AG Grid 컬럼 정의
|
|||
|
|
// ────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
const COLUMNS: ColDef<MonthlySummaryRow>[] = [
|
|||
|
|
{ field: 'yyyymm', headerName: '정산월', width: 110, pinned: 'left' },
|
|||
|
|
{ field: 'agentCount', headerName: '설계사수', width: 100, type: 'numericColumn', valueFormatter: (p) => fmt(p.value ?? 0) },
|
|||
|
|
{ field: 'totalGross', headerName: '총수수료', flex: 1, type: 'numericColumn', valueFormatter: (p) => fmt(p.value ?? 0) },
|
|||
|
|
{ field: 'totalTax', headerName: '총공제(세)', flex: 1, type: 'numericColumn', valueFormatter: (p) => fmt(p.value ?? 0) },
|
|||
|
|
{ field: 'totalNet', headerName: '총지급', flex: 1, type: 'numericColumn', valueFormatter: (p) => fmt(p.value ?? 0) },
|
|||
|
|
{ field: 'totalChargeback', headerName: '환수', flex: 1, type: 'numericColumn', valueFormatter: (p) => fmt(p.value ?? 0) },
|
|||
|
|
{ field: 'totalIncentive', headerName: '시책', flex: 1, type: 'numericColumn', valueFormatter: (p) => fmt(p.value ?? 0) },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// ────────────────────────────────────────────────────────
|
|||
|
|
// 클라이언트 사이드 엑셀 내보내기 (xlsx 없음 — CSV 대체)
|
|||
|
|
// ────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
function exportCsv(rows: MonthlySummaryRow[]) {
|
|||
|
|
const headers = ['정산월', '설계사수', '총수수료', '총공제', '총지급', '환수', '시책'];
|
|||
|
|
const lines = [
|
|||
|
|
headers.join(','),
|
|||
|
|
...rows.map((r) =>
|
|||
|
|
[r.yyyymm, r.agentCount, r.totalGross, r.totalTax, r.totalNet, r.totalChargeback, r.totalIncentive].join(','),
|
|||
|
|
),
|
|||
|
|
];
|
|||
|
|
const blob = new Blob(['' + lines.join('\n')], { type: 'text/csv;charset=utf-8;' });
|
|||
|
|
const link = document.createElement('a');
|
|||
|
|
link.href = URL.createObjectURL(blob);
|
|||
|
|
link.download = `월별정산요약_${dayjs().format('YYYYMMDD')}.csv`;
|
|||
|
|
link.click();
|
|||
|
|
URL.revokeObjectURL(link.href);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ────────────────────────────────────────────────────────
|
|||
|
|
// 메인 컴포넌트
|
|||
|
|
// ────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
export default function KpiMonthlySummary() {
|
|||
|
|
const [params, setParams] = useState<KpiSearchParam>({
|
|||
|
|
fromMonth: dayjs().subtract(11, 'month').format('YYYYMM'),
|
|||
|
|
toMonth: dayjs().format('YYYYMM'),
|
|||
|
|
pageSize: 100,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const { data, isLoading, isError } = useQuery({
|
|||
|
|
queryKey: ['kpi', 'monthly', params],
|
|||
|
|
queryFn: () => kpiApi.monthlySummary(params),
|
|||
|
|
retry: false,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const rows = data?.list ?? [];
|
|||
|
|
|
|||
|
|
// KPI 카드: 최신월 / 전월 / YTD 합산
|
|||
|
|
const thisMonth = rows[rows.length - 1];
|
|||
|
|
const prevMonth = rows.length >= 2 ? rows[rows.length - 2] : undefined;
|
|||
|
|
const ytdGross = rows.reduce((s, r) => s + (r.totalGross ?? 0), 0);
|
|||
|
|
const grossDelta = thisMonth && prevMonth
|
|||
|
|
? calcPct(thisMonth.totalGross, prevMonth.totalGross)
|
|||
|
|
: null;
|
|||
|
|
|
|||
|
|
// 합계행
|
|||
|
|
const pinnedRow = rows.length > 0 ? {
|
|||
|
|
yyyymm: '합계',
|
|||
|
|
agentCount: rows.reduce((s, r) => s + r.agentCount, 0),
|
|||
|
|
totalGross: rows.reduce((s, r) => s + r.totalGross, 0),
|
|||
|
|
totalTax: rows.reduce((s, r) => s + r.totalTax, 0),
|
|||
|
|
totalNet: rows.reduce((s, r) => s + r.totalNet, 0),
|
|||
|
|
totalChargeback: rows.reduce((s, r) => s + r.totalChargeback, 0),
|
|||
|
|
totalIncentive: rows.reduce((s, r) => s + r.totalIncentive, 0),
|
|||
|
|
} as Partial<MonthlySummaryRow> : undefined;
|
|||
|
|
|
|||
|
|
// 차트 데이터 — 최근 12개월
|
|||
|
|
const chartData = useMemo(() =>
|
|||
|
|
rows.slice(-12).map((r) => ({
|
|||
|
|
month: r.yyyymm.slice(4, 6) + '월',
|
|||
|
|
총수수료: Math.round(r.totalGross / 1_000_000),
|
|||
|
|
총지급: Math.round(r.totalNet / 1_000_000),
|
|||
|
|
환수: Math.round(r.totalChargeback / 1_000_000),
|
|||
|
|
})),
|
|||
|
|
[rows]);
|
|||
|
|
|
|||
|
|
const handleSearch = (values: Record<string, unknown>) => {
|
|||
|
|
setParams({
|
|||
|
|
fromMonth: values.fromMonth as string | undefined,
|
|||
|
|
toMonth: values.toMonth as string | undefined,
|
|||
|
|
pageSize: 100,
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<PageContainer
|
|||
|
|
title="월별 정산 요약"
|
|||
|
|
description="정산월별 수수료 / 공제 / 지급 합계 — Materialized View"
|
|||
|
|
extra={
|
|||
|
|
<Button
|
|||
|
|
icon={<IconDownload size={14} />}
|
|||
|
|
onClick={() => rows.length && exportCsv(rows)}
|
|||
|
|
disabled={!rows.length}
|
|||
|
|
style={{ display: 'flex', alignItems: 'center', gap: 4 }}
|
|||
|
|
>
|
|||
|
|
CSV 다운로드
|
|||
|
|
</Button>
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{/* 검색 */}
|
|||
|
|
<SearchForm
|
|||
|
|
conditions={[
|
|||
|
|
{ type: 'month', name: 'fromMonth', label: '시작 월', span: 6 },
|
|||
|
|
{ type: 'month', name: 'toMonth', label: '종료 월', span: 6 },
|
|||
|
|
]}
|
|||
|
|
onSearch={handleSearch}
|
|||
|
|
onReset={() => setParams({ fromMonth: dayjs().subtract(11, 'month').format('YYYYMM'), toMonth: dayjs().format('YYYYMM'), pageSize: 100 })}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{isError && (
|
|||
|
|
<Alert type="warning" showIcon
|
|||
|
|
message="API 미응답"
|
|||
|
|
description="/api/kpi/monthly-summary 를 확인하세요."
|
|||
|
|
style={{ marginBottom: 16 }}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* KPI 카드 3개 */}
|
|||
|
|
<Row gutter={20} style={{ marginBottom: 20 }}>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<KpiCard
|
|||
|
|
label="당월 총수수료"
|
|||
|
|
value={thisMonth?.totalGross ?? 0}
|
|||
|
|
unit="원"
|
|||
|
|
delta={grossDelta}
|
|||
|
|
deltaLabel="전월比"
|
|||
|
|
color={COLOR_PRIMARY}
|
|||
|
|
bg="#EBF3FF"
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<KpiCard
|
|||
|
|
label="당월 총지급"
|
|||
|
|
value={thisMonth?.totalNet ?? 0}
|
|||
|
|
unit="원"
|
|||
|
|
color={COLOR_SUCCESS}
|
|||
|
|
bg="#E8FAF3"
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<KpiCard
|
|||
|
|
label={`YTD 누계 (${dayjs().format('YYYY')})`}
|
|||
|
|
value={ytdGross}
|
|||
|
|
unit="원"
|
|||
|
|
color="#7C3AED"
|
|||
|
|
bg="#F3EEFF"
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
{/* 차트 */}
|
|||
|
|
<ProCard
|
|||
|
|
title={<span style={{ fontSize: 15, fontWeight: 700, color: GRAY[800] }}>최근 12개월 수수료 추이</span>}
|
|||
|
|
subTitle={<span style={{ fontSize: 13, color: GRAY[400] }}>단위: 백만원</span>}
|
|||
|
|
headerBordered
|
|||
|
|
style={{
|
|||
|
|
background: '#ffffff', borderRadius: RADIUS.lg,
|
|||
|
|
border: `1px solid ${GRAY[100]}`, boxShadow: SHADOW.sm,
|
|||
|
|
marginBottom: 20,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<ResponsiveContainer width="100%" height={260}>
|
|||
|
|
{chartData.length > 0 ? (
|
|||
|
|
<BarChart data={chartData} margin={{ top: 8, right: 16, left: -8, bottom: 0 }}>
|
|||
|
|
<CartesianGrid strokeDasharray="3 3" stroke={GRAY[100]} vertical={false} />
|
|||
|
|
<XAxis dataKey="month" tick={{ fontSize: 12, fill: GRAY[500] }} axisLine={false} tickLine={false} />
|
|||
|
|
<YAxis tick={{ fontSize: 12, fill: GRAY[500] }} axisLine={false} tickLine={false} />
|
|||
|
|
<Tooltip
|
|||
|
|
contentStyle={{ borderRadius: 12, border: `1px solid ${GRAY[100]}`, boxShadow: SHADOW.md, fontSize: 13 }}
|
|||
|
|
formatter={(v: number) => [`${v}백만`, '']}
|
|||
|
|
/>
|
|||
|
|
<Legend wrapperStyle={{ fontSize: 12, paddingTop: 8 }} />
|
|||
|
|
<Bar dataKey="총수수료" fill={COLOR_PRIMARY} radius={[4, 4, 0, 0]} />
|
|||
|
|
<Bar dataKey="총지급" fill={COLOR_SUCCESS} radius={[4, 4, 0, 0]} />
|
|||
|
|
<Bar dataKey="환수" fill={COLOR_ERROR} radius={[4, 4, 0, 0]} />
|
|||
|
|
</BarChart>
|
|||
|
|
) : (
|
|||
|
|
<AreaChart data={[]} margin={{ top: 8, right: 16, left: -8, bottom: 0 }}>
|
|||
|
|
<XAxis /><YAxis />
|
|||
|
|
</AreaChart>
|
|||
|
|
)}
|
|||
|
|
</ResponsiveContainer>
|
|||
|
|
</ProCard>
|
|||
|
|
|
|||
|
|
{/* AG Grid */}
|
|||
|
|
<ProCard
|
|||
|
|
style={{
|
|||
|
|
background: '#ffffff', borderRadius: RADIUS.lg,
|
|||
|
|
border: `1px solid ${GRAY[100]}`, boxShadow: SHADOW.sm,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<DataGrid<MonthlySummaryRow>
|
|||
|
|
rows={rows}
|
|||
|
|
columns={COLUMNS}
|
|||
|
|
loading={isLoading}
|
|||
|
|
height={480}
|
|||
|
|
pinnedBottomRow={pinnedRow}
|
|||
|
|
/>
|
|||
|
|
</ProCard>
|
|||
|
|
</PageContainer>
|
|||
|
|
);
|
|||
|
|
}
|