kjs
2776437702
- Updated the customer form validation to only check for the business number, removing checks for contact phone and email. - Removed unused input fields for contact person, phone, and email from the customer management page to streamline the form and improve user experience. - This change aims to enhance the clarity and usability of the customer management interface across multiple company implementations.
2790 lines
148 KiB
TypeScript
2790 lines
148 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* 거래처관리 — Type B 마스터-디테일 레이아웃 (리디자인)
|
|
*
|
|
* 좌측: 거래처 목록 (customer_mng)
|
|
* 우측: 품목별 단가 + 납품처 정보 탭
|
|
*
|
|
* 모달:
|
|
* - 거래처 등록/수정 (customer_mng)
|
|
* - 품목 추가 (item_info 검색 → customer_item_mapping + customer_item_prices)
|
|
* - 납품처 등록 (delivery_destination)
|
|
*/
|
|
|
|
import React, { useState, useEffect, useCallback, useRef, 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 { Badge } from "@/components/ui/badge";
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
|
|
import { Label } from "@/components/ui/label";
|
|
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
|
|
import {
|
|
Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil,
|
|
Users, Package, MapPin, Search, X, Tag, Coins, Settings2, GripVertical,
|
|
ChevronRight, ChevronDown,
|
|
} from "lucide-react";
|
|
import {
|
|
DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent,
|
|
} from "@dnd-kit/core";
|
|
import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from "@dnd-kit/sortable";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
import { cn } from "@/lib/utils";
|
|
import { apiClient } from "@/lib/api/client";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { toast } from "sonner";
|
|
import { useConfirmDialog } from "@/components/common/ConfirmDialog";
|
|
import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
|
|
import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
|
|
import { exportToExcel } from "@/lib/utils/excelExport";
|
|
import { validateField, validateForm, formatField } from "@/lib/utils/validation";
|
|
import { getAvailableNumberingRulesForScreen, previewNumberingCode, allocateNumberingCode } from "@/lib/api/numberingRule";
|
|
import { TableSettingsModal } from "@/components/common/TableSettingsModal";
|
|
import { useTableSettings } from "@/hooks/useTableSettings";
|
|
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
|
import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
|
|
|
|
const CUSTOMER_TABLE = "customer_mng";
|
|
const MAPPING_TABLE = "customer_item_mapping";
|
|
const PRICE_TABLE = "customer_item_prices";
|
|
const DELIVERY_TABLE = "delivery_destination";
|
|
const CONTACT_TABLE = "customer_contact";
|
|
|
|
const CUSTOMER_GRID_COLUMNS = [
|
|
{ key: "customer_code", label: "거래처코드" },
|
|
{ key: "customer_name", label: "거래처명" },
|
|
{ key: "division", label: "거래유형" },
|
|
{ key: "contact_person", label: "담당자" },
|
|
{ key: "contact_phone", label: "전화번호" },
|
|
{ key: "email", label: "이메일" },
|
|
{ key: "business_number", label: "사업자번호" },
|
|
{ key: "address", label: "주소" },
|
|
{ key: "status", label: "상태" },
|
|
];
|
|
|
|
function SortableMappingRow({ id, children }: { id: string; children: React.ReactNode }) {
|
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
|
|
const style: React.CSSProperties = {
|
|
transform: CSS.Transform.toString(transform), transition,
|
|
opacity: isDragging ? 0.5 : 1,
|
|
};
|
|
return (
|
|
<div ref={setNodeRef} style={style} className="flex gap-2 items-center">
|
|
<div {...attributes} {...listeners} className="cursor-grab text-muted-foreground/40 hover:text-muted-foreground shrink-0">
|
|
<GripVertical className="h-3.5 w-3.5" />
|
|
</div>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function CustomerManagementPage() {
|
|
const { user } = useAuth();
|
|
const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
|
|
const ts = useTableSettings("c16-customer", CUSTOMER_TABLE, CUSTOMER_GRID_COLUMNS);
|
|
const dndSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
|
|
|
|
// 검색 필터 (DynamicSearchFilter에서 관리)
|
|
const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
|
|
|
|
// 좌측: 거래처 목록
|
|
const [customers, setCustomers] = useState<any[]>([]);
|
|
const [rawCustomers, setRawCustomers] = useState<any[]>([]);
|
|
const [customerLoading, setCustomerLoading] = useState(false);
|
|
const [showInactive, setShowInactive] = useState(false);
|
|
const [mainContactMap, setMainContactMap] = useState<Record<string, any>>({});
|
|
const [customerCount, setCustomerCount] = useState(0);
|
|
const [selectedCustomerId, setSelectedCustomerId] = useState<string | null>(null);
|
|
|
|
// 우측: 탭
|
|
const [rightTab, setRightTab] = useState<"items" | "delivery">("items");
|
|
// 우측: 품목 단가
|
|
const [priceItems, setPriceItems] = useState<any[]>([]);
|
|
const [priceGroups, setPriceGroups] = useState<Record<string, { master: any; details: any[] }>>({});
|
|
const [priceLoading, setPriceLoading] = useState(false);
|
|
const [priceCheckedIds, setPriceCheckedIds] = useState<string[]>([]);
|
|
const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
|
|
const [collapsedPriceCards, setCollapsedPriceCards] = useState<Set<string>>(new Set());
|
|
// 우측: 납품처
|
|
const [deliveryItems, setDeliveryItems] = useState<any[]>([]);
|
|
const [deliveryLoading, setDeliveryLoading] = useState(false);
|
|
|
|
// 품목 편집 데이터 (더블클릭 시 상세 입력 모달 재활용)
|
|
const [editItemData, setEditItemData] = useState<any>(null);
|
|
const savingRef = useRef(false);
|
|
|
|
// 거래처 모달
|
|
const [customerModalOpen, setCustomerModalOpen] = useState(false);
|
|
const [customerEditMode, setCustomerEditMode] = useState(false);
|
|
const [customerForm, setCustomerForm] = useState<Record<string, any>>({});
|
|
const [formErrors, setFormErrors] = useState<Record<string, string>>({});
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
// 품목 추가 모달 (1단계: 검색/선택)
|
|
const [itemSelectOpen, setItemSelectOpen] = useState(false);
|
|
const [itemSearchKeyword, setItemSearchKeyword] = useState("");
|
|
const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
|
|
const [itemTotalCount, setItemTotalCount] = useState(0);
|
|
const [itemSearchLoading, setItemSearchLoading] = useState(false);
|
|
const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
|
|
|
|
// 품목 상세 입력 모달 (2단계: 거래처 품번/품명 + 단가)
|
|
const [itemDetailOpen, setItemDetailOpen] = useState(false);
|
|
const [selectedItemsForDetail, setSelectedItemsForDetail] = useState<any[]>([]);
|
|
const [itemMappings, setItemMappings] = useState<Record<string, Array<{ _id: string; customer_item_code: string; customer_item_name: string }>>>({});
|
|
const [itemPrices, setItemPrices] = useState<Record<string, Array<{
|
|
_id: string; start_date: string; end_date: string; currency_code: string;
|
|
base_price_type: string; base_price: string; discount_type: string;
|
|
discount_value: string; rounding_type: string; rounding_unit_value: string;
|
|
calculated_price: string;
|
|
}>>>({});
|
|
const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
|
|
|
|
// 거래처 모달 탭
|
|
const [customerModalTab, setCustomerModalTab] = useState<"basic" | "contacts" | "delivery">("basic");
|
|
// 담당자 (customer_contact) - 모달 내
|
|
const [modalContacts, setModalContacts] = useState<any[]>([]);
|
|
const [modalContactLoading, setModalContactLoading] = useState(false);
|
|
const [modalContactForm, setModalContactForm] = useState<Record<string, any>>({});
|
|
const [modalContactEditId, setModalContactEditId] = useState<string | null>(null);
|
|
const [modalContactFormOpen, setModalContactFormOpen] = useState(false);
|
|
const [modalContactSaving, setModalContactSaving] = useState(false);
|
|
// 납품처 (delivery_destination) - 모달 내
|
|
const [modalDeliveries, setModalDeliveries] = useState<any[]>([]);
|
|
const [modalDeliveryLoading, setModalDeliveryLoading] = useState(false);
|
|
const [modalDeliveryForm, setModalDeliveryForm] = useState<Record<string, any>>({});
|
|
const [modalDeliveryEditId, setModalDeliveryEditId] = useState<string | null>(null);
|
|
const [modalDeliveryFormOpen, setModalDeliveryFormOpen] = useState(false);
|
|
const [modalDeliverySaving, setModalDeliverySaving] = useState(false);
|
|
const [modalDeliveryFormErrors, setModalDeliveryFormErrors] = useState<Record<string, string>>({});
|
|
|
|
const [continuousInput, setContinuousInput] = useState(false);
|
|
|
|
// 세금유형 (기본정보 탭 내)
|
|
const [taxTypeRows, setTaxTypeRows] = useState<{ _id: string; tax_type_name: string; rate: string }[]>([]);
|
|
const [taxTypeOptions, setTaxTypeOptions] = useState<{ code: string; label: string }[]>([]);
|
|
|
|
// 엑셀
|
|
const [excelUploadOpen, setExcelUploadOpen] = useState(false);
|
|
const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
|
|
const [excelDetecting, setExcelDetecting] = useState(false);
|
|
|
|
// 카테고리
|
|
const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
|
|
const [employeeOptions, setEmployeeOptions] = useState<{ user_id: string; user_name: string; position_name?: string }[]>([]);
|
|
|
|
|
|
// 카테고리 로드
|
|
useEffect(() => {
|
|
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 load = async () => {
|
|
const optMap: Record<string, { code: string; label: string }[]> = {};
|
|
for (const col of ["division", "status"]) {
|
|
try {
|
|
const res = await apiClient.get(`/table-categories/${CUSTOMER_TABLE}/${col}/values`);
|
|
if (res.data?.success) optMap[col] = flatten(res.data.data || []);
|
|
} catch { /* skip */ }
|
|
}
|
|
for (const col of ["division", "unit", "material"]) {
|
|
try {
|
|
const res = await apiClient.get(`/table-categories/item_info/${col}/values`);
|
|
if (res.data?.success) optMap[`item_${col}`] = flatten(res.data.data || []);
|
|
} catch { /* skip */ }
|
|
}
|
|
setCategoryOptions(optMap);
|
|
|
|
const priceOpts: Record<string, { code: string; label: string }[]> = {};
|
|
for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
|
|
try {
|
|
const res = await apiClient.get(`/table-categories/${PRICE_TABLE}/${col}/values`);
|
|
if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
|
|
} catch { /* skip */ }
|
|
}
|
|
setPriceCategoryOptions(priceOpts);
|
|
|
|
// 세금유형 카테고리
|
|
try {
|
|
const taxRes = await apiClient.get(`/table-categories/customer_tax_type/tax_type_name/values`);
|
|
if (taxRes.data?.success) setTaxTypeOptions(flatten(taxRes.data.data || []));
|
|
} catch { /* skip */ }
|
|
};
|
|
load();
|
|
apiClient.post(`/table-management/tables/user_info/data`, { page: 1, size: 500, autoFilter: true })
|
|
.then((res) => {
|
|
const users = res.data?.data?.data || res.data?.data?.rows || [];
|
|
setEmployeeOptions(users.map((u: any) => ({
|
|
user_id: u.user_id, user_name: u.user_name || u.user_id, position_name: u.position_name,
|
|
})));
|
|
}).catch(() => {});
|
|
}, []);
|
|
|
|
// 거래처 목록 조회
|
|
const fetchCustomers = useCallback(async () => {
|
|
setCustomerLoading(true);
|
|
try {
|
|
const filters = searchFilters.map(f => ({
|
|
columnName: f.columnName,
|
|
operator: f.operator,
|
|
value: f.value,
|
|
}));
|
|
|
|
const res = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
|
|
autoFilter: true,
|
|
sort: { columnName: "customer_code", order: "desc" },
|
|
});
|
|
const raw = res.data?.data?.data || res.data?.data?.rows || [];
|
|
setRawCustomers(raw);
|
|
|
|
const resolve = (col: string, code: string) => {
|
|
if (!code) return "";
|
|
return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
|
|
};
|
|
const data = raw.map((r: any) => {
|
|
const mainContact = mainContactMap[r.id];
|
|
return {
|
|
...r,
|
|
division: resolve("division", r.division),
|
|
status: resolve("status", r.status),
|
|
contact_person: mainContact?.contact_name || "",
|
|
contact_phone: mainContact?.contact_phone || "",
|
|
email: mainContact?.contact_email || "",
|
|
};
|
|
});
|
|
// 거래처코드 숫자 기준 내림차순 정렬
|
|
data.sort((a: any, b: any) => {
|
|
const aNum = parseInt((a.customer_code || "").replace(/\D/g, ""), 10) || 0;
|
|
const bNum = parseInt((b.customer_code || "").replace(/\D/g, ""), 10) || 0;
|
|
return bNum - aNum;
|
|
});
|
|
setCustomers(data);
|
|
setCustomerCount(res.data?.data?.total || raw.length);
|
|
} catch (err) {
|
|
console.error("거래처 조회 실패:", err);
|
|
toast.error("거래처 목록을 불러오는데 실패했습니다.");
|
|
} finally {
|
|
setCustomerLoading(false);
|
|
}
|
|
}, [searchFilters, categoryOptions, employeeOptions, mainContactMap]);
|
|
|
|
useEffect(() => { fetchCustomers(); }, [fetchCustomers]);
|
|
|
|
// 메인 담당자 조회 (최초 1번 + 저장 후 갱신)
|
|
const fetchMainContacts = useCallback(async () => {
|
|
try {
|
|
const contactRes = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
|
|
page: 1, size: 500, autoFilter: true,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "is_main", operator: "equals", value: "Y" }] },
|
|
});
|
|
const allContacts = contactRes.data?.data?.data || contactRes.data?.data?.rows || [];
|
|
const map: Record<string, any> = {};
|
|
for (const c of allContacts) {
|
|
if ((c.is_main === "Y" || c.is_main === true) && c.customer_id) {
|
|
map[c.customer_id] = c;
|
|
}
|
|
}
|
|
setMainContactMap(map);
|
|
} catch { /* skip */ }
|
|
}, []);
|
|
|
|
useEffect(() => { fetchMainContacts(); }, [fetchMainContacts]);
|
|
|
|
const selectedCustomer = customers.find((c) => c.id === selectedCustomerId);
|
|
|
|
// 선택된 거래처의 품목 단가 조회
|
|
useEffect(() => {
|
|
if (!selectedCustomer?.customer_code) { setPriceItems([]); setPriceCheckedIds([]); return; }
|
|
setPriceCheckedIds([]);
|
|
const fetchItems = async () => {
|
|
setPriceLoading(true);
|
|
try {
|
|
const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: { enabled: true, filters: [
|
|
{ columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
|
|
]},
|
|
autoFilter: true,
|
|
});
|
|
const mappings = mappingRes.data?.data?.data || mappingRes.data?.data?.rows || [];
|
|
|
|
const itemIds = [...new Set(mappings.map((r: any) => r.item_id).filter(Boolean))];
|
|
let itemMap: Record<string, any> = {};
|
|
if (itemIds.length > 0) {
|
|
try {
|
|
const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
|
|
page: 1, size: itemIds.length + 10,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
|
|
autoFilter: true,
|
|
});
|
|
for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
|
|
itemMap[item.item_number] = item;
|
|
}
|
|
} catch { /* skip */ }
|
|
}
|
|
|
|
let allPrices: any[] = [];
|
|
if (mappings.length > 0) {
|
|
try {
|
|
const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: { enabled: true, filters: [
|
|
{ columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
|
|
]},
|
|
autoFilter: true,
|
|
});
|
|
allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
|
|
} catch { /* skip */ }
|
|
}
|
|
|
|
const priceResolve = (col: string, code: string) => {
|
|
if (!code) return "";
|
|
return priceCategoryOptions[col]?.find((o) => o.code === code)?.label || code;
|
|
};
|
|
const now = new Date();
|
|
const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
|
|
|
|
// 품목 기준 그룹핑 — master: 첫 매핑 + 현재 단가, details: 전체 단가 리스트
|
|
const grouped: Record<string, { master: any; details: any[] }> = {};
|
|
const flatItems: any[] = [];
|
|
const seenItemIds = new Set<string>();
|
|
for (const m of mappings) {
|
|
const itemKey = m.item_id || "";
|
|
if (seenItemIds.has(itemKey)) continue; // 품목당 첫 매핑만 마스터
|
|
seenItemIds.add(itemKey);
|
|
|
|
const itemInfo = itemMap[itemKey] || {};
|
|
const itemPriceList = allPrices
|
|
.filter((p: any) => p.item_id === itemKey)
|
|
.sort((a: any, b: any) => (a.start_date || "").localeCompare(b.start_date || ""));
|
|
const todayPrice = itemPriceList.find((p: any) =>
|
|
(!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
|
|
) || itemPriceList[0] || {};
|
|
|
|
const masterRow = {
|
|
...m,
|
|
item_number: itemKey,
|
|
item_name: itemInfo.item_name || "",
|
|
base_price_type: priceResolve("base_price_type", todayPrice.base_price_type || ""),
|
|
base_price: todayPrice.base_price || "",
|
|
discount_type: priceResolve("discount_type", todayPrice.discount_type || ""),
|
|
discount_value: todayPrice.discount_value || "",
|
|
calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
|
|
currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
|
|
};
|
|
|
|
// 단가 리스트 (라벨 변환)
|
|
const priceDetails = itemPriceList.map((p: any) => ({
|
|
...p,
|
|
base_price_type_label: priceResolve("base_price_type", p.base_price_type || ""),
|
|
discount_type_label: priceResolve("discount_type", p.discount_type || ""),
|
|
currency_label: priceResolve("currency_code", p.currency_code || ""),
|
|
is_current: (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today),
|
|
}));
|
|
|
|
grouped[itemKey] = { master: masterRow, details: priceDetails };
|
|
flatItems.push(masterRow);
|
|
}
|
|
setPriceGroups(grouped);
|
|
setPriceItems(flatItems);
|
|
} catch (err) {
|
|
console.error("품목 조회 실패:", err);
|
|
} finally {
|
|
setPriceLoading(false);
|
|
}
|
|
};
|
|
fetchItems();
|
|
}, [selectedCustomer?.customer_code]);
|
|
|
|
// 납품처 조회
|
|
useEffect(() => {
|
|
if (!selectedCustomer?.customer_code) { setDeliveryItems([]); return; }
|
|
const fetchDelivery = async () => {
|
|
setDeliveryLoading(true);
|
|
try {
|
|
const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: { enabled: true, filters: [
|
|
{ columnName: "customer_code", operator: "equals", value: selectedCustomer.customer_code },
|
|
]},
|
|
autoFilter: true,
|
|
});
|
|
setDeliveryItems(res.data?.data?.data || res.data?.data?.rows || []);
|
|
} catch { setDeliveryItems([]); } finally { setDeliveryLoading(false); }
|
|
};
|
|
fetchDelivery();
|
|
}, [selectedCustomer?.customer_code]);
|
|
|
|
const getCategoryLabel = (col: string, code: string) => {
|
|
if (!code) return "";
|
|
return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
|
|
};
|
|
|
|
// 모달 내 담당자 목록 조회
|
|
const fetchModalContacts = useCallback(async (customerId: string) => {
|
|
setModalContactLoading(true);
|
|
try {
|
|
const res = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
|
|
page: 1, size: 200,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
|
|
autoFilter: true,
|
|
});
|
|
setModalContacts(res.data?.data?.data || res.data?.data?.rows || []);
|
|
} catch { setModalContacts([]); } finally { setModalContactLoading(false); }
|
|
}, []);
|
|
|
|
// 모달 내 납품처 목록 조회
|
|
const fetchModalDeliveries = useCallback(async (customerCode: string) => {
|
|
setModalDeliveryLoading(true);
|
|
try {
|
|
const res = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
|
|
page: 1, size: 200,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: customerCode }] },
|
|
autoFilter: true,
|
|
});
|
|
setModalDeliveries(res.data?.data?.data || res.data?.data?.rows || []);
|
|
} catch { setModalDeliveries([]); } finally { setModalDeliveryLoading(false); }
|
|
}, []);
|
|
|
|
// 담당자 저장 (등록/수정)
|
|
const handleModalContactSave = async () => {
|
|
if (!modalContactForm.contact_name) { toast.error("담당자명은 필수입니다."); return; }
|
|
if (modalContactEditId) {
|
|
// 수정 — 로컬 리스트에서 교체 + 메인 설정 시 다른 메인 해제
|
|
const isSettingMain = modalContactForm.is_main === "Y" || modalContactForm.is_main === true;
|
|
setModalContacts((prev) => prev.map((c) =>
|
|
(c._localId || c.id) === modalContactEditId
|
|
? { ...c, ...modalContactForm }
|
|
: isSettingMain ? { ...c, is_main: "N" } : c
|
|
));
|
|
} else {
|
|
// 추가 — 로컬 리스트에 카드 추가
|
|
setModalContacts((prev) => [...prev, {
|
|
...modalContactForm,
|
|
_localId: `local_${Date.now()}_${Math.random()}`,
|
|
_isNew: true,
|
|
}]);
|
|
}
|
|
setModalContactFormOpen(false);
|
|
setModalContactForm({});
|
|
setModalContactEditId(null);
|
|
};
|
|
|
|
// 담당자 삭제
|
|
const handleModalContactDelete = (contactId: string) => {
|
|
setModalContacts((prev) => prev.filter((c) => (c._localId || c.id) !== contactId));
|
|
};
|
|
|
|
// 납품처 자동채번 유틸
|
|
const generateDeliveryCode = async () => {
|
|
try {
|
|
const ruleRes = await apiClient.get(`/numbering-rules/by-column/${DELIVERY_TABLE}/destination_code`);
|
|
const ruleData = ruleRes.data;
|
|
if (ruleData?.success && ruleData?.data?.ruleId) {
|
|
const ruleId = ruleData.data.ruleId;
|
|
const allRes = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
|
|
page: 1, size: 500, autoFilter: true,
|
|
sort: { columnName: "destination_code", order: "desc" },
|
|
});
|
|
const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
|
|
let maxSeq = 0;
|
|
for (const row of allRows) {
|
|
const match = (row.destination_code || "").match(/(\d+)$/);
|
|
if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
|
|
}
|
|
// 로컬에 추가된 것도 포함
|
|
for (const d of modalDeliveries) {
|
|
const match = (d.destination_code || "").match(/(\d+)$/);
|
|
if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; }
|
|
}
|
|
const previewRes = await previewNumberingCode(ruleId);
|
|
if (previewRes.success && previewRes.data?.generatedCode) {
|
|
const previewCode = previewRes.data.generatedCode;
|
|
const prefix = previewCode.replace(/\d+$/, "");
|
|
const seqLen = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
|
|
return prefix + String(maxSeq + 1).padStart(seqLen, "0");
|
|
}
|
|
}
|
|
} catch { /* skip */ }
|
|
return "";
|
|
};
|
|
|
|
// 납품처 저장 (모달 내)
|
|
const handleModalDeliverySave = async () => {
|
|
if (!modalDeliveryForm.destination_name) { toast.error("납품처명은 필수입니다."); return; }
|
|
if (modalDeliveryEditId) {
|
|
const isSettingMain = modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true;
|
|
setModalDeliveries((prev) => prev.map((d) =>
|
|
(d._localId || d.id) === modalDeliveryEditId
|
|
? { ...d, ...modalDeliveryForm }
|
|
: isSettingMain ? { ...d, is_default: "N" } : d
|
|
));
|
|
} else {
|
|
setModalDeliveries((prev) => [...prev, {
|
|
...modalDeliveryForm,
|
|
_localId: `local_${Date.now()}_${Math.random()}`,
|
|
_isNew: true,
|
|
}]);
|
|
}
|
|
setModalDeliveryFormOpen(false);
|
|
setModalDeliveryForm({});
|
|
setModalDeliveryEditId(null);
|
|
setModalDeliveryFormErrors({});
|
|
};
|
|
|
|
const handleModalDeliveryDelete = (deliveryId: string) => {
|
|
setModalDeliveries((prev) => prev.filter((d) => (d._localId || d.id) !== deliveryId));
|
|
};
|
|
|
|
// 거래처 등록 모달 열기
|
|
const openCustomerRegister = async () => {
|
|
setCustomerForm({});
|
|
setFormErrors({});
|
|
setCustomerEditMode(false);
|
|
setCustomerModalTab("basic");
|
|
setModalContacts([]);
|
|
setModalDeliveries([]);
|
|
setModalContactFormOpen(false);
|
|
setModalDeliveryFormOpen(false);
|
|
setTaxTypeRows([]);
|
|
setCustomerModalOpen(true);
|
|
// 거래처 코드 자동 채번 — 기존 데이터 max값 기반
|
|
try {
|
|
const ruleRes = await apiClient.get(`/numbering-rules/by-column/${CUSTOMER_TABLE}/customer_code`);
|
|
const ruleData = ruleRes.data;
|
|
if (ruleData?.success && ruleData?.data?.ruleId) {
|
|
const ruleId = ruleData.data.ruleId;
|
|
// 기존 데이터에서 CUST-XXX 패턴의 최대 순번 조회
|
|
const allRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
|
|
page: 1, size: 500, autoFilter: true,
|
|
sort: { columnName: "customer_code", order: "desc" },
|
|
});
|
|
const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
|
|
let maxSeq = 0;
|
|
for (const row of allRows) {
|
|
const code = row.customer_code || "";
|
|
const match = code.match(/(\d+)$/);
|
|
if (match) {
|
|
const seq = parseInt(match[1], 10);
|
|
if (seq > maxSeq) maxSeq = seq;
|
|
}
|
|
}
|
|
// preview로 접두어 패턴 가져오기
|
|
const previewRes = await previewNumberingCode(ruleId);
|
|
if (previewRes.success && previewRes.data?.generatedCode) {
|
|
const previewCode = previewRes.data.generatedCode;
|
|
const prefix = previewCode.replace(/\d+$/, "");
|
|
const seqLength = (previewCode.match(/(\d+)$/) || ["", "001"])[1].length;
|
|
const nextSeq = maxSeq + 1;
|
|
const nextCode = prefix + String(nextSeq).padStart(seqLength, "0");
|
|
setCustomerForm((prev) => ({ ...prev, customer_code: nextCode, _numberingRuleId: ruleId }));
|
|
}
|
|
}
|
|
} catch { /* skip */ }
|
|
};
|
|
|
|
const openCustomerEdit = () => {
|
|
if (!selectedCustomer) return;
|
|
const rawData = rawCustomers.find((c) => c.id === selectedCustomerId);
|
|
setCustomerForm({ ...(rawData || selectedCustomer) });
|
|
setFormErrors({});
|
|
setCustomerEditMode(true);
|
|
setCustomerModalTab("basic");
|
|
setModalContactFormOpen(false);
|
|
setModalDeliveryFormOpen(false);
|
|
setModalContactForm({});
|
|
setModalDeliveryForm({});
|
|
setModalContactEditId(null);
|
|
setModalDeliveryEditId(null);
|
|
// 수정 모드에서는 바로 조회
|
|
const code = (rawData || selectedCustomer).customer_code;
|
|
const id = (rawData || selectedCustomer).id;
|
|
if (id) {
|
|
fetchModalContacts(id);
|
|
// 세금유형 로드
|
|
apiClient.post(`/table-management/tables/customer_tax_type/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: id }] },
|
|
autoFilter: true,
|
|
}).then((res: any) => {
|
|
const rows = res.data?.data?.data || res.data?.data?.rows || [];
|
|
setTaxTypeRows(rows.map((r: any) => ({ _id: r.id, tax_type_name: r.tax_type_name || "", rate: String(r.rate || "") })));
|
|
}).catch(() => setTaxTypeRows([]));
|
|
}
|
|
if (code) fetchModalDeliveries(code);
|
|
setCustomerModalOpen(true);
|
|
};
|
|
|
|
// 폼 필드 변경 시 자동 포맷팅 + 실시간 검증
|
|
const handleFormChange = (field: string, value: string) => {
|
|
const formatted = formatField(field, value);
|
|
setCustomerForm((prev) => ({ ...prev, [field]: formatted }));
|
|
const error = validateField(field, formatted);
|
|
setFormErrors((prev) => {
|
|
const next = { ...prev };
|
|
if (error) next[field] = error; else delete next[field];
|
|
return next;
|
|
});
|
|
};
|
|
|
|
// 세금유형/담당자/납품처를 한번에 저장하는 헬퍼
|
|
const saveSubTables = async (customerId: string, customerCode: string) => {
|
|
// 세금유형 — 기존 삭제 후 재생성
|
|
try {
|
|
const existTax = await apiClient.post(`/table-management/tables/customer_tax_type/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
|
|
autoFilter: true,
|
|
});
|
|
const existRows = existTax.data?.data?.data || existTax.data?.data?.rows || [];
|
|
if (existRows.length > 0) {
|
|
await apiClient.delete(`/table-management/tables/customer_tax_type/delete`, {
|
|
data: existRows.map((r: any) => ({ id: r.id })),
|
|
});
|
|
}
|
|
for (const t of taxTypeRows.filter((r) => r.tax_type_name)) {
|
|
await apiClient.post(`/table-management/tables/customer_tax_type/add`, {
|
|
id: crypto.randomUUID(), customer_id: customerId,
|
|
tax_type_name: t.tax_type_name, tax_type_id: t.tax_type_name,
|
|
rate: t.rate ? Number(t.rate) : 0,
|
|
});
|
|
}
|
|
} catch { /* skip */ }
|
|
|
|
// 담당자 — 기존 삭제 후 전체 재생성
|
|
try {
|
|
const existContacts = await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "customer_id", operator: "equals", value: customerId }] },
|
|
autoFilter: true,
|
|
});
|
|
const existCRows = existContacts.data?.data?.data || existContacts.data?.data?.rows || [];
|
|
if (existCRows.length > 0) {
|
|
await apiClient.delete(`/table-management/tables/${CONTACT_TABLE}/delete`, {
|
|
data: existCRows.map((r: any) => ({ id: r.id })),
|
|
});
|
|
}
|
|
} catch { /* skip */ }
|
|
for (const c of modalContacts) {
|
|
try {
|
|
await apiClient.post(`/table-management/tables/${CONTACT_TABLE}/add`, {
|
|
id: crypto.randomUUID(), customer_id: customerId,
|
|
contact_name: c.contact_name || "", contact_phone: c.contact_phone || "",
|
|
contact_email: c.contact_email || "", department: c.department || "",
|
|
is_main: c.is_main || "N", memo: c.memo || "",
|
|
});
|
|
} catch { /* skip */ }
|
|
}
|
|
|
|
// 납품처 — 기존 삭제 후 전체 재생성
|
|
try {
|
|
const existDeliveries = await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: customerCode }] },
|
|
autoFilter: true,
|
|
});
|
|
const existDRows = existDeliveries.data?.data?.data || existDeliveries.data?.data?.rows || [];
|
|
if (existDRows.length > 0) {
|
|
await apiClient.delete(`/table-management/tables/${DELIVERY_TABLE}/delete`, {
|
|
data: existDRows.map((r: any) => ({ id: r.id })),
|
|
});
|
|
}
|
|
} catch { /* skip */ }
|
|
for (const d of modalDeliveries) {
|
|
try {
|
|
await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/add`, {
|
|
id: crypto.randomUUID(), customer_code: customerCode,
|
|
destination_code: d.destination_code || "", destination_name: d.destination_name || "",
|
|
address: d.address || "", manager_name: d.manager_name || "",
|
|
phone: d.phone || "", memo: d.memo || "", is_default: d.is_default || "N",
|
|
});
|
|
} catch { /* skip */ }
|
|
}
|
|
};
|
|
|
|
const handleCustomerSave = async () => {
|
|
if (!customerForm.customer_name) { toast.error("거래처명은 필수입니다."); return; }
|
|
if (!customerForm.status) { toast.error("상태는 필수입니다."); return; }
|
|
const errors = validateForm(customerForm, ["business_number"]);
|
|
setFormErrors(errors);
|
|
if (Object.keys(errors).length > 0) {
|
|
toast.error("입력 형식을 확인해주세요.");
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
try {
|
|
const { id, created_date, updated_date, writer, company_code, _numberingRuleId, ...fields } = customerForm;
|
|
const cleanFields: Record<string, any> = {};
|
|
for (const [key, value] of Object.entries(fields)) {
|
|
cleanFields[key] = value === "" ? null : value;
|
|
}
|
|
|
|
if (customerEditMode && id) {
|
|
// 수정
|
|
await apiClient.put(`/table-management/tables/${CUSTOMER_TABLE}/edit`, {
|
|
originalData: { id }, updatedData: cleanFields,
|
|
});
|
|
await saveSubTables(id, cleanFields.customer_code || customerForm.customer_code);
|
|
toast.success("저장되었습니다.");
|
|
} else {
|
|
// 신규 등록
|
|
await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/add`, cleanFields);
|
|
// id 획득
|
|
const res = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
|
|
page: 1, size: 1,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: cleanFields.customer_code }] },
|
|
autoFilter: true,
|
|
});
|
|
const newRow = (res.data?.data?.data || res.data?.data?.rows || [])[0];
|
|
if (newRow?.id) {
|
|
await saveSubTables(newRow.id, cleanFields.customer_code);
|
|
}
|
|
toast.success("거래처가 등록되었습니다.");
|
|
}
|
|
|
|
fetchCustomers();
|
|
fetchMainContacts();
|
|
if (!customerEditMode && continuousInput) {
|
|
// 연속입력 — 폼 초기화하고 모달 유지
|
|
setCustomerForm({});
|
|
setModalContacts([]);
|
|
setModalDeliveries([]);
|
|
setTaxTypeRows([]);
|
|
setCustomerModalTab("basic");
|
|
// 새 코드 채번
|
|
try {
|
|
const ruleRes = await apiClient.get(`/numbering-rules/by-column/${CUSTOMER_TABLE}/customer_code`);
|
|
const ruleData = ruleRes.data;
|
|
if (ruleData?.success && ruleData?.data?.ruleId) {
|
|
const ruleId = ruleData.data.ruleId;
|
|
const allRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, { page: 1, size: 500, autoFilter: true, sort: { columnName: "customer_code", order: "desc" } });
|
|
const allRows = allRes.data?.data?.data || allRes.data?.data?.rows || [];
|
|
let maxSeq = 0;
|
|
for (const row of allRows) { const match = (row.customer_code || "").match(/(\d+)$/); if (match) { const seq = parseInt(match[1], 10); if (seq > maxSeq) maxSeq = seq; } }
|
|
const previewRes = await previewNumberingCode(ruleId);
|
|
if (previewRes.success && previewRes.data?.generatedCode) {
|
|
const prefix = previewRes.data.generatedCode.replace(/\d+$/, "");
|
|
const seqLen = (previewRes.data.generatedCode.match(/(\d+)$/) || ["", "001"])[1].length;
|
|
setCustomerForm({ customer_code: prefix + String(maxSeq + 1).padStart(seqLen, "0") });
|
|
}
|
|
}
|
|
} catch { /* skip */ }
|
|
toast.success("등록 완료. 다음 거래처를 입력하세요.");
|
|
} else {
|
|
setCustomerModalOpen(false);
|
|
// 우측 패널 갱신
|
|
if (selectedCustomerId) {
|
|
const cid = selectedCustomerId;
|
|
setSelectedCustomerId(null);
|
|
setTimeout(() => setSelectedCustomerId(cid), 50);
|
|
}
|
|
}
|
|
} catch (err: any) {
|
|
toast.error(err.response?.data?.message || "저장에 실패했습니다.");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
// 거래처 삭제
|
|
const handleCustomerDelete = async () => {
|
|
if (!selectedCustomerId) return;
|
|
const ok = await confirm("거래처를 삭제하시겠습니까?", {
|
|
variant: "destructive", confirmText: "삭제",
|
|
});
|
|
if (!ok) return;
|
|
try {
|
|
await apiClient.delete(`/table-management/tables/${CUSTOMER_TABLE}/delete`, {
|
|
data: [{ id: selectedCustomerId }],
|
|
});
|
|
toast.success("삭제되었습니다.");
|
|
setSelectedCustomerId(null);
|
|
fetchCustomers();
|
|
} catch { toast.error("삭제에 실패했습니다."); }
|
|
};
|
|
|
|
// 품목 검색
|
|
const searchItems = useCallback(async () => {
|
|
setItemSearchLoading(true);
|
|
try {
|
|
const salesCode = categoryOptions["item_division"]?.find((o) => o.label === "영업관리")?.code;
|
|
const filters: any[] = salesCode
|
|
? [{ columnName: "division", operator: "contains", value: salesCode }]
|
|
: [];
|
|
const res = await apiClient.post(`/table-management/tables/item_info/data`, {
|
|
page: 1, size: 5000,
|
|
dataFilter: { enabled: true, filters },
|
|
autoFilter: true,
|
|
});
|
|
const allItems = res.data?.data?.data || res.data?.data?.rows || [];
|
|
setItemTotalCount(allItems.length);
|
|
const existingItemIds = new Set(priceItems.map((p: any) => p.item_id || p.item_number));
|
|
const kw = itemSearchKeyword.toLowerCase();
|
|
const seenNumbers = new Set<string>();
|
|
const deduped = allItems.filter((item: any) => {
|
|
if (existingItemIds.has(item.item_number) || existingItemIds.has(item.id)) return false;
|
|
if (item.item_number && seenNumbers.has(item.item_number)) return false;
|
|
if (item.item_number) seenNumbers.add(item.item_number);
|
|
if (kw) {
|
|
const name = (item.item_name || "").toLowerCase();
|
|
const code = (item.item_number || "").toLowerCase();
|
|
if (!name.includes(kw) && !code.includes(kw)) return false;
|
|
}
|
|
return true;
|
|
});
|
|
setItemSearchResults(deduped);
|
|
} catch { /* skip */ } finally { setItemSearchLoading(false); }
|
|
}, [itemSearchKeyword, priceItems]);
|
|
|
|
// 실시간 검색 (2글자 이상)
|
|
useEffect(() => {
|
|
if (!itemSelectOpen) return;
|
|
if (itemSearchKeyword.length > 0 && itemSearchKeyword.length < 2) return;
|
|
searchItems();
|
|
}, [itemSearchKeyword, itemSelectOpen]);
|
|
|
|
// 품목 선택 완료 → 상세 입력 모달로 전환
|
|
const goToItemDetail = () => {
|
|
const raw = itemSearchResults.filter((i) => itemCheckedIds.has(i.id));
|
|
if (raw.length === 0) { toast.error("품목을 선택해주세요."); return; }
|
|
const seenKeys = new Set<string>();
|
|
const selected = raw.filter((i) => {
|
|
const k = i.item_number || i.id;
|
|
if (seenKeys.has(k)) return false;
|
|
seenKeys.add(k);
|
|
return true;
|
|
});
|
|
setSelectedItemsForDetail(selected);
|
|
const mappings: typeof itemMappings = {};
|
|
const prices: typeof itemPrices = {};
|
|
for (const item of selected) {
|
|
const key = item.item_number || item.id;
|
|
mappings[key] = [];
|
|
prices[key] = [{
|
|
_id: `p_${Date.now()}_${Math.random()}`,
|
|
start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
|
|
base_price_type: "CAT_MLAMFGFT_4RZW", base_price: item.standard_price || item.selling_price || "",
|
|
discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
|
|
calculated_price: item.standard_price || item.selling_price || "",
|
|
}];
|
|
}
|
|
setItemMappings(mappings);
|
|
setItemPrices(prices);
|
|
setItemSelectOpen(false);
|
|
setItemDetailOpen(true);
|
|
};
|
|
|
|
// 거래처 품번/품명 행 추가
|
|
const addMappingRow = (itemKey: string) => {
|
|
setItemMappings((prev) => ({
|
|
...prev,
|
|
[itemKey]: [...(prev[itemKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, customer_item_code: "", customer_item_name: "" }],
|
|
}));
|
|
};
|
|
|
|
const removeMappingRow = (itemKey: string, rowId: string) => {
|
|
setItemMappings((prev) => ({
|
|
...prev,
|
|
[itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
|
|
}));
|
|
};
|
|
|
|
const handleMappingDragEnd = (itemKey: string, event: DragEndEvent) => {
|
|
const { active, over } = event;
|
|
if (!over || active.id === over.id) return;
|
|
setItemMappings((prev) => {
|
|
const arr = [...(prev[itemKey] || [])];
|
|
const oldIdx = arr.findIndex((r) => r._id === active.id);
|
|
const newIdx = arr.findIndex((r) => r._id === over.id);
|
|
return { ...prev, [itemKey]: arrayMove(arr, oldIdx, newIdx) };
|
|
});
|
|
};
|
|
|
|
const updateMappingRow = (itemKey: string, rowId: string, field: string, value: string) => {
|
|
setItemMappings((prev) => ({
|
|
...prev,
|
|
[itemKey]: (prev[itemKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
|
|
}));
|
|
};
|
|
|
|
// 단가 행 추가
|
|
const addPriceRow = (itemKey: string) => {
|
|
setItemPrices((prev) => ({
|
|
...prev,
|
|
[itemKey]: [...(prev[itemKey] || []), {
|
|
_id: `p_${Date.now()}_${Math.random()}`,
|
|
start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
|
|
base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
|
|
discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
|
|
calculated_price: "",
|
|
}],
|
|
}));
|
|
};
|
|
|
|
const removePriceRow = (itemKey: string, rowId: string) => {
|
|
setItemPrices((prev) => ({
|
|
...prev,
|
|
[itemKey]: (prev[itemKey] || []).filter((r) => r._id !== rowId),
|
|
}));
|
|
};
|
|
|
|
const updatePriceRow = (itemKey: string, rowId: string, field: string, value: string) => {
|
|
setItemPrices((prev) => ({
|
|
...prev,
|
|
[itemKey]: (prev[itemKey] || []).map((r) => {
|
|
if (r._id !== rowId) return r;
|
|
const updated = { ...r, [field]: value };
|
|
if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
|
|
const bp = Number(updated.base_price) || 0;
|
|
const dv = Number(updated.discount_value) || 0;
|
|
const dt = updated.discount_type;
|
|
let calc = bp;
|
|
if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
|
|
else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
|
|
// 반올림 유형 + 단위 적용
|
|
const rv = updated.rounding_unit_value;
|
|
const rt = updated.rounding_type;
|
|
const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
|
|
const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
|
|
const unitOpts = priceCategoryOptions["rounding_type"] || [];
|
|
const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
|
|
const unit = parseInt(unitLabel) || 1; // "10원" → 10, "100원" → 100
|
|
if (roundLabel === "반올림") {
|
|
calc = Math.round(calc / unit) * unit;
|
|
} else if (roundLabel === "절삭") {
|
|
calc = Math.floor(calc / unit) * unit;
|
|
} else if (roundLabel === "올림") {
|
|
calc = Math.ceil(calc / unit) * unit;
|
|
}
|
|
updated.calculated_price = String(Math.floor(calc));
|
|
}
|
|
return updated;
|
|
}),
|
|
}));
|
|
};
|
|
|
|
// 품목 편집 열기
|
|
const openEditItem = async (row: any) => {
|
|
const itemKey = row.item_number || row.item_id;
|
|
let itemInfo: any = { item_number: itemKey, item_name: row.item_name || "", size: "", unit: "" };
|
|
try {
|
|
const res = await apiClient.post(`/table-management/tables/item_info/data`, {
|
|
page: 1, size: 1,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "equals", value: itemKey }] },
|
|
autoFilter: true,
|
|
});
|
|
const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
|
|
if (found) itemInfo = found;
|
|
} catch { /* skip */ }
|
|
|
|
let mappingRows: any[] = [];
|
|
try {
|
|
const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [
|
|
{ columnName: "customer_id", operator: "equals", value: selectedCustomer!.customer_code },
|
|
{ columnName: "item_id", operator: "equals", value: itemKey },
|
|
]}, autoFilter: true,
|
|
sort: { columnName: "created_date", order: "asc" },
|
|
});
|
|
const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
|
|
mappingRows = allMappings
|
|
.filter((m: any) => m.customer_item_code || m.customer_item_name)
|
|
.map((m: any) => ({
|
|
_id: `m_existing_${m.id}`,
|
|
customer_item_code: m.customer_item_code || "",
|
|
customer_item_name: m.customer_item_name || "",
|
|
}));
|
|
} catch { /* skip */ }
|
|
|
|
let priceRows: any[] = [];
|
|
try {
|
|
const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [
|
|
{ columnName: "customer_id", operator: "equals", value: selectedCustomer!.customer_code },
|
|
{ columnName: "item_id", operator: "equals", value: itemKey },
|
|
]}, autoFilter: true,
|
|
});
|
|
const allPriceData = (priceRes.data?.data?.data || priceRes.data?.data?.rows || [])
|
|
.sort((a: any, b: any) => (a.start_date || "").localeCompare(b.start_date || ""));
|
|
priceRows = allPriceData.map((p: any) => ({
|
|
_id: `p_existing_${p.id}`,
|
|
start_date: p.start_date ? String(p.start_date).split("T")[0] : "",
|
|
end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
|
|
currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
|
|
base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
|
|
base_price: p.base_price ? String(p.base_price) : "",
|
|
discount_type: p.discount_type || "",
|
|
discount_value: p.discount_value ? String(p.discount_value) : "",
|
|
rounding_type: p.rounding_type || "",
|
|
rounding_unit_value: p.rounding_unit_value || "",
|
|
calculated_price: p.calculated_price ? String(p.calculated_price) : "",
|
|
}));
|
|
} catch { /* skip */ }
|
|
|
|
if (priceRows.length === 0) {
|
|
priceRows.push({
|
|
_id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
|
|
base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
|
|
rounding_type: "", rounding_unit_value: "", calculated_price: "",
|
|
});
|
|
}
|
|
|
|
setSelectedItemsForDetail([itemInfo]);
|
|
setItemMappings({ [itemKey]: mappingRows });
|
|
setItemPrices({ [itemKey]: priceRows });
|
|
setEditItemData(row);
|
|
setItemDetailOpen(true);
|
|
};
|
|
|
|
const handleItemDetailSave = async () => {
|
|
if (!selectedCustomer) return;
|
|
if (savingRef.current) return;
|
|
savingRef.current = true;
|
|
const isEditingExisting = !!editItemData;
|
|
setSaving(true);
|
|
try {
|
|
const processedKeys = new Set<string>();
|
|
for (const item of selectedItemsForDetail) {
|
|
const itemKey = item.item_number || item.id;
|
|
if (processedKeys.has(itemKey)) continue;
|
|
processedKeys.add(itemKey);
|
|
const mappingRows = itemMappings[itemKey] || [];
|
|
|
|
if (isEditingExisting && editItemData?.id) {
|
|
// 기존 매핑 조회
|
|
let existingMaps: any[] = [];
|
|
try {
|
|
const existingMappings = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [
|
|
{ columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
|
|
{ columnName: "item_id", operator: "equals", value: itemKey },
|
|
]}, autoFilter: true,
|
|
sort: { columnName: "created_date", order: "asc" },
|
|
});
|
|
existingMaps = existingMappings.data?.data?.data || existingMappings.data?.data?.rows || [];
|
|
} catch { /* skip */ }
|
|
|
|
// 매핑 upsert: 기존 것은 update, 새 것은 insert, 남은 것은 delete
|
|
const usedExistingIds = new Set<string>();
|
|
let firstMappingId: string | null = editItemData.id;
|
|
for (let mi = 0; mi < mappingRows.length; mi++) {
|
|
const existMap = existingMaps[mi];
|
|
if (existMap) {
|
|
// update
|
|
await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
|
|
originalData: { id: existMap.id },
|
|
updatedData: {
|
|
customer_item_code: mappingRows[mi].customer_item_code || "",
|
|
customer_item_name: mappingRows[mi].customer_item_name || "",
|
|
},
|
|
});
|
|
usedExistingIds.add(existMap.id);
|
|
if (mi === 0) firstMappingId = existMap.id;
|
|
} else {
|
|
// insert
|
|
const mRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
|
|
id: crypto.randomUUID(),
|
|
customer_id: selectedCustomer.customer_code, item_id: itemKey,
|
|
customer_item_code: mappingRows[mi].customer_item_code || "",
|
|
customer_item_name: mappingRows[mi].customer_item_name || "",
|
|
});
|
|
if (mi === 0 && !firstMappingId) firstMappingId = mRes.data?.data?.id || null;
|
|
}
|
|
}
|
|
// 초과분 delete
|
|
const toDeleteMaps = existingMaps.filter((m) => !usedExistingIds.has(m.id));
|
|
if (toDeleteMaps.length > 0) {
|
|
await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
|
|
data: toDeleteMaps.map((m: any) => ({ id: m.id })),
|
|
});
|
|
}
|
|
|
|
// 기존 단가 조회
|
|
let existingPriceRows: any[] = [];
|
|
try {
|
|
const existingPrices = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [
|
|
{ columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
|
|
{ columnName: "item_id", operator: "equals", value: itemKey },
|
|
]}, autoFilter: true,
|
|
});
|
|
existingPriceRows = (existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [])
|
|
.sort((a: any, b: any) => (a.start_date || "").localeCompare(b.start_date || ""));
|
|
} catch { /* skip */ }
|
|
|
|
// 단가 upsert
|
|
const priceRows = (itemPrices[itemKey] || []).filter((p) =>
|
|
p.base_price || p.start_date || p.currency_code || p.base_price_type
|
|
);
|
|
const usedPriceIds = new Set<string>();
|
|
for (let pi = 0; pi < priceRows.length; pi++) {
|
|
const price = priceRows[pi];
|
|
const priceData = {
|
|
mapping_id: firstMappingId || editItemData.id,
|
|
customer_id: selectedCustomer.customer_code, item_id: itemKey,
|
|
start_date: price.start_date || null, end_date: price.end_date || null,
|
|
currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
|
|
base_price: price.base_price ? Number(price.base_price) : null,
|
|
unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
|
|
discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
|
|
rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
|
|
calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
|
|
};
|
|
const existPrice = existingPriceRows[pi];
|
|
if (existPrice) {
|
|
await apiClient.put(`/table-management/tables/${PRICE_TABLE}/edit`, {
|
|
originalData: { id: existPrice.id },
|
|
updatedData: priceData,
|
|
});
|
|
usedPriceIds.add(existPrice.id);
|
|
} else {
|
|
await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
|
|
id: crypto.randomUUID(), ...priceData,
|
|
});
|
|
}
|
|
}
|
|
// 초과분 delete
|
|
const toDeletePrices = existingPriceRows.filter((p) => !usedPriceIds.has(p.id));
|
|
if (toDeletePrices.length > 0) {
|
|
await apiClient.delete(`/table-management/tables/${PRICE_TABLE}/delete`, {
|
|
data: toDeletePrices.map((p: any) => ({ id: p.id })),
|
|
});
|
|
}
|
|
} else {
|
|
if (!mappingRows.length || !mappingRows[0]?.customer_item_code) {
|
|
const existingCheck = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
|
|
page: 1, size: 1,
|
|
dataFilter: { enabled: true, filters: [
|
|
{ columnName: "customer_id", operator: "equals", value: selectedCustomer.customer_code },
|
|
{ columnName: "item_id", operator: "equals", value: itemKey },
|
|
]}, autoFilter: true,
|
|
});
|
|
if ((existingCheck.data?.data?.data || existingCheck.data?.data?.rows || []).length > 0) {
|
|
toast.warning(`${item.item_name || itemKey} 품목은 이미 등록되어 있습니다.`);
|
|
continue;
|
|
}
|
|
}
|
|
|
|
let mappingId: string | null = null;
|
|
const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
|
|
id: crypto.randomUUID(),
|
|
customer_id: selectedCustomer.customer_code, item_id: itemKey,
|
|
customer_item_code: mappingRows[0]?.customer_item_code || "",
|
|
customer_item_name: mappingRows[0]?.customer_item_name || "",
|
|
});
|
|
mappingId = mappingRes.data?.data?.id || null;
|
|
|
|
for (let mi = 1; mi < mappingRows.length; mi++) {
|
|
await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
|
|
id: crypto.randomUUID(),
|
|
customer_id: selectedCustomer.customer_code, item_id: itemKey,
|
|
customer_item_code: mappingRows[mi].customer_item_code || "",
|
|
customer_item_name: mappingRows[mi].customer_item_name || "",
|
|
});
|
|
}
|
|
|
|
const priceRows = (itemPrices[itemKey] || []).filter((p) =>
|
|
p.base_price || p.start_date || p.currency_code || p.base_price_type
|
|
);
|
|
for (const price of priceRows) {
|
|
await apiClient.post(`/table-management/tables/${PRICE_TABLE}/add`, {
|
|
id: crypto.randomUUID(),
|
|
mapping_id: mappingId || "", customer_id: selectedCustomer.customer_code, item_id: itemKey,
|
|
start_date: price.start_date || null, end_date: price.end_date || null,
|
|
currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
|
|
base_price: price.base_price ? Number(price.base_price) : null,
|
|
unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
|
|
discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
|
|
rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
|
|
calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
toast.success(isEditingExisting ? "수정되었습니다." : `${selectedItemsForDetail.length}개 품목이 추가되었습니다.`);
|
|
setItemDetailOpen(false);
|
|
setEditItemData(null);
|
|
setItemCheckedIds(new Set());
|
|
const cid = selectedCustomerId;
|
|
setSelectedCustomerId(null);
|
|
setTimeout(() => setSelectedCustomerId(cid), 50);
|
|
} catch (err: any) {
|
|
toast.error(err.response?.data?.message || "저장에 실패했습니다.");
|
|
} finally {
|
|
setSaving(false);
|
|
savingRef.current = false;
|
|
}
|
|
};
|
|
|
|
// 품목 매핑 해제 — 선택한 품목의 모든 매핑 + 단가에서 customer_id를 null 처리
|
|
const handlePriceItemDelete = async () => {
|
|
if (priceCheckedIds.length === 0) return;
|
|
const ok = await confirm(`선택한 ${priceCheckedIds.length}개 품목의 연결을 해제하시겠습니까?`, {
|
|
description: "해당 품목의 거래처 연결이 해제됩니다. (데이터는 유지)",
|
|
variant: "destructive", confirmText: "해제",
|
|
});
|
|
if (!ok) return;
|
|
try {
|
|
const itemIds = priceCheckedIds.map((mid) => {
|
|
const group = Object.values(priceGroups).find((g) => g.master.id === mid);
|
|
return group?.master.item_id || group?.master.item_number || "";
|
|
}).filter(Boolean);
|
|
|
|
for (const itemId of itemIds) {
|
|
// 해당 품목의 모든 매핑 조회 → customer_id null 처리
|
|
const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: { enabled: true, filters: [
|
|
{ columnName: "customer_id", operator: "equals", value: selectedCustomer!.customer_code },
|
|
{ columnName: "item_id", operator: "equals", value: itemId },
|
|
]}, autoFilter: true,
|
|
});
|
|
const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
|
|
for (const m of allMappings) {
|
|
await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
|
|
originalData: { id: m.id },
|
|
updatedData: { customer_id: null },
|
|
});
|
|
}
|
|
|
|
// 해당 품목의 모든 단가 조회 → customer_id null 처리
|
|
try {
|
|
const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: { enabled: true, filters: [
|
|
{ columnName: "customer_id", operator: "equals", value: selectedCustomer!.customer_code },
|
|
{ columnName: "item_id", operator: "equals", value: itemId },
|
|
]}, autoFilter: true,
|
|
});
|
|
const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
|
|
for (const p of prices) {
|
|
await apiClient.put(`/table-management/tables/${PRICE_TABLE}/edit`, {
|
|
originalData: { id: p.id },
|
|
updatedData: { customer_id: null },
|
|
});
|
|
}
|
|
} catch { /* skip */ }
|
|
}
|
|
|
|
toast.success(`${priceCheckedIds.length}개 품목의 연결이 해제되었습니다.`);
|
|
setPriceCheckedIds([]);
|
|
const cid = selectedCustomerId;
|
|
setSelectedCustomerId(null);
|
|
setTimeout(() => setSelectedCustomerId(cid), 50);
|
|
} catch {
|
|
toast.error("연결 해제에 실패했습니다.");
|
|
}
|
|
};
|
|
|
|
// EDataTable 컬럼 정의 (거래처 목록) — ts.visibleColumns 순서를 따름
|
|
const customerColumns: EDataTableColumn[] = useMemo(() => {
|
|
const colProps: Record<string, Partial<EDataTableColumn>> = {
|
|
customer_code: { width: "w-[120px]" },
|
|
customer_name: { minWidth: "min-w-[140px]" },
|
|
division: {
|
|
width: "w-[80px]",
|
|
render: (val: any) =>
|
|
val ? (
|
|
<Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
|
|
{val}
|
|
</Badge>
|
|
) : null,
|
|
},
|
|
contact_person: { width: "w-[80px]" },
|
|
contact_phone: { width: "w-[120px]" },
|
|
email: { width: "w-[160px]" },
|
|
business_number: { width: "w-[120px]" },
|
|
address: { minWidth: "min-w-[150px]" },
|
|
status: {
|
|
width: "w-[70px]",
|
|
render: (val: any) =>
|
|
val ? (
|
|
<Badge
|
|
variant={val === "활성" || val === "거래중" || val === "정상" ? "default" as const : "outline" as const}
|
|
className="text-[10px] px-1.5 py-0 h-5"
|
|
>
|
|
{val}
|
|
</Badge>
|
|
) : null,
|
|
},
|
|
};
|
|
return ts.visibleColumns.map((col) => ({
|
|
key: col.key,
|
|
label: col.label,
|
|
...colProps[col.key],
|
|
}));
|
|
}, [ts.visibleColumns]);
|
|
|
|
// 엑셀 다운로드
|
|
const handleExcelDownload = async () => {
|
|
if (customers.length === 0) return;
|
|
toast.loading("엑셀 데이터 준비 중...", { id: "excel-dl" });
|
|
try {
|
|
const allMappings: any[] = [];
|
|
const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
|
|
page: 1, size: 5000, autoFilter: true,
|
|
});
|
|
const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
|
|
const itemIds = [...new Set(mappings.map((m: any) => m.item_id).filter(Boolean))];
|
|
let itemMap: Record<string, any> = {};
|
|
if (itemIds.length > 0) {
|
|
try {
|
|
const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
|
|
page: 1, size: itemIds.length + 10,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: itemIds }] },
|
|
autoFilter: true,
|
|
});
|
|
for (const item of (itemRes.data?.data?.data || itemRes.data?.data?.rows || [])) {
|
|
itemMap[item.item_number] = item;
|
|
}
|
|
} catch { /* skip */ }
|
|
}
|
|
for (const m of mappings) {
|
|
const itemInfo = itemMap[m.item_id] || {};
|
|
allMappings.push({ ...m, item_name: itemInfo.item_name || "", item_spec: itemInfo.size || "" });
|
|
}
|
|
|
|
const rows: Record<string, any>[] = [];
|
|
for (const c of customers) {
|
|
const custMappings = allMappings.filter((m) => m.customer_id === c.customer_code);
|
|
if (custMappings.length === 0) {
|
|
rows.push({
|
|
거래처코드: c.customer_code, 거래처명: c.customer_name,
|
|
거래유형: getCategoryLabel("division", c.division),
|
|
담당자: c.contact_person, 전화번호: c.contact_phone,
|
|
사업자번호: c.business_number, 이메일: c.email,
|
|
상태: getCategoryLabel("status", c.status),
|
|
품목코드: "", 품명: "", 규격: "",
|
|
거래처품번: "", 거래처품명: "",
|
|
기준가: "", 할인유형: "", 할인값: "", 단가: "", 통화: "",
|
|
});
|
|
} else {
|
|
for (const m of custMappings) {
|
|
rows.push({
|
|
거래처코드: c.customer_code, 거래처명: c.customer_name,
|
|
거래유형: getCategoryLabel("division", c.division),
|
|
담당자: c.contact_person, 전화번호: c.contact_phone,
|
|
사업자번호: c.business_number, 이메일: c.email,
|
|
상태: getCategoryLabel("status", c.status),
|
|
품목코드: m.item_id || "", 품명: m.item_name || "", 규격: m.item_spec || "",
|
|
거래처품번: m.customer_item_code || "", 거래처품명: m.customer_item_name || "",
|
|
기준가: m.base_price || "", 할인유형: m.discount_type || "", 할인값: m.discount_value || "",
|
|
단가: m.calculated_price || "", 통화: m.currency_code || "",
|
|
});
|
|
}
|
|
}
|
|
}
|
|
await exportToExcel(rows, "거래처관리.xlsx", "거래처+품목");
|
|
toast.dismiss("excel-dl");
|
|
toast.success(`${rows.length}행 다운로드 완료`);
|
|
} catch (err) {
|
|
toast.dismiss("excel-dl");
|
|
toast.error("다운로드에 실패했습니다.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-full flex-col gap-3 p-4">
|
|
{/* 검색 필터 (DynamicSearchFilter) */}
|
|
<DynamicSearchFilter
|
|
tableName={CUSTOMER_TABLE}
|
|
filterId="c16-customer"
|
|
onFilterChange={setSearchFilters}
|
|
dataCount={customers.length}
|
|
externalFilterConfig={ts.filterConfig}
|
|
/>
|
|
|
|
{/* 액션 버튼 영역 */}
|
|
<div className="flex items-center gap-2 px-4 shrink-0">
|
|
<div className="flex gap-1.5 ml-auto">
|
|
<Button
|
|
variant="outline" size="sm" className="h-8" disabled={excelDetecting}
|
|
onClick={async () => {
|
|
setExcelDetecting(true);
|
|
try {
|
|
const result = await autoDetectMultiTableConfig(CUSTOMER_TABLE);
|
|
if (result.success && result.data) {
|
|
setExcelChainConfig(result.data);
|
|
setExcelUploadOpen(true);
|
|
} else {
|
|
toast.error(result.message || "테이블 구조 분석 실패");
|
|
}
|
|
} catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
|
|
}}
|
|
>
|
|
{excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />}
|
|
엑셀 업로드
|
|
</Button>
|
|
<Button variant="outline" size="sm" className="h-8" onClick={handleExcelDownload}>
|
|
<Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 마스터-디테일 분할 패널 */}
|
|
<div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
|
|
<ResizablePanelGroup direction="horizontal">
|
|
{/* 좌측: 거래처 목록 */}
|
|
<ResizablePanel defaultSize={55} minSize={30}>
|
|
<div className="flex flex-col h-full">
|
|
{/* 패널 헤더 */}
|
|
<div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
|
|
<div className="flex items-center gap-2.5">
|
|
<span className="text-[13px] font-bold">거래처 목록</span>
|
|
<span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
|
|
{customerCount}건
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<label className="flex items-center gap-1.5 cursor-pointer mr-1">
|
|
<input type="checkbox" checked={showInactive} onChange={(e) => setShowInactive(e.target.checked)} className="rounded" />
|
|
<span className="text-[11px] text-muted-foreground">거래정지 포함</span>
|
|
</label>
|
|
<Button size="sm" onClick={openCustomerRegister}>
|
|
<Plus className="w-3.5 h-3.5 mr-1" /> 등록
|
|
</Button>
|
|
<Button variant="outline" size="sm" disabled={!selectedCustomerId} onClick={openCustomerEdit}>
|
|
<Pencil className="w-3.5 h-3.5 mr-1" /> 수정
|
|
</Button>
|
|
<Button variant="destructive" size="sm" disabled={!selectedCustomerId} onClick={handleCustomerDelete}>
|
|
<Trash2 className="w-3.5 h-3.5 mr-1" /> 삭제
|
|
</Button>
|
|
<Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
|
|
<Settings2 className="w-3.5 h-3.5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 거래처 테이블 */}
|
|
<EDataTable
|
|
columns={customerColumns}
|
|
data={ts.groupData(showInactive ? customers : customers.filter((c) => c.status !== "거래정지"))}
|
|
rowKey={(row) => row.id}
|
|
loading={customerLoading}
|
|
emptyMessage="등록된 거래처가 없어요"
|
|
selectedId={selectedCustomerId}
|
|
onSelect={(id) => setSelectedCustomerId(id)}
|
|
onRowDoubleClick={(row) => { setSelectedCustomerId(row.id); openCustomerEdit(); }}
|
|
showRowNumber
|
|
showPagination
|
|
defaultPageSize={20}
|
|
draggableColumns={false}
|
|
columnOrderKey="c16-customer"
|
|
/>
|
|
</div>
|
|
</ResizablePanel>
|
|
|
|
<ResizableHandle withHandle />
|
|
|
|
{/* 우측: 디테일 패널 */}
|
|
<ResizablePanel defaultSize={45} minSize={25}>
|
|
<div className="flex flex-col h-full">
|
|
{!selectedCustomerId ? (
|
|
/* 빈 상태 */
|
|
<div className="flex-1 flex items-center justify-center p-5">
|
|
<div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
|
|
<Users className="w-12 h-12 text-muted-foreground/40 mb-4" />
|
|
<div className="text-sm font-semibold text-muted-foreground mb-1.5">거래처를 선택해주세요</div>
|
|
<div className="text-xs text-muted-foreground">좌측에서 거래처를 선택하면 상세 정보가 표시돼요</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* 탭 + 버튼 통합 헤더 */}
|
|
<Tabs
|
|
value={rightTab}
|
|
onValueChange={(v) => setRightTab(v as "items" | "delivery")}
|
|
className="flex flex-col flex-1 overflow-hidden gap-0"
|
|
>
|
|
<div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
|
|
<TabsList className="bg-transparent h-auto p-0 rounded-none">
|
|
<TabsTrigger
|
|
value="items"
|
|
className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
|
|
>
|
|
<Package className="w-3.5 h-3.5" /> 거래처별 품목정보
|
|
{Object.keys(priceGroups).length > 0 && (
|
|
<Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{Object.keys(priceGroups).length}</Badge>
|
|
)}
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="delivery"
|
|
className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-xs font-semibold gap-1.5"
|
|
>
|
|
<MapPin className="w-3.5 h-3.5" /> 납품처 정보
|
|
{deliveryItems.length > 0 && (
|
|
<Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{deliveryItems.length}</Badge>
|
|
)}
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
<div className="flex gap-1.5">
|
|
{rightTab === "items" ? (
|
|
<>
|
|
<Button size="sm" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
|
|
<Plus className="w-3.5 h-3.5" /> 품목 추가
|
|
</Button>
|
|
<Button variant="destructive" size="sm" disabled={priceCheckedIds.length === 0} onClick={handlePriceItemDelete}>
|
|
<Trash2 className="w-3.5 h-3.5" /> 삭제
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<Button size="sm" variant="outline" onClick={openCustomerEdit}>
|
|
<Pencil className="w-3.5 h-3.5 mr-1" /> 거래처 수정에서 관리
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 품목정보 탭 */}
|
|
<TabsContent value="items" className="flex flex-col flex-1 overflow-hidden mt-0">
|
|
<div className="flex-1 min-h-0 overflow-auto pt-px">
|
|
<Table>
|
|
<TableHeader className="sticky top-0 z-10">
|
|
<TableRow className="bg-muted hover:bg-muted h-10">
|
|
<TableHead className="w-[40px] text-center px-2">
|
|
<input
|
|
type="checkbox"
|
|
className="rounded"
|
|
checked={priceItems.length > 0 && priceCheckedIds.length === priceItems.length}
|
|
onChange={(e) => setPriceCheckedIds(e.target.checked ? priceItems.map((p) => p.id) : [])}
|
|
/>
|
|
</TableHead>
|
|
<TableHead className="w-[100px] 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="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품번</TableHead>
|
|
<TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처품명</TableHead>
|
|
<TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준유형</TableHead>
|
|
<TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
|
|
<TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
|
|
<TableHead className="w-[60px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인값</TableHead>
|
|
<TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
|
|
<TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{priceLoading ? (
|
|
<TableRow>
|
|
<TableCell colSpan={11} className="text-center py-8">
|
|
<Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
|
|
</TableCell>
|
|
</TableRow>
|
|
) : Object.keys(priceGroups).length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={11} className="text-center py-8 text-muted-foreground text-sm">
|
|
등록된 품목이 없어요
|
|
</TableCell>
|
|
</TableRow>
|
|
) : Object.entries(priceGroups).map(([itemKey, group]) => {
|
|
const isExpanded = expandedItems.has(itemKey);
|
|
const m = group.master;
|
|
const isChecked = priceCheckedIds.includes(m.id);
|
|
return (
|
|
<React.Fragment key={itemKey}>
|
|
{/* 마스터 행 */}
|
|
<TableRow
|
|
className={cn(
|
|
"cursor-pointer border-l-[3px] border-l-transparent h-[41px]",
|
|
isChecked && "bg-primary/5 border-l-primary"
|
|
)}
|
|
onClick={() => {
|
|
setExpandedItems((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(itemKey)) next.delete(itemKey); else next.add(itemKey);
|
|
return next;
|
|
});
|
|
}}
|
|
onDoubleClick={() => openEditItem(m)}
|
|
>
|
|
<TableCell
|
|
className="text-center px-2"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setPriceCheckedIds((prev) =>
|
|
prev.includes(m.id) ? prev.filter((id) => id !== m.id) : [...prev, m.id]
|
|
);
|
|
}}
|
|
>
|
|
<input type="checkbox" className="rounded" checked={isChecked} readOnly />
|
|
</TableCell>
|
|
<TableCell className="text-[13px] font-mono">
|
|
<div className="flex items-center gap-1">
|
|
{isExpanded
|
|
? <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
|
|
: <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
|
|
}
|
|
{m.item_number}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-[13px]">{m.item_name}</TableCell>
|
|
<TableCell className="text-[13px]">{m.customer_item_code}</TableCell>
|
|
<TableCell className="text-[13px]">{m.customer_item_name}</TableCell>
|
|
<TableCell className="text-[13px]">{m.base_price_type}</TableCell>
|
|
<TableCell className="text-[13px] text-right">
|
|
{m.base_price ? Number(m.base_price).toLocaleString() : ""}
|
|
</TableCell>
|
|
<TableCell className="text-[13px]">{m.discount_type}</TableCell>
|
|
<TableCell className="text-[13px] text-right">{m.discount_value ? Number(m.discount_value).toLocaleString() : ""}</TableCell>
|
|
<TableCell className="text-[13px] text-right font-semibold">
|
|
{m.calculated_price ? Number(m.calculated_price).toLocaleString() : ""}
|
|
</TableCell>
|
|
<TableCell className="text-[13px]">{m.currency_code}</TableCell>
|
|
</TableRow>
|
|
|
|
{/* 현재 단가 카드 (펼쳤을 때) */}
|
|
{isExpanded && (() => {
|
|
const cp = group.details.find((p) => p.is_current) || group.details[0];
|
|
if (!cp) return (
|
|
<TableRow className="border-l-[3px] border-l-primary/30">
|
|
<TableCell colSpan={11} className="py-3 px-4 text-xs text-muted-foreground">등록된 단가가 없어요</TableCell>
|
|
</TableRow>
|
|
);
|
|
return (
|
|
<TableRow className="border-l-[3px] border-l-primary/30">
|
|
<TableCell colSpan={11} className="px-4 py-3">
|
|
<div className="border border-primary/20 rounded-lg bg-card overflow-hidden">
|
|
{/* 카드 헤더 */}
|
|
<div className="flex items-center justify-between px-4 py-2 bg-primary/[0.04] border-b border-primary/10">
|
|
<div className="flex items-center gap-2">
|
|
<Coins className="w-3.5 h-3.5 text-primary" />
|
|
<span className="text-xs font-semibold">적용 단가</span>
|
|
<Badge variant="secondary" className="text-[9px] px-1.5 py-0 bg-primary/10 text-primary">현재</Badge>
|
|
</div>
|
|
{group.details.length > 1 && (
|
|
<span className="text-[10px] text-muted-foreground">전체 {group.details.length}건 중</span>
|
|
)}
|
|
</div>
|
|
{/* 카드 내용 */}
|
|
<div className="px-5 py-3.5 flex items-end gap-0 text-[13px]">
|
|
<div className="flex flex-col pr-5 border-r border-border/30">
|
|
<span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기간</span>
|
|
<span className="font-mono text-muted-foreground text-xs">
|
|
{cp.start_date ? String(cp.start_date).split("T")[0] : "—"} ~ {cp.end_date ? String(cp.end_date).split("T")[0] : "—"}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col px-5 border-r border-border/30">
|
|
<span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준유형</span>
|
|
<span>{cp.base_price_type_label || "-"}</span>
|
|
</div>
|
|
<div className="flex flex-col px-5 border-r border-border/30">
|
|
<span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준가</span>
|
|
<span className="font-mono font-medium">{cp.base_price ? Number(cp.base_price).toLocaleString() : "-"}</span>
|
|
</div>
|
|
<div className="flex flex-col px-5 border-r border-border/30">
|
|
<span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인유형</span>
|
|
<span>{cp.discount_type_label && cp.discount_type_label !== "할인없음" ? cp.discount_type_label : "-"}</span>
|
|
</div>
|
|
<div className="flex flex-col px-5 border-r border-border/30">
|
|
<span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인값</span>
|
|
<span className="font-mono">{cp.discount_value ? Number(cp.discount_value).toLocaleString() : "-"}</span>
|
|
</div>
|
|
<div className="flex flex-col px-5">
|
|
<span className="text-[10px] text-muted-foreground/50 font-medium mb-1">단수처리</span>
|
|
<span>
|
|
{cp.rounding_unit_value
|
|
? (priceCategoryOptions["rounding_unit_value"]?.find((o) => o.code === cp.rounding_unit_value)?.label || cp.rounding_unit_value)
|
|
: "-"}
|
|
</span>
|
|
</div>
|
|
<span className="text-primary/50 px-4 pb-0.5 text-lg">→</span>
|
|
<div className="flex flex-col pl-1">
|
|
<span className="text-[10px] text-muted-foreground/50 font-medium mb-1">계산단가</span>
|
|
<span className="text-base font-bold font-mono text-foreground">
|
|
{(cp.calculated_price || cp.unit_price) ? Number(cp.calculated_price || cp.unit_price).toLocaleString() : "-"}
|
|
<span className="text-xs font-normal text-muted-foreground ml-1.5">{cp.currency_label}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
})()}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* 납품처 탭 */}
|
|
<TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
|
|
<div className="flex-1 min-h-0 overflow-auto pt-px">
|
|
<Table>
|
|
<TableHeader className="sticky top-0 z-10">
|
|
<TableRow className="bg-muted hover:bg-muted h-10">
|
|
<TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
|
|
<TableHead className="min-w-[130px] 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-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
|
|
<TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
|
|
<TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
|
|
<TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{deliveryLoading ? (
|
|
<TableRow>
|
|
<TableCell colSpan={7} className="text-center py-8">
|
|
<Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
|
|
</TableCell>
|
|
</TableRow>
|
|
) : deliveryItems.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={7} className="text-center py-8 text-muted-foreground text-sm">
|
|
등록된 납품처가 없어요
|
|
</TableCell>
|
|
</TableRow>
|
|
) : deliveryItems.map((d) => (
|
|
<TableRow key={d.id} className="h-[41px]">
|
|
<TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
|
|
<TableCell className="text-sm">{d.destination_name}</TableCell>
|
|
<TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
|
|
<TableCell className="text-[13px]">{d.manager_name}</TableCell>
|
|
<TableCell className="text-[13px]">{d.phone}</TableCell>
|
|
<TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
|
|
<TableCell className="text-center">
|
|
{d.is_default && (
|
|
<Badge variant="default" className="text-[10px] px-1.5 py-0 h-5">메인</Badge>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</>
|
|
)}
|
|
</div>
|
|
</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
</div>
|
|
|
|
{/* ── 모달: 거래처 등록/수정 (3탭) ── */}
|
|
<Dialog open={customerModalOpen} onOpenChange={(open) => {
|
|
if (!open && isConfirmOpenRef.current) return;
|
|
setCustomerModalOpen(open);
|
|
if (!open) {
|
|
setModalContactFormOpen(false);
|
|
setModalDeliveryFormOpen(false);
|
|
setModalContactForm({});
|
|
setModalDeliveryForm({});
|
|
setModalContactEditId(null);
|
|
setModalDeliveryEditId(null);
|
|
fetchCustomers();
|
|
if (customerForm.customer_code) {
|
|
const cid = selectedCustomerId;
|
|
setSelectedCustomerId(null);
|
|
setTimeout(() => setSelectedCustomerId(cid), 50);
|
|
}
|
|
}
|
|
}}>
|
|
<DialogContent className="max-w-4xl h-[85vh] flex flex-col overflow-hidden p-0">
|
|
<DialogHeader className="px-6 pt-5 pb-0 shrink-0">
|
|
<DialogTitle>{customerEditMode ? "거래처 수정" : "거래처 등록"}</DialogTitle>
|
|
<DialogDescription>
|
|
{customerEditMode ? "거래처 정보를 수정합니다." : "새로운 거래처를 등록합니다."}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<Tabs value={customerModalTab} onValueChange={(v: any) => setCustomerModalTab(v)} className="flex flex-col flex-1 overflow-hidden">
|
|
<div className="shrink-0">
|
|
<TabsList className="bg-transparent w-full h-auto p-0 rounded-none gap-0">
|
|
<TabsTrigger value="basic" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
|
|
기본정보
|
|
</TabsTrigger>
|
|
<TabsTrigger value="contacts" className="flex-1 rounded-none border-r border-border py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
|
|
담당자 관리
|
|
{modalContacts.length > 0 && (
|
|
<span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalContacts.length}</span>
|
|
)}
|
|
</TabsTrigger>
|
|
<TabsTrigger value="delivery" className="flex-1 rounded-none py-2.5 text-[13px] font-semibold gap-1.5 data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=active]:shadow-none">
|
|
납품처 관리
|
|
{modalDeliveries.length > 0 && (
|
|
<span className="inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold bg-primary/10 text-primary rounded-full px-1">{modalDeliveries.length}</span>
|
|
)}
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</div>
|
|
|
|
{/* 기본정보 탭 */}
|
|
<TabsContent value="basic" className="flex-1 overflow-y-auto mt-0">
|
|
<div className="px-6 py-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">거래처 코드</Label>
|
|
<Input
|
|
value={customerForm.customer_code || ""}
|
|
onChange={(e) => setCustomerForm((p) => ({ ...p, customer_code: e.target.value }))}
|
|
placeholder={customerEditMode ? "" : "자동 생성"}
|
|
className={cn("h-9 font-mono", !customerEditMode && customerForm.customer_code && "bg-muted")}
|
|
readOnly={!customerEditMode && !!customerForm.customer_code}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">거래처명 <span className="text-destructive">*</span></Label>
|
|
<Input
|
|
value={customerForm.customer_name || ""}
|
|
onChange={(e) => setCustomerForm((p) => ({ ...p, customer_name: e.target.value }))}
|
|
placeholder="거래처명"
|
|
className="h-9"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">거래 유형</Label>
|
|
<Select
|
|
value={customerForm.division || "__none__"}
|
|
onValueChange={(v) => setCustomerForm((p) => ({ ...p, division: v === "__none__" ? "" : v }))}
|
|
>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="거래 유형" /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="__none__">선택 안 함</SelectItem>
|
|
{(categoryOptions["division"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">상태 <span className="text-destructive">*</span></Label>
|
|
<Select
|
|
value={customerForm.status || "__none__"}
|
|
onValueChange={(v) => setCustomerForm((p) => ({ ...p, status: v === "__none__" ? "" : v }))}
|
|
>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="상태" /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="__none__">선택 안 함</SelectItem>
|
|
{(categoryOptions["status"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">사업자번호</Label>
|
|
<Input
|
|
value={customerForm.business_number || ""}
|
|
onChange={(e) => handleFormChange("business_number", e.target.value)}
|
|
placeholder="000-00-00000"
|
|
className={cn("h-9", formErrors.business_number && "border-destructive")}
|
|
/>
|
|
{formErrors.business_number && <p className="text-xs text-destructive">{formErrors.business_number}</p>}
|
|
</div>
|
|
<div className="space-y-1.5 col-span-2">
|
|
<Label className="text-sm">주소</Label>
|
|
<Input
|
|
value={customerForm.address || ""}
|
|
onChange={(e) => setCustomerForm((p) => ({ ...p, address: e.target.value }))}
|
|
placeholder="주소"
|
|
className="h-9"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 세금유형 */}
|
|
<div className="mt-4 pt-4 border-t">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<Label className="text-sm font-semibold flex items-center gap-1.5">
|
|
<Coins className="w-3.5 h-3.5 text-primary" /> 세금유형
|
|
</Label>
|
|
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => {
|
|
setTaxTypeRows((prev) => [...prev, { _id: `tax_${Date.now()}_${Math.random()}`, tax_type_name: "", rate: "" }]);
|
|
}}>
|
|
<Plus className="h-3 w-3 mr-1" /> 추가
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{taxTypeRows.map((row, idx) => (
|
|
<div key={row._id} className="flex gap-2 items-center">
|
|
<span className="text-xs text-muted-foreground w-4 shrink-0">{idx + 1}</span>
|
|
<Select value={row.tax_type_name} onValueChange={(v) => {
|
|
setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, tax_type_name: v } : r));
|
|
}}>
|
|
<SelectTrigger className="h-9 text-[13px] flex-1"><SelectValue placeholder="세금유형 선택" /></SelectTrigger>
|
|
<SelectContent>
|
|
{taxTypeOptions.map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Input
|
|
value={row.rate}
|
|
onChange={(e) => {
|
|
const v = e.target.value.replace(/[^\d.]/g, "");
|
|
setTaxTypeRows((prev) => prev.map((r) => r._id === row._id ? { ...r, rate: v } : r));
|
|
}}
|
|
placeholder="세율 %"
|
|
className="h-9 text-[13px] w-[80px] text-right"
|
|
/>
|
|
<span className="text-xs text-muted-foreground">%</span>
|
|
<Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
|
|
onClick={() => setTaxTypeRows((prev) => prev.filter((r) => r._id !== row._id))}
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* 담당자 관리 탭 */}
|
|
<TabsContent value="contacts" className="flex flex-col flex-1 overflow-hidden mt-0">
|
|
<div className="flex-1 overflow-hidden flex flex-col">
|
|
{/* 담당자 목록 */}
|
|
<div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
|
|
<span className="text-xs text-muted-foreground font-medium">
|
|
담당자 {modalContacts.length}명
|
|
</span>
|
|
<Button size="sm" onClick={() => {
|
|
setModalContactForm({});
|
|
setModalContactEditId(null);
|
|
setModalContactFormOpen(true);
|
|
}}>
|
|
<Plus className="w-3.5 h-3.5 mr-1" /> 담당자 추가
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-auto">
|
|
{modalContactLoading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : modalContacts.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
|
<Users className="w-8 h-8 mb-2 opacity-30" />
|
|
<span className="text-sm">등록된 담당자가 없어요</span>
|
|
</div>
|
|
) : (
|
|
<Table>
|
|
<TableHeader className="sticky top-0 z-10">
|
|
<TableRow className="bg-muted hover:bg-muted h-10">
|
|
<TableHead className="min-w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자명</TableHead>
|
|
<TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
|
|
<TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
|
|
<TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">부서</TableHead>
|
|
<TableHead className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
|
|
<TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
|
|
<TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{[...modalContacts].sort((a, b) => {
|
|
const aMain = a.is_main === "Y" || a.is_main === true ? 0 : 1;
|
|
const bMain = b.is_main === "Y" || b.is_main === true ? 0 : 1;
|
|
return aMain - bMain;
|
|
}).map((c) => (
|
|
<TableRow key={c._localId || c.id} className="h-[41px]">
|
|
<TableCell className="text-sm font-medium">{c.contact_name}</TableCell>
|
|
<TableCell className="text-[13px]">{c.contact_phone}</TableCell>
|
|
<TableCell className="text-[13px] text-muted-foreground">{c.contact_email}</TableCell>
|
|
<TableCell className="text-[13px]">{c.department}</TableCell>
|
|
<TableCell className="text-center">
|
|
<button
|
|
className={cn(
|
|
"inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
|
|
(c.is_main === "Y" || c.is_main === true)
|
|
? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
|
|
: "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
|
|
)}
|
|
onClick={async () => {
|
|
const isCurrentMain = c.is_main === "Y" || c.is_main === true;
|
|
if (isCurrentMain) {
|
|
setModalContacts((prev) => prev.map((item) =>
|
|
(item._localId || item.id) === (c._localId || c.id) ? { ...item, is_main: "N" } : item
|
|
));
|
|
} else {
|
|
const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== (c._localId || c.id));
|
|
if (existingMain) {
|
|
const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
|
|
if (!ok) return;
|
|
}
|
|
setModalContacts((prev) => prev.map((item) =>
|
|
(item._localId || item.id) === (c._localId || c.id)
|
|
? { ...item, is_main: "Y" }
|
|
: { ...item, is_main: "N" }
|
|
));
|
|
}
|
|
}}
|
|
>
|
|
{(c.is_main === "Y" || c.is_main === true) ? "★ 메인" : "메인"}
|
|
</button>
|
|
</TableCell>
|
|
<TableCell className="text-[13px] text-muted-foreground">{c.memo}</TableCell>
|
|
<TableCell className="text-center">
|
|
<div className="flex items-center justify-center gap-1">
|
|
<Button
|
|
variant="ghost" size="sm" className="h-7 w-7 p-0"
|
|
onClick={() => {
|
|
setModalContactForm({ ...c });
|
|
setModalContactEditId(c._localId || c.id);
|
|
setModalContactFormOpen(true);
|
|
}}
|
|
>
|
|
<Pencil className="h-3 w-3" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
|
|
onClick={() => handleModalContactDelete(c._localId || c.id)}
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</div>
|
|
|
|
{/* 담당자 폼 (인라인) */}
|
|
{modalContactFormOpen && (
|
|
<div className="border-t bg-card px-6 py-4 shrink-0">
|
|
<div className="text-sm font-semibold mb-3">{modalContactEditId ? "담당자 수정" : "담당자 추가"}</div>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">담당자명 <span className="text-destructive">*</span></Label>
|
|
<Input
|
|
value={modalContactForm.contact_name || ""}
|
|
onChange={(e) => setModalContactForm((p) => ({ ...p, contact_name: e.target.value }))}
|
|
placeholder="담당자명"
|
|
className="h-8 text-sm"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">전화번호</Label>
|
|
<Input
|
|
value={modalContactForm.contact_phone || ""}
|
|
onChange={(e) => {
|
|
const formatted = formatField("phone", e.target.value);
|
|
setModalContactForm((p) => ({ ...p, contact_phone: formatted }));
|
|
}}
|
|
placeholder="010-0000-0000"
|
|
className="h-8 text-sm"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">이메일</Label>
|
|
<Input
|
|
value={modalContactForm.contact_email || ""}
|
|
onChange={(e) => setModalContactForm((p) => ({ ...p, contact_email: e.target.value }))}
|
|
placeholder="example@email.com"
|
|
className="h-8 text-sm"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">부서</Label>
|
|
<Input
|
|
value={modalContactForm.department || ""}
|
|
onChange={(e) => setModalContactForm((p) => ({ ...p, department: e.target.value }))}
|
|
placeholder="부서명"
|
|
className="h-8 text-sm"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">메모</Label>
|
|
<Input
|
|
value={modalContactForm.memo || ""}
|
|
onChange={(e) => setModalContactForm((p) => ({ ...p, memo: e.target.value }))}
|
|
placeholder="메모"
|
|
className="h-8 text-sm"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5 flex flex-col justify-end">
|
|
<label className="flex items-center gap-2 cursor-pointer h-8">
|
|
<input
|
|
type="checkbox"
|
|
checked={modalContactForm.is_main === "Y" || modalContactForm.is_main === true}
|
|
onChange={async (e) => {
|
|
const checked = e.target.checked;
|
|
if (checked) {
|
|
const existingMain = modalContacts.find((x) => (x.is_main === "Y" || x.is_main === true) && (x._localId || x.id) !== modalContactEditId);
|
|
if (existingMain) {
|
|
const ok = await confirm(`현재 메인 담당자는 "${existingMain.contact_name}"입니다. 변경하시겠습니까?`);
|
|
if (!ok) return;
|
|
setModalContacts((prev) => prev.map((item) => ({ ...item, is_main: "N" })));
|
|
}
|
|
setModalContactForm((p) => ({ ...p, is_main: "Y" }));
|
|
} else {
|
|
setModalContactForm((p) => ({ ...p, is_main: "N" }));
|
|
}
|
|
}}
|
|
className="rounded"
|
|
/>
|
|
<span className="text-sm">메인 담당자</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2 mt-3">
|
|
<Button
|
|
variant="outline" size="sm"
|
|
onClick={() => { setModalContactFormOpen(false); setModalContactForm({}); setModalContactEditId(null); }}
|
|
>
|
|
취소
|
|
</Button>
|
|
<Button size="sm" onClick={() => handleModalContactSave()}>
|
|
<Plus className="w-3.5 h-3.5 mr-1" />
|
|
{modalContactEditId ? "수정" : "추가"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* ── 탭3: 납품처 관리 ── */}
|
|
<TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
|
|
<div className="flex-1 overflow-hidden flex flex-col">
|
|
{/* 납품처 목록 헤더 */}
|
|
<div className="flex items-center justify-between px-6 py-2.5 border-b bg-muted/30 shrink-0">
|
|
<span className="text-xs text-muted-foreground font-medium">
|
|
납품처 {modalDeliveries.length}개
|
|
</span>
|
|
<Button size="sm" onClick={async () => {
|
|
const code = await generateDeliveryCode();
|
|
setModalDeliveryForm({ destination_code: code });
|
|
setModalDeliveryEditId(null);
|
|
setModalDeliveryFormErrors({});
|
|
setModalDeliveryFormOpen(true);
|
|
}}>
|
|
<Plus className="w-3.5 h-3.5 mr-1" /> 납품처 추가
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-auto">
|
|
{modalDeliveryLoading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : modalDeliveries.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
|
<MapPin className="w-8 h-8 mb-2 opacity-30" />
|
|
<span className="text-sm">등록된 납품처가 없어요</span>
|
|
</div>
|
|
) : (
|
|
<Table>
|
|
<TableHeader className="sticky top-0 z-10">
|
|
<TableRow className="bg-muted hover:bg-muted h-10">
|
|
<TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납품처코드</TableHead>
|
|
<TableHead className="min-w-[130px] 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-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
|
|
<TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">전화번호</TableHead>
|
|
<TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>
|
|
<TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
|
|
<TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">관리</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{[...modalDeliveries].sort((a, b) => {
|
|
const aMain = a.is_default === "Y" || a.is_default === true ? 0 : 1;
|
|
const bMain = b.is_default === "Y" || b.is_default === true ? 0 : 1;
|
|
return aMain - bMain;
|
|
}).map((d) => (
|
|
<TableRow key={d._localId || d.id || d.destination_code} className="h-[41px]">
|
|
<TableCell className="text-[13px] font-mono text-muted-foreground">{d.destination_code}</TableCell>
|
|
<TableCell className="text-sm">{d.destination_name}</TableCell>
|
|
<TableCell className="text-[13px] text-muted-foreground">{d.address}</TableCell>
|
|
<TableCell className="text-[13px]">{d.manager_name}</TableCell>
|
|
<TableCell className="text-[13px]">{d.phone}</TableCell>
|
|
<TableCell className="text-[13px] text-muted-foreground">{d.memo}</TableCell>
|
|
<TableCell className="text-center">
|
|
<button
|
|
className={cn(
|
|
"inline-flex items-center gap-1 text-[11px] font-bold px-3 py-1 rounded-full transition-all cursor-pointer border-2",
|
|
(d.is_default === "Y" || d.is_default === true)
|
|
? "bg-primary text-primary-foreground border-primary shadow-sm shadow-primary/30"
|
|
: "bg-transparent text-muted-foreground border-muted-foreground/20 hover:border-primary/50 hover:text-primary"
|
|
)}
|
|
onClick={async () => {
|
|
const isCurrentMain = d.is_default === "Y" || d.is_default === true;
|
|
if (isCurrentMain) {
|
|
setModalDeliveries((prev) => prev.map((item) =>
|
|
(item._localId || item.id) === (d._localId || d.id) ? { ...item, is_default: "N" } : item
|
|
));
|
|
} else {
|
|
const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== (d._localId || d.id));
|
|
if (existingMain) {
|
|
const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
|
|
if (!ok) return;
|
|
}
|
|
setModalDeliveries((prev) => prev.map((item) =>
|
|
(item._localId || item.id) === (d._localId || d.id)
|
|
? { ...item, is_default: "Y" }
|
|
: { ...item, is_default: "N" }
|
|
));
|
|
}
|
|
}}
|
|
>
|
|
{(d.is_default === "Y" || d.is_default === true) ? "★ 메인" : "메인"}
|
|
</button>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<div className="flex items-center justify-center gap-1">
|
|
<Button
|
|
variant="ghost" size="sm" className="h-7 w-7 p-0"
|
|
onClick={() => {
|
|
setModalDeliveryForm({ ...d });
|
|
setModalDeliveryEditId(d._localId || d.id);
|
|
setModalDeliveryFormErrors({});
|
|
setModalDeliveryFormOpen(true);
|
|
}}
|
|
>
|
|
<Pencil className="h-3 w-3" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive"
|
|
onClick={() => handleModalDeliveryDelete(d._localId || d.id)}
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</div>
|
|
|
|
{/* 납품처 폼 (인라인) */}
|
|
{modalDeliveryFormOpen && (
|
|
<div className="border-t bg-card px-6 py-4 shrink-0">
|
|
<div className="text-sm font-semibold mb-3">{modalDeliveryEditId ? "납품처 수정" : "납품처 추가"}</div>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">납품처코드</Label>
|
|
<Input
|
|
value={modalDeliveryForm.destination_code || ""}
|
|
onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_code: e.target.value }))}
|
|
placeholder="자동 생성"
|
|
className={cn("h-8 text-sm font-mono", modalDeliveryForm.destination_code && "bg-muted")}
|
|
readOnly={!!modalDeliveryForm.destination_code && !modalDeliveryEditId}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">납품처명 <span className="text-destructive">*</span></Label>
|
|
<Input
|
|
value={modalDeliveryForm.destination_name || ""}
|
|
onChange={(e) => setModalDeliveryForm((p) => ({ ...p, destination_name: e.target.value }))}
|
|
placeholder="납품처명"
|
|
className="h-8 text-sm"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">담당자</Label>
|
|
<Input
|
|
value={modalDeliveryForm.manager_name || ""}
|
|
onChange={(e) => setModalDeliveryForm((p) => ({ ...p, manager_name: e.target.value }))}
|
|
placeholder="담당자"
|
|
className="h-8 text-sm"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5 col-span-2">
|
|
<Label className="text-xs">주소</Label>
|
|
<Input
|
|
value={modalDeliveryForm.address || ""}
|
|
onChange={(e) => setModalDeliveryForm((p) => ({ ...p, address: e.target.value }))}
|
|
placeholder="주소"
|
|
className="h-8 text-sm"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">전화번호</Label>
|
|
<Input
|
|
value={modalDeliveryForm.phone || ""}
|
|
onChange={(e) => {
|
|
const formatted = formatField("phone", e.target.value);
|
|
setModalDeliveryForm((p) => ({ ...p, phone: formatted }));
|
|
const err = validateField("phone", formatted);
|
|
setModalDeliveryFormErrors((p) => {
|
|
const n = { ...p };
|
|
if (err) n.phone = err; else delete n.phone;
|
|
return n;
|
|
});
|
|
}}
|
|
placeholder="010-0000-0000"
|
|
className={cn("h-8 text-sm", modalDeliveryFormErrors.phone && "border-destructive")}
|
|
/>
|
|
{modalDeliveryFormErrors.phone && <p className="text-xs text-destructive">{modalDeliveryFormErrors.phone}</p>}
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">메모</Label>
|
|
<Input
|
|
value={modalDeliveryForm.memo || ""}
|
|
onChange={(e) => setModalDeliveryForm((p) => ({ ...p, memo: e.target.value }))}
|
|
placeholder="메모"
|
|
className="h-8 text-sm"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col justify-end">
|
|
<label className="flex items-center gap-2 cursor-pointer h-8">
|
|
<input
|
|
type="checkbox"
|
|
checked={modalDeliveryForm.is_default === "Y" || modalDeliveryForm.is_default === true}
|
|
onChange={async (e) => {
|
|
const checked = e.target.checked;
|
|
if (checked) {
|
|
const existingMain = modalDeliveries.find((x) => (x.is_default === "Y" || x.is_default === true) && (x._localId || x.id) !== modalDeliveryEditId);
|
|
if (existingMain) {
|
|
const ok = await confirm(`현재 메인 납품처는 "${existingMain.destination_name}"입니다. 변경하시겠습니까?`);
|
|
if (!ok) return;
|
|
setModalDeliveries((prev) => prev.map((item) => ({ ...item, is_default: "N" })));
|
|
}
|
|
setModalDeliveryForm((p) => ({ ...p, is_default: "Y" }));
|
|
} else {
|
|
setModalDeliveryForm((p) => ({ ...p, is_default: "N" }));
|
|
}
|
|
}}
|
|
className="rounded"
|
|
/>
|
|
<span className="text-sm">메인 납품처로 설정</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2 mt-3">
|
|
<Button
|
|
variant="outline" size="sm"
|
|
onClick={() => { setModalDeliveryFormOpen(false); setModalDeliveryForm({}); setModalDeliveryEditId(null); setModalDeliveryFormErrors({}); }}
|
|
>
|
|
취소
|
|
</Button>
|
|
<Button size="sm" onClick={() => handleModalDeliverySave()}>
|
|
<Plus className="w-3.5 h-3.5 mr-1" />
|
|
{modalDeliveryEditId ? "수정" : "추가"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
<div className="border-t px-6 py-3 flex items-center gap-2 shrink-0">
|
|
{!customerEditMode && (
|
|
<label className="flex items-center gap-2 cursor-pointer mr-auto">
|
|
<input type="checkbox" checked={continuousInput} onChange={(e) => setContinuousInput(e.target.checked)} className="rounded" />
|
|
<span className="text-sm font-medium">연속입력</span>
|
|
</label>
|
|
)}
|
|
<Button variant="outline" onClick={() => setCustomerModalOpen(false)}>닫기</Button>
|
|
<Button onClick={handleCustomerSave} disabled={saving}>
|
|
{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
|
|
{customerEditMode ? "저장" : "등록"}
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* ── 모달: 품목 선택 (1단계) ── */}
|
|
<Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
|
|
<DialogContent className="max-w-3xl">
|
|
<DialogHeader>
|
|
<DialogTitle>품목 선택</DialogTitle>
|
|
<DialogDescription>거래처에 추가할 품목을 선택하세요. (전체: {itemTotalCount}건 / 대상: {itemSearchResults.length}건{itemCheckedIds.size > 0 ? ` / 선택: ${itemCheckedIds.size}건` : ""})</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex gap-2 mb-3">
|
|
<Input
|
|
placeholder="품명/품목코드 검색"
|
|
value={itemSearchKeyword}
|
|
onChange={(e) => setItemSearchKeyword(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && searchItems()}
|
|
className="h-9 flex-1"
|
|
/>
|
|
<Button size="sm" onClick={searchItems} 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 h-[350px] border rounded-lg">
|
|
<Table noWrapper>
|
|
<TableHeader className="sticky top-0 z-10">
|
|
<TableRow className="bg-muted hover:bg-muted h-10">
|
|
<TableHead className="w-[40px] text-center px-2">
|
|
<input
|
|
type="checkbox"
|
|
className="rounded"
|
|
checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
|
|
onChange={(e) => {
|
|
if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
|
|
else setItemCheckedIds(new Set());
|
|
}}
|
|
/>
|
|
</TableHead>
|
|
<TableHead className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
|
|
<TableHead className="min-w-[140px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
|
|
<TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
|
|
<TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">재질</TableHead>
|
|
<TableHead className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{itemSearchResults.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="text-center text-muted-foreground py-8 text-sm">
|
|
검색 결과가 없어요
|
|
</TableCell>
|
|
</TableRow>
|
|
) : itemSearchResults.map((item) => (
|
|
<TableRow
|
|
key={item.id}
|
|
className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
|
|
onClick={() => setItemCheckedIds((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
|
|
return next;
|
|
})}
|
|
>
|
|
<TableCell className="text-center px-2">
|
|
<input type="checkbox" className="rounded" checked={itemCheckedIds.has(item.id)} readOnly />
|
|
</TableCell>
|
|
<TableCell className="text-[13px] font-mono">
|
|
<span className="block truncate" title={item.item_number}>{item.item_number}</span>
|
|
</TableCell>
|
|
<TableCell className="text-sm">{item.item_name}</TableCell>
|
|
<TableCell className="text-[13px] text-muted-foreground">{item.size}</TableCell>
|
|
<TableCell className="text-[13px] text-muted-foreground">{categoryOptions["item_material"]?.find((o) => o.code === item.material)?.label || item.material}</TableCell>
|
|
<TableCell className="text-[13px] text-muted-foreground">{categoryOptions["item_unit"]?.find((o) => o.code === item.unit)?.label || item.unit}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
<DialogFooter className="flex items-center justify-between w-full">
|
|
<span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={() => setItemSelectOpen(false)}>취소</Button>
|
|
<Button onClick={goToItemDetail} disabled={itemCheckedIds.size === 0}>
|
|
<Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 다음
|
|
</Button>
|
|
</div>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* ── 모달: 품목 상세 입력 (2단계) ── */}
|
|
<Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
|
|
<DialogContent className="max-w-[1100px] h-[85vh] flex flex-col overflow-hidden">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedCustomer?.customer_name || ""}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{editItemData
|
|
? "거래처 품번/품명과 기간별 단가를 수정합니다."
|
|
: "선택한 품목의 거래처 품번/품명과 기간별 단가를 설정합니다."}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-6 py-2 flex-1 overflow-y-auto">
|
|
{selectedItemsForDetail.map((item, idx) => {
|
|
const itemKey = item.item_number || item.id;
|
|
const mappingRows = itemMappings[itemKey] || [];
|
|
const prices = itemPrices[itemKey] || [];
|
|
|
|
return (
|
|
<div key={itemKey} className="border rounded-xl overflow-hidden bg-card">
|
|
{/* 품목 헤더 */}
|
|
<div className="px-5 py-3 bg-muted/30 border-b">
|
|
<div className="font-bold">{idx + 1}. {item.item_name || itemKey}</div>
|
|
<div className="text-xs text-muted-foreground">{itemKey} | {item.size || ""} | {categoryOptions["item_unit"]?.find((o) => o.code === item.unit)?.label || item.unit || ""}</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4 p-5 items-stretch">
|
|
{/* 좌: 거래처 품번/품명 */}
|
|
<div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
|
|
<div className="flex items-center justify-between mb-3 shrink-0">
|
|
<span className="text-sm font-semibold flex items-center gap-1.5">
|
|
<Tag className="w-3.5 h-3.5 text-primary" /> 거래처 품번/품명 관리
|
|
</span>
|
|
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(itemKey)}>
|
|
<Plus className="h-3 w-3 mr-1" /> 품번 추가
|
|
</Button>
|
|
</div>
|
|
<div className="border-2 border-foreground/20 rounded-lg bg-background p-3 space-y-2 min-h-[200px] max-h-[350px] overflow-y-auto flex-1">
|
|
{mappingRows.length === 0 ? (
|
|
<div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
|
|
) : (
|
|
<DndContext
|
|
sensors={dndSensors}
|
|
collisionDetection={closestCenter}
|
|
onDragEnd={(e) => handleMappingDragEnd(itemKey, e)}
|
|
>
|
|
<SortableContext items={mappingRows.map((r) => r._id)} strategy={verticalListSortingStrategy}>
|
|
{mappingRows.map((mRow, mIdx) => (
|
|
<SortableMappingRow key={mRow._id} id={mRow._id}>
|
|
<span className="text-xs text-muted-foreground/50 font-mono w-4 shrink-0 text-center">{mIdx + 1}</span>
|
|
<Input
|
|
value={mRow.customer_item_code}
|
|
onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_code", e.target.value)}
|
|
placeholder="거래처 품번"
|
|
className="h-9 text-[13px] flex-1"
|
|
/>
|
|
<Input
|
|
value={mRow.customer_item_name}
|
|
onChange={(e) => updateMappingRow(itemKey, mRow._id, "customer_item_name", e.target.value)}
|
|
placeholder="거래처 품명"
|
|
className="h-9 text-[13px] flex-1"
|
|
/>
|
|
<Button
|
|
variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive shrink-0"
|
|
onClick={() => removeMappingRow(itemKey, mRow._id)}
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
</SortableMappingRow>
|
|
))}
|
|
</SortableContext>
|
|
</DndContext>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 우: 기간별 단가 */}
|
|
<div className="flex-1 border-2 border-foreground/20 rounded-lg p-4 flex flex-col">
|
|
<div className="flex items-center justify-between mb-3 shrink-0">
|
|
<span className="text-sm font-semibold flex items-center gap-1.5">
|
|
<Coins className="w-3.5 h-3.5 text-primary" /> 기간별 단가 설정
|
|
</span>
|
|
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(itemKey)}>
|
|
<Plus className="h-3 w-3 mr-1" /> 단가 추가
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-3 flex-1 overflow-y-auto max-h-[350px]">
|
|
{prices.map((price, pIdx) => (
|
|
<div key={price._id} className="border-2 border-foreground/20 rounded-lg bg-background overflow-hidden">
|
|
<div
|
|
className="flex items-center justify-between px-4 py-2.5 cursor-pointer hover:bg-muted/50 transition-colors"
|
|
onClick={() => setCollapsedPriceCards((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(price._id)) next.delete(price._id); else next.add(price._id);
|
|
return next;
|
|
})}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{collapsedPriceCards.has(price._id)
|
|
? <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
|
|
: <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
|
|
}
|
|
<span className="text-[13px] font-semibold text-muted-foreground">단가 {pIdx + 1}</span>
|
|
{collapsedPriceCards.has(price._id) && price.calculated_price && (
|
|
<span className="text-xs text-muted-foreground ml-2">
|
|
{price.start_date || "—"} ~ {price.end_date || "—"} · <span className="font-mono font-bold text-foreground">{Number(price.calculated_price).toLocaleString()}</span> {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
{prices.length > 1 && (
|
|
<Button
|
|
variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive"
|
|
onClick={(e) => { e.stopPropagation(); removePriceRow(itemKey, price._id); }}
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{!collapsedPriceCards.has(price._id) && <div className="px-4 pb-4 space-y-2.5">
|
|
{/* 기간 + 통화 */}
|
|
<div className="flex gap-2 items-center">
|
|
<div className="flex-1">
|
|
<Label className="text-[11px] text-muted-foreground mb-1 block">시작일</Label>
|
|
<Input
|
|
type="date"
|
|
value={price.start_date}
|
|
onChange={(e) => {
|
|
const v = e.target.value;
|
|
updatePriceRow(itemKey, price._id, "start_date", v);
|
|
if (price.end_date && v > price.end_date) {
|
|
updatePriceRow(itemKey, price._id, "end_date", v);
|
|
}
|
|
}}
|
|
max={price.end_date || undefined}
|
|
className="h-9 text-[13px] w-full"
|
|
/>
|
|
</div>
|
|
<span className="text-xs text-muted-foreground mt-4">~</span>
|
|
<div className="flex-1">
|
|
<Label className="text-[11px] text-muted-foreground mb-1 block">종료일</Label>
|
|
<Input
|
|
type="date"
|
|
value={price.end_date}
|
|
onChange={(e) => updatePriceRow(itemKey, price._id, "end_date", e.target.value)}
|
|
min={price.start_date || undefined}
|
|
className="h-9 text-[13px] w-full"
|
|
/>
|
|
</div>
|
|
<div className="w-[80px]">
|
|
<Label className="text-[11px] text-muted-foreground mb-1 block"> </Label>
|
|
<Select
|
|
value={price.currency_code}
|
|
onValueChange={(v) => updatePriceRow(itemKey, price._id, "currency_code", v)}
|
|
>
|
|
<SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="통화" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(priceCategoryOptions["currency_code"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
{/* 기준유형 + 기준가 */}
|
|
<div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
|
|
<Select
|
|
value={price.base_price_type}
|
|
onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}
|
|
>
|
|
<SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="기준유형" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(priceCategoryOptions["base_price_type"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Input
|
|
value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
|
|
onChange={(e) => {
|
|
const raw = e.target.value.replace(/[^\d.-]/g, "");
|
|
updatePriceRow(itemKey, price._id, "base_price", raw);
|
|
}}
|
|
className="h-9 text-[13px] text-right col-span-3"
|
|
placeholder="기준가"
|
|
/>
|
|
</div>
|
|
{/* 할인 + 반올림 */}
|
|
<div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
|
|
<Select
|
|
value={price.discount_type}
|
|
onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}
|
|
>
|
|
<SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="할인" /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="none">할인없음</SelectItem>
|
|
{(priceCategoryOptions["discount_type"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Input
|
|
value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
|
|
onChange={(e) => {
|
|
const raw = e.target.value.replace(/[^\d.-]/g, "");
|
|
updatePriceRow(itemKey, price._id, "discount_value", raw);
|
|
}}
|
|
className="h-9 text-[13px] text-right"
|
|
placeholder="0"
|
|
/>
|
|
<Select
|
|
value={price.rounding_unit_value}
|
|
onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}
|
|
>
|
|
<SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="반올림" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Select
|
|
value={price.rounding_type}
|
|
onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_type", v)}
|
|
>
|
|
<SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="단위" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(priceCategoryOptions["rounding_type"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
{/* 계산 단가 */}
|
|
<div className="flex items-center justify-end gap-1.5 pt-2 border-t">
|
|
<span className="text-[13px] text-muted-foreground">계산 단가:</span>
|
|
<span className="font-bold text-base font-mono">
|
|
{price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
|
|
</span>
|
|
{price.calculated_price && price.currency_code && (
|
|
<span className="text-[13px] text-muted-foreground">
|
|
{priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
setItemDetailOpen(false);
|
|
if (!editItemData) setItemSelectOpen(true);
|
|
setEditItemData(null);
|
|
}}
|
|
>
|
|
{editItemData ? "취소" : "← 이전"}
|
|
</Button>
|
|
<Button onClick={handleItemDetailSave} disabled={saving}>
|
|
{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />}
|
|
품목 추가 완료
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 엑셀 업로드 (멀티테이블) */}
|
|
{excelChainConfig && (
|
|
<MultiTableExcelUploadModal
|
|
open={excelUploadOpen}
|
|
onOpenChange={(open) => {
|
|
setExcelUploadOpen(open);
|
|
if (!open) setExcelChainConfig(null);
|
|
}}
|
|
config={excelChainConfig}
|
|
onSuccess={() => {
|
|
fetchCustomers();
|
|
const cid = selectedCustomerId;
|
|
setSelectedCustomerId(null);
|
|
setTimeout(() => setSelectedCustomerId(cid), 50);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* 테이블 설정 모달 */}
|
|
<TableSettingsModal
|
|
open={ts.open}
|
|
onOpenChange={ts.setOpen}
|
|
tableName={ts.tableName}
|
|
settingsId={ts.settingsId}
|
|
defaultVisibleKeys={ts.defaultVisibleKeys}
|
|
onSave={ts.applySettings}
|
|
/>
|
|
|
|
{ConfirmDialogComponent}
|
|
</div>
|
|
);
|
|
}
|