798 lines
27 KiB
TypeScript
798 lines
27 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState, useCallback, useMemo, useRef } from "react";
|
|
import { ComponentRendererProps } from "@/types/component";
|
|
import {
|
|
Loader2,
|
|
Package,
|
|
TrendingUp,
|
|
Warehouse,
|
|
CheckCircle,
|
|
Factory,
|
|
Truck,
|
|
Plus,
|
|
X,
|
|
} from "lucide-react";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { toast } from "sonner";
|
|
import {
|
|
ShippingPlanEditorConfig,
|
|
ItemGroup,
|
|
PlanDetailRow,
|
|
ItemAggregation,
|
|
} from "./types";
|
|
import { getShippingPlanAggregate, batchSaveShippingPlans } from "@/lib/api/shipping";
|
|
|
|
export interface ShippingPlanEditorComponentProps
|
|
extends ComponentRendererProps {}
|
|
|
|
export const ShippingPlanEditorComponent: React.FC<
|
|
ShippingPlanEditorComponentProps
|
|
> = ({ component, isDesignMode = false, groupedData, formData, onFormDataChange, onClose, ...props }) => {
|
|
const config = (component?.componentConfig ||
|
|
{}) as ShippingPlanEditorConfig;
|
|
const [itemGroups, setItemGroups] = useState<ItemGroup[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
const [source, setSource] = useState<"master" | "detail">("detail");
|
|
const itemGroupsRef = useRef<ItemGroup[]>([]);
|
|
const sourceRef = useRef<"master" | "detail">("detail");
|
|
|
|
// groupedData에서 선택된 행 추출 (마스터든 디테일이든 그대로)
|
|
const selectedRows = useMemo(() => {
|
|
if (!groupedData) return [];
|
|
if (Array.isArray(groupedData)) return groupedData;
|
|
if (groupedData.selectedRows) return groupedData.selectedRows;
|
|
if (groupedData.data) return groupedData.data;
|
|
return [];
|
|
}, [groupedData]);
|
|
|
|
// 선택된 행의 ID 목록 추출 (문자열)
|
|
const selectedIds = useMemo(() => {
|
|
return selectedRows
|
|
.map((row: any) => String(row.id))
|
|
.filter((id: string) => id && id !== "undefined" && id !== "null");
|
|
}, [selectedRows]);
|
|
|
|
const loadData = useCallback(async () => {
|
|
if (selectedIds.length === 0 || isDesignMode) return;
|
|
|
|
setLoading(true);
|
|
try {
|
|
// ID만 보내면 백엔드에서 소스 감지 + JOIN + 정규화
|
|
const res = await getShippingPlanAggregate(selectedIds);
|
|
|
|
if (!res.success) {
|
|
toast.error("집계 데이터 조회 실패");
|
|
return;
|
|
}
|
|
|
|
setSource(res.source);
|
|
const aggregateData = res.data || {};
|
|
|
|
const groups: ItemGroup[] = Object.entries(aggregateData).map(
|
|
([partCode, data]) => {
|
|
const details: PlanDetailRow[] = [];
|
|
|
|
// 수주별로 기존 계획 합산량 계산
|
|
const existingPlansBySource = new Map<string, number>();
|
|
for (const plan of data.existingPlans || []) {
|
|
const prev = existingPlansBySource.get(plan.sourceId) || 0;
|
|
existingPlansBySource.set(plan.sourceId, prev + plan.planQty);
|
|
}
|
|
|
|
// 신규 행 먼저: 모든 수주에 대해 항상 추가 (분할출하 대응)
|
|
for (const order of data.orders || []) {
|
|
const alreadyPlanned = existingPlansBySource.get(order.sourceId) || 0;
|
|
const remainingBalance = Math.max(0, order.balanceQty - alreadyPlanned);
|
|
details.push({
|
|
type: "new",
|
|
sourceId: order.sourceId,
|
|
orderNo: order.orderNo,
|
|
partnerName: order.partnerName,
|
|
dueDate: order.dueDate,
|
|
balanceQty: remainingBalance,
|
|
planQty: 0,
|
|
planDate: new Date().toISOString().split("T")[0],
|
|
splitKey: `${order.sourceId}_0`,
|
|
});
|
|
}
|
|
|
|
// 기존 출하계획 아래에 표시
|
|
for (const plan of data.existingPlans || []) {
|
|
const matchOrder = data.orders?.find(
|
|
(o) => o.sourceId === plan.sourceId
|
|
);
|
|
details.push({
|
|
type: "existing",
|
|
sourceId: plan.sourceId,
|
|
orderNo: matchOrder?.orderNo || "-",
|
|
partnerName: matchOrder?.partnerName || "-",
|
|
dueDate: matchOrder?.dueDate || "-",
|
|
balanceQty: matchOrder?.balanceQty || 0,
|
|
planQty: plan.planQty,
|
|
existingPlanId: plan.id,
|
|
});
|
|
}
|
|
|
|
// partName: orders에서 가져오기
|
|
const partName =
|
|
data.orders?.[0]?.partName || partCode;
|
|
|
|
return {
|
|
partCode,
|
|
partName,
|
|
aggregation: {
|
|
totalBalance: data.totalBalance,
|
|
totalPlanQty: data.totalPlanQty,
|
|
currentStock: data.currentStock,
|
|
availableStock: data.availableStock,
|
|
inProductionQty: data.inProductionQty,
|
|
},
|
|
details,
|
|
};
|
|
}
|
|
);
|
|
|
|
setItemGroups(groups);
|
|
} catch (err) {
|
|
console.error("[v2-shipping-plan-editor] 데이터 로드 실패:", err);
|
|
toast.error("데이터를 불러오는데 실패했습니다");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [selectedIds, isDesignMode]);
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, [loadData]);
|
|
|
|
// ref 동기화 (이벤트 핸들러에서 최신 state 접근용)
|
|
useEffect(() => {
|
|
itemGroupsRef.current = itemGroups;
|
|
}, [itemGroups]);
|
|
|
|
useEffect(() => {
|
|
sourceRef.current = source;
|
|
}, [source]);
|
|
|
|
// 저장 로직 (ref 기반으로 최신 state 접근, 재구독 방지)
|
|
const savingRef = useRef(false);
|
|
const onCloseRef = useRef(onClose);
|
|
onCloseRef.current = onClose;
|
|
|
|
const configRef = useRef(config);
|
|
configRef.current = config;
|
|
|
|
const handleSave = useCallback(async () => {
|
|
if (savingRef.current) return;
|
|
|
|
const currentGroups = itemGroupsRef.current;
|
|
const currentSource = sourceRef.current;
|
|
const currentConfig = configRef.current;
|
|
|
|
const plans = currentGroups.flatMap((g) =>
|
|
g.details
|
|
.filter((d) => d.type === "new" && d.planQty > 0)
|
|
.map((d) => ({
|
|
sourceId: d.sourceId,
|
|
planQty: d.planQty,
|
|
planDate: d.planDate || new Date().toISOString().split("T")[0],
|
|
balanceQty: d.balanceQty,
|
|
}))
|
|
);
|
|
|
|
if (plans.length === 0) {
|
|
toast.warning("저장할 출하계획이 없습니다. 수량을 입력해주세요.");
|
|
return;
|
|
}
|
|
|
|
// 같은 sourceId별 합산 → 미출하량 초과 검증
|
|
if (!currentConfig.allowOverPlan) {
|
|
const sumBySource = new Map<string, { total: number; balance: number }>();
|
|
for (const p of plans) {
|
|
const prev = sumBySource.get(p.sourceId) || { total: 0, balance: p.balanceQty };
|
|
sumBySource.set(p.sourceId, {
|
|
total: prev.total + p.planQty,
|
|
balance: prev.balance,
|
|
});
|
|
}
|
|
for (const [, val] of sumBySource) {
|
|
if (val.balance > 0 && val.total > val.balance) {
|
|
toast.error("분할 출하계획의 합산이 미출하량을 초과합니다.");
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 저장 전 확인 (confirmBeforeSave = true일 때)
|
|
if (currentConfig.confirmBeforeSave) {
|
|
const msg = currentConfig.confirmMessage || "출하계획을 저장하시겠습니까?";
|
|
if (!window.confirm(msg)) return;
|
|
}
|
|
|
|
savingRef.current = true;
|
|
setSaving(true);
|
|
try {
|
|
const savePlans = plans.map((p) => ({ sourceId: p.sourceId, planQty: p.planQty, planDate: p.planDate }));
|
|
const res = await batchSaveShippingPlans(savePlans, currentSource);
|
|
if (res.success) {
|
|
toast.success(`${plans.length}건의 출하계획이 저장되었습니다.`);
|
|
if (currentConfig.autoCloseOnSave !== false && onCloseRef.current) {
|
|
onCloseRef.current();
|
|
}
|
|
} else {
|
|
toast.error(res.error || "출하계획 저장에 실패했습니다.");
|
|
}
|
|
} catch (err) {
|
|
console.error("[v2-shipping-plan-editor] 저장 실패:", err);
|
|
toast.error("출하계획 저장 중 오류가 발생했습니다.");
|
|
} finally {
|
|
savingRef.current = false;
|
|
setSaving(false);
|
|
}
|
|
}, []);
|
|
|
|
// V2 이벤트 버스 구독 (마운트 1회만, ref로 최신 핸들러 참조)
|
|
const handleSaveRef = useRef(handleSave);
|
|
handleSaveRef.current = handleSave;
|
|
|
|
useEffect(() => {
|
|
let unsubscribe: (() => void) | null = null;
|
|
let mounted = true;
|
|
|
|
(async () => {
|
|
const { v2EventBus, V2_EVENTS } = await import("@/lib/v2-core");
|
|
if (!mounted) return;
|
|
unsubscribe = v2EventBus.subscribe(V2_EVENTS.SHIPPING_PLAN_SAVE, () => {
|
|
handleSaveRef.current();
|
|
});
|
|
})();
|
|
|
|
return () => {
|
|
mounted = false;
|
|
if (unsubscribe) unsubscribe();
|
|
};
|
|
}, []);
|
|
|
|
// 집계 재계산 헬퍼
|
|
const recalcAggregation = (group: ItemGroup): ItemGroup => {
|
|
const newPlanTotal = group.details
|
|
.filter((d) => d.type === "new")
|
|
.reduce((sum, d) => sum + d.planQty, 0);
|
|
const existingPlanTotal = group.details
|
|
.filter((d) => d.type === "existing")
|
|
.reduce((sum, d) => sum + d.planQty, 0);
|
|
return {
|
|
...group,
|
|
aggregation: {
|
|
...group.aggregation,
|
|
totalPlanQty: existingPlanTotal + newPlanTotal,
|
|
availableStock:
|
|
group.aggregation.currentStock - (existingPlanTotal + newPlanTotal),
|
|
},
|
|
};
|
|
};
|
|
|
|
const handlePlanQtyChange = useCallback(
|
|
(groupIdx: number, detailIdx: number, value: string) => {
|
|
setItemGroups((prev) => {
|
|
const next = [...prev];
|
|
const group = { ...next[groupIdx] };
|
|
const details = [...group.details];
|
|
const target = details[detailIdx];
|
|
let qty = Number(value) || 0;
|
|
|
|
// 같은 sourceId의 다른 신규 행 합산
|
|
const otherSum = details
|
|
.filter((d, i) => d.type === "new" && d.sourceId === target.sourceId && i !== detailIdx)
|
|
.reduce((sum, d) => sum + d.planQty, 0);
|
|
|
|
// 잔여 가능량 = 미출하량 - 다른 분할 행 합산
|
|
const maxAllowed = Math.max(0, target.balanceQty - otherSum);
|
|
qty = Math.min(qty, maxAllowed);
|
|
qty = Math.max(0, qty);
|
|
|
|
details[detailIdx] = { ...details[detailIdx], planQty: qty };
|
|
group.details = details;
|
|
next[groupIdx] = recalcAggregation(group);
|
|
return next;
|
|
});
|
|
},
|
|
[]
|
|
);
|
|
|
|
// 출하계획일 변경
|
|
const handlePlanDateChange = useCallback(
|
|
(groupIdx: number, detailIdx: number, value: string) => {
|
|
setItemGroups((prev) => {
|
|
const next = [...prev];
|
|
const group = { ...next[groupIdx] };
|
|
const details = [...group.details];
|
|
details[detailIdx] = { ...details[detailIdx], planDate: value };
|
|
group.details = details;
|
|
next[groupIdx] = group;
|
|
return next;
|
|
});
|
|
},
|
|
[]
|
|
);
|
|
|
|
// 분할 행 추가 (같은 수주에 새 행)
|
|
const handleAddSplitRow = useCallback(
|
|
(groupIdx: number, sourceId: string) => {
|
|
setItemGroups((prev) => {
|
|
const next = [...prev];
|
|
const group = { ...next[groupIdx] };
|
|
const details = [...group.details];
|
|
|
|
// 같은 sourceId의 신규 행 중 마지막 찾기
|
|
const existingNewRows = details.filter(
|
|
(d) => d.type === "new" && d.sourceId === sourceId
|
|
);
|
|
const baseRow = existingNewRows[0];
|
|
if (!baseRow) return prev;
|
|
|
|
const splitCount = existingNewRows.length;
|
|
const newRow: PlanDetailRow = {
|
|
type: "new",
|
|
sourceId,
|
|
orderNo: baseRow.orderNo,
|
|
partnerName: baseRow.partnerName,
|
|
dueDate: baseRow.dueDate,
|
|
balanceQty: baseRow.balanceQty,
|
|
planQty: 0,
|
|
planDate: new Date().toISOString().split("T")[0],
|
|
splitKey: `${sourceId}_${splitCount}`,
|
|
};
|
|
|
|
// 같은 sourceId 신규 행 바로 뒤에 삽입
|
|
const lastNewIdx = details.reduce(
|
|
(last, d, i) =>
|
|
d.type === "new" && d.sourceId === sourceId ? i : last,
|
|
-1
|
|
);
|
|
details.splice(lastNewIdx + 1, 0, newRow);
|
|
|
|
group.details = details;
|
|
next[groupIdx] = group;
|
|
return next;
|
|
});
|
|
},
|
|
[]
|
|
);
|
|
|
|
// 분할 행 삭제
|
|
const handleRemoveSplitRow = useCallback(
|
|
(groupIdx: number, detailIdx: number) => {
|
|
setItemGroups((prev) => {
|
|
const next = [...prev];
|
|
const group = { ...next[groupIdx] };
|
|
const details = [...group.details];
|
|
const target = details[detailIdx];
|
|
|
|
// 같은 sourceId의 신규 행이 1개뿐이면 삭제 안 함 (최소 1행 유지)
|
|
const sameSourceNewCount = details.filter(
|
|
(d) => d.type === "new" && d.sourceId === target.sourceId
|
|
).length;
|
|
if (sameSourceNewCount <= 1) {
|
|
toast.warning("최소 1개의 출하계획 행이 필요합니다.");
|
|
return prev;
|
|
}
|
|
|
|
details.splice(detailIdx, 1);
|
|
group.details = details;
|
|
next[groupIdx] = recalcAggregation(group);
|
|
return next;
|
|
});
|
|
},
|
|
[]
|
|
);
|
|
|
|
if (isDesignMode) {
|
|
return (
|
|
<div className="flex h-full w-full flex-col gap-3 rounded-lg border border-dashed border-gray-300 p-4">
|
|
<div className="flex items-center gap-2">
|
|
<Truck className="h-5 w-5 text-muted-foreground" />
|
|
<span className="text-sm font-medium text-muted-foreground">
|
|
{config.title || "출하계획 등록"}
|
|
</span>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{[
|
|
"총수주잔량",
|
|
"총출하계획량",
|
|
"현재고",
|
|
"가용재고",
|
|
"생산중수량",
|
|
].map((label) => (
|
|
<div
|
|
key={label}
|
|
className="flex flex-1 flex-col items-center rounded-lg border border-gray-200 bg-gray-50 px-3 py-2"
|
|
>
|
|
<span className="text-lg font-bold text-gray-400">0</span>
|
|
<span className="text-[10px] text-gray-400">{label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="flex-1 rounded-lg border border-gray-200 bg-gray-50 p-3">
|
|
<span className="text-xs text-gray-400">상세 테이블 영역</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (loading || saving) {
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center">
|
|
<div className="flex flex-col items-center gap-3">
|
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
<span className="text-sm text-muted-foreground">
|
|
{saving ? "출하계획 저장 중..." : "데이터 로딩 중..."}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (selectedIds.length === 0) {
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center">
|
|
<span className="text-sm text-muted-foreground">
|
|
선택된 수주가 없습니다
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const showSummary = config.showSummaryCards !== false;
|
|
const showExisting = config.showExistingPlans !== false;
|
|
|
|
return (
|
|
<div className="flex h-full w-full flex-col gap-4 overflow-auto p-4">
|
|
{itemGroups.map((group, groupIdx) => (
|
|
<div key={group.partCode} className="flex flex-col gap-3">
|
|
<div className="flex items-center gap-2">
|
|
<Package className="h-4 w-4 text-primary" />
|
|
<span className="text-sm font-semibold">
|
|
{group.partName} ({group.partCode})
|
|
</span>
|
|
</div>
|
|
|
|
{showSummary && (
|
|
<SummaryCards
|
|
aggregation={group.aggregation}
|
|
visibleCards={config.visibleSummaryCards}
|
|
/>
|
|
)}
|
|
|
|
<DetailTable
|
|
details={group.details}
|
|
groupIdx={groupIdx}
|
|
onPlanQtyChange={handlePlanQtyChange}
|
|
onPlanDateChange={handlePlanDateChange}
|
|
onAddSplit={handleAddSplitRow}
|
|
onRemoveSplit={handleRemoveSplitRow}
|
|
showExisting={showExisting}
|
|
/>
|
|
</div>
|
|
))}
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface VisibleCards {
|
|
totalBalance?: boolean;
|
|
totalPlanQty?: boolean;
|
|
currentStock?: boolean;
|
|
availableStock?: boolean;
|
|
inProductionQty?: boolean;
|
|
}
|
|
|
|
const SummaryCards: React.FC<{
|
|
aggregation: ItemAggregation;
|
|
visibleCards?: VisibleCards;
|
|
}> = ({ aggregation, visibleCards }) => {
|
|
const allCards = [
|
|
{
|
|
key: "totalBalance" as const,
|
|
label: "총수주잔량",
|
|
value: aggregation.totalBalance,
|
|
icon: TrendingUp,
|
|
color: {
|
|
bg: "bg-blue-50",
|
|
text: "text-blue-600",
|
|
border: "border-blue-200",
|
|
},
|
|
},
|
|
{
|
|
key: "totalPlanQty" as const,
|
|
label: "총출하계획량",
|
|
value: aggregation.totalPlanQty,
|
|
icon: Truck,
|
|
color: {
|
|
bg: "bg-indigo-50",
|
|
text: "text-indigo-600",
|
|
border: "border-indigo-200",
|
|
},
|
|
},
|
|
{
|
|
key: "currentStock" as const,
|
|
label: "현재고",
|
|
value: aggregation.currentStock,
|
|
icon: Warehouse,
|
|
color: {
|
|
bg: "bg-emerald-50",
|
|
text: "text-emerald-600",
|
|
border: "border-emerald-200",
|
|
},
|
|
},
|
|
{
|
|
key: "availableStock" as const,
|
|
label: "가용재고",
|
|
value: aggregation.availableStock,
|
|
icon: CheckCircle,
|
|
color: {
|
|
bg: aggregation.availableStock < 0 ? "bg-red-50" : "bg-amber-50",
|
|
text:
|
|
aggregation.availableStock < 0
|
|
? "text-red-600"
|
|
: "text-amber-600",
|
|
border:
|
|
aggregation.availableStock < 0
|
|
? "border-red-200"
|
|
: "border-amber-200",
|
|
},
|
|
},
|
|
{
|
|
key: "inProductionQty" as const,
|
|
label: "생산중수량",
|
|
value: aggregation.inProductionQty,
|
|
icon: Factory,
|
|
color: {
|
|
bg: "bg-purple-50",
|
|
text: "text-purple-600",
|
|
border: "border-purple-200",
|
|
},
|
|
},
|
|
];
|
|
|
|
const cards = allCards.filter(
|
|
(c) => !visibleCards || visibleCards[c.key] !== false
|
|
);
|
|
|
|
return (
|
|
<div className="flex gap-2">
|
|
{cards.map((card) => {
|
|
const Icon = card.icon;
|
|
return (
|
|
<div
|
|
key={card.label}
|
|
className={`flex flex-1 flex-col items-center rounded-lg border ${card.color.border} ${card.color.bg} px-3 py-2 transition-shadow hover:shadow-sm`}
|
|
>
|
|
<div className="flex items-center gap-1">
|
|
<Icon className={`h-3.5 w-3.5 ${card.color.text}`} />
|
|
<span className={`text-xl font-bold ${card.color.text}`}>
|
|
{card.value.toLocaleString()}
|
|
</span>
|
|
</div>
|
|
<span className={`mt-0.5 text-[10px] ${card.color.text}`}>
|
|
{card.label}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// sourceId별 그룹 (셀병합용)
|
|
interface SourceGroup {
|
|
sourceId: string;
|
|
orderNo: string;
|
|
partnerName: string;
|
|
dueDate: string;
|
|
balanceQty: number;
|
|
rows: (PlanDetailRow & { _origIdx: number })[];
|
|
}
|
|
|
|
const DetailTable: React.FC<{
|
|
details: PlanDetailRow[];
|
|
groupIdx: number;
|
|
onPlanQtyChange: (groupIdx: number, detailIdx: number, value: string) => void;
|
|
onPlanDateChange: (groupIdx: number, detailIdx: number, value: string) => void;
|
|
onAddSplit: (groupIdx: number, sourceId: string) => void;
|
|
onRemoveSplit: (groupIdx: number, detailIdx: number) => void;
|
|
showExisting?: boolean;
|
|
}> = ({ details, groupIdx, onPlanQtyChange, onPlanDateChange, onAddSplit, onRemoveSplit, showExisting = true }) => {
|
|
const visibleDetails = details
|
|
.map((d, idx) => ({ ...d, _origIdx: idx }))
|
|
.filter((d) => showExisting || d.type === "new");
|
|
|
|
// sourceId별 그룹핑 (순서 유지)
|
|
const sourceGroups = useMemo(() => {
|
|
const map = new Map<string, SourceGroup>();
|
|
const order: string[] = [];
|
|
for (const d of visibleDetails) {
|
|
if (!map.has(d.sourceId)) {
|
|
map.set(d.sourceId, {
|
|
sourceId: d.sourceId,
|
|
orderNo: d.orderNo,
|
|
partnerName: d.partnerName,
|
|
dueDate: d.dueDate,
|
|
balanceQty: d.balanceQty,
|
|
rows: [],
|
|
});
|
|
order.push(d.sourceId);
|
|
}
|
|
map.get(d.sourceId)!.rows.push(d);
|
|
}
|
|
return order.map((id) => map.get(id)!);
|
|
}, [visibleDetails]);
|
|
|
|
// 같은 sourceId 신규 행들의 planQty 합산 (잔여량 계산용)
|
|
const getRemaining = (sourceId: string, excludeOrigIdx: number) => {
|
|
const group = sourceGroups.find((g) => g.sourceId === sourceId);
|
|
if (!group) return 0;
|
|
const otherSum = group.rows
|
|
.filter((r) => r.type === "new" && r._origIdx !== excludeOrigIdx)
|
|
.reduce((sum, r) => sum + r.planQty, 0);
|
|
return Math.max(0, group.balanceQty - otherSum);
|
|
};
|
|
|
|
return (
|
|
<div className="overflow-hidden rounded-lg border">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b bg-muted/50">
|
|
<th className="w-14 px-3 py-2 text-left text-xs font-medium text-muted-foreground">
|
|
구분
|
|
</th>
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground">
|
|
수주번호
|
|
</th>
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground">
|
|
거래처
|
|
</th>
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground">
|
|
납기일
|
|
</th>
|
|
<th className="px-3 py-2 text-right text-xs font-medium text-muted-foreground">
|
|
미출하
|
|
</th>
|
|
<th className="px-3 py-2 text-center text-xs font-medium text-muted-foreground">
|
|
출하계획량
|
|
</th>
|
|
<th className="px-3 py-2 text-center text-xs font-medium text-muted-foreground">
|
|
출하계획일
|
|
</th>
|
|
<th className="w-16 px-2 py-2 text-center text-xs font-medium text-muted-foreground">
|
|
분할
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{sourceGroups.map((sg) => {
|
|
const totalRows = sg.rows.length;
|
|
const newCount = sg.rows.filter((r) => r.type === "new").length;
|
|
return sg.rows.map((row, rowIdx) => {
|
|
const isFirst = rowIdx === 0;
|
|
const remaining = row.type === "new" ? getRemaining(row.sourceId, row._origIdx) : 0;
|
|
const isDisabled = row.type === "new" && sg.balanceQty <= 0;
|
|
|
|
return (
|
|
<tr
|
|
key={row.splitKey || `${row.type}-${row.sourceId}-${row.existingPlanId || row._origIdx}`}
|
|
className={`hover:bg-muted/30 ${rowIdx < totalRows - 1 ? "" : "border-b"}`}
|
|
>
|
|
{/* 구분 - 매 행마다 표시 */}
|
|
<td className={`px-3 py-2 ${!isFirst ? "border-t border-dashed border-muted" : "border-t"}`}>
|
|
{row.type === "existing" ? (
|
|
<Badge variant="secondary" className="text-[10px]">기존</Badge>
|
|
) : (
|
|
<Badge className="bg-primary text-[10px] text-primary-foreground">신규</Badge>
|
|
)}
|
|
</td>
|
|
|
|
{/* 수주번호, 거래처, 납기일, 미출하 - 첫 행만 rowSpan */}
|
|
{isFirst && (
|
|
<>
|
|
<td className="border-t px-3 py-2 text-xs align-middle" rowSpan={totalRows}>
|
|
{sg.orderNo}
|
|
</td>
|
|
<td className="border-t px-3 py-2 text-xs align-middle" rowSpan={totalRows}>
|
|
{sg.partnerName}
|
|
</td>
|
|
<td className="border-t px-3 py-2 text-xs align-middle" rowSpan={totalRows}>
|
|
{sg.dueDate || "-"}
|
|
</td>
|
|
<td className="border-t px-3 py-2 text-right text-xs font-bold align-middle" rowSpan={totalRows}>
|
|
{sg.balanceQty.toLocaleString()}
|
|
</td>
|
|
</>
|
|
)}
|
|
|
|
{/* 출하계획량 */}
|
|
<td className={`px-3 py-2 text-center ${!isFirst ? "border-t border-dashed border-muted" : "border-t"}`}>
|
|
{row.type === "existing" ? (
|
|
<span className="text-xs text-muted-foreground">
|
|
{row.planQty.toLocaleString()}
|
|
</span>
|
|
) : (
|
|
<Input
|
|
type="number"
|
|
min={0}
|
|
max={remaining}
|
|
value={row.planQty || ""}
|
|
onChange={(e) => onPlanQtyChange(groupIdx, row._origIdx, e.target.value)}
|
|
disabled={isDisabled}
|
|
className="mx-auto h-7 w-24 text-center text-xs disabled:opacity-40"
|
|
placeholder="0"
|
|
/>
|
|
)}
|
|
</td>
|
|
|
|
{/* 출하계획일 */}
|
|
<td className={`px-3 py-2 text-center ${!isFirst ? "border-t border-dashed border-muted" : "border-t"}`}>
|
|
{row.type === "existing" ? (
|
|
<span className="text-xs text-muted-foreground">-</span>
|
|
) : (
|
|
<Input
|
|
type="date"
|
|
value={row.planDate || ""}
|
|
onChange={(e) => onPlanDateChange(groupIdx, row._origIdx, e.target.value)}
|
|
disabled={isDisabled}
|
|
className="mx-auto h-7 w-32 text-xs disabled:opacity-40"
|
|
/>
|
|
)}
|
|
</td>
|
|
|
|
{/* 분할 버튼 */}
|
|
<td className={`px-2 py-2 text-center ${!isFirst ? "border-t border-dashed border-muted" : "border-t"}`}>
|
|
{row.type === "new" && isFirst && (
|
|
<button
|
|
type="button"
|
|
onClick={() => onAddSplit(groupIdx, row.sourceId)}
|
|
disabled={sg.balanceQty <= 0}
|
|
className="flex h-6 w-6 items-center justify-center rounded-md text-primary hover:bg-primary/10 disabled:opacity-30 disabled:cursor-not-allowed mx-auto"
|
|
title="분할 행 추가"
|
|
>
|
|
<Plus className="h-3.5 w-3.5" />
|
|
</button>
|
|
)}
|
|
{row.type === "new" && !isFirst && newCount > 1 && (
|
|
<button
|
|
type="button"
|
|
onClick={() => onRemoveSplit(groupIdx, row._origIdx)}
|
|
className="flex h-6 w-6 items-center justify-center rounded-md text-destructive hover:bg-destructive/10 mx-auto"
|
|
title="분할 행 삭제"
|
|
>
|
|
<X className="h-3.5 w-3.5" />
|
|
</button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
);
|
|
});
|
|
})}
|
|
{sourceGroups.length === 0 && (
|
|
<tr>
|
|
<td colSpan={8} className="px-3 py-6 text-center text-xs text-muted-foreground">
|
|
데이터가 없습니다
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const ShippingPlanEditorWrapper: React.FC<
|
|
ShippingPlanEditorComponentProps
|
|
> = (props) => {
|
|
return <ShippingPlanEditorComponent {...props} />;
|
|
};
|