f344dc7d00
- 회계 모듈 전면 개선: 청구/입금/출금/매입/매출/세금계산서/일반전표/거래처원장 등 - 견적 모듈 금액 포맷/할인/수식/미리보기 등 코드 정리 - 설정 모듈: 계정관리/직급/직책/권한 상세 간소화 - 생산 모듈: 작업지시서/작업자화면/검수 문서 코드 정리 - UniversalListPage 엑셀 다운로드 및 필터 기능 확장 - 대시보드/게시판/수주 등 날짜 유틸 공통화 적용 - claudedocs 문서 인덱스 업데이트 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
278 lines
10 KiB
TypeScript
278 lines
10 KiB
TypeScript
/**
|
||
* 견적 금액 요약 패널
|
||
*
|
||
* - 개소별 합계 (왼쪽) - 클릭하여 상세 확인
|
||
* - 상세별 합계 (오른쪽) - 선택 개소의 카테고리별 금액 및 품목 상세
|
||
* - 스크롤 가능한 상세 영역
|
||
*/
|
||
|
||
"use client";
|
||
|
||
import { useMemo } from "react";
|
||
import { Coins } from "lucide-react";
|
||
|
||
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
|
||
import { formatNumber } from "@/lib/utils/amount";
|
||
|
||
import type { LocationItem } from "./QuoteRegistration";
|
||
|
||
// =============================================================================
|
||
// 목데이터 - 상세별 합계 (공정별 + 품목 상세)
|
||
// =============================================================================
|
||
|
||
interface DetailItem {
|
||
name: string;
|
||
quantity: number;
|
||
unitPrice: number;
|
||
totalPrice: number;
|
||
}
|
||
|
||
interface DetailCategory {
|
||
label: string;
|
||
count: number;
|
||
amount: number;
|
||
items: DetailItem[];
|
||
}
|
||
|
||
// Mock 데이터 제거 - bomResult 없으면 빈 배열 반환
|
||
|
||
// =============================================================================
|
||
// Props
|
||
// =============================================================================
|
||
|
||
interface QuoteSummaryPanelProps {
|
||
locations: LocationItem[];
|
||
selectedLocationId: string | null;
|
||
onSelectLocation: (id: string) => void;
|
||
}
|
||
|
||
// =============================================================================
|
||
// 컴포넌트
|
||
// =============================================================================
|
||
|
||
export function QuoteSummaryPanel({
|
||
locations,
|
||
selectedLocationId,
|
||
onSelectLocation,
|
||
}: QuoteSummaryPanelProps) {
|
||
// ---------------------------------------------------------------------------
|
||
// 계산된 값
|
||
// ---------------------------------------------------------------------------
|
||
|
||
// 선택된 개소
|
||
const selectedLocation = useMemo(() => {
|
||
return locations.find((loc) => loc.id === selectedLocationId) || null;
|
||
}, [locations, selectedLocationId]);
|
||
|
||
// 총 금액
|
||
const totalAmount = useMemo(() => {
|
||
return locations.reduce((sum, loc) => sum + (loc.totalPrice || 0), 0);
|
||
}, [locations]);
|
||
|
||
// 개소별 합계
|
||
const locationTotals = useMemo(() => {
|
||
return locations.map((loc) => ({
|
||
id: loc.id,
|
||
label: `${loc.floor} / ${loc.code}`,
|
||
productCode: loc.productCode,
|
||
quantity: loc.quantity,
|
||
unitPrice: loc.unitPrice || 0,
|
||
totalPrice: loc.totalPrice || 0,
|
||
}));
|
||
}, [locations]);
|
||
|
||
// 선택 개소의 상세별 합계 (공정별)
|
||
const detailTotals = useMemo((): DetailCategory[] => {
|
||
// bomResult가 없으면 빈 배열 반환
|
||
if (!selectedLocation?.bomResult?.subtotals) {
|
||
return [];
|
||
}
|
||
|
||
const subtotals = selectedLocation.bomResult.subtotals;
|
||
const groupedItems = selectedLocation.bomResult.grouped_items;
|
||
const result: DetailCategory[] = [];
|
||
|
||
Object.entries(subtotals).forEach(([key, value]) => {
|
||
if (typeof value === "object" && value !== null) {
|
||
// grouped_items에서 items 가져오기 (subtotals에는 items가 없을 수 있음)
|
||
const groupItemsRaw = groupedItems?.[key]?.items || (value as Record<string, unknown>).items as Array<unknown> || [];
|
||
// DetailItem 형식으로 변환
|
||
const groupItems: DetailItem[] = (groupItemsRaw as Array<{
|
||
item_name?: string;
|
||
name?: string;
|
||
quantity?: number;
|
||
unit_price?: number;
|
||
total_price?: number;
|
||
}>).map((item) => ({
|
||
name: item.item_name || item.name || "",
|
||
quantity: item.quantity || 0,
|
||
unitPrice: item.unit_price || 0,
|
||
totalPrice: item.total_price || 0,
|
||
}));
|
||
const obj = value as { name?: string; count?: number; subtotal?: number };
|
||
result.push({
|
||
label: obj.name || key,
|
||
count: obj.count || 0,
|
||
amount: obj.subtotal || 0,
|
||
items: groupItems,
|
||
});
|
||
} else if (typeof value === "number") {
|
||
result.push({
|
||
label: key,
|
||
count: 0,
|
||
amount: value,
|
||
items: [],
|
||
});
|
||
}
|
||
});
|
||
|
||
return result;
|
||
}, [selectedLocation]);
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// 렌더링
|
||
// ---------------------------------------------------------------------------
|
||
|
||
return (
|
||
<Card className="border-gray-200">
|
||
<CardHeader className="pb-3 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-blue-200">
|
||
<CardTitle className="text-base font-semibold flex items-center gap-2">
|
||
<Coins className="h-5 w-5 text-blue-600" />
|
||
견적 금액 요약
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="p-0">
|
||
{/* 좌우 분할 */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
|
||
{/* 왼쪽: 개소별 합계 */}
|
||
<div className="p-4">
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<span className="text-blue-500">📍</span>
|
||
<h4 className="font-semibold text-gray-700">개소별 합계</h4>
|
||
</div>
|
||
|
||
{locations.length === 0 ? (
|
||
<div className="text-center text-gray-500 py-6">
|
||
<p className="text-sm">개소를 추가해주세요</p>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-2">
|
||
{locationTotals.map((loc) => (
|
||
<div
|
||
key={loc.id}
|
||
className={`flex items-center justify-between p-3 rounded-lg cursor-pointer transition-colors ${
|
||
selectedLocationId === loc.id
|
||
? "bg-blue-100 border border-blue-300"
|
||
: "bg-gray-50 hover:bg-gray-100 border border-transparent"
|
||
}`}
|
||
onClick={() => onSelectLocation(loc.id)}
|
||
>
|
||
<div>
|
||
<p className="font-medium">{loc.label}</p>
|
||
<p className="text-xs text-gray-500">
|
||
{loc.productCode} × {loc.quantity}
|
||
</p>
|
||
</div>
|
||
<div className="text-right">
|
||
<p className="text-xs text-gray-500">상세소계</p>
|
||
<p className="font-bold text-blue-600">
|
||
{formatNumber(loc.totalPrice)}
|
||
</p>
|
||
{loc.unitPrice > 0 && (
|
||
<p className="text-xs text-gray-400">
|
||
수량 적용: {formatNumber(loc.unitPrice * loc.quantity)}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 오른쪽: 상세별 합계 */}
|
||
<div className="p-4">
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<span className="text-blue-500">✨</span>
|
||
<h4 className="font-semibold text-gray-700">
|
||
상세별 합계
|
||
{selectedLocation && (
|
||
<span className="text-sm font-normal text-gray-500 ml-2">
|
||
({selectedLocation.floor} / {selectedLocation.code})
|
||
</span>
|
||
)}
|
||
</h4>
|
||
</div>
|
||
|
||
{!selectedLocation ? (
|
||
<div className="text-center text-gray-500 py-6">
|
||
<p className="text-sm">개소를 선택해주세요</p>
|
||
</div>
|
||
) : detailTotals.length === 0 ? (
|
||
<div className="text-center text-gray-500 py-6">
|
||
<p className="text-sm">견적 산출 후 상세 금액이 표시됩니다</p>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-3">
|
||
{detailTotals.map((category, index) => (
|
||
<div key={index} className="bg-blue-50 rounded-lg overflow-hidden border border-blue-200">
|
||
{/* 카테고리 헤더 */}
|
||
<div className="flex items-center justify-between px-3 py-2 bg-blue-100/50">
|
||
<span className="font-semibold text-gray-700">{category.label}</span>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xs text-gray-500">({category.count}개)</span>
|
||
<span className="font-bold text-blue-600">
|
||
{formatNumber(category.amount)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
{/* 품목 상세 목록 */}
|
||
<div className="divide-y divide-blue-100">
|
||
{category.items.map((item, itemIndex) => (
|
||
<div key={itemIndex} className="flex items-center justify-between px-3 py-2 bg-white">
|
||
<div>
|
||
<span className="text-sm text-gray-700">{item.name}</span>
|
||
<p className="text-xs text-gray-400">
|
||
수량: {item.quantity} × 단가: {formatNumber(item.unitPrice)}
|
||
</p>
|
||
</div>
|
||
<span className="text-sm font-medium text-blue-600">
|
||
{formatNumber(item.totalPrice)}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 하단 바: 총 개소 수, 예상 견적금액, 견적 상태 */}
|
||
<div className="bg-gray-900 text-white px-6 py-5 flex items-center justify-between">
|
||
<div className="flex items-center gap-10">
|
||
<div>
|
||
<p className="text-sm text-gray-400">총 개소 수</p>
|
||
<p className="text-4xl font-bold">{locations.length}</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-gray-400">예상 견적금액</p>
|
||
<p className="text-4xl font-bold text-blue-400">
|
||
{formatNumber(totalAmount)}
|
||
<span className="text-xl ml-1">원</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<p className="text-sm text-gray-400">견적 상태</p>
|
||
<span className="inline-block bg-blue-500/20 text-blue-300 border border-blue-500/50 text-lg px-4 py-1 rounded">
|
||
작성중
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|