권혁성
81373281ea
- AccountSubjectSelect 공통 컴포넌트 신규 (계정과목 선택 통합) - 일반전표 수동입력/수정 모달 계정과목 연동 - 세금계산서 관리 타입 시스템 재정의 + 전표 연동 모달 - 어음관리 리팩토링 + 상품권 접대비 연동 - 카드거래 조회 전표 연동 모달 개선 - 악성채권/입출금/매입매출/거래처 상세 뷰 보강
512 lines
18 KiB
TypeScript
512 lines
18 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* 매입관리 - UniversalListPage 마이그레이션
|
|
*
|
|
* 기존 IntegratedListTemplateV2 → UniversalListPage config 기반으로 변환
|
|
* - 클라이언트 사이드 필터링 (검색, 필터, 정렬)
|
|
* - Stats 카드 (단순 표시, 클릭 없음)
|
|
* - beforeTableContent (계정과목명 Select + 저장 버튼)
|
|
* - tableHeaderActions (4개 인라인 필터: 거래처, 매입유형, 발행여부, 정렬)
|
|
* - tableFooter (합계 행)
|
|
* - Switch 토글 (세금계산서 수취)
|
|
* - 커스텀 Dialog (계정과목명 저장) - UniversalListPage 외부 유지
|
|
* - deleteConfirmMessage로 삭제 다이얼로그 처리
|
|
*/
|
|
|
|
import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useDateRange } from '@/hooks';
|
|
import { toast } from 'sonner';
|
|
import {
|
|
Receipt,
|
|
Save,
|
|
Search,
|
|
} from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
// Badge, getPresetStyle removed (매입유형/연결문서 컬럼 삭제)
|
|
import { Switch } from '@/components/ui/switch';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import { TableRow, TableCell } from '@/components/ui/table';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import {
|
|
UniversalListPage,
|
|
type UniversalListConfig,
|
|
type SelectionHandlers,
|
|
type RowClickHandlers,
|
|
type StatCard,
|
|
type FilterFieldConfig,
|
|
} from '@/components/templates/UniversalListPage';
|
|
import { MobileCard } from '@/components/organisms/MobileCard';
|
|
import type { PurchaseRecord } from './types';
|
|
import {
|
|
SORT_OPTIONS,
|
|
TAX_INVOICE_RECEIVED_FILTER_OPTIONS,
|
|
ACCOUNT_SUBJECT_SELECTOR_OPTIONS,
|
|
} from './types';
|
|
import { getPurchases, togglePurchaseTaxInvoice, deletePurchase } from './actions';
|
|
import { invalidateDashboard } from '@/lib/dashboard-invalidation';
|
|
import { formatNumber } from '@/lib/utils/amount';
|
|
|
|
// ===== 테이블 컬럼 정의 =====
|
|
const tableColumns = [
|
|
{ key: 'no', label: 'No.', className: 'w-[60px] text-center' },
|
|
{ key: 'purchaseNo', label: '매입번호', sortable: true },
|
|
{ key: 'purchaseDate', label: '매입일', sortable: true },
|
|
{ key: 'vendorName', label: '거래처', sortable: true },
|
|
{ key: 'supplyAmount', label: '공급가액', className: 'text-right', sortable: true },
|
|
{ key: 'vat', label: '부가세', className: 'text-right', sortable: true },
|
|
{ key: 'totalAmount', label: '합계금액', className: 'text-right', sortable: true },
|
|
{ key: 'taxInvoice', label: '세금계산서 수취 확인', className: 'text-center' },
|
|
];
|
|
|
|
export function PurchaseManagement() {
|
|
const router = useRouter();
|
|
|
|
// ===== 외부 상태 (UniversalListPage 외부에서 관리) =====
|
|
const { startDate, endDate, setStartDate, setEndDate } = useDateRange('currentYear');
|
|
const [purchaseData, setPurchaseData] = useState<PurchaseRecord[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const isInitialLoadDone = useRef(false);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
|
|
// 통합 필터 상태 (filterConfig 기반)
|
|
const [filterValues, setFilterValues] = useState<Record<string, string | string[]>>({
|
|
vendor: 'all',
|
|
taxInvoiceReceived: 'all',
|
|
sort: 'latest',
|
|
});
|
|
|
|
// 계정과목명 저장 다이얼로그
|
|
const [selectedAccountSubject, setSelectedAccountSubject] = useState<string>('unset');
|
|
const [showSaveDialog, setShowSaveDialog] = useState(false);
|
|
const [selectedItemsForSave, setSelectedItemsForSave] = useState<Set<string>>(new Set());
|
|
|
|
// ===== API 데이터 로드 =====
|
|
useEffect(() => {
|
|
const loadData = async () => {
|
|
if (!isInitialLoadDone.current) {
|
|
setIsLoading(true);
|
|
}
|
|
try {
|
|
const result = await getPurchases({
|
|
startDate,
|
|
endDate,
|
|
perPage: 100,
|
|
});
|
|
if (result.success) {
|
|
setPurchaseData(result.data);
|
|
} else {
|
|
toast.error(result.error || '매입 목록 조회에 실패했습니다.');
|
|
setPurchaseData([]);
|
|
}
|
|
} catch {
|
|
toast.error('매입 목록 조회 중 오류가 발생했습니다.');
|
|
setPurchaseData([]);
|
|
} finally {
|
|
setIsLoading(false);
|
|
isInitialLoadDone.current = true;
|
|
}
|
|
};
|
|
loadData();
|
|
}, [startDate, endDate]);
|
|
|
|
// ===== 통계 계산 =====
|
|
const stats = useMemo(() => {
|
|
const totalPurchaseAmount = purchaseData.reduce((sum, d) => sum + d.totalAmount, 0);
|
|
const currentMonth = new Date().getMonth();
|
|
const currentYear = new Date().getFullYear();
|
|
const monthlyAmount = purchaseData
|
|
.filter(d => {
|
|
const date = new Date(d.purchaseDate);
|
|
return date.getMonth() === currentMonth && date.getFullYear() === currentYear;
|
|
})
|
|
.reduce((sum, d) => sum + d.totalAmount, 0);
|
|
const taxInvoicePendingCount = purchaseData.filter(d => !d.taxInvoiceReceived).length;
|
|
return { totalPurchaseAmount, monthlyAmount, taxInvoicePendingCount };
|
|
}, [purchaseData]);
|
|
|
|
// ===== 거래처 목록 (필터용) =====
|
|
const vendorOptions = useMemo(() => {
|
|
const uniqueVendors = [...new Set(purchaseData.map(d => d.vendorName).filter(v => v && v.trim() !== ''))];
|
|
return uniqueVendors.map(v => ({ value: v, label: v }));
|
|
}, [purchaseData]);
|
|
|
|
// ===== filterConfig 정의 (PC/모바일 자동 분기) =====
|
|
const filterConfig: FilterFieldConfig[] = useMemo(() => [
|
|
{
|
|
key: 'vendor',
|
|
label: '거래처',
|
|
type: 'single',
|
|
options: vendorOptions,
|
|
allOptionLabel: '거래처 전체',
|
|
},
|
|
{
|
|
key: 'taxInvoiceReceived',
|
|
label: '세금계산서 수취여부',
|
|
type: 'single',
|
|
options: TAX_INVOICE_RECEIVED_FILTER_OPTIONS.filter(o => o.value !== 'all'),
|
|
allOptionLabel: '전체',
|
|
},
|
|
{
|
|
key: 'sort',
|
|
label: '정렬',
|
|
type: 'single',
|
|
options: SORT_OPTIONS,
|
|
allOptionLabel: '최신순',
|
|
},
|
|
], [vendorOptions]);
|
|
|
|
// 필터 변경 핸들러
|
|
const handleFilterChange = useCallback((key: string, value: string | string[]) => {
|
|
setFilterValues(prev => ({ ...prev, [key]: value }));
|
|
}, []);
|
|
|
|
// 필터 초기화 핸들러
|
|
const handleFilterReset = useCallback(() => {
|
|
setFilterValues({
|
|
vendor: 'all',
|
|
taxInvoiceReceived: 'all',
|
|
sort: 'latest',
|
|
});
|
|
}, []);
|
|
|
|
// ===== 핸들러 =====
|
|
const handleRowClick = useCallback((item: PurchaseRecord) => {
|
|
router.push(`/ko/accounting/purchase/${item.id}?mode=view`);
|
|
}, [router]);
|
|
|
|
// 토글 핸들러
|
|
const handleTaxInvoiceToggle = useCallback(async (itemId: string, checked: boolean) => {
|
|
setPurchaseData(prev => prev.map(item =>
|
|
item.id === itemId ? { ...item, taxInvoiceReceived: checked } : item
|
|
));
|
|
const result = await togglePurchaseTaxInvoice(itemId, checked);
|
|
if (!result.success) {
|
|
setPurchaseData(prev => prev.map(item =>
|
|
item.id === itemId ? { ...item, taxInvoiceReceived: !checked } : item
|
|
));
|
|
toast.error(result.error || '세금계산서 수취 상태 변경에 실패했습니다.');
|
|
}
|
|
}, []);
|
|
|
|
// 계정과목명 저장 핸들러
|
|
const handleSaveAccountSubject = useCallback((selectedItems: Set<string>) => {
|
|
if (selectedItems.size === 0) {
|
|
toast.warning('변경할 매입 항목을 선택해주세요.');
|
|
return;
|
|
}
|
|
setSelectedItemsForSave(selectedItems);
|
|
setShowSaveDialog(true);
|
|
}, []);
|
|
|
|
const handleConfirmSaveAccountSubject = useCallback(() => {
|
|
// TODO: API 호출로 저장
|
|
toast.success('계정과목명이 변경되었습니다.');
|
|
setShowSaveDialog(false);
|
|
setSelectedItemsForSave(new Set());
|
|
}, [selectedAccountSubject]);
|
|
|
|
// ===== 테이블 합계 계산 =====
|
|
const tableTotals = useMemo(() => {
|
|
const totalSupplyAmount = purchaseData.reduce((sum, item) => sum + item.supplyAmount, 0);
|
|
const totalVat = purchaseData.reduce((sum, item) => sum + item.vat, 0);
|
|
const totalAmount = purchaseData.reduce((sum, item) => sum + item.totalAmount, 0);
|
|
return { totalSupplyAmount, totalVat, totalAmount };
|
|
}, [purchaseData]);
|
|
|
|
// ===== UniversalListPage Config =====
|
|
const config: UniversalListConfig<PurchaseRecord> = useMemo(
|
|
() => ({
|
|
// 페이지 기본 정보
|
|
title: '매입관리',
|
|
description: '매입 내역을 등록하고 관리합니다',
|
|
icon: Receipt,
|
|
basePath: '/accounting/purchase',
|
|
|
|
// ID 추출
|
|
idField: 'id',
|
|
|
|
// API 액션
|
|
actions: {
|
|
getList: async () => {
|
|
return {
|
|
success: true,
|
|
data: purchaseData,
|
|
totalCount: purchaseData.length,
|
|
};
|
|
},
|
|
deleteItem: async (id: string) => {
|
|
const result = await deletePurchase(id);
|
|
if (result.success) {
|
|
invalidateDashboard('purchase');
|
|
setPurchaseData(prev => prev.filter(item => item.id !== id));
|
|
toast.success('매입이 삭제되었습니다.');
|
|
}
|
|
return { success: result.success, error: result.error };
|
|
},
|
|
},
|
|
|
|
// 테이블 컬럼
|
|
columns: tableColumns,
|
|
|
|
// 클라이언트 사이드 필터링
|
|
clientSideFiltering: true,
|
|
itemsPerPage: 20,
|
|
|
|
// 데이터 변경 콜백
|
|
onDataChange: (data) => setPurchaseData(data),
|
|
|
|
// 검색 필터
|
|
searchPlaceholder: '매입번호, 거래처명 검색...',
|
|
searchFilter: (item, searchValue) => {
|
|
const search = searchValue.toLowerCase();
|
|
return (
|
|
item.purchaseNo.toLowerCase().includes(search) ||
|
|
item.vendorName.toLowerCase().includes(search)
|
|
);
|
|
},
|
|
|
|
// 커스텀 필터 함수 (filterValues 파라미터 사용)
|
|
customFilterFn: (items, fv) => {
|
|
if (!items || items.length === 0) return items;
|
|
return items.filter((item) => {
|
|
// 검색어 필터
|
|
if (searchQuery) {
|
|
const search = searchQuery.toLowerCase();
|
|
const matchesSearch =
|
|
item.purchaseNo.toLowerCase().includes(search) ||
|
|
item.vendorName.toLowerCase().includes(search);
|
|
if (!matchesSearch) return false;
|
|
}
|
|
|
|
const vendorVal = fv.vendor as string;
|
|
const taxInvoiceReceivedVal = fv.taxInvoiceReceived as string;
|
|
// 거래처 필터
|
|
if (vendorVal !== 'all' && item.vendorName !== vendorVal) {
|
|
return false;
|
|
}
|
|
// 세금계산서 수취여부 필터
|
|
if (taxInvoiceReceivedVal === 'received' && !item.taxInvoiceReceived) {
|
|
return false;
|
|
}
|
|
if (taxInvoiceReceivedVal === 'notReceived' && item.taxInvoiceReceived) {
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
},
|
|
|
|
// 커스텀 정렬 함수 (filterValues 파라미터 사용)
|
|
customSortFn: (items, fv) => {
|
|
const sorted = [...items];
|
|
const sortVal = fv.sort as string;
|
|
switch (sortVal) {
|
|
case 'oldest':
|
|
sorted.sort((a, b) => new Date(a.purchaseDate).getTime() - new Date(b.purchaseDate).getTime());
|
|
break;
|
|
case 'amountHigh':
|
|
sorted.sort((a, b) => b.totalAmount - a.totalAmount);
|
|
break;
|
|
case 'amountLow':
|
|
sorted.sort((a, b) => a.totalAmount - b.totalAmount);
|
|
break;
|
|
default: // latest
|
|
sorted.sort((a, b) => new Date(b.purchaseDate).getTime() - new Date(a.purchaseDate).getTime());
|
|
break;
|
|
}
|
|
return sorted;
|
|
},
|
|
|
|
// 검색창 (공통 컴포넌트에서 자동 생성)
|
|
hideSearch: true,
|
|
searchValue: searchQuery,
|
|
onSearchChange: setSearchQuery,
|
|
|
|
// 공통 헤더 옵션
|
|
dateRangeSelector: {
|
|
enabled: true,
|
|
showPresets: true,
|
|
startDate,
|
|
endDate,
|
|
onStartDateChange: setStartDate,
|
|
onEndDateChange: setEndDate,
|
|
},
|
|
|
|
// 헤더 액션: 계정과목명 Select + 저장 버튼
|
|
headerActions: ({ selectedItems }) => (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-medium text-gray-700 whitespace-nowrap">계정과목명</span>
|
|
<Select value={selectedAccountSubject} onValueChange={setSelectedAccountSubject}>
|
|
<SelectTrigger className="min-w-[120px] w-auto">
|
|
<SelectValue placeholder="선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{ACCOUNT_SUBJECT_SELECTOR_OPTIONS.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Button onClick={() => handleSaveAccountSubject(selectedItems)} size="sm">
|
|
<Save className="h-4 w-4 mr-1" />
|
|
저장
|
|
</Button>
|
|
</div>
|
|
),
|
|
|
|
// 통합 필터 시스템 (PC: 인라인, 모바일: 바텀시트 자동 분기)
|
|
filterConfig,
|
|
initialFilters: filterValues,
|
|
filterTitle: '매입 필터',
|
|
|
|
// Stats 카드
|
|
computeStats: (): StatCard[] => [
|
|
{ label: '총매입', value: `${formatNumber(stats.totalPurchaseAmount)}원`, icon: Receipt, iconColor: 'text-blue-500' },
|
|
{ label: '당월 매입', value: `${formatNumber(stats.monthlyAmount)}원`, icon: Receipt, iconColor: 'text-green-500' },
|
|
{ label: '세금계산서 수취 미확인', value: `${stats.taxInvoicePendingCount}건`, icon: Receipt, iconColor: 'text-red-500' },
|
|
],
|
|
|
|
// 테이블 하단 합계 행
|
|
tableFooter: (
|
|
<TableRow className="bg-muted/50 font-medium">
|
|
<TableCell className="text-center"></TableCell>
|
|
<TableCell className="text-center"></TableCell>
|
|
<TableCell className="font-bold">합계</TableCell>
|
|
<TableCell></TableCell>
|
|
<TableCell className="text-right font-bold">{formatNumber(tableTotals.totalSupplyAmount)}</TableCell>
|
|
<TableCell className="text-right font-bold">{formatNumber(tableTotals.totalVat)}</TableCell>
|
|
<TableCell className="text-right font-bold">{formatNumber(tableTotals.totalAmount)}</TableCell>
|
|
<TableCell></TableCell>
|
|
</TableRow>
|
|
),
|
|
|
|
// 삭제 확인 메시지
|
|
deleteConfirmMessage: {
|
|
title: '매입 삭제',
|
|
description: '이 매입 항목을 삭제하시겠습니까? 삭제된 데이터는 복구할 수 없습니다.',
|
|
},
|
|
|
|
// 테이블 행 렌더링
|
|
renderTableRow: (
|
|
item: PurchaseRecord,
|
|
index: number,
|
|
globalIndex: number,
|
|
handlers: SelectionHandlers & RowClickHandlers<PurchaseRecord>
|
|
) => (
|
|
<TableRow
|
|
key={item.id}
|
|
className="hover:bg-muted/50 cursor-pointer"
|
|
onClick={() => handleRowClick(item)}
|
|
>
|
|
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
|
<Checkbox checked={handlers.isSelected} onCheckedChange={handlers.onToggle} />
|
|
</TableCell>
|
|
<TableCell className="text-center">{globalIndex}</TableCell>
|
|
<TableCell className="text-sm font-medium">{item.purchaseNo}</TableCell>
|
|
<TableCell>{item.purchaseDate}</TableCell>
|
|
<TableCell>{item.vendorName}</TableCell>
|
|
<TableCell className="text-right">{formatNumber(item.supplyAmount)}</TableCell>
|
|
<TableCell className="text-right">{formatNumber(item.vat)}</TableCell>
|
|
<TableCell className="text-right font-medium">{formatNumber(item.totalAmount)}</TableCell>
|
|
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
|
<div className="flex items-center justify-center gap-1">
|
|
<Switch
|
|
checked={item.taxInvoiceReceived}
|
|
onCheckedChange={(checked) => handleTaxInvoiceToggle(item.id, checked)}
|
|
className="data-[state=checked]:bg-orange-500"
|
|
/>
|
|
{item.taxInvoiceReceived && <span className="text-xs text-orange-500 font-medium">수취</span>}
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
),
|
|
|
|
// 모바일 카드 렌더링
|
|
renderMobileCard: (
|
|
item: PurchaseRecord,
|
|
index: number,
|
|
globalIndex: number,
|
|
handlers: SelectionHandlers & RowClickHandlers<PurchaseRecord>
|
|
) => (
|
|
<MobileCard
|
|
key={item.id}
|
|
title={item.vendorName}
|
|
subtitle={item.purchaseNo}
|
|
isSelected={handlers.isSelected}
|
|
onToggle={handlers.onToggle}
|
|
onClick={() => handleRowClick(item)}
|
|
details={[
|
|
{ label: '매입일', value: item.purchaseDate },
|
|
{ label: '공급가액', value: `${formatNumber(item.supplyAmount)}원` },
|
|
{ label: '합계금액', value: `${formatNumber(item.totalAmount)}원` },
|
|
]}
|
|
/>
|
|
),
|
|
}),
|
|
[
|
|
purchaseData,
|
|
startDate,
|
|
endDate,
|
|
stats,
|
|
filterConfig,
|
|
filterValues,
|
|
selectedAccountSubject,
|
|
tableTotals,
|
|
searchQuery,
|
|
handleRowClick,
|
|
handleTaxInvoiceToggle,
|
|
handleSaveAccountSubject,
|
|
]
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<UniversalListPage config={config} initialData={purchaseData} externalIsLoading={isLoading} />
|
|
|
|
{/* 계정과목명 저장 확인 다이얼로그 */}
|
|
<Dialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>계정과목명 변경</DialogTitle>
|
|
<DialogDescription>
|
|
{selectedItemsForSave.size}개의 매입유형을{' '}
|
|
<span className="font-semibold text-orange-500">
|
|
{ACCOUNT_SUBJECT_SELECTOR_OPTIONS.find(o => o.value === selectedAccountSubject)?.label}
|
|
</span>
|
|
(으)로 모두 변경하시겠습니까?
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter className="gap-3">
|
|
<Button variant="outline" onClick={() => setShowSaveDialog(false)}>
|
|
취소
|
|
</Button>
|
|
<Button
|
|
onClick={handleConfirmSaveAccountSubject}
|
|
className="bg-blue-500 hover:bg-blue-600"
|
|
>
|
|
확인
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
}
|