kjs
77b7a0cdbb
- Changed column width definitions from fixed to minimum widths for better responsiveness in the purchase order and sales order pages. - Increased the pagination size from 500 to 5000 for supplier and user data fetching to accommodate larger datasets. - Enhanced item search functionality by including management item filters in server queries, improving data handling and user experience. - These changes aim to provide a more flexible and user-friendly interface across multiple company implementations.
1635 lines
79 KiB
TypeScript
1635 lines
79 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import {
|
|
Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
|
|
} from "@/components/ui/dialog";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import {
|
|
Plus, Trash2, Save, Loader2, FileSpreadsheet, Download,
|
|
ClipboardList, Pencil, Search, X, Truck, Package,
|
|
ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight,
|
|
Settings2, RotateCcw, Filter, Check, ArrowUp, ArrowDown,
|
|
} from "lucide-react";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { cn } from "@/lib/utils";
|
|
import { apiClient } from "@/lib/api/client";
|
|
import { useConfirmDialog } from "@/components/common/ConfirmDialog";
|
|
import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
|
|
import { exportToExcel } from "@/lib/utils/excelExport";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { toast } from "sonner";
|
|
import { ShippingPlanBatchModal } from "@/components/common/ShippingPlanBatchModal";
|
|
import { useTableSettings } from "@/hooks/useTableSettings";
|
|
import { TableSettingsModal } from "@/components/common/TableSettingsModal";
|
|
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
|
|
|
const DETAIL_TABLE = "sales_order_detail";
|
|
const MASTER_TABLE = "sales_order_mng";
|
|
|
|
// 천단위 구분자 표시용
|
|
const formatNumber = (val: string) => {
|
|
const num = val.replace(/[^\d.-]/g, "");
|
|
if (!num) return "";
|
|
const parts = num.split(".");
|
|
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
return parts.join(".");
|
|
};
|
|
const parseNumber = (val: string) => val.replace(/,/g, "");
|
|
|
|
// 플랫 테이블 컬럼 정의 (마스터+디테일 통합)
|
|
const FLAT_COLUMNS = [
|
|
{ key: "order_no", label: "수주번호", source: "master" },
|
|
{ key: "partner_id", label: "거래처", source: "master" },
|
|
{ key: "order_date", label: "수주일", source: "master" },
|
|
{ key: "part_code", label: "품번", source: "detail" },
|
|
{ key: "part_name", label: "품명", source: "detail" },
|
|
{ key: "spec", label: "규격", source: "detail" },
|
|
{ key: "unit", label: "단위", source: "detail" },
|
|
{ key: "qty", label: "수량", source: "detail" },
|
|
{ key: "ship_qty", label: "출하수량", source: "detail" },
|
|
{ key: "balance_qty", label: "잔량", source: "detail" },
|
|
{ key: "unit_price", label: "단가", source: "detail" },
|
|
{ key: "amount", label: "금액", source: "detail" },
|
|
{ key: "due_date", label: "납기일", source: "detail" },
|
|
{ key: "memo", label: "메모", source: "master" },
|
|
];
|
|
|
|
const DETAIL_HEADER_COLS = FLAT_COLUMNS.filter((c) => c.source === "detail");
|
|
|
|
// 필터용 전체 키
|
|
const GRID_COLUMNS_CONFIG = FLAT_COLUMNS.map(({ key, label }) => ({ key, label }));
|
|
|
|
// 총 컬럼 수: 체크박스(1) + 플랫 컬럼(14) = 15
|
|
const TOTAL_COLS = 15;
|
|
|
|
// 헤더 필터 Popover
|
|
function HeaderFilterPopover({
|
|
colKey, colLabel, uniqueValues, filterValues, onToggle, onClear,
|
|
}: {
|
|
colKey: string;
|
|
colLabel: string;
|
|
uniqueValues: string[];
|
|
filterValues: Set<string>;
|
|
onToggle: (colKey: string, value: string) => void;
|
|
onClear: (colKey: string) => void;
|
|
}) {
|
|
const [filterSearch, setFilterSearch] = useState("");
|
|
const hasFilter = filterValues.size > 0;
|
|
const filteredValues = uniqueValues.filter(
|
|
(v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
|
|
);
|
|
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<button
|
|
onClick={(e) => e.stopPropagation()}
|
|
className={cn(
|
|
"hover:bg-primary/20 rounded p-0.5 transition-colors shrink-0",
|
|
hasFilter && "text-primary bg-primary/10",
|
|
)}
|
|
title="필터"
|
|
>
|
|
<Filter className="h-3 w-3" />
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-56 p-2" align="start" onClick={(e) => e.stopPropagation()}>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between border-b pb-2">
|
|
<span className="text-xs font-medium">필터: {colLabel}</span>
|
|
{hasFilter && (
|
|
<button onClick={() => onClear(colKey)} className="text-primary text-xs hover:underline">
|
|
초기화
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="relative">
|
|
<Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
|
|
<Input
|
|
value={filterSearch}
|
|
onChange={(e) => setFilterSearch(e.target.value)}
|
|
placeholder="검색..."
|
|
className="h-7 text-xs pl-7"
|
|
/>
|
|
</div>
|
|
<div className="max-h-52 space-y-0.5 overflow-y-auto">
|
|
{filteredValues.slice(0, 100).map((val) => {
|
|
const isSelected = filterValues.has(val);
|
|
return (
|
|
<div
|
|
key={val}
|
|
className={cn(
|
|
"hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-xs",
|
|
isSelected && "bg-primary/10",
|
|
)}
|
|
onClick={() => onToggle(colKey, val)}
|
|
>
|
|
<div className={cn(
|
|
"flex h-4 w-4 items-center justify-center rounded border shrink-0",
|
|
isSelected ? "bg-primary border-primary" : "border-input",
|
|
)}>
|
|
{isSelected && <Check className="text-primary-foreground h-3 w-3" />}
|
|
</div>
|
|
<span className="truncate">{val || "(빈 값)"}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
{filteredValues.length > 100 && (
|
|
<div className="text-muted-foreground px-2 py-1 text-xs">
|
|
...외 {filteredValues.length - 100}개
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|
|
|
|
export default function SalesOrderPage() {
|
|
const { user } = useAuth();
|
|
const { confirm, ConfirmDialogComponent } = useConfirmDialog();
|
|
const [orders, setOrders] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [totalCount, setTotalCount] = useState(0);
|
|
|
|
// 검색 필터 (DynamicSearchFilter에서 관리)
|
|
const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
|
|
|
|
// 모달
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [isEditMode, setIsEditMode] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
const [masterForm, setMasterForm] = useState<Record<string, any>>({});
|
|
const [detailRows, setDetailRows] = useState<any[]>([]);
|
|
const [allowPriceEdit, setAllowPriceEdit] = useState(true);
|
|
|
|
// 품목 선택 모달
|
|
const [itemSelectOpen, setItemSelectOpen] = useState(false);
|
|
const [itemSearchKeyword, setItemSearchKeyword] = useState("");
|
|
const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
|
|
const [itemSearchLoading, setItemSearchLoading] = useState(false);
|
|
const [itemSelectedMap, setItemSelectedMap] = useState<Map<string, any>>(new Map());
|
|
const [itemSearchDivision, setItemSearchDivision] = useState("all");
|
|
const [itemPage, setItemPage] = useState(1);
|
|
const [itemPageSize, setItemPageSize] = useState(20);
|
|
const [itemTotalPages, setItemTotalPages] = useState(0);
|
|
const [itemTotal, setItemTotal] = useState(0);
|
|
const [itemPageInput, setItemPageInput] = useState("1");
|
|
|
|
// 엑셀 업로드
|
|
const [excelUploadOpen, setExcelUploadOpen] = useState(false);
|
|
|
|
// 출하계획 모달
|
|
const [shippingPlanOpen, setShippingPlanOpen] = useState(false);
|
|
|
|
// 카테고리 옵션
|
|
const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
|
|
|
|
// 체크된 행 (다중선택)
|
|
const [checkedIds, setCheckedIds] = useState<string[]>([]);
|
|
|
|
// 납품처 목록
|
|
const [deliveryOptions, setDeliveryOptions] = useState<{ code: string; label: string }[]>([]);
|
|
|
|
// 테이블 설정
|
|
const ts = useTableSettings("c16-sales-order", DETAIL_TABLE, GRID_COLUMNS_CONFIG);
|
|
|
|
// 헤더 필터 & 정렬
|
|
const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
|
|
const [sortState, setSortState] = useState<{ key: string; direction: "asc" | "desc" } | null>(null);
|
|
|
|
// 카테고리 로드
|
|
useEffect(() => {
|
|
const loadCategories = async () => {
|
|
const catColumns = ["sell_mode", "input_mode", "price_mode", "incoterms", "payment_term"];
|
|
const optMap: Record<string, { code: string; label: string }[]> = {};
|
|
const flatten = (vals: any[]): { code: string; label: string }[] => {
|
|
const result: { code: string; label: string }[] = [];
|
|
for (const v of vals) {
|
|
result.push({ code: v.valueCode, label: v.valueLabel });
|
|
if (v.children?.length) result.push(...flatten(v.children));
|
|
}
|
|
return result;
|
|
};
|
|
const LABEL_REPLACE: Record<string, string> = {
|
|
"공급업체 우선": "거래처 우선",
|
|
"공급업체우선": "거래처 우선",
|
|
};
|
|
const dedup = (items: { code: string; label: string }[]) => {
|
|
const seen = new Set<string>();
|
|
return items
|
|
.map((item) => ({ ...item, label: LABEL_REPLACE[item.label] || item.label }))
|
|
.filter((item) => {
|
|
const key = item.label.replace(/\s/g, "");
|
|
if (seen.has(key)) return false;
|
|
seen.add(key);
|
|
return true;
|
|
});
|
|
};
|
|
await Promise.all(
|
|
catColumns.map(async (col) => {
|
|
try {
|
|
const res = await apiClient.get(`/table-categories/${MASTER_TABLE}/${col}/values`);
|
|
if (res.data?.success && res.data.data?.length > 0) {
|
|
optMap[col] = dedup(flatten(res.data.data));
|
|
}
|
|
} catch { /* skip */ }
|
|
})
|
|
);
|
|
// 거래처 목록
|
|
try {
|
|
const custRes = await apiClient.post(`/table-management/tables/customer_mng/data`, {
|
|
page: 1, size: 500, autoFilter: true,
|
|
});
|
|
const custs = custRes.data?.data?.data || custRes.data?.data?.rows || [];
|
|
optMap["partner_id"] = custs.map((c: any) => ({ code: c.customer_code, label: c.customer_name }));
|
|
} catch { /* skip */ }
|
|
// 사용자 목록
|
|
try {
|
|
const userRes = await apiClient.post(`/table-management/tables/user_info/data`, {
|
|
page: 1, size: 500, autoFilter: true,
|
|
});
|
|
const users = userRes.data?.data?.data || userRes.data?.data?.rows || [];
|
|
optMap["manager_id"] = users.map((u: any) => ({
|
|
code: u.user_id || u.id,
|
|
label: `${u.user_name || u.name || u.user_id}${u.position_name ? ` (${u.position_name})` : ""}`,
|
|
}));
|
|
} catch { /* skip */ }
|
|
// item_info 카테고리
|
|
for (const col of ["unit", "material", "division", "type"]) {
|
|
try {
|
|
const res = await apiClient.get(`/table-categories/item_info/${col}/values`);
|
|
if (res.data?.success && res.data.data?.length > 0) {
|
|
optMap[`item_${col}`] = flatten(res.data.data);
|
|
}
|
|
} catch { /* skip */ }
|
|
}
|
|
setCategoryOptions(optMap);
|
|
// division 기본값
|
|
const divs = optMap["item_division"] || [];
|
|
const salesDiv = divs.find((o: any) => o.label === "영업관리")
|
|
|| divs.find((o: any) => o.label === "제품")
|
|
|| divs.find((o: any) => o.label === "판매품");
|
|
if (salesDiv) setItemSearchDivision(salesDiv.code);
|
|
};
|
|
loadCategories();
|
|
}, []);
|
|
|
|
// 데이터 조회
|
|
const fetchOrders = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const filters = searchFilters.map(f => ({
|
|
columnName: f.columnName,
|
|
operator: f.operator,
|
|
value: f.value,
|
|
}));
|
|
|
|
const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
|
|
autoFilter: true,
|
|
sort: { columnName: "order_no", order: "desc" },
|
|
});
|
|
const rows = res.data?.data?.data || res.data?.data?.rows || [];
|
|
|
|
// order_no → sales_order_mng 조인
|
|
const orderNos = [...new Set(rows.map((r: any) => r.order_no).filter(Boolean))];
|
|
let masterMap: Record<string, any> = {};
|
|
if (orderNos.length > 0) {
|
|
try {
|
|
const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
|
|
page: 1, size: orderNos.length + 10,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "in", value: orderNos }] },
|
|
autoFilter: true,
|
|
});
|
|
const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
|
|
for (const m of masters) masterMap[m.order_no] = m;
|
|
} catch { /* skip */ }
|
|
}
|
|
|
|
// part_code → item_info 조인
|
|
const partCodes = [...new Set(rows.map((r: any) => r.part_code).filter(Boolean))];
|
|
let itemMap: Record<string, any> = {};
|
|
if (partCodes.length > 0) {
|
|
try {
|
|
const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
|
|
page: 1, size: partCodes.length + 10,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: partCodes }] },
|
|
autoFilter: true,
|
|
});
|
|
const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
|
|
for (const item of items) itemMap[item.item_number] = item;
|
|
} catch { /* skip */ }
|
|
}
|
|
|
|
// 조인 적용 + 카테고리 코드→라벨 변환
|
|
const resolveLabel = (key: string, code: string) => {
|
|
if (!code) return "";
|
|
const opts = categoryOptions[key];
|
|
if (!opts) return code;
|
|
return opts.find((o) => o.code === code)?.label || code;
|
|
};
|
|
const data = rows.map((row: any) => {
|
|
const item = itemMap[row.part_code];
|
|
const master = masterMap[row.order_no];
|
|
const rawUnit = row.unit || item?.unit || "";
|
|
return {
|
|
...row,
|
|
part_name: row.part_name || item?.item_name || "",
|
|
spec: row.spec || item?.size || "",
|
|
material: row.material || (item ? (resolveLabel("item_material", item.material) || item.material || "") : ""),
|
|
unit: resolveLabel("item_unit", rawUnit) || rawUnit,
|
|
memo: row.memo || master?.memo || "",
|
|
_master: master || {},
|
|
};
|
|
});
|
|
|
|
setOrders(data);
|
|
setTotalCount(res.data?.data?.total || data.length);
|
|
} catch (err) {
|
|
toast.error("수주 목록을 불러오는데 실패했습니다.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [searchFilters, categoryOptions]);
|
|
|
|
useEffect(() => { fetchOrders(); }, [fetchOrders]);
|
|
|
|
// 카테고리 코드→라벨 변환
|
|
const resolveLabel = useCallback((key: string, code: string) => {
|
|
if (!code) return "";
|
|
if (key === "partner_id" || key === "manager_id" || key === "price_mode") {
|
|
return categoryOptions[key]?.find((o) => o.code === code)?.label || code;
|
|
}
|
|
return code;
|
|
}, [categoryOptions]);
|
|
|
|
// 플랫 행 생성 (마스터 필드를 각 디테일 행에 병합)
|
|
const flatRows = useMemo(() => {
|
|
return orders.map((row) => {
|
|
const master = row._master || {};
|
|
return {
|
|
...row,
|
|
partner_id: resolveLabel("partner_id", master.partner_id || row.partner_id || ""),
|
|
order_date: master.order_date || row.order_date || "",
|
|
memo: row.memo || master.memo || "",
|
|
};
|
|
});
|
|
}, [orders, resolveLabel]);
|
|
|
|
// 컬럼별 고유값 (헤더 필터용)
|
|
const columnUniqueValues = useMemo(() => {
|
|
const result: Record<string, string[]> = {};
|
|
for (const col of FLAT_COLUMNS) {
|
|
const values = new Set<string>();
|
|
flatRows.forEach((row) => {
|
|
const val = row[col.key];
|
|
if (val !== null && val !== undefined && val !== "") values.add(String(val));
|
|
});
|
|
result[col.key] = Array.from(values).sort();
|
|
}
|
|
return result;
|
|
}, [flatRows]);
|
|
|
|
// 필터 + 정렬 적용된 플랫 데이터
|
|
const filteredFlatRows = useMemo(() => {
|
|
let rows = [...flatRows];
|
|
|
|
// 1차: 헤더 필터 적용
|
|
for (const [colKey, values] of Object.entries(headerFilters)) {
|
|
if (values.size === 0) continue;
|
|
rows = rows.filter((row) => {
|
|
const cellVal = row[colKey] != null ? String(row[colKey]) : "";
|
|
return values.has(cellVal);
|
|
});
|
|
}
|
|
|
|
// 2차: 정렬
|
|
if (sortState) {
|
|
const { key, direction } = sortState;
|
|
rows.sort((a, b) => {
|
|
const av = a[key] ?? "";
|
|
const bv = b[key] ?? "";
|
|
const na = Number(av); const nb = Number(bv);
|
|
if (!isNaN(na) && !isNaN(nb)) return direction === "asc" ? na - nb : nb - na;
|
|
return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
|
|
});
|
|
}
|
|
|
|
return rows;
|
|
}, [flatRows, headerFilters, sortState]);
|
|
|
|
// 헤더 필터 토글/초기화
|
|
const toggleHeaderFilter = (colKey: string, value: string) => {
|
|
setHeaderFilters((prev) => {
|
|
const next = { ...prev };
|
|
const set = new Set(next[colKey] || []);
|
|
if (set.has(value)) set.delete(value); else set.add(value);
|
|
if (set.size === 0) delete next[colKey]; else next[colKey] = set;
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const clearHeaderFilter = (colKey: string) => {
|
|
setHeaderFilters((prev) => {
|
|
const next = { ...prev };
|
|
delete next[colKey];
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const handleSort = (key: string) => {
|
|
setSortState((prev) =>
|
|
prev?.key === key
|
|
? prev.direction === "asc" ? { key, direction: "desc" } : null
|
|
: { key, direction: "asc" }
|
|
);
|
|
};
|
|
|
|
const getCategoryLabel = (col: string, code: string) => {
|
|
if (!code) return "";
|
|
const found = categoryOptions[col]?.find((o) => o.code === code);
|
|
return found?.label || code;
|
|
};
|
|
|
|
const loadDeliveryOptions = async (customerCode: string) => {
|
|
if (!customerCode) { setDeliveryOptions([]); return; }
|
|
try {
|
|
const res = await apiClient.post(`/table-management/tables/delivery_destination/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: customerCode }] },
|
|
autoFilter: true,
|
|
});
|
|
const rows = res.data?.data?.data || res.data?.data?.rows || [];
|
|
setDeliveryOptions(rows.map((r: any) => ({
|
|
code: r.destination_code || r.id,
|
|
label: `${r.destination_name}${r.address ? ` (${r.address})` : ""}`,
|
|
})));
|
|
} catch { setDeliveryOptions([]); }
|
|
};
|
|
|
|
// 등록 모달 열기
|
|
const openRegisterModal = () => {
|
|
const defaultSellMode = categoryOptions["sell_mode"]?.[0]?.code || "";
|
|
const defaultInputMode = categoryOptions["input_mode"]?.[0]?.code || "";
|
|
const defaultPriceMode = categoryOptions["price_mode"]?.[0]?.code || "";
|
|
setMasterForm({
|
|
input_mode: defaultInputMode, sell_mode: defaultSellMode, price_mode: defaultPriceMode,
|
|
manager_id: user?.userId || "", order_date: new Date().toISOString().split("T")[0],
|
|
});
|
|
setDetailRows([]);
|
|
setDeliveryOptions([]);
|
|
setIsEditMode(false);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
// 수정 모달 열기
|
|
const openEditModal = async (orderNo: string) => {
|
|
try {
|
|
const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
|
|
page: 1, size: 1,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
|
|
autoFilter: true,
|
|
});
|
|
const masterData = (masterRes.data?.data?.data || masterRes.data?.data?.rows || [])[0];
|
|
|
|
const detailRes = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
|
|
autoFilter: true,
|
|
});
|
|
const detailData = detailRes.data?.data?.data || detailRes.data?.data?.rows || [];
|
|
|
|
setMasterForm(masterData || {});
|
|
setDetailRows(detailData.map((d: any, i: number) => ({ ...d, _id: d.id || `row_${i}` })));
|
|
setIsEditMode(true);
|
|
setIsModalOpen(true);
|
|
} catch (err) {
|
|
toast.error("수주 정보를 불러오는데 실패했습니다.");
|
|
}
|
|
};
|
|
|
|
// 삭제 (선택한 디테일 삭제 → 디테일 0건인 마스터 자동 삭제)
|
|
const handleDelete = async () => {
|
|
if (checkedIds.length === 0) { toast.error("삭제할 항목을 선택해주세요."); return; }
|
|
const ok = await confirm(`${checkedIds.length}건의 수주 항목을 삭제하시겠습니까?`, {
|
|
description: "삭제된 데이터는 복구할 수 없습니다.",
|
|
variant: "destructive",
|
|
confirmText: "삭제",
|
|
});
|
|
if (!ok) return;
|
|
try {
|
|
// 1. 선택한 디테일 삭제
|
|
await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
|
|
data: checkedIds.map((id) => ({ id })),
|
|
});
|
|
|
|
// 2. 영향받는 수주번호의 잔여 디테일 확인 → 0건이면 마스터도 삭제
|
|
const selectedItems = orders.filter((o) => checkedIds.includes(o.id));
|
|
const orderNos = [...new Set(selectedItems.map((o) => o.order_no))];
|
|
for (const orderNo of orderNos) {
|
|
const remainRes = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
|
|
page: 1, size: 1,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
|
|
autoFilter: true,
|
|
});
|
|
const remaining = remainRes.data?.data?.data || remainRes.data?.data?.rows || [];
|
|
if (remaining.length === 0) {
|
|
// 디테일 0건 → 마스터 삭제
|
|
const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
|
|
page: 1, size: 1,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
|
|
autoFilter: true,
|
|
});
|
|
const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
|
|
if (masters.length > 0) {
|
|
await apiClient.delete(`/table-management/tables/${MASTER_TABLE}/delete`, {
|
|
data: masters.map((m: any) => ({ id: m.id })),
|
|
});
|
|
}
|
|
}
|
|
}
|
|
toast.success("삭제되었습니다.");
|
|
setCheckedIds([]);
|
|
fetchOrders();
|
|
} catch (err) {
|
|
toast.error("삭제에 실패했습니다.");
|
|
}
|
|
};
|
|
|
|
// 저장 (마스터 + 디테일)
|
|
const handleSave = async () => {
|
|
if (!masterForm.order_no && !isEditMode) {
|
|
toast.error("수주번호는 필수입니다.");
|
|
return;
|
|
}
|
|
if (detailRows.length === 0) {
|
|
toast.error("품목을 1개 이상 추가해주세요.");
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
try {
|
|
const { id, created_date, updated_date, writer, company_code, created_by, updated_by, ...masterFields } = masterForm;
|
|
if (isEditMode && id) {
|
|
await apiClient.put(`/table-management/tables/${MASTER_TABLE}/edit`, {
|
|
originalData: { id },
|
|
updatedData: masterFields,
|
|
});
|
|
const existingDetails = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: masterForm.order_no }] },
|
|
autoFilter: true,
|
|
});
|
|
const existings = existingDetails.data?.data?.data || existingDetails.data?.data?.rows || [];
|
|
if (existings.length > 0) {
|
|
await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
|
|
data: existings.map((d: any) => ({ id: d.id })),
|
|
});
|
|
}
|
|
} else {
|
|
await apiClient.post(`/table-management/tables/${MASTER_TABLE}/add`, masterFields);
|
|
}
|
|
for (const row of detailRows) {
|
|
const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
|
|
await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
|
|
...detailFields,
|
|
id: crypto.randomUUID(),
|
|
order_no: masterForm.order_no,
|
|
});
|
|
}
|
|
toast.success(isEditMode ? "수정되었습니다." : "등록되었습니다.");
|
|
setIsModalOpen(false);
|
|
fetchOrders();
|
|
} catch (err: any) {
|
|
toast.error(err.response?.data?.message || "저장에 실패했습니다.");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
// 품목 검색
|
|
const searchItems = async (page?: number, size?: number) => {
|
|
const p = page ?? itemPage;
|
|
const s = size ?? itemPageSize;
|
|
setItemSearchLoading(true);
|
|
try {
|
|
const filters: any[] = [];
|
|
if (itemSearchKeyword) filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
|
|
|
|
// 관리품목 필터를 서버 쿼리에 포함 (코드 + 라벨 양쪽 대응)
|
|
if (itemSearchDivision !== "all") {
|
|
const divLabel = categoryOptions["item_division"]?.find((o) => o.code === itemSearchDivision)?.label || "";
|
|
// 코드 또는 라벨이 저장된 경우 모두 조회하기 위해 in 연산자 사용
|
|
const divValues = [itemSearchDivision];
|
|
if (divLabel) divValues.push(divLabel);
|
|
filters.push({ columnName: "division", operator: "in", value: divValues });
|
|
}
|
|
|
|
// 거래처우선 단가방식일 때 거래처에 연결된 품목만 필터링
|
|
const isCustomerPrice = masterForm.price_mode === "CAT_MM0BV3OS_41DX" || masterForm.price_mode === "CAT_MLKG7D8K_N8SI";
|
|
const partnerId = masterForm.partner_id;
|
|
let customerItemIds: Set<string> | null = null;
|
|
|
|
if (isCustomerPrice && partnerId) {
|
|
try {
|
|
const mappingRes = await apiClient.post(`/table-management/tables/customer_item_mapping/data`, {
|
|
page: 1, size: 5000,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: partnerId }] },
|
|
autoFilter: true,
|
|
});
|
|
const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
|
|
customerItemIds = new Set(mappings.map((m: any) => m.item_id).filter(Boolean));
|
|
} catch { /* skip */ }
|
|
}
|
|
|
|
const res = await apiClient.post(`/table-management/tables/item_info/data`, {
|
|
page: p, size: s,
|
|
dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
|
|
autoFilter: true,
|
|
});
|
|
const resData = res.data?.data;
|
|
let rows = resData?.data || resData?.rows || [];
|
|
const serverTotal = resData?.total || resData?.totalCount || rows.length;
|
|
|
|
// 거래처우선일 때 연결된 품목만 표시 (클라이언트 필터)
|
|
if (customerItemIds) {
|
|
rows = rows.filter((item: any) => customerItemIds!.has(item.item_number) || customerItemIds!.has(item.id));
|
|
}
|
|
|
|
setItemSearchResults(rows);
|
|
setItemTotal(serverTotal);
|
|
setItemTotalPages(Math.max(1, Math.ceil(serverTotal / s)));
|
|
} catch { /* skip */ } finally {
|
|
setItemSearchLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleItemPageChange = (newPage: number) => {
|
|
if (newPage < 1 || newPage > itemTotalPages) return;
|
|
setItemPage(newPage);
|
|
setItemPageInput(String(newPage));
|
|
searchItems(newPage);
|
|
};
|
|
|
|
const commitItemPageInput = () => {
|
|
const parsed = parseInt(itemPageInput, 10);
|
|
if (isNaN(parsed) || itemPageInput.trim() === "") { setItemPageInput(String(itemPage)); return; }
|
|
const clamped = Math.max(1, Math.min(parsed, itemTotalPages || 1));
|
|
if (clamped !== itemPage) handleItemPageChange(clamped);
|
|
setItemPageInput(String(clamped));
|
|
};
|
|
|
|
const triggerNewSearch = () => {
|
|
setItemPage(1);
|
|
setItemPageInput("1");
|
|
searchItems(1);
|
|
};
|
|
|
|
const addSelectedItemsToDetail = async () => {
|
|
const selected = Array.from(itemSelectedMap.values());
|
|
if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
|
|
|
|
const isStandardPrice = masterForm.price_mode === "CAT_MM0BUZKL_HJ7U" || masterForm.price_mode === "CAT_MLKG792S_54WJ";
|
|
const isCustomerPrice = masterForm.price_mode === "CAT_MM0BV3OS_41DX" || masterForm.price_mode === "CAT_MLKG7D8K_N8SI";
|
|
const partnerId = masterForm.partner_id;
|
|
|
|
let customerPriceMap: Record<string, string> = {};
|
|
if (isCustomerPrice && partnerId) {
|
|
try {
|
|
const itemIds = selected.map((item) => item.item_number || item.id);
|
|
const res = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: {
|
|
enabled: true,
|
|
filters: [
|
|
{ columnName: "customer_id", operator: "equals", value: partnerId },
|
|
{ columnName: "item_id", operator: "in", value: itemIds },
|
|
],
|
|
},
|
|
autoFilter: true,
|
|
});
|
|
const prices = res.data?.data?.data || res.data?.data?.rows || [];
|
|
const _n = new Date();
|
|
const today = `${_n.getFullYear()}-${String(_n.getMonth() + 1).padStart(2, "0")}-${String(_n.getDate()).padStart(2, "0")}`;
|
|
for (const p of prices) {
|
|
const start = p.start_date || "";
|
|
const end = p.end_date || "";
|
|
if (start && start > today) continue;
|
|
if (end && end < today) continue;
|
|
const price = p.calculated_price || p.base_price || p.unit_price || "";
|
|
if (price && Number(price) > 0) {
|
|
const existing = customerPriceMap[p.item_id];
|
|
if (!existing || Number(price) > 0) customerPriceMap[p.item_id] = String(price);
|
|
}
|
|
}
|
|
} catch { /* skip */ }
|
|
}
|
|
|
|
const newRows = selected.map((item) => {
|
|
const itemCode = item.item_number || item.id;
|
|
let unitPrice = "";
|
|
if (isStandardPrice) {
|
|
unitPrice = item.standard_price || item.selling_price || "";
|
|
} else if (isCustomerPrice && partnerId) {
|
|
unitPrice = customerPriceMap[itemCode] || "";
|
|
}
|
|
return {
|
|
_id: `new_${Date.now()}_${Math.random()}`,
|
|
part_code: itemCode,
|
|
part_name: item.item_name,
|
|
spec: item.size || "",
|
|
material: getCategoryLabel("item_material", item.material) || item.material || "",
|
|
packing_material: "",
|
|
unit: getCategoryLabel("item_unit", item.unit) || item.unit || "",
|
|
qty: "1",
|
|
pack_qty: "0",
|
|
unit_price: unitPrice,
|
|
amount: unitPrice ? String(1 * parseFloat(unitPrice)) : "",
|
|
due_date: "",
|
|
};
|
|
});
|
|
|
|
setDetailRows((prev) => [...prev, ...newRows]);
|
|
toast.success(`${selected.length}개 품목이 추가되었습니다.`);
|
|
setItemSelectedMap(new Map());
|
|
setItemSelectOpen(false);
|
|
};
|
|
|
|
// 단가 재계산: 단가방식/거래처 변경 시 기존 품목 단가 갱신
|
|
const recalcPrices = useCallback(async (priceMode: string, partnerId: string) => {
|
|
if (detailRows.length === 0) return;
|
|
const STANDARD_CODES = ["CAT_MM0BUZKL_HJ7U", "CAT_MLKG792S_54WJ"];
|
|
const CUSTOMER_CODES = ["CAT_MM0BV3OS_41DX", "CAT_MLKG7D8K_N8SI"];
|
|
const isStandard = STANDARD_CODES.includes(priceMode);
|
|
const isCustomer = CUSTOMER_CODES.includes(priceMode);
|
|
|
|
if (isStandard) {
|
|
// 품목 기준단가 조회
|
|
const itemCodes = detailRows.map((r) => r.part_code).filter(Boolean);
|
|
if (itemCodes.length === 0) return;
|
|
try {
|
|
const res = await apiClient.post(`/table-management/tables/item_info/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemCodes }] },
|
|
autoFilter: true,
|
|
});
|
|
const items = res.data?.data?.data || res.data?.data?.rows || [];
|
|
const priceMap: Record<string, string> = {};
|
|
for (const item of items) {
|
|
const price = item.standard_price || item.selling_price || "";
|
|
if (price) priceMap[item.item_number] = String(price);
|
|
}
|
|
setDetailRows((prev) => prev.map((row) => {
|
|
const up = priceMap[row.part_code] || "";
|
|
const qty = parseFloat(row.qty) || 0;
|
|
const price = parseFloat(up) || 0;
|
|
return { ...row, unit_price: up, amount: (qty * price).toString() };
|
|
}));
|
|
} catch { /* skip */ }
|
|
} else if (isCustomer && partnerId) {
|
|
// 거래처별 단가 조회
|
|
const itemCodes = detailRows.map((r) => r.part_code).filter(Boolean);
|
|
if (itemCodes.length === 0) return;
|
|
try {
|
|
const res = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: { enabled: true, filters: [
|
|
{ columnName: "customer_id", operator: "equals", value: partnerId },
|
|
{ columnName: "item_id", operator: "in", value: itemCodes },
|
|
]},
|
|
autoFilter: true,
|
|
});
|
|
const prices = res.data?.data?.data || res.data?.data?.rows || [];
|
|
const _n = new Date();
|
|
const today = `${_n.getFullYear()}-${String(_n.getMonth() + 1).padStart(2, "0")}-${String(_n.getDate()).padStart(2, "0")}`;
|
|
const priceMap: Record<string, string> = {};
|
|
for (const p of prices) {
|
|
if (p.start_date && p.start_date > today) continue;
|
|
if (p.end_date && p.end_date < today) continue;
|
|
const price = p.calculated_price || p.base_price || p.unit_price || "";
|
|
if (price && Number(price) > 0) priceMap[p.item_id] = String(price);
|
|
}
|
|
setDetailRows((prev) => prev.map((row) => {
|
|
const up = priceMap[row.part_code] || "";
|
|
const qty = parseFloat(row.qty) || 0;
|
|
const price = parseFloat(up) || 0;
|
|
return { ...row, unit_price: up, amount: (qty * price).toString() };
|
|
}));
|
|
} catch { /* skip */ }
|
|
}
|
|
}, [detailRows]);
|
|
|
|
const updateDetailRow = (idx: number, field: string, value: string) => {
|
|
setDetailRows((prev) => {
|
|
const next = [...prev];
|
|
next[idx] = { ...next[idx], [field]: value };
|
|
if (field === "qty" || field === "unit_price") {
|
|
const qty = parseFloat(field === "qty" ? value : next[idx].qty) || 0;
|
|
const price = parseFloat(field === "unit_price" ? value : next[idx].unit_price) || 0;
|
|
next[idx].amount = (qty * price).toString();
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const removeDetailRow = (idx: number) => {
|
|
setDetailRows((prev) => prev.filter((_, i) => i !== idx));
|
|
};
|
|
|
|
// 조건부 레이어 판단
|
|
const isSupplierFirst = masterForm.input_mode === "CAT_MLZWPH5R_983R" || masterForm.input_mode === "CAT_MLKG5KP8_C39W";
|
|
const isOverseas = masterForm.sell_mode === "CAT_MLZWFF2Z_BQCV" || masterForm.sell_mode === "CAT_MLKGAR2W_HAPO";
|
|
|
|
const handleExcelDownload = async () => {
|
|
if (orders.length === 0) { toast.error("다운로드할 데이터가 없습니다."); return; }
|
|
const cols = ["order_no","part_code","part_name","spec","unit","qty","ship_qty","balance_qty","unit_price","amount","currency_code","due_date","memo"];
|
|
const labels: Record<string, string> = {
|
|
order_no:"수주번호",part_code:"품번",part_name:"품명",spec:"규격",unit:"단위",
|
|
qty:"수량",ship_qty:"출하수량",balance_qty:"잔량",unit_price:"단가",
|
|
amount:"금액",currency_code:"통화",due_date:"납기일",memo:"메모",
|
|
};
|
|
const data = orders.map((o) => {
|
|
const row: Record<string, any> = {};
|
|
for (const col of cols) row[labels[col]] = o[col] || "";
|
|
return row;
|
|
});
|
|
await exportToExcel(data, "수주관리.xlsx", "수주목록");
|
|
toast.success("다운로드 완료");
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-full flex-col gap-3 p-3">
|
|
{/* 브레드크럼 */}
|
|
<nav className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
|
<span>영업관리</span>
|
|
<span className="opacity-40">/</span>
|
|
<span className="font-medium text-foreground">수주관리</span>
|
|
</nav>
|
|
|
|
{/* 검색 필터 (DynamicSearchFilter) */}
|
|
<DynamicSearchFilter
|
|
tableName={DETAIL_TABLE}
|
|
filterId="c16-sales-order"
|
|
onFilterChange={setSearchFilters}
|
|
dataCount={orders.length}
|
|
externalFilterConfig={ts.filterConfig}
|
|
/>
|
|
|
|
{/* 액션 바 */}
|
|
<div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<h2 className="text-lg font-bold">수주 목록</h2>
|
|
<span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2.5 py-0.5 font-mono text-[11px] font-bold text-primary">
|
|
{totalCount}건
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 overflow-x-auto">
|
|
<Button size="sm" onClick={openRegisterModal}>
|
|
<Plus className="w-4 h-4" /> 등록
|
|
</Button>
|
|
<Button
|
|
variant="outline" size="sm"
|
|
disabled={checkedIds.length !== 1}
|
|
onClick={() => {
|
|
const item = orders.find((o) => o.id === checkedIds[0]);
|
|
if (item) openEditModal(item.order_no);
|
|
}}
|
|
>
|
|
<Pencil className="w-4 h-4" /> 수정
|
|
</Button>
|
|
<Button
|
|
variant="outline" size="sm"
|
|
className="text-destructive border-destructive/20 bg-destructive/5 hover:bg-destructive/10 hover:text-destructive"
|
|
disabled={checkedIds.length === 0}
|
|
onClick={handleDelete}
|
|
>
|
|
<Trash2 className="w-4 h-4" /> 삭제{checkedIds.length > 0 && ` (${checkedIds.length})`}
|
|
</Button>
|
|
<div className="h-5 w-px bg-border mx-0.5" />
|
|
<Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
|
|
<FileSpreadsheet className="w-4 h-4" /> 엑셀 업로드
|
|
</Button>
|
|
<Button variant="outline" size="sm" onClick={handleExcelDownload}>
|
|
<Download className="w-4 h-4" /> 엑셀
|
|
</Button>
|
|
<Button variant="outline" size="sm" disabled={checkedIds.length === 0} onClick={() => setShippingPlanOpen(true)}>
|
|
<Truck className="w-4 h-4" /> 출하계획{checkedIds.length > 0 && ` (${checkedIds.length})`}
|
|
</Button>
|
|
<div className="h-5 w-px bg-border mx-0.5" />
|
|
<Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
|
|
<Settings2 className="w-4 h-4" /> 설정
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 데이터 테이블 (플랫 리스트) */}
|
|
<div className="flex-1 overflow-hidden rounded-lg border border-border bg-card">
|
|
<div className="h-full overflow-auto">
|
|
<Table noWrapper style={{ minWidth: "1500px" }}>
|
|
<colgroup>
|
|
<col style={{ width: "40px" }} />
|
|
<col style={{ width: "140px" }} />
|
|
<col style={{ width: "140px" }} />
|
|
<col style={{ width: "100px" }} />
|
|
<col style={{ width: "120px" }} />
|
|
<col style={{ width: "140px" }} />
|
|
<col style={{ width: "80px" }} />
|
|
<col style={{ width: "70px" }} />
|
|
<col style={{ width: "80px" }} />
|
|
<col style={{ width: "80px" }} />
|
|
<col style={{ width: "80px" }} />
|
|
<col style={{ width: "90px" }} />
|
|
<col style={{ width: "110px" }} />
|
|
<col style={{ width: "100px" }} />
|
|
<col style={{ width: "120px" }} />
|
|
</colgroup>
|
|
<TableHeader className="sticky top-0 z-10">
|
|
<TableRow className="bg-muted hover:bg-muted">
|
|
<TableHead
|
|
className="text-center cursor-pointer"
|
|
onClick={() => {
|
|
const allFilteredIds = filteredFlatRows.map((r) => r.id);
|
|
const allChecked = allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
|
|
setCheckedIds(allChecked ? [] : allFilteredIds);
|
|
}}
|
|
>
|
|
<Checkbox
|
|
checked={(() => {
|
|
const allFilteredIds = filteredFlatRows.map((r) => r.id);
|
|
return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
|
|
})()}
|
|
onCheckedChange={() => {}}
|
|
/>
|
|
</TableHead>
|
|
{FLAT_COLUMNS.map((col) => {
|
|
const isRight = ["qty", "ship_qty", "balance_qty", "unit_price", "amount"].includes(col.key);
|
|
return (
|
|
<TableHead key={col.key} className={cn("text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none", isRight && "text-right")}>
|
|
<div className={cn("inline-flex items-center gap-1", isRight && "justify-end w-full")}>
|
|
<div className="flex items-center gap-1 cursor-pointer min-w-0" onClick={() => handleSort(col.key)}>
|
|
<span className="truncate">{col.label}</span>
|
|
{sortState?.key === col.key && (
|
|
sortState.direction === "asc"
|
|
? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
|
|
: <ArrowDown className="h-3 w-3 text-primary shrink-0" />
|
|
)}
|
|
</div>
|
|
{(columnUniqueValues[col.key] || []).length > 0 && (
|
|
<HeaderFilterPopover
|
|
colKey={col.key} colLabel={col.label}
|
|
uniqueValues={columnUniqueValues[col.key] || []}
|
|
filterValues={headerFilters[col.key] || new Set<string>()}
|
|
onToggle={toggleHeaderFilter} onClear={clearHeaderFilter}
|
|
/>
|
|
)}
|
|
</div>
|
|
</TableHead>
|
|
);
|
|
})}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{loading ? (
|
|
<TableRow>
|
|
<TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
|
|
<Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
|
|
</TableCell>
|
|
</TableRow>
|
|
) : filteredFlatRows.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
|
|
<div className="flex flex-col items-center gap-2 text-muted-foreground">
|
|
<ClipboardList className="h-8 w-8 opacity-30" />
|
|
<span className="text-sm">등록된 수주가 없어요</span>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredFlatRows.map((row) => {
|
|
const isChecked = checkedIds.includes(row.id);
|
|
return (
|
|
<TableRow
|
|
key={row.id}
|
|
className={cn(
|
|
"cursor-pointer border-l-[3px] border-l-transparent transition-all",
|
|
isChecked ? "border-l-primary bg-primary/5" : "hover:bg-accent/50"
|
|
)}
|
|
onClick={() => {
|
|
setCheckedIds((prev) =>
|
|
prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
|
|
);
|
|
}}
|
|
onDoubleClick={() => openEditModal(row.order_no)}
|
|
>
|
|
<TableCell
|
|
className="text-center cursor-pointer"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setCheckedIds((prev) =>
|
|
prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
|
|
);
|
|
}}
|
|
>
|
|
<Checkbox checked={isChecked} onCheckedChange={() => {}} />
|
|
</TableCell>
|
|
<TableCell className="font-mono whitespace-nowrap text-[13px]">{row.order_no}</TableCell>
|
|
<TableCell className="text-[13px] truncate max-w-[140px]"><span className="block truncate">{row.partner_id || ""}</span></TableCell>
|
|
<TableCell className="whitespace-nowrap text-[13px]">{row.order_date || ""}</TableCell>
|
|
<TableCell className="font-mono text-[13px]">{row.part_code}</TableCell>
|
|
<TableCell className="text-[13px] max-w-[150px]"><span className="block truncate" title={row.part_name}>{row.part_name}</span></TableCell>
|
|
<TableCell className="text-[13px] text-muted-foreground">{row.spec}</TableCell>
|
|
<TableCell className="text-[13px]">{row.unit}</TableCell>
|
|
<TableCell className="text-right font-mono text-[13px]">{row.qty ? Number(row.qty).toLocaleString() : ""}</TableCell>
|
|
<TableCell className="text-right font-mono text-[13px] text-muted-foreground">{row.ship_qty ? Number(row.ship_qty).toLocaleString() : ""}</TableCell>
|
|
<TableCell className="text-right font-mono text-[13px]">{row.balance_qty ? Number(row.balance_qty).toLocaleString() : ""}</TableCell>
|
|
<TableCell className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>
|
|
<TableCell className="text-right font-mono text-[13px] font-semibold">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>
|
|
<TableCell className="text-[13px]">{row.due_date || ""}</TableCell>
|
|
<TableCell className="text-muted-foreground"><span className="block truncate max-w-[120px]">{row.memo || ""}</span></TableCell>
|
|
</TableRow>
|
|
);
|
|
})
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 수주 등록/수정 모달 */}
|
|
<Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
|
|
<DialogContent className="flex flex-col gap-0 p-0 max-w-5xl w-full" style={{ maxHeight: "85vh" }}>
|
|
<DialogHeader className="shrink-0 border-b border-border px-6 py-5">
|
|
<DialogTitle className="text-[17px] font-bold">
|
|
{isEditMode ? "수주 수정" : "수주 등록"}
|
|
</DialogTitle>
|
|
<DialogDescription className="text-sm text-muted-foreground">
|
|
{isEditMode ? "수주 정보를 수정합니다." : "새로운 수주를 등록합니다."}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex-1 overflow-y-auto px-6 py-5 space-y-6">
|
|
{/* 기본 정보 섹션 */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
|
|
기본 정보
|
|
<div className="flex-1 h-px bg-border" />
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-3.5 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div className="space-y-1">
|
|
<Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
|
|
수주번호 <span className="text-destructive">*</span>
|
|
</Label>
|
|
<Input
|
|
value={masterForm.order_no || ""}
|
|
onChange={(e) => setMasterForm((p) => ({ ...p, order_no: e.target.value }))}
|
|
placeholder="수주번호" className="h-9" disabled={isEditMode}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
|
|
수주일 <span className="text-destructive">*</span>
|
|
</Label>
|
|
<Input
|
|
type="date"
|
|
value={masterForm.order_date || ""}
|
|
onChange={(e) => setMasterForm((p) => ({ ...p, order_date: e.target.value }))}
|
|
className="h-9"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
|
|
판매유형 <span className="text-destructive">*</span>
|
|
</Label>
|
|
<Select value={masterForm.sell_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, sell_mode: v }))}>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(categoryOptions["sell_mode"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">입력방식</Label>
|
|
<Select value={masterForm.input_mode || ""} onValueChange={(v) => {
|
|
setMasterForm((p) => {
|
|
const next = { ...p, input_mode: v };
|
|
// 입력방식 변경 시 거래처 관련 값 초기화
|
|
delete next.partner_id;
|
|
delete next.delivery_partner_id;
|
|
delete next.delivery_address;
|
|
return next;
|
|
});
|
|
setDeliveryOptions([]);
|
|
}}>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(categoryOptions["input_mode"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">단가방식</Label>
|
|
<Select value={masterForm.price_mode || ""} onValueChange={(v) => { setMasterForm((p) => ({ ...p, price_mode: v })); recalcPrices(v, masterForm.partner_id || ""); }}>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(categoryOptions["price_mode"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="flex items-end pb-1">
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<Checkbox checked={allowPriceEdit} onCheckedChange={(v) => setAllowPriceEdit(!!v)} />
|
|
<span className="text-sm font-medium">단가 수정 허용</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 거래처 우선 조건부 레이어 */}
|
|
{isSupplierFirst && (
|
|
<div className="rounded-lg border border-dashed border-border bg-muted/50 p-4 space-y-3">
|
|
<div className="flex items-center gap-1.5 text-xs font-semibold text-primary">
|
|
<ClipboardList className="w-3.5 h-3.5" /> 거래처 정보
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-3.5 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div className="space-y-1">
|
|
<Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">거래처</Label>
|
|
<Select
|
|
value={masterForm.partner_id || ""}
|
|
onValueChange={(v) => { setMasterForm((p) => ({ ...p, partner_id: v, delivery_partner_id: "" })); loadDeliveryOptions(v); recalcPrices(masterForm.price_mode || "", v); }}
|
|
>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="거래처 선택" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(categoryOptions["partner_id"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">담당자</Label>
|
|
<Select value={masterForm.manager_id || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, manager_id: v }))}>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="담당자 선택" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(categoryOptions["manager_id"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">납품처</Label>
|
|
{deliveryOptions.length > 0 ? (
|
|
<Select
|
|
value={masterForm.delivery_partner_id || ""}
|
|
onValueChange={(v) => {
|
|
setMasterForm((p) => ({ ...p, delivery_partner_id: v }));
|
|
const found = deliveryOptions.find((o) => o.code === v);
|
|
if (found) {
|
|
const addr = found.label.match(/\((.+)\)$/)?.[1] || "";
|
|
if (addr) setMasterForm((p) => ({ ...p, delivery_partner_id: v, delivery_address: addr }));
|
|
}
|
|
}}
|
|
>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="납품처 선택" /></SelectTrigger>
|
|
<SelectContent>
|
|
{deliveryOptions.map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<Input
|
|
value={masterForm.delivery_partner_id || ""}
|
|
onChange={(e) => setMasterForm((p) => ({ ...p, delivery_partner_id: e.target.value }))}
|
|
placeholder={masterForm.partner_id ? "등록된 납품처 없음" : "거래처를 먼저 선택해주세요"}
|
|
className="h-9" disabled={!masterForm.partner_id}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">납품장소</Label>
|
|
<Input
|
|
value={masterForm.delivery_address || ""}
|
|
onChange={(e) => setMasterForm((p) => ({ ...p, delivery_address: e.target.value }))}
|
|
placeholder="납품장소" className="h-9"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 해외판매 조건부 레이어 */}
|
|
{isOverseas && (
|
|
<div className="rounded-lg border border-dashed border-border bg-muted/50 p-4 space-y-3">
|
|
<div className="flex items-center gap-1.5 text-xs font-semibold text-primary">
|
|
해외판매 추가 정보
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-3.5 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div className="space-y-1">
|
|
<Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">인코텀즈</Label>
|
|
<Select value={masterForm.incoterms || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, incoterms: v }))}>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(categoryOptions["incoterms"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">결제조건</Label>
|
|
<Select value={masterForm.payment_term || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, payment_term: v }))}>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(categoryOptions["payment_term"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">통화</Label>
|
|
<Select value={masterForm.currency || "KRW"} onValueChange={(v) => setMasterForm((p) => ({ ...p, currency: v }))}>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="통화 선택" /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="KRW">KRW (원)</SelectItem>
|
|
<SelectItem value="USD">USD (달러)</SelectItem>
|
|
<SelectItem value="EUR">EUR (유로)</SelectItem>
|
|
<SelectItem value="JPY">JPY (엔)</SelectItem>
|
|
<SelectItem value="CNY">CNY (위안)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">선적항</Label>
|
|
<Input value={masterForm.port_of_loading || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_loading: e.target.value }))} className="h-9" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">도착항</Label>
|
|
<Input value={masterForm.port_of_discharge || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_discharge: e.target.value }))} className="h-9" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">HS Code</Label>
|
|
<Input value={masterForm.hs_code || ""} onChange={(e) => setMasterForm((p) => ({ ...p, hs_code: e.target.value }))} className="h-9 font-mono text-xs" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 품목 내역 리피터 */}
|
|
<div className="space-y-2.5">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
|
|
<Package className="w-4 h-4" /> 품목 내역
|
|
<span className="inline-flex items-center rounded-full border border-primary/15 bg-primary/5 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
|
|
{detailRows.length}
|
|
</span>
|
|
</div>
|
|
<Button size="sm" onClick={() => {
|
|
setItemSelectedMap(new Map());
|
|
setItemPage(1);
|
|
setItemPageInput("1");
|
|
setItemSearchKeyword("");
|
|
setItemSelectOpen(true);
|
|
searchItems(1);
|
|
}}>
|
|
<Plus className="w-4 h-4" /> 품목 추가
|
|
</Button>
|
|
</div>
|
|
{detailRows.length === 0 ? (
|
|
<div className="flex flex-col items-center gap-2 rounded-lg border border-dashed border-border py-8 text-muted-foreground">
|
|
<Package className="h-8 w-8 opacity-40" />
|
|
<span className="text-sm">아직 추가된 품목이 없어요. 위 버튼으로 품목을 추가해주세요.</span>
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto rounded-lg border border-border">
|
|
<Table noWrapper className="min-w-max w-full">
|
|
<TableHeader className="sticky top-0 z-10">
|
|
<TableRow className="bg-muted hover:bg-muted">
|
|
<TableHead className="min-w-[40px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">No</TableHead>
|
|
<TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
|
|
<TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
|
|
<TableHead className="min-w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
|
|
<TableHead className="min-w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
|
|
<TableHead className="min-w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장재</TableHead>
|
|
<TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
|
|
<TableHead className="min-w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
|
|
<TableHead className="min-w-[100px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장수량</TableHead>
|
|
<TableHead className="min-w-[120px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
|
|
<TableHead className="min-w-[100px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
|
|
<TableHead className="min-w-[160px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납기일</TableHead>
|
|
<TableHead className="min-w-[110px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">분할/삭제</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{detailRows.map((row, idx) => (
|
|
<TableRow key={row._id || idx}>
|
|
<TableCell className="text-center font-mono text-[13px] text-muted-foreground/50">{idx + 1}</TableCell>
|
|
<TableCell className="whitespace-nowrap">
|
|
<span className="font-mono text-[13px]" title={row.part_code}>{row.part_code}</span>
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap">
|
|
<span className="text-[13px]" title={row.part_name}>{row.part_name}</span>
|
|
</TableCell>
|
|
<TableCell className="text-[13px] text-muted-foreground whitespace-nowrap">{row.spec}</TableCell>
|
|
<TableCell className="text-[13px] text-muted-foreground whitespace-nowrap">{row.material}</TableCell>
|
|
<TableCell>
|
|
<Input
|
|
value={row.packing_material || ""}
|
|
onChange={(e) => updateDetailRow(idx, "packing_material", e.target.value)}
|
|
placeholder="포장재"
|
|
className="h-8 text-xs w-full"
|
|
/>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Select value={row.unit || ""} onValueChange={(v) => updateDetailRow(idx, "unit", v)}>
|
|
<SelectTrigger className="h-8 text-xs w-full"><SelectValue placeholder="단위" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(categoryOptions["item_unit"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Input
|
|
type="number"
|
|
min="1"
|
|
value={row.qty || "1"}
|
|
onChange={(e) => updateDetailRow(idx, "qty", e.target.value)}
|
|
className="h-8 text-xs text-right font-mono w-full"
|
|
/>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Input
|
|
type="number"
|
|
min="0"
|
|
value={row.pack_qty || "0"}
|
|
onChange={(e) => updateDetailRow(idx, "pack_qty", e.target.value)}
|
|
className="h-8 text-xs text-right font-mono w-full"
|
|
/>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Input
|
|
value={formatNumber(row.unit_price || "")}
|
|
onChange={(e) => updateDetailRow(idx, "unit_price", parseNumber(e.target.value))}
|
|
readOnly={!allowPriceEdit}
|
|
className={cn("h-8 text-xs text-right font-mono w-full", !allowPriceEdit && "bg-muted cursor-not-allowed")}
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="text-right font-mono text-[13px] font-semibold whitespace-nowrap">
|
|
{row.amount ? Number(row.amount).toLocaleString() : "0"}
|
|
</TableCell>
|
|
<TableCell>
|
|
<Input
|
|
type="date"
|
|
value={row.due_date || ""}
|
|
onChange={(e) => updateDetailRow(idx, "due_date", e.target.value)}
|
|
className="h-8 text-xs w-full"
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<div className="flex items-center gap-1 justify-center">
|
|
<Button
|
|
variant="default" size="sm"
|
|
className="h-7 px-2 text-[11px] bg-emerald-500 hover:bg-emerald-600 text-white"
|
|
onClick={() => {
|
|
setDetailRows((prev) => {
|
|
const next = [...prev];
|
|
const newRow = { ...next[idx], _id: `split_${Date.now()}_${Math.random()}` };
|
|
next.splice(idx + 1, 0, newRow);
|
|
return next;
|
|
});
|
|
toast.success("행이 분할되었어요");
|
|
}}
|
|
>
|
|
분할
|
|
</Button>
|
|
<Button
|
|
variant="ghost" size="sm"
|
|
className="h-7 w-7 p-0 text-muted-foreground/50 hover:text-destructive hover:bg-destructive/5"
|
|
onClick={() => removeDetailRow(idx)}
|
|
>
|
|
<X className="w-3.5 h-3.5" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 비고 */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2 text-[13px] font-bold text-muted-foreground">
|
|
비고
|
|
<div className="flex-1 h-px bg-border" />
|
|
</div>
|
|
<textarea
|
|
value={masterForm.memo || ""}
|
|
onChange={(e) => setMasterForm((p) => ({ ...p, memo: e.target.value }))}
|
|
placeholder="특이사항이나 메모를 입력해주세요"
|
|
rows={3}
|
|
className="w-full rounded-md border border-input bg-muted px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/50 focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring/25 resize-vertical min-h-[80px]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="shrink-0 border-t border-border px-6 py-4">
|
|
<Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
|
|
<Button onClick={handleSave} disabled={saving}>
|
|
{saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />} 저장
|
|
</Button>
|
|
</DialogFooter>
|
|
|
|
{/* 품목 선택 중첩 모달 */}
|
|
<Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
|
|
<DialogContent className="max-w-3xl" style={{ maxHeight: "70vh" }} onInteractOutside={(e) => e.preventDefault()}>
|
|
<DialogHeader>
|
|
<DialogTitle>품목 선택</DialogTitle>
|
|
<DialogDescription>수주에 추가할 품목을 선택 후 하단 버튼을 눌러주세요.</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex gap-2 mb-3">
|
|
<Input
|
|
placeholder="품명/품목코드 검색"
|
|
value={itemSearchKeyword}
|
|
onChange={(e) => setItemSearchKeyword(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && triggerNewSearch()}
|
|
className="h-9 flex-1"
|
|
/>
|
|
<div className="h-9 px-3 flex items-center rounded-md border border-input bg-muted text-xs font-medium text-muted-foreground whitespace-nowrap">영업관리</div>
|
|
<Button size="sm" onClick={triggerNewSearch} disabled={itemSearchLoading} className="h-9">
|
|
{itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" />조회</>}
|
|
</Button>
|
|
</div>
|
|
<div className="overflow-auto rounded-lg border border-border" style={{ maxHeight: "320px" }}>
|
|
<Table noWrapper>
|
|
<TableHeader className="sticky top-0 z-10">
|
|
<TableRow className="bg-muted hover:bg-muted">
|
|
<TableHead className="w-10 text-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={itemSearchResults.length > 0 && itemSearchResults.every((i) => itemSelectedMap.has(i.id))}
|
|
onChange={(e) => {
|
|
setItemSelectedMap((prev) => {
|
|
const next = new Map(prev);
|
|
if (e.target.checked) itemSearchResults.forEach((i) => next.set(i.id, i));
|
|
else itemSearchResults.forEach((i) => next.delete(i.id));
|
|
return next;
|
|
});
|
|
}}
|
|
/>
|
|
</TableHead>
|
|
<TableHead className="w-32 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
|
|
<TableHead className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
|
|
<TableHead className="w-24 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
|
|
<TableHead className="w-24 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
|
|
<TableHead className="w-16 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{itemSearchResults.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="py-8 text-center text-muted-foreground">검색 결과가 없어요</TableCell>
|
|
</TableRow>
|
|
) : itemSearchResults.map((item) => (
|
|
<TableRow
|
|
key={item.id}
|
|
className={cn("cursor-pointer", itemSelectedMap.has(item.id) && "bg-primary/5")}
|
|
onClick={() => setItemSelectedMap((prev) => {
|
|
const next = new Map(prev);
|
|
if (next.has(item.id)) next.delete(item.id); else next.set(item.id, item);
|
|
return next;
|
|
})}
|
|
>
|
|
<TableCell className="text-center">
|
|
<input type="checkbox" checked={itemSelectedMap.has(item.id)} readOnly />
|
|
</TableCell>
|
|
<TableCell className="max-w-[128px]">
|
|
<span className="block truncate text-[13px]" title={item.item_number}>{item.item_number}</span>
|
|
</TableCell>
|
|
<TableCell className="max-w-[150px]">
|
|
<span className="block truncate text-sm" title={item.item_name}>{item.item_name}</span>
|
|
</TableCell>
|
|
<TableCell className="text-[13px]">{item.size}</TableCell>
|
|
<TableCell className="text-[13px]">
|
|
{categoryOptions["item_material"]?.find((o) => o.code === item.material)?.label || item.material}
|
|
</TableCell>
|
|
<TableCell className="text-[13px]">
|
|
{categoryOptions["item_unit"]?.find((o) => o.code === item.unit)?.label || item.unit}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
<div className="flex items-center justify-between w-full border-t pt-2">
|
|
<div className="flex items-center gap-1">
|
|
<span className="text-xs text-muted-foreground">표시:</span>
|
|
<input
|
|
type="number" min={1} max={200} value={itemPageSize}
|
|
onChange={(e) => {
|
|
const v = Math.min(200, Math.max(1, Number(e.target.value) || 20));
|
|
setItemPageSize(v);
|
|
setItemPage(1);
|
|
setItemPageInput("1");
|
|
searchItems(1, v);
|
|
}}
|
|
className="h-7 w-14 rounded-md border px-1 text-center text-xs"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Button variant="outline" size="sm" className="h-7 w-7 p-0"
|
|
onClick={() => handleItemPageChange(1)} disabled={itemPage === 1 || itemSearchLoading}>
|
|
<ChevronsLeft className="h-3 w-3" />
|
|
</Button>
|
|
<Button variant="outline" size="sm" className="h-7 w-7 p-0"
|
|
onClick={() => handleItemPageChange(itemPage - 1)} disabled={itemPage === 1 || itemSearchLoading}>
|
|
<ChevronLeft className="h-3 w-3" />
|
|
</Button>
|
|
<input
|
|
type="text" inputMode="numeric" value={itemPageInput}
|
|
onChange={(e) => setItemPageInput(e.target.value)}
|
|
onKeyDown={(e) => { if (e.key === "Enter") { commitItemPageInput(); (e.target as HTMLInputElement).blur(); } }}
|
|
onBlur={commitItemPageInput}
|
|
onFocus={(e) => e.target.select()}
|
|
className="h-7 w-10 rounded-md border px-1 text-center text-xs"
|
|
/>
|
|
<span className="text-xs text-muted-foreground">/ {itemTotalPages || 1}</span>
|
|
<Button variant="outline" size="sm" className="h-7 w-7 p-0"
|
|
onClick={() => handleItemPageChange(itemPage + 1)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
|
|
<ChevronRight className="h-3 w-3" />
|
|
</Button>
|
|
<Button variant="outline" size="sm" className="h-7 w-7 p-0"
|
|
onClick={() => handleItemPageChange(itemTotalPages)} disabled={itemPage >= itemTotalPages || itemSearchLoading}>
|
|
<ChevronsRight className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
<span className="text-xs text-muted-foreground">총 {itemTotal}건</span>
|
|
</div>
|
|
<DialogFooter>
|
|
<div className="flex w-full items-center justify-between">
|
|
<span className="text-sm text-muted-foreground">{itemSelectedMap.size}개 선택됨</span>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={() => { setItemSelectedMap(new Map()); setItemSelectOpen(false); }}>취소</Button>
|
|
<Button onClick={addSelectedItemsToDetail} disabled={itemSelectedMap.size === 0}>
|
|
<Plus className="w-4 h-4 mr-1" />{itemSelectedMap.size}개 추가
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 출하계획 동시 등록 모달 */}
|
|
<ShippingPlanBatchModal
|
|
open={shippingPlanOpen}
|
|
onOpenChange={setShippingPlanOpen}
|
|
selectedDetailIds={checkedIds}
|
|
onSuccess={fetchOrders}
|
|
/>
|
|
|
|
{/* 엑셀 업로드 */}
|
|
<ExcelUploadModal
|
|
open={excelUploadOpen}
|
|
onOpenChange={setExcelUploadOpen}
|
|
tableName={DETAIL_TABLE}
|
|
userId={user?.userId}
|
|
onSuccess={() => fetchOrders()}
|
|
/>
|
|
|
|
{/* 테이블 설정 모달 */}
|
|
<TableSettingsModal
|
|
open={ts.open}
|
|
onOpenChange={ts.setOpen}
|
|
tableName={ts.tableName}
|
|
settingsId={ts.settingsId}
|
|
defaultVisibleKeys={ts.defaultVisibleKeys}
|
|
onSave={ts.applySettings}
|
|
/>
|
|
|
|
{/* 공통 확인 다이얼로그 */}
|
|
{ConfirmDialogComponent}
|
|
</div>
|
|
);
|
|
}
|