DDD1542
756 lines
41 KiB
TypeScript
756 lines
41 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useCallback } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
|
|
import { Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Truck, Search, Settings2 } from "lucide-react";
|
|
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 { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
|
|
import { exportToExcel } from "@/lib/utils/excelExport";
|
|
import { useTableSettings } from "@/hooks/useTableSettings";
|
|
import { TableSettingsModal } from "@/components/common/TableSettingsModal";
|
|
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
|
|
|
const ITEM_TABLE = "item_info";
|
|
const MAPPING_TABLE = "supplier_item_mapping";
|
|
const SUPPLIER_TABLE = "supplier_mng";
|
|
|
|
const ITEM_COLUMNS = [
|
|
{ key: "size", label: "규격" },
|
|
{ key: "unit", label: "단위" },
|
|
{ key: "standard_price", label: "기준단가" },
|
|
{ key: "status", label: "상태" },
|
|
];
|
|
|
|
export default function PurchaseItemPage() {
|
|
const { user } = useAuth();
|
|
const { confirm, ConfirmDialogComponent } = useConfirmDialog();
|
|
|
|
// 검색 필터 (DynamicSearchFilter)
|
|
const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
|
|
|
|
// 좌측: 품목
|
|
const [items, setItems] = useState<any[]>([]);
|
|
const [itemLoading, setItemLoading] = useState(false);
|
|
const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
|
|
|
|
// 우측: 공급업체
|
|
const [supplierItems, setSupplierItems] = useState<any[]>([]);
|
|
const [supplierLoading, setSupplierLoading] = useState(false);
|
|
const [supplierCheckedIds, setSupplierCheckedIds] = useState<string[]>([]);
|
|
|
|
// 카테고리
|
|
const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
|
|
|
|
// 공급업체 추가 모달
|
|
const [suppSelectOpen, setSuppSelectOpen] = useState(false);
|
|
const [suppSearchKeyword, setSuppSearchKeyword] = useState("");
|
|
const [suppSearchResults, setSuppSearchResults] = useState<any[]>([]);
|
|
const [suppSearchLoading, setSuppSearchLoading] = useState(false);
|
|
const [suppCheckedIds, setSuppCheckedIds] = useState<Set<string>>(new Set());
|
|
|
|
// 공급업체 상세 입력 모달
|
|
const [suppDetailOpen, setSuppDetailOpen] = useState(false);
|
|
const [selectedSuppsForDetail, setSelectedSuppsForDetail] = useState<any[]>([]);
|
|
const [suppMappings, setSuppMappings] = useState<Record<string, {
|
|
supplier_item_code: string; supplier_item_name: string;
|
|
base_price: string; discount_type: string; discount_value: string; calculated_price: string;
|
|
currency_code: string; start_date: string; end_date: string;
|
|
lead_time_days: string; min_order_qty: string;
|
|
}>>({});
|
|
const [editSuppData, setEditSuppData] = useState<any>(null);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
// 품목 수정 모달
|
|
const [editItemOpen, setEditItemOpen] = useState(false);
|
|
const [editItemForm, setEditItemForm] = useState<Record<string, any>>({});
|
|
|
|
// 엑셀
|
|
const [excelUploadOpen, setExcelUploadOpen] = useState(false);
|
|
|
|
// 테이블 설정
|
|
const ts = useTableSettings("c16-purchase-item", ITEM_TABLE, ITEM_COLUMNS);
|
|
|
|
// 카테고리 로드
|
|
useEffect(() => {
|
|
const load = async () => {
|
|
const optMap: Record<string, { code: string; label: string }[]> = {};
|
|
const flatten = (vals: any[]): { code: string; label: string }[] => {
|
|
const result: { code: string; label: string }[] = [];
|
|
for (const v of vals) {
|
|
result.push({ code: v.valueCode, label: v.valueLabel });
|
|
if (v.children?.length) result.push(...flatten(v.children));
|
|
}
|
|
return result;
|
|
};
|
|
for (const col of ["currency_code", "status"]) {
|
|
try {
|
|
const res = await apiClient.get(`/table-categories/${ITEM_TABLE}/${col}/values`);
|
|
if (res.data?.success) optMap[col] = flatten(res.data.data || []);
|
|
} catch { /* skip */ }
|
|
}
|
|
setCategoryOptions(optMap);
|
|
};
|
|
load();
|
|
}, []);
|
|
|
|
// 좌측: 품목 조회
|
|
const fetchItems = useCallback(async () => {
|
|
setItemLoading(true);
|
|
try {
|
|
const filters = searchFilters.map((f) => ({ columnName: f.columnName, operator: f.operator, value: f.value }));
|
|
const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
|
|
autoFilter: true,
|
|
});
|
|
setItems(res.data?.data?.data || res.data?.data?.rows || []);
|
|
} catch {
|
|
toast.error("품목 목록을 불러오는데 실패했습니다.");
|
|
} finally {
|
|
setItemLoading(false);
|
|
}
|
|
}, [searchFilters]);
|
|
|
|
useEffect(() => { fetchItems(); }, [fetchItems]);
|
|
|
|
const selectedItem = items.find((i) => i.id === selectedItemId);
|
|
const isColVisible = (key: string) => ts.isVisible(key);
|
|
const itemColSpan = 2 + ITEM_COLUMNS.filter((c) => isColVisible(c.key)).length;
|
|
|
|
// 우측: 공급업체 매핑 조회
|
|
useEffect(() => {
|
|
if (!selectedItem?.item_number) { setSupplierItems([]); setSupplierCheckedIds([]); return; }
|
|
setSupplierCheckedIds([]);
|
|
const itemKey = selectedItem.item_number;
|
|
const fetchSupplierMappings = async () => {
|
|
setSupplierLoading(true);
|
|
try {
|
|
const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
|
|
autoFilter: true,
|
|
});
|
|
const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
|
|
const suppIds = [...new Set(mappings.map((m: any) => m.supplier_id).filter(Boolean))];
|
|
let suppMap: Record<string, any> = {};
|
|
if (suppIds.length > 0) {
|
|
try {
|
|
const suppRes = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
|
|
page: 1, size: suppIds.length + 10,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "supplier_code", operator: "in", value: suppIds }] },
|
|
autoFilter: true,
|
|
});
|
|
for (const s of (suppRes.data?.data?.data || suppRes.data?.data?.rows || [])) {
|
|
suppMap[s.supplier_code] = s;
|
|
}
|
|
} catch { /* skip */ }
|
|
}
|
|
setSupplierItems(mappings.map((m: any) => ({
|
|
...m,
|
|
supplier_code: m.supplier_id || "",
|
|
supplier_name: suppMap[m.supplier_id]?.supplier_name || "",
|
|
})));
|
|
} catch {
|
|
toast.error("공급업체 정보를 불러오는데 실패했습니다.");
|
|
} finally {
|
|
setSupplierLoading(false);
|
|
}
|
|
};
|
|
fetchSupplierMappings();
|
|
}, [selectedItem?.item_number]);
|
|
|
|
// 공급업체 검색
|
|
const searchSuppliers = async () => {
|
|
setSuppSearchLoading(true);
|
|
try {
|
|
const filters: any[] = [];
|
|
if (suppSearchKeyword) filters.push({ columnName: "supplier_name", operator: "contains", value: suppSearchKeyword });
|
|
const res = await apiClient.post(`/table-management/tables/${SUPPLIER_TABLE}/data`, {
|
|
page: 1, size: 50,
|
|
dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
|
|
autoFilter: true,
|
|
});
|
|
const all = res.data?.data?.data || res.data?.data?.rows || [];
|
|
const existing = new Set(supplierItems.map((s: any) => s.supplier_id));
|
|
setSuppSearchResults(all.filter((s: any) => !existing.has(s.supplier_code)));
|
|
} catch { /* skip */ } finally { setSuppSearchLoading(false); }
|
|
};
|
|
|
|
// 단가 자동 계산
|
|
const calcPrice = (base: string, discType: string, discVal: string): string => {
|
|
const bp = Number(base) || 0;
|
|
const dv = Number(discVal) || 0;
|
|
if (discType === "rate") return String(Math.round(bp * (1 - dv / 100)));
|
|
if (discType === "amount") return String(Math.round(bp - dv));
|
|
return String(bp);
|
|
};
|
|
|
|
const goToSuppDetail = () => {
|
|
const selected = suppSearchResults.filter((s) => suppCheckedIds.has(s.id));
|
|
if (selected.length === 0) { toast.error("공급업체를 선택해주세요."); return; }
|
|
setSelectedSuppsForDetail(selected);
|
|
const mappings: typeof suppMappings = {};
|
|
for (const supp of selected) {
|
|
const key = supp.supplier_code || supp.id;
|
|
mappings[key] = {
|
|
supplier_item_code: "", supplier_item_name: "",
|
|
base_price: selectedItem?.standard_price || "", discount_type: "none",
|
|
discount_value: "", calculated_price: selectedItem?.standard_price || "",
|
|
currency_code: "", start_date: "", end_date: "",
|
|
lead_time_days: "", min_order_qty: "",
|
|
};
|
|
}
|
|
setSuppMappings(mappings);
|
|
setSuppSelectOpen(false);
|
|
setEditSuppData(null);
|
|
setSuppDetailOpen(true);
|
|
};
|
|
|
|
const updateMapping = (suppKey: string, field: string, value: string) => {
|
|
setSuppMappings((prev) => {
|
|
const cur = prev[suppKey] || {} as any;
|
|
const updated = { ...cur, [field]: value };
|
|
if (["base_price", "discount_type", "discount_value"].includes(field)) {
|
|
updated.calculated_price = calcPrice(updated.base_price, updated.discount_type, updated.discount_value);
|
|
}
|
|
return { ...prev, [suppKey]: updated };
|
|
});
|
|
};
|
|
|
|
const openEditSupp = (row: any) => {
|
|
const suppKey = row.supplier_id || row.supplier_code;
|
|
setSelectedSuppsForDetail([{ supplier_code: suppKey, supplier_name: row.supplier_name || "" }]);
|
|
setSuppMappings({
|
|
[suppKey]: {
|
|
supplier_item_code: row.supplier_item_code || "",
|
|
supplier_item_name: row.supplier_item_name || "",
|
|
base_price: row.base_price ? String(row.base_price) : "",
|
|
discount_type: row.discount_type || "none",
|
|
discount_value: row.discount_value ? String(row.discount_value) : "",
|
|
calculated_price: row.calculated_price ? String(row.calculated_price) : "",
|
|
currency_code: row.currency_code || "",
|
|
start_date: row.start_date ? String(row.start_date).split("T")[0] : "",
|
|
end_date: row.end_date ? String(row.end_date).split("T")[0] : "",
|
|
lead_time_days: row.lead_time_days ? String(row.lead_time_days) : "",
|
|
min_order_qty: row.min_order_qty ? String(row.min_order_qty) : "",
|
|
},
|
|
});
|
|
setEditSuppData(row);
|
|
setSuppDetailOpen(true);
|
|
};
|
|
|
|
const handleSuppDetailSave = async () => {
|
|
if (!selectedItem) return;
|
|
const isEdit = !!editSuppData;
|
|
setSaving(true);
|
|
try {
|
|
for (const supp of selectedSuppsForDetail) {
|
|
const suppKey = supp.supplier_code || supp.id;
|
|
const m = suppMappings[suppKey];
|
|
if (!m) continue;
|
|
const fields: Record<string, any> = {
|
|
supplier_id: suppKey, item_id: selectedItem.item_number,
|
|
supplier_item_code: m.supplier_item_code || null,
|
|
supplier_item_name: m.supplier_item_name || null,
|
|
base_price: m.base_price ? Number(m.base_price) : null,
|
|
discount_type: m.discount_type === "none" ? null : m.discount_type || null,
|
|
discount_value: m.discount_value ? Number(m.discount_value) : null,
|
|
calculated_price: m.calculated_price ? Number(m.calculated_price) : null,
|
|
currency_code: m.currency_code || null,
|
|
start_date: m.start_date || null,
|
|
end_date: m.end_date || null,
|
|
lead_time_days: m.lead_time_days ? Number(m.lead_time_days) : null,
|
|
min_order_qty: m.min_order_qty ? Number(m.min_order_qty) : null,
|
|
};
|
|
if (isEdit && editSuppData?.id) {
|
|
await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
|
|
originalData: { id: editSuppData.id }, updatedData: fields,
|
|
});
|
|
} else {
|
|
await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, { id: crypto.randomUUID(), ...fields });
|
|
}
|
|
}
|
|
toast.success(isEdit ? "수정되었습니다." : `${selectedSuppsForDetail.length}개 공급업체가 추가되었습니다.`);
|
|
setSuppDetailOpen(false);
|
|
setEditSuppData(null);
|
|
setSuppCheckedIds(new Set());
|
|
const sid = selectedItemId;
|
|
setSelectedItemId(null);
|
|
setTimeout(() => setSelectedItemId(sid), 50);
|
|
} catch (err: any) {
|
|
toast.error(err.response?.data?.message || "저장에 실패했습니다.");
|
|
} finally { setSaving(false); }
|
|
};
|
|
|
|
const openEditItem = () => {
|
|
if (!selectedItem) return;
|
|
setEditItemForm({ ...selectedItem });
|
|
setEditItemOpen(true);
|
|
};
|
|
|
|
const handleEditSave = async () => {
|
|
if (!editItemForm.id) return;
|
|
setSaving(true);
|
|
try {
|
|
await apiClient.put(`/table-management/tables/${ITEM_TABLE}/edit`, {
|
|
originalData: { id: editItemForm.id },
|
|
updatedData: {
|
|
standard_price: editItemForm.standard_price || null,
|
|
currency_code: editItemForm.currency_code || null,
|
|
},
|
|
});
|
|
toast.success("수정되었습니다.");
|
|
setEditItemOpen(false);
|
|
fetchItems();
|
|
} catch (err: any) {
|
|
toast.error(err.response?.data?.message || "수정에 실패했습니다.");
|
|
} finally { setSaving(false); }
|
|
};
|
|
|
|
const handleSupplierMappingDelete = async () => {
|
|
if (supplierCheckedIds.length === 0) return;
|
|
const ok = await confirm(`선택한 ${supplierCheckedIds.length}개 공급업체 매핑을 삭제하시겠습니까?`, { variant: "destructive", confirmText: "삭제" });
|
|
if (!ok) return;
|
|
try {
|
|
await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
|
|
data: supplierCheckedIds.map((id) => ({ id })),
|
|
});
|
|
toast.success(`${supplierCheckedIds.length}개 공급업체 매핑이 삭제되었습니다.`);
|
|
setSupplierCheckedIds([]);
|
|
const sid = selectedItemId;
|
|
setSelectedItemId(null);
|
|
setTimeout(() => setSelectedItemId(sid), 50);
|
|
} catch { toast.error("삭제에 실패했습니다."); }
|
|
};
|
|
|
|
const handleExcelDownload = async () => {
|
|
if (items.length === 0) return;
|
|
await exportToExcel(items.map((i) => ({
|
|
품번: i.item_number, 품명: i.item_name, 규격: i.size, 단위: i.unit,
|
|
기준단가: i.standard_price, 통화: i.currency_code, 상태: i.status,
|
|
})), "구매품목정보.xlsx", "구매품목");
|
|
toast.success("다운로드 완료");
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-full flex-col gap-3 p-3">
|
|
{/* 검색 바 */}
|
|
<DynamicSearchFilter
|
|
tableName={ITEM_TABLE}
|
|
filterId="c16-purchase-item"
|
|
onFilterChange={setSearchFilters}
|
|
dataCount={items.length}
|
|
externalFilterConfig={ts.filterConfig}
|
|
extraActions={
|
|
<div className="flex items-center gap-1.5">
|
|
<Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
|
|
<FileSpreadsheet className="w-3.5 h-3.5" /> 엑셀 업로드
|
|
</Button>
|
|
<Button variant="outline" size="sm" onClick={handleExcelDownload}>
|
|
<Download className="w-3.5 h-3.5" /> 엑셀 다운로드
|
|
</Button>
|
|
</div>
|
|
}
|
|
/>
|
|
|
|
{/* 분할 패널 */}
|
|
<div className="flex-1 overflow-hidden">
|
|
<ResizablePanelGroup direction="horizontal" className="h-full rounded-lg border bg-card">
|
|
{/* 좌측: 구매품목 */}
|
|
<ResizablePanel defaultSize={50} minSize={30}>
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="text-[13px] font-bold">구매품목 목록</h3>
|
|
<span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{items.length}건</span>
|
|
{itemLoading && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />}
|
|
</div>
|
|
<Button size="sm" variant="ghost" onClick={() => ts.setOpen(true)}>
|
|
<Settings2 className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</div>
|
|
<div className="flex-1 overflow-auto">
|
|
<Table style={{ tableLayout: "fixed" }}>
|
|
<TableHeader className="sticky top-0 z-10">
|
|
<TableRow className="bg-muted hover:bg-muted">
|
|
<TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
|
|
<TableHead className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
|
|
{isColVisible("size") && <TableHead style={ts.thStyle("size")} className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>}
|
|
{isColVisible("unit") && <TableHead style={ts.thStyle("unit")} className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>}
|
|
{isColVisible("standard_price") && <TableHead style={ts.thStyle("standard_price")} className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준단가</TableHead>}
|
|
{isColVisible("status") && <TableHead style={ts.thStyle("status")} className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{itemLoading ? (
|
|
<TableRow><TableCell colSpan={itemColSpan} className="h-32 text-center"><Loader2 className="mx-auto h-5 w-5 animate-spin" /></TableCell></TableRow>
|
|
) : items.length === 0 ? (
|
|
<TableRow><TableCell colSpan={itemColSpan} className="h-32 text-center text-muted-foreground text-sm">등록된 구매품목이 없어요</TableCell></TableRow>
|
|
) : items.map((item) => (
|
|
<TableRow
|
|
key={item.id}
|
|
className={cn(
|
|
"cursor-pointer text-xs border-l-2",
|
|
selectedItemId === item.id ? "border-l-primary bg-primary/5" : "border-l-transparent"
|
|
)}
|
|
onClick={() => setSelectedItemId(item.id)}
|
|
onDoubleClick={openEditItem}
|
|
>
|
|
<TableCell className="p-2 font-medium truncate max-w-[110px]">{item.item_number}</TableCell>
|
|
<TableCell className="p-2 truncate max-w-[160px]">{item.item_name}</TableCell>
|
|
{isColVisible("size") && <TableCell style={ts.thStyle("size")} className="p-2 truncate">{item.size || "-"}</TableCell>}
|
|
{isColVisible("unit") && <TableCell style={ts.thStyle("unit")} className="p-2">{item.unit || "-"}</TableCell>}
|
|
{isColVisible("standard_price") && <TableCell style={ts.thStyle("standard_price")} className="p-2 text-right">{item.standard_price ? Number(item.standard_price).toLocaleString() : "-"}</TableCell>}
|
|
{isColVisible("status") && (
|
|
<TableCell style={ts.thStyle("status")} className="p-2 text-center">
|
|
<span className={cn("text-[10px] font-medium px-1.5 py-0.5 rounded",
|
|
item.status === "ACTIVE" || item.status === "사용" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground"
|
|
)}>{item.status || "-"}</span>
|
|
</TableCell>
|
|
)}
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
|
|
<ResizableHandle withHandle />
|
|
|
|
{/* 우측: 공급업체 정보 */}
|
|
<ResizablePanel defaultSize={50} minSize={25}>
|
|
<div className="flex flex-col h-full">
|
|
{!selectedItemId ? (
|
|
<div className="flex-1 flex items-center justify-center p-5">
|
|
<div className="flex flex-col items-center gap-3 border-2 border-dashed border-border rounded-lg p-10 text-center">
|
|
<Truck className="w-12 h-12 text-muted-foreground/40" />
|
|
<div className="text-sm font-semibold text-muted-foreground">품목을 선택해주세요</div>
|
|
<div className="text-xs text-muted-foreground">좌측에서 품목을 선택하면 공급업체 정보가 표시돼요</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<h3 className="text-[13px] font-bold truncate">{selectedItem?.item_name || "-"}</h3>
|
|
<span className="text-[11px] font-mono text-muted-foreground bg-muted-foreground/10 px-2 py-0.5 rounded-full shrink-0">{selectedItem?.item_number || ""}</span>
|
|
</div>
|
|
<Button variant="outline" size="sm" onClick={openEditItem}><Pencil className="w-3.5 h-3.5" /> 수정</Button>
|
|
</div>
|
|
<div className="flex items-center justify-between px-4 py-2 border-b shrink-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs font-semibold text-muted-foreground">공급업체별 단가</span>
|
|
<span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-1.5 py-0.5 rounded-full font-mono">{supplierItems.length}건</span>
|
|
</div>
|
|
<div className="flex gap-1.5">
|
|
<Button size="sm" onClick={() => { setSuppCheckedIds(new Set()); setSuppSelectOpen(true); searchSuppliers(); }}>
|
|
<Plus className="w-3.5 h-3.5" /> 공급업체 추가
|
|
</Button>
|
|
<Button variant="ghost" size="sm" disabled={supplierCheckedIds.length === 0}
|
|
className="text-destructive hover:text-destructive hover:bg-destructive/10"
|
|
onClick={handleSupplierMappingDelete}>
|
|
<Trash2 className="w-3.5 h-3.5" /> 삭제
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 overflow-auto">
|
|
<Table>
|
|
<TableHeader className="sticky top-0 z-10">
|
|
<TableRow className="bg-muted hover:bg-muted">
|
|
<TableHead className="p-2 w-10">
|
|
<Checkbox
|
|
checked={supplierItems.length > 0 && supplierCheckedIds.length === supplierItems.length}
|
|
onCheckedChange={(checked) => {
|
|
if (checked) setSupplierCheckedIds(supplierItems.map((s) => s.id));
|
|
else setSupplierCheckedIds([]);
|
|
}}
|
|
/>
|
|
</TableHead>
|
|
<TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체코드</TableHead>
|
|
<TableHead className="p-2 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-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>
|
|
<TableHead className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">리드타임</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{supplierLoading ? (
|
|
<TableRow><TableCell colSpan={8} className="h-32 text-center"><Loader2 className="mx-auto h-5 w-5 animate-spin" /></TableCell></TableRow>
|
|
) : supplierItems.length === 0 ? (
|
|
<TableRow><TableCell colSpan={8} className="h-32 text-center text-muted-foreground text-[13px]">등록된 공급업체가 없어요</TableCell></TableRow>
|
|
) : supplierItems.map((s) => (
|
|
<TableRow
|
|
key={s.id}
|
|
className={cn("text-xs cursor-pointer", supplierCheckedIds.includes(s.id) && "bg-primary/5")}
|
|
onDoubleClick={() => openEditSupp(s)}
|
|
onClick={() => setSupplierCheckedIds((prev) => {
|
|
const next = [...prev];
|
|
const idx = next.indexOf(s.id);
|
|
if (idx >= 0) next.splice(idx, 1); else next.push(s.id);
|
|
return next;
|
|
})}
|
|
>
|
|
<TableCell className="p-2" onClick={(e) => e.stopPropagation()}>
|
|
<Checkbox
|
|
checked={supplierCheckedIds.includes(s.id)}
|
|
onCheckedChange={(checked) => setSupplierCheckedIds((prev) =>
|
|
checked ? [...prev, s.id] : prev.filter((id) => id !== s.id)
|
|
)}
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="p-2 font-medium truncate max-w-[110px]">{s.supplier_code}</TableCell>
|
|
<TableCell className="p-2 truncate max-w-[120px]">{s.supplier_name}</TableCell>
|
|
<TableCell className="p-2 truncate">{s.supplier_item_code || "-"}</TableCell>
|
|
<TableCell className="p-2 text-right">{s.base_price ? Number(s.base_price).toLocaleString() : "-"}</TableCell>
|
|
<TableCell className="p-2 text-right font-medium">{s.calculated_price ? Number(s.calculated_price).toLocaleString() : "-"}</TableCell>
|
|
<TableCell className="p-2">{s.currency_code || "-"}</TableCell>
|
|
<TableCell className="p-2 text-right">{s.lead_time_days ? `${s.lead_time_days}일` : "-"}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
</div>
|
|
|
|
{/* 품목 수정 모달 */}
|
|
<Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>구매품목 수정</DialogTitle>
|
|
<DialogDescription>{editItemForm.item_number} — {editItemForm.item_name}</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{([
|
|
{ key: "item_number", label: "품목코드" }, { key: "item_name", label: "품명" },
|
|
{ key: "size", label: "규격" }, { key: "unit", label: "단위" },
|
|
{ key: "material", label: "재질" }, { key: "status", label: "상태" },
|
|
] as { key: string; label: string }[]).map((f) => (
|
|
<div key={f.key} className="space-y-1.5">
|
|
<Label className="text-sm text-muted-foreground">{f.label}</Label>
|
|
<Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
|
|
</div>
|
|
))}
|
|
<div className="col-span-2 border-t my-1" />
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">기준단가</Label>
|
|
<Input type="number" value={editItemForm.standard_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))} placeholder="기준단가" className="h-9" />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">통화</Label>
|
|
<Select value={editItemForm.currency_code || ""} onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="통화" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(categoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
|
|
<Button onClick={handleEditSave} disabled={saving}>
|
|
{saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />} 저장
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 공급업체 선택 모달 */}
|
|
<Dialog open={suppSelectOpen} onOpenChange={setSuppSelectOpen}>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>공급업체 선택</DialogTitle>
|
|
<DialogDescription>품목에 추가할 공급업체를 선택하세요.</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex gap-2">
|
|
<Input placeholder="공급업체명 검색" value={suppSearchKeyword}
|
|
onChange={(e) => setSuppSearchKeyword(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && searchSuppliers()}
|
|
className="h-9 flex-1" />
|
|
<Button size="sm" onClick={searchSuppliers} disabled={suppSearchLoading} className="h-9">
|
|
{suppSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4" /> 조회</>}
|
|
</Button>
|
|
</div>
|
|
<div className="overflow-auto max-h-[350px] border rounded-lg">
|
|
<Table>
|
|
<TableHeader className="sticky top-0 z-10">
|
|
<TableRow className="bg-muted hover:bg-muted">
|
|
<TableHead className="w-10 text-center">
|
|
<Checkbox
|
|
checked={suppSearchResults.length > 0 && suppCheckedIds.size === suppSearchResults.length}
|
|
onCheckedChange={(checked) => {
|
|
if (checked) setSuppCheckedIds(new Set(suppSearchResults.map((s) => s.id)));
|
|
else setSuppCheckedIds(new Set());
|
|
}}
|
|
/>
|
|
</TableHead>
|
|
<TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체코드</TableHead>
|
|
<TableHead className="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-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">연락처</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{suppSearchResults.length === 0 ? (
|
|
<TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-8 text-sm">검색 결과가 없어요</TableCell></TableRow>
|
|
) : suppSearchResults.map((s) => (
|
|
<TableRow key={s.id} className={cn("cursor-pointer", suppCheckedIds.has(s.id) && "bg-primary/5")}
|
|
onClick={() => setSuppCheckedIds((prev) => { const next = new Set(prev); if (next.has(s.id)) next.delete(s.id); else next.add(s.id); return next; })}>
|
|
<TableCell className="text-center"><Checkbox checked={suppCheckedIds.has(s.id)} onCheckedChange={() => {}} /></TableCell>
|
|
<TableCell className="text-[13px]">{s.supplier_code}</TableCell>
|
|
<TableCell className="text-sm">{s.supplier_name}</TableCell>
|
|
<TableCell className="text-[13px]">{s.contact_person}</TableCell>
|
|
<TableCell className="text-[13px]">{s.contact_phone}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
<DialogFooter>
|
|
<div className="flex items-center gap-2 w-full justify-between">
|
|
<span className="text-sm text-muted-foreground">{suppCheckedIds.size}개 선택됨</span>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={() => setSuppSelectOpen(false)}>취소</Button>
|
|
<Button onClick={goToSuppDetail} disabled={suppCheckedIds.size === 0}>
|
|
<Plus className="w-4 h-4" /> {suppCheckedIds.size}개 다음
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 공급업체 상세 입력/수정 모달 */}
|
|
<Dialog open={suppDetailOpen} onOpenChange={setSuppDetailOpen}>
|
|
<DialogContent className="max-w-[900px] overflow-y-auto" style={{ maxHeight: "90vh" }}>
|
|
<DialogHeader>
|
|
<DialogTitle>공급업체 매핑 {editSuppData ? "수정" : "등록"} — {selectedItem?.item_name || ""}</DialogTitle>
|
|
<DialogDescription>{editSuppData ? "공급업체 품번/단가 정보를 수정합니다." : "공급업체별 품번과 단가를 입력합니다."}</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-6">
|
|
{selectedSuppsForDetail.map((supp, idx) => {
|
|
const suppKey = supp.supplier_code || supp.id;
|
|
const m = suppMappings[suppKey] || {} as any;
|
|
return (
|
|
<div key={suppKey} className="border rounded-lg overflow-hidden">
|
|
<div className="flex items-center gap-2.5 px-4 py-2.5 bg-muted/50 border-b">
|
|
<span className="text-[13px] font-bold">{idx + 1}. {supp.supplier_name || suppKey}</span>
|
|
<span className="text-[11px] font-mono text-muted-foreground bg-muted-foreground/10 px-2 py-0.5 rounded-full">{suppKey}</span>
|
|
</div>
|
|
<div className="p-4 space-y-4">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">공급업체 품번</Label>
|
|
<Input value={m.supplier_item_code || ""} onChange={(e) => updateMapping(suppKey, "supplier_item_code", e.target.value)} placeholder="공급업체 자체 품번" className="h-9 text-sm" />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">공급업체 품명</Label>
|
|
<Input value={m.supplier_item_name || ""} onChange={(e) => updateMapping(suppKey, "supplier_item_name", e.target.value)} placeholder="공급업체 자체 품명" className="h-9 text-sm" />
|
|
</div>
|
|
</div>
|
|
<div className="border rounded-lg p-3 bg-muted/30 space-y-3">
|
|
<span className="text-xs font-semibold text-muted-foreground">단가 정보</span>
|
|
<div className="grid grid-cols-4 gap-3">
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">기준단가</Label>
|
|
<Input type="number" value={m.base_price || ""} onChange={(e) => updateMapping(suppKey, "base_price", e.target.value)} className="h-8 text-xs text-right" placeholder="0" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">할인유형</Label>
|
|
<Select value={m.discount_type || "none"} onValueChange={(v) => updateMapping(suppKey, "discount_type", v)}>
|
|
<SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="none">할인없음</SelectItem>
|
|
<SelectItem value="rate">할인율(%)</SelectItem>
|
|
<SelectItem value="amount">할인금액</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">할인값</Label>
|
|
<Input type="number" value={m.discount_value || ""} onChange={(e) => updateMapping(suppKey, "discount_value", e.target.value)} className="h-8 text-xs text-right" placeholder="0" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">계산단가</Label>
|
|
<Input value={m.calculated_price ? Number(m.calculated_price).toLocaleString() : "-"} className="h-8 text-[13px] text-right bg-muted/50 font-bold" disabled />
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-4 gap-3">
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">통화</Label>
|
|
<Input value={m.currency_code || ""} onChange={(e) => updateMapping(suppKey, "currency_code", e.target.value)} className="h-8 text-xs" placeholder="KRW" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">적용시작일</Label>
|
|
<Input type="date" value={m.start_date || ""} onChange={(e) => updateMapping(suppKey, "start_date", e.target.value)} className="h-8 text-xs" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">적용종료일</Label>
|
|
<Input type="date" value={m.end_date || ""} onChange={(e) => updateMapping(suppKey, "end_date", e.target.value)} className="h-8 text-xs" />
|
|
</div>
|
|
<div />
|
|
</div>
|
|
<div className="grid grid-cols-4 gap-3">
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">리드타임(일)</Label>
|
|
<Input type="number" value={m.lead_time_days || ""} onChange={(e) => updateMapping(suppKey, "lead_time_days", e.target.value)} className="h-8 text-xs" placeholder="0" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-[10px]">최소주문수량</Label>
|
|
<Input type="number" value={m.min_order_qty || ""} onChange={(e) => updateMapping(suppKey, "min_order_qty", e.target.value)} className="h-8 text-xs" placeholder="0" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => {
|
|
setSuppDetailOpen(false);
|
|
if (!editSuppData) setSuppSelectOpen(true);
|
|
setEditSuppData(null);
|
|
}}>{editSuppData ? "취소" : "← 이전"}</Button>
|
|
<Button onClick={handleSuppDetailSave} disabled={saving}>
|
|
{saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />} 저장
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<ExcelUploadModal open={excelUploadOpen} onOpenChange={setExcelUploadOpen} tableName={ITEM_TABLE} userId={user?.userId} onSuccess={fetchItems} />
|
|
|
|
{/* 테이블 설정 모달 */}
|
|
<TableSettingsModal
|
|
open={ts.open}
|
|
onOpenChange={ts.setOpen}
|
|
tableName={ts.tableName}
|
|
settingsId={ts.settingsId}
|
|
defaultVisibleKeys={ts.defaultVisibleKeys}
|
|
onSave={ts.applySettings}
|
|
/>
|
|
|
|
{ConfirmDialogComponent}
|
|
</div>
|
|
);
|
|
}
|