권혁성
9ad4c8ee9f
- 접대비/복리후생비/매출채권/캘린더 섹션 API 연동 - SummaryNavBar 추가 + mockData/modalConfigs 대규모 리팩토링 - Dashboard transformers 도메인별 분리 - 상세 모달 ScheduleDetailModal 추가
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { Receipt, Moon, UserX, BarChart3, Heart } from 'lucide-react';
|
|
import { AmountCardItem, CheckPointItem, CollapsibleDashboardCard, type SectionColorTheme } from '../components';
|
|
import type { WelfareData } from '../types';
|
|
|
|
// 카드별 아이콘 매핑 (비과세한도초과, 사적사용의심, 특정인편중, 항목별한도초과)
|
|
const CARD_ICONS = [Receipt, Moon, UserX, BarChart3];
|
|
const CARD_THEMES: SectionColorTheme[] = ['red', 'purple', 'orange', 'cyan'];
|
|
|
|
interface WelfareSectionProps {
|
|
data: WelfareData;
|
|
onCardClick?: (cardId: string) => void;
|
|
}
|
|
|
|
export function WelfareSection({ data, onCardClick }: WelfareSectionProps) {
|
|
return (
|
|
<CollapsibleDashboardCard
|
|
icon={<Heart style={{ color: '#ffffff' }} className="h-5 w-5" />}
|
|
title="복리후생비 현황"
|
|
subtitle="복리후생비 사용 현황"
|
|
>
|
|
<div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3 xs:gap-4 mb-4">
|
|
{data.cards.map((card, idx) => (
|
|
<AmountCardItem
|
|
key={card.id}
|
|
card={card}
|
|
onClick={onCardClick ? () => onCardClick(card.id) : undefined}
|
|
icon={CARD_ICONS[idx] || Heart}
|
|
colorTheme={CARD_THEMES[idx] || 'emerald'}
|
|
showTrend={!!card.previousLabel}
|
|
trendValue={card.previousLabel}
|
|
trendDirection="up"
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{data.checkPoints.length > 0 && (
|
|
<div className="border-t pt-4 space-y-1">
|
|
{data.checkPoints.map((cp) => (
|
|
<CheckPointItem key={cp.id} checkpoint={cp} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</CollapsibleDashboardCard>
|
|
);
|
|
}
|