1118 lines
45 KiB
TypeScript
1118 lines
45 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { apiClient } from "@/lib/api/client";
|
|
import { InspectionModal, type InspectionResult } from "./InspectionModal";
|
|
import { NumberPadModal, type PackageEntry } from "./NumberPadModal";
|
|
import { useCartSync, type CartItemWithId } from "../common/useCartSync";
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Types */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
interface Warehouse {
|
|
warehouse_code: string;
|
|
warehouse_name: string;
|
|
warehouse_type?: string;
|
|
}
|
|
|
|
/** CartItemWithId -> 화면 표시용 파싱 결과 */
|
|
interface CartItemParsed {
|
|
id: string;
|
|
rowKey: string;
|
|
dbId: string;
|
|
source_table: string;
|
|
source_id: string;
|
|
purchase_no: string;
|
|
item_code: string;
|
|
item_name: string;
|
|
spec: string;
|
|
material: string;
|
|
order_qty: number;
|
|
remain_qty: number;
|
|
inbound_qty: number;
|
|
unit_price: number;
|
|
supplier_code: string;
|
|
supplier_name: string;
|
|
order_date?: string;
|
|
inspection_required?: boolean;
|
|
inspection_type?: "self" | "request" | null;
|
|
packages?: PackageEntry[];
|
|
image?: string | null;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Helper: CartItemWithId -> CartItemParsed */
|
|
/* ------------------------------------------------------------------ */
|
|
function toCartItemParsed(item: CartItemWithId): CartItemParsed {
|
|
const data = item.row;
|
|
const inspType = data.inspection_type === "self" ? "self"
|
|
: data.inspection_type === "request" ? "request"
|
|
: null;
|
|
|
|
return {
|
|
id: item.rowKey || String(data.id ?? ""),
|
|
rowKey: item.rowKey,
|
|
dbId: item.cartId || "",
|
|
source_table: item.sourceTable || String(data.source_table ?? "purchase_detail"),
|
|
source_id: item.rowKey || String(data.id ?? ""),
|
|
purchase_no: String(data.purchase_no ?? ""),
|
|
item_code: String(data.item_code ?? ""),
|
|
item_name: String(data.item_name ?? ""),
|
|
spec: String(data.spec ?? ""),
|
|
material: String(data.material ?? ""),
|
|
order_qty: Number(data.order_qty ?? 0),
|
|
remain_qty: Number(data.remain_qty ?? 0),
|
|
inbound_qty: item.quantity,
|
|
unit_price: Number(data.unit_price ?? 0),
|
|
supplier_code: String(data.supplier_code ?? ""),
|
|
supplier_name: String(data.supplier_name ?? ""),
|
|
order_date: data.order_date ? String(data.order_date) : undefined,
|
|
inspection_type: inspType,
|
|
inspection_required: inspType === "self",
|
|
// packageEntries의 실제 런타임 타입은 NumberPadModal의 PackageEntry[]
|
|
packages: item.packageEntries as unknown as PackageEntry[] | undefined,
|
|
image: data.image ? String(data.image) : null,
|
|
};
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Component */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
export function InboundCartPage() {
|
|
const router = useRouter();
|
|
|
|
/* Cart sync hook */
|
|
const cart = useCartSync("pop-purchase-inbound", "purchase_detail");
|
|
|
|
/* Derived: parsed items from cart */
|
|
const items = useMemo(
|
|
() => cart.cartItems.map(toCartItemParsed),
|
|
[cart.cartItems],
|
|
);
|
|
|
|
/* Inspection results (local overlay, keyed by rowKey) */
|
|
const [inspectionResults, setInspectionResults] = useState<
|
|
Map<string, InspectionResult>
|
|
>(new Map());
|
|
|
|
/* Selection */
|
|
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
|
|
|
|
/* Auto-select all when items change */
|
|
useEffect(() => {
|
|
if (items.length > 0) {
|
|
setSelectedItems(new Set(items.map((i) => i.id)));
|
|
}
|
|
}, [items]);
|
|
|
|
/* Warehouse */
|
|
const [warehouses, setWarehouses] = useState<Warehouse[]>([]);
|
|
const [selectedWarehouse, setSelectedWarehouse] = useState<string>("");
|
|
const [warehousePickerOpen, setWarehousePickerOpen] = useState(false);
|
|
|
|
/* Inbound number */
|
|
const [inboundNumber, setInboundNumber] = useState<string>("");
|
|
|
|
/* Confirm result modal */
|
|
const [confirmResult, setConfirmResult] = useState<{
|
|
inboundNumber: string;
|
|
items: CartItemParsed[];
|
|
warehouse: string;
|
|
date: string;
|
|
} | null>(null);
|
|
|
|
/* Inbound date */
|
|
const [inboundDate, setInboundDate] = useState<string>(
|
|
new Date().toISOString().slice(0, 10)
|
|
);
|
|
|
|
/* Confirm state */
|
|
const [confirming, setConfirming] = useState(false);
|
|
const [resultMsg, setResultMsg] = useState<string | null>(null);
|
|
|
|
/* Inspection modal */
|
|
const [inspectionModalOpen, setInspectionModalOpen] = useState(false);
|
|
const [inspectionTarget, setInspectionTarget] = useState<CartItemParsed | null>(null);
|
|
|
|
/* Numpad modal (for qty edit) */
|
|
const [numpadOpen, setNumpadOpen] = useState(false);
|
|
const [numpadTarget, setNumpadTarget] = useState<CartItemParsed | null>(null);
|
|
|
|
/* Derived: supplier name (all items should be same supplier) */
|
|
const supplierName = items.length > 0 ? items[0].supplier_name : "";
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Fetch warehouses */
|
|
/* ------------------------------------------------------------------ */
|
|
const fetchedRef = useRef(false);
|
|
|
|
const fetchWarehouses = useCallback(async () => {
|
|
try {
|
|
const res = await apiClient.get("/receiving/warehouses");
|
|
const data: Warehouse[] = res.data?.data ?? [];
|
|
setWarehouses(data);
|
|
if (data.length > 0) {
|
|
setSelectedWarehouse(data[0].warehouse_code);
|
|
}
|
|
} catch {
|
|
/* keep empty */
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (fetchedRef.current) return;
|
|
fetchedRef.current = true;
|
|
fetchWarehouses();
|
|
}, [fetchWarehouses]);
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Selection */
|
|
/* ------------------------------------------------------------------ */
|
|
const toggleSelect = (id: string) => {
|
|
setSelectedItems((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) next.delete(id);
|
|
else next.add(id);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const toggleSelectAll = () => {
|
|
if (selectedItems.size === items.length) {
|
|
setSelectedItems(new Set());
|
|
} else {
|
|
setSelectedItems(new Set(items.map((i) => i.id)));
|
|
}
|
|
};
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Qty edit via numpad */
|
|
/* ------------------------------------------------------------------ */
|
|
const openNumpad = (item: CartItemParsed) => {
|
|
setNumpadTarget(item);
|
|
setNumpadOpen(true);
|
|
};
|
|
|
|
const handleNumpadConfirm = (qty: number, packages: PackageEntry[]) => {
|
|
if (!numpadTarget) return;
|
|
const finalQty = Math.min(qty, numpadTarget.remain_qty);
|
|
|
|
cart.updateItemQuantity(
|
|
numpadTarget.rowKey,
|
|
finalQty,
|
|
undefined,
|
|
// PackageEntry 타입이 registry vs NumberPadModal에서 다르므로 any 캐스팅
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
packages.length > 0 ? packages as any : undefined,
|
|
);
|
|
setNumpadTarget(null);
|
|
// Auto-save effect below will persist change to DB
|
|
};
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Remove item */
|
|
/* ------------------------------------------------------------------ */
|
|
const handleRemove = (rowKey: string) => {
|
|
cart.removeItem(rowKey);
|
|
setSelectedItems((prev) => {
|
|
const next = new Set(prev);
|
|
next.delete(rowKey);
|
|
return next;
|
|
});
|
|
// Auto-save effect below will persist change to DB
|
|
};
|
|
|
|
/* Auto-save: persist dirty changes to DB after a short debounce */
|
|
const autoSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
useEffect(() => {
|
|
if (!cart.isDirty || cart.syncStatus === "saving") return;
|
|
if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
|
|
autoSaveTimerRef.current = setTimeout(() => {
|
|
cart.saveToDb().catch(() => {});
|
|
}, 500);
|
|
return () => {
|
|
if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
|
|
};
|
|
}, [cart.isDirty, cart.syncStatus, cart]);
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Inspection */
|
|
/* ------------------------------------------------------------------ */
|
|
const openInspection = (item: CartItemParsed) => {
|
|
setInspectionTarget(item);
|
|
setInspectionModalOpen(true);
|
|
};
|
|
|
|
const handleInspectionComplete = (result: InspectionResult) => {
|
|
if (!inspectionTarget) return;
|
|
setInspectionResults((prev) => {
|
|
const next = new Map(prev);
|
|
next.set(inspectionTarget.rowKey, result);
|
|
return next;
|
|
});
|
|
setInspectionTarget(null);
|
|
};
|
|
|
|
/* Pass inspection (non-required only) */
|
|
const handlePassInspection = (rowKey: string) => {
|
|
const item = items.find((i) => i.rowKey === rowKey);
|
|
if (!item) return;
|
|
setInspectionResults((prev) => {
|
|
const next = new Map(prev);
|
|
next.set(rowKey, {
|
|
items: [],
|
|
goodQty: item.inbound_qty,
|
|
badQty: 0,
|
|
remark: "pass",
|
|
completed: true,
|
|
});
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const getInspectionResult = (rowKey: string): InspectionResult | null => {
|
|
return inspectionResults.get(rowKey) || null;
|
|
};
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Validation: required inspections */
|
|
/* ------------------------------------------------------------------ */
|
|
const selectedItemsList = items.filter((i) => selectedItems.has(i.id));
|
|
|
|
const hasUnfinishedRequiredInspection = selectedItemsList.some(
|
|
(item) =>
|
|
item.inspection_required &&
|
|
item.inspection_type === "self" &&
|
|
!getInspectionResult(item.rowKey)?.completed
|
|
);
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Confirm inbound */
|
|
/* ------------------------------------------------------------------ */
|
|
const handleConfirm = async () => {
|
|
if (selectedItemsList.length === 0) return;
|
|
|
|
if (!selectedWarehouse) {
|
|
setResultMsg("오류: 입고 창고를 선택해주세요.");
|
|
return;
|
|
}
|
|
|
|
if (hasUnfinishedRequiredInspection) {
|
|
setResultMsg("오류: 필수 검사를 완료해주세요.");
|
|
return;
|
|
}
|
|
|
|
setConfirming(true);
|
|
setResultMsg(null);
|
|
|
|
try {
|
|
// 확정 시점에 채번 (동시접속 충돌 방지)
|
|
// POP 화면설정에서 선택한 채번규칙 사용 (없으면 기본)
|
|
let finalNumber = "";
|
|
try {
|
|
const settingsRes: any = await apiClient.get("/screen-management/screens/6527/layout-pop").catch(() => null);
|
|
const ruleId = settingsRes?.data?.data?.settings?.popConfig?.inbound?.numberingRuleId;
|
|
const url = ruleId && ruleId !== "__none__"
|
|
? `/receiving/generate-number?ruleId=${encodeURIComponent(ruleId)}`
|
|
: "/receiving/generate-number";
|
|
const numRes = await apiClient.get(url);
|
|
if (numRes.data?.success && numRes.data?.data) {
|
|
finalNumber = numRes.data.data;
|
|
setInboundNumber(finalNumber);
|
|
}
|
|
} catch {
|
|
/* backend will handle */
|
|
}
|
|
|
|
// POST /api/receiving -- same payload structure as PC
|
|
const payload = {
|
|
inbound_number: finalNumber,
|
|
inbound_date: inboundDate,
|
|
warehouse_code: selectedWarehouse,
|
|
inbound_type: "구매입고",
|
|
items: selectedItemsList.map((item, idx) => {
|
|
const inspResult = getInspectionResult(item.rowKey);
|
|
return {
|
|
inbound_type: "구매입고",
|
|
item_number: item.item_code,
|
|
item_name: item.item_name,
|
|
spec: item.spec || "",
|
|
material: item.material || "",
|
|
unit: "EA",
|
|
inbound_qty: String(item.inbound_qty),
|
|
unit_price: String(item.unit_price || 0),
|
|
total_amount: String(
|
|
(item.inbound_qty || 0) * (item.unit_price || 0)
|
|
),
|
|
reference_number: item.purchase_no,
|
|
supplier_code: item.supplier_code,
|
|
supplier_name: item.supplier_name,
|
|
inbound_status: "입고완료",
|
|
inspection_status: inspResult?.completed
|
|
? "검사완료"
|
|
: item.inspection_required
|
|
? "검사대기"
|
|
: "합격",
|
|
source_table: item.source_table,
|
|
source_id: item.source_id || item.id,
|
|
seq_no: idx + 1,
|
|
};
|
|
}),
|
|
};
|
|
|
|
const res = await apiClient.post("/receiving", payload);
|
|
|
|
if (res.data?.success) {
|
|
// Remove confirmed items from cart - direct DB delete for reliability
|
|
const confirmedItems = [...selectedItemsList];
|
|
const { dataApi } = await import("@/lib/api/data");
|
|
const confirmPromises = confirmedItems
|
|
.filter((item) => item.dbId)
|
|
.map((item) => dataApi.updateRecord("cart_items", item.dbId, { status: "confirmed" }).catch(() => {}));
|
|
await Promise.all(confirmPromises);
|
|
|
|
// Also clean up local state via useCartSync
|
|
for (const item of confirmedItems) {
|
|
cart.removeItem(item.rowKey);
|
|
}
|
|
// Reload from DB to sync state
|
|
await cart.loadFromDb();
|
|
|
|
const inboundNo =
|
|
res.data?.data?.header?.inbound_number || finalNumber || "";
|
|
|
|
// 결과 모달 표시 (바로 이동하지 않음)
|
|
setConfirmResult({
|
|
inboundNumber: inboundNo,
|
|
items: confirmedItems,
|
|
warehouse: warehouses.find(w => w.warehouse_code === selectedWarehouse)?.warehouse_name || selectedWarehouse,
|
|
date: inboundDate,
|
|
});
|
|
setResultMsg(null);
|
|
} else {
|
|
setResultMsg(
|
|
`오류: ${res.data?.message || "입고 등록에 실패했습니다."}`
|
|
);
|
|
}
|
|
} catch (err: unknown) {
|
|
const msg =
|
|
err instanceof Error ? err.message : "입고 등록에 실패했습니다.";
|
|
setResultMsg(`오류: ${msg}`);
|
|
} finally {
|
|
setConfirming(false);
|
|
}
|
|
};
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Helpers */
|
|
/* ------------------------------------------------------------------ */
|
|
const selectedWarehouseName =
|
|
warehouses.find((w) => w.warehouse_code === selectedWarehouse)
|
|
?.warehouse_name || selectedWarehouse;
|
|
|
|
const totalQty = selectedItemsList.reduce((s, i) => s + i.inbound_qty, 0);
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Render */
|
|
/* ------------------------------------------------------------------ */
|
|
return (
|
|
<div className="flex flex-col gap-4 pb-4">
|
|
{/* ===== Header ===== */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={() => router.back()}
|
|
className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
|
|
>
|
|
<svg
|
|
className="w-5 h-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M15.75 19.5L8.25 12l7.5-7.5"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<div>
|
|
<h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">
|
|
입고 장바구니
|
|
</h1>
|
|
{supplierName && (
|
|
<p className="text-xs text-gray-400 mt-0.5">{supplierName}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Confirm button (header only) */}
|
|
<button
|
|
onClick={handleConfirm}
|
|
disabled={
|
|
confirming ||
|
|
selectedItemsList.length === 0 ||
|
|
hasUnfinishedRequiredInspection
|
|
}
|
|
className="flex items-center gap-1.5 px-4 h-10 rounded-xl text-sm font-bold text-white active:scale-[0.98] transition-all disabled:opacity-40"
|
|
style={{
|
|
background:
|
|
selectedItemsList.length > 0 && !hasUnfinishedRequiredInspection
|
|
? "linear-gradient(to bottom, #34d399, #059669)"
|
|
: "#d1d5db",
|
|
boxShadow:
|
|
selectedItemsList.length > 0 && !hasUnfinishedRequiredInspection
|
|
? "0 4px 12px rgba(5,150,105,0.3)"
|
|
: "none",
|
|
}}
|
|
>
|
|
<svg
|
|
className="w-4 h-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2.5}
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M4.5 12.75l6 6 9-13.5"
|
|
/>
|
|
</svg>
|
|
{confirming ? "처리중..." : "확정"}
|
|
</button>
|
|
</div>
|
|
|
|
{/* ===== Info banner ===== */}
|
|
<div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3 sm:p-4">
|
|
<div className="flex items-center gap-2 mb-3 pb-2 border-b border-gray-50">
|
|
{supplierName && (
|
|
<span className="text-xs font-semibold text-blue-700 bg-blue-50 px-2 py-0.5 rounded-full">
|
|
{supplierName}
|
|
</span>
|
|
)}
|
|
<span className="text-[11px] text-gray-400">
|
|
{inboundDate}
|
|
</span>
|
|
{selectedWarehouseName && (
|
|
<span className="text-[11px] text-gray-400">
|
|
| {selectedWarehouseName}
|
|
</span>
|
|
)}
|
|
<span className="ml-auto text-[11px] font-mono text-gray-400">
|
|
{inboundNumber || "확정 시 자동생성"}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Info fields: 3 columns */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
|
{/* Inbound date */}
|
|
<div>
|
|
<label className="text-[11px] font-semibold text-gray-400 mb-1 block">
|
|
입고일자
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={inboundDate}
|
|
onChange={(e) => setInboundDate(e.target.value)}
|
|
className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-100 bg-white"
|
|
/>
|
|
</div>
|
|
|
|
{/* Warehouse selector - card-style touch button */}
|
|
<div>
|
|
<label className="text-[11px] font-semibold text-gray-400 mb-1 block">
|
|
창고
|
|
</label>
|
|
<button
|
|
onClick={() => setWarehousePickerOpen(true)}
|
|
className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm text-left outline-none hover:border-blue-300 transition-all bg-white flex items-center justify-between"
|
|
>
|
|
<span className={selectedWarehouse ? "text-gray-900 font-medium" : "text-gray-400"}>
|
|
{selectedWarehouseName || "창고 선택"}
|
|
</span>
|
|
<svg
|
|
className="w-4 h-4 text-gray-400 shrink-0"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M8.25 15l3.75-3.75L15.75 15"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Inbound number (readonly -- 확정 시점에 채번) */}
|
|
<div>
|
|
<label className="text-[11px] font-semibold text-gray-400 mb-1 block">
|
|
입고번호
|
|
</label>
|
|
<div className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm bg-gray-50 font-mono">
|
|
{inboundNumber ? (
|
|
<span className="text-gray-700">{inboundNumber}</span>
|
|
) : (
|
|
<span className="text-gray-400">확정 시 자동생성</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ===== Select all bar ===== */}
|
|
{items.length > 0 && (
|
|
<div className="flex items-center justify-between px-1">
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={toggleSelectAll}
|
|
className={`w-6 h-6 rounded border-2 flex items-center justify-center transition-all shrink-0 ${
|
|
selectedItems.size === items.length
|
|
? "bg-blue-500 border-blue-500"
|
|
: "border-gray-300 hover:border-blue-400"
|
|
}`}
|
|
>
|
|
{selectedItems.size === items.length && (
|
|
<svg
|
|
className="w-3.5 h-3.5 text-white"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={3}
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M4.5 12.75l6 6 9-13.5"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</button>
|
|
<span className="text-sm font-semibold text-gray-700">
|
|
담은 품목{" "}
|
|
<span className="text-blue-600">{items.length}</span>
|
|
</span>
|
|
</div>
|
|
|
|
<button
|
|
onClick={toggleSelectAll}
|
|
className="text-xs text-blue-500 font-medium hover:underline"
|
|
>
|
|
{selectedItems.size === items.length ? "선택 해제" : "전체 선택"}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* ===== Items list ===== */}
|
|
{cart.loading ? (
|
|
<div className="flex items-center justify-center py-16 text-sm text-gray-400">
|
|
<svg
|
|
className="animate-spin w-5 h-5 mr-2 text-blue-500"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
/>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
/>
|
|
</svg>
|
|
불러오는 중...
|
|
</div>
|
|
) : items.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-16 text-gray-400">
|
|
<svg
|
|
className="w-16 h-16 mb-4 opacity-20"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={1}
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22"
|
|
/>
|
|
</svg>
|
|
<p className="text-sm font-medium text-gray-500 mb-1">
|
|
담은 품목이 없습니다
|
|
</p>
|
|
<p className="text-xs text-gray-400 mb-4">
|
|
구매입고 화면에서 품목을 담아주세요
|
|
</p>
|
|
<button
|
|
onClick={() => router.push("/pop/inbound/purchase")}
|
|
className="px-4 py-2.5 rounded-xl text-sm font-semibold text-white active:scale-95 transition-all"
|
|
style={{
|
|
background: "linear-gradient(to bottom, #60a5fa, #2563eb)",
|
|
boxShadow: "0 4px 12px rgba(59,130,246,0.3)",
|
|
}}
|
|
>
|
|
구매입고로 이동
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-3">
|
|
{items.map((item) => {
|
|
const inspResult = getInspectionResult(item.rowKey);
|
|
return (
|
|
<div
|
|
key={item.id}
|
|
className={`relative rounded-xl border p-3 transition-all ${
|
|
selectedItems.has(item.id)
|
|
? "border-blue-300 bg-gradient-to-br from-blue-50/80 to-indigo-50/50"
|
|
: "border-gray-200 bg-white"
|
|
}`}
|
|
>
|
|
{/* Blue left bar for selected items */}
|
|
{selectedItems.has(item.id) && (
|
|
<div className="absolute top-0 left-0 w-[3px] h-full bg-blue-500 rounded-l-xl" />
|
|
)}
|
|
|
|
{/* === Header row: checkbox + item code + item name + inspection badge === */}
|
|
<div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
|
|
{/* Checkbox */}
|
|
<button
|
|
onClick={() => toggleSelect(item.id)}
|
|
className={`w-6 h-6 rounded border-2 flex items-center justify-center transition-all shrink-0 ${
|
|
selectedItems.has(item.id)
|
|
? "bg-blue-500 border-blue-500"
|
|
: "border-gray-300 hover:border-blue-400"
|
|
}`}
|
|
>
|
|
{selectedItems.has(item.id) && (
|
|
<svg
|
|
className="w-3.5 h-3.5 text-white"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={3}
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M4.5 12.75l6 6 9-13.5"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</button>
|
|
<span className="text-[11px] text-gray-400 font-medium shrink-0">{item.item_code}</span>
|
|
<span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{item.item_name}</span>
|
|
{item.inspection_type === "self" && (
|
|
<span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 shrink-0 whitespace-nowrap">
|
|
검사 필수
|
|
</span>
|
|
)}
|
|
{item.inspection_type === "request" && (
|
|
<span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 border border-amber-200 shrink-0 whitespace-nowrap">
|
|
검사의뢰 선택
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* === Body row: image + info + action === */}
|
|
<div className="flex gap-2.5">
|
|
{/* Product image */}
|
|
<div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
|
|
{item.image ? (
|
|
<img src={item.image} alt={item.item_name} className="w-full h-full object-cover rounded-lg" />
|
|
) : (
|
|
<span className="text-2xl text-gray-300">{"\uD83D\uDCE6"}</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Info columns */}
|
|
<div className="flex-1 min-w-0 flex flex-col gap-[3px]">
|
|
<div className="flex items-center gap-1.5 text-[11px]">
|
|
<span className="text-gray-400 min-w-[45px] shrink-0">발주일</span>
|
|
<span className="font-medium text-gray-700">{item.order_date || "-"}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 text-[11px]">
|
|
<span className="text-gray-400 min-w-[45px] shrink-0">발주번호</span>
|
|
<span className="font-medium text-gray-700 truncate">{item.purchase_no || "-"}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 text-[11px]">
|
|
<span className="text-gray-400 min-w-[45px] shrink-0">발주수량</span>
|
|
<span className="font-medium text-gray-700">{item.order_qty.toLocaleString()}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 text-[11px]">
|
|
<span className="text-gray-400 min-w-[45px] shrink-0">미입고</span>
|
|
<span className="font-bold text-red-500">{item.remain_qty.toLocaleString()}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action column: qty display + delete button */}
|
|
<div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
|
|
{/* Qty display - clickable to open numpad */}
|
|
<button
|
|
onClick={() => openNumpad(item)}
|
|
className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all bg-blue-50 border-blue-200 hover:bg-blue-100 cursor-pointer active:scale-95"
|
|
>
|
|
<span
|
|
className="text-sm font-bold text-blue-700"
|
|
style={{ fontVariantNumeric: "tabular-nums" }}
|
|
>
|
|
{item.inbound_qty.toLocaleString()}
|
|
</span>
|
|
<span className="text-[10px] text-gray-400">EA</span>
|
|
</button>
|
|
|
|
{/* Delete button */}
|
|
<button
|
|
onClick={() => handleRemove(item.rowKey)}
|
|
className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
|
|
>
|
|
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
|
</svg>
|
|
삭제
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* === Package info === */}
|
|
{item.packages && item.packages.length > 0 && (
|
|
<div className="mt-2.5 px-3 py-2 bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-lg">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className="text-[10px] font-bold text-white bg-gradient-to-r from-green-500 to-green-600 px-2 py-0.5 rounded-full">
|
|
포장완료
|
|
</span>
|
|
<span className="text-[11px] font-semibold text-green-600">
|
|
{item.packages.reduce((s, p) => s + p.count * p.qtyPerUnit, 0).toLocaleString()} EA
|
|
</span>
|
|
</div>
|
|
{item.packages.map((pkg, idx) => (
|
|
<div key={idx} className="flex items-center gap-1.5 text-[11px] text-gray-600">
|
|
<span>{pkg.unit.icon}</span>
|
|
<span>{pkg.count}{pkg.unit.label} x {pkg.qtyPerUnit.toLocaleString()}EA = {(pkg.count * pkg.qtyPerUnit).toLocaleString()}EA</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* === Inspection row === */}
|
|
{(item.inspection_type === "self" ||
|
|
item.inspection_type === "request") && (
|
|
<div className="mt-2">
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => openInspection(item)}
|
|
className={`flex-1 flex items-center gap-2 px-3 py-2.5 rounded-lg border text-left transition-all active:scale-[0.98] ${
|
|
inspResult?.completed
|
|
? "bg-green-50 border-green-300"
|
|
: item.inspection_type === "self"
|
|
? "bg-blue-50 border-blue-200 hover:bg-blue-100"
|
|
: "bg-amber-50 border-amber-200 hover:bg-amber-100"
|
|
}`}
|
|
>
|
|
<span className="text-[13px] font-semibold">
|
|
{item.inspection_type === "self"
|
|
? "검사"
|
|
: "검사의뢰"}
|
|
</span>
|
|
<span
|
|
className={`text-[11px] px-1.5 py-0.5 rounded ${
|
|
item.inspection_required
|
|
? "bg-red-100 text-red-600"
|
|
: "bg-blue-100 text-blue-600"
|
|
}`}
|
|
>
|
|
{item.inspection_required ? "필수" : "선택"}
|
|
</span>
|
|
<span
|
|
className={`ml-auto text-[12px] font-semibold ${
|
|
inspResult?.completed
|
|
? "text-green-600"
|
|
: "text-gray-400"
|
|
}`}
|
|
>
|
|
{inspResult?.completed ? "완료" : "대기"}
|
|
</span>
|
|
<svg
|
|
className="w-4 h-4 text-gray-400 shrink-0"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M8.25 4.5l7.5 7.5-7.5 7.5"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Pass button for non-required */}
|
|
{!item.inspection_required &&
|
|
!inspResult?.completed && (
|
|
<button
|
|
onClick={() => handlePassInspection(item.rowKey)}
|
|
className="px-3 py-2.5 rounded-lg border border-gray-200 bg-gray-50 text-xs font-semibold text-gray-500 hover:bg-gray-100 active:scale-95 transition-all whitespace-nowrap"
|
|
>
|
|
패스
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* ===== Footer summary (no confirm button -- header only) ===== */}
|
|
{items.length > 0 && (
|
|
<div className="sticky bottom-0 bg-white border-t border-gray-200 rounded-t-2xl shadow-lg -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 py-4 mt-2">
|
|
{/* Result message */}
|
|
{resultMsg && (
|
|
<div
|
|
className={`mb-3 p-3 rounded-xl text-sm font-medium ${
|
|
resultMsg.startsWith("오류")
|
|
? "bg-red-50 text-red-700"
|
|
: "bg-green-50 text-green-700"
|
|
}`}
|
|
>
|
|
{resultMsg}
|
|
</div>
|
|
)}
|
|
|
|
{/* Required inspection warning */}
|
|
{hasUnfinishedRequiredInspection && (
|
|
<div className="mb-3 p-3 rounded-xl text-sm font-medium bg-amber-50 text-amber-700 border border-amber-200">
|
|
필수 검사를 완료해주세요. 검사 미완료 품목이 있어 확정할 수 없습니다.
|
|
</div>
|
|
)}
|
|
|
|
{/* Summary only (no big confirm button) */}
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-gray-500">
|
|
선택{" "}
|
|
<span className="font-bold text-gray-900">
|
|
{selectedItemsList.length}
|
|
</span>
|
|
/{items.length}건
|
|
</span>
|
|
<span className="text-gray-500">
|
|
합계 수량:{" "}
|
|
<span className="font-bold text-blue-600">
|
|
{totalQty.toLocaleString()}
|
|
</span>{" "}
|
|
EA
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ===== Warehouse picker modal ===== */}
|
|
{warehousePickerOpen && (
|
|
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center">
|
|
<div
|
|
className="absolute inset-0 bg-black/50"
|
|
onClick={() => setWarehousePickerOpen(false)}
|
|
/>
|
|
<div className="relative bg-white w-full sm:max-w-md sm:rounded-2xl rounded-t-2xl max-h-[80vh] flex flex-col shadow-2xl z-10 overflow-hidden">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
|
|
<h3 className="text-lg font-bold text-gray-900">창고 선택</h3>
|
|
<button
|
|
onClick={() => setWarehousePickerOpen(false)}
|
|
className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition-colors"
|
|
>
|
|
<svg
|
|
className="w-4 h-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Warehouse list */}
|
|
<div className="flex-1 overflow-y-auto p-4">
|
|
{warehouses.length === 0 ? (
|
|
<p className="text-center text-sm text-gray-400 py-8">
|
|
등록된 창고가 없습니다
|
|
</p>
|
|
) : (
|
|
<div className="flex flex-col gap-2">
|
|
{warehouses.map((wh) => (
|
|
<button
|
|
key={wh.warehouse_code}
|
|
onClick={() => {
|
|
setSelectedWarehouse(wh.warehouse_code);
|
|
setWarehousePickerOpen(false);
|
|
}}
|
|
className={`flex items-center gap-3 p-4 rounded-xl border transition-all active:scale-[0.98] text-left ${
|
|
selectedWarehouse === wh.warehouse_code
|
|
? "border-blue-400 bg-blue-50 shadow-sm"
|
|
: "border-gray-200 bg-white hover:border-blue-300"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`w-10 h-10 rounded-lg flex items-center justify-center shrink-0 ${
|
|
selectedWarehouse === wh.warehouse_code
|
|
? "bg-blue-500 text-white"
|
|
: "bg-gray-100 text-gray-400"
|
|
}`}
|
|
>
|
|
<svg
|
|
className="w-5 h-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 0h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-semibold text-gray-900">
|
|
{wh.warehouse_name}
|
|
</p>
|
|
<p className="text-[11px] text-gray-400">
|
|
{wh.warehouse_code}
|
|
{wh.warehouse_type ? ` | ${wh.warehouse_type}` : ""}
|
|
</p>
|
|
</div>
|
|
{selectedWarehouse === wh.warehouse_code && (
|
|
<svg
|
|
className="w-5 h-5 text-blue-500 shrink-0"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2.5}
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M4.5 12.75l6 6 9-13.5"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ===== Inspection Modal ===== */}
|
|
{inspectionTarget && (
|
|
<InspectionModal
|
|
open={inspectionModalOpen}
|
|
onClose={() => {
|
|
setInspectionModalOpen(false);
|
|
setInspectionTarget(null);
|
|
}}
|
|
onComplete={handleInspectionComplete}
|
|
itemCode={inspectionTarget.item_code}
|
|
itemName={inspectionTarget.item_name}
|
|
totalQty={inspectionTarget.inbound_qty}
|
|
initialResult={getInspectionResult(inspectionTarget.rowKey)}
|
|
/>
|
|
)}
|
|
|
|
{/* ===== NumberPad Modal (qty edit) ===== */}
|
|
{numpadTarget && (
|
|
<NumberPadModal
|
|
open={numpadOpen}
|
|
onClose={() => {
|
|
setNumpadOpen(false);
|
|
setNumpadTarget(null);
|
|
}}
|
|
onConfirm={handleNumpadConfirm}
|
|
maxQty={numpadTarget.remain_qty}
|
|
itemName={numpadTarget.item_name}
|
|
initialQty={numpadTarget.inbound_qty}
|
|
initialPackages={numpadTarget.packages}
|
|
/>
|
|
)}
|
|
|
|
{/* ===== 입고 완료 결과 모달 ===== */}
|
|
{confirmResult && (
|
|
<div className="fixed inset-0 z-[70] flex items-center justify-center">
|
|
<div className="absolute inset-0 bg-black/50" />
|
|
<div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-md mx-4 overflow-hidden z-10">
|
|
{/* 헤더 */}
|
|
<div className="px-6 py-5 text-center" style={{ background: "linear-gradient(to bottom, #60a5fa, #2563eb)" }}>
|
|
<div className="w-14 h-14 rounded-full bg-white/20 flex items-center justify-center mx-auto mb-3">
|
|
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-white">입고 처리 완료</h3>
|
|
<p className="text-white/80 text-lg font-mono mt-1">{confirmResult.inboundNumber}</p>
|
|
</div>
|
|
|
|
{/* 처리 내역 */}
|
|
<div className="px-6 py-4">
|
|
<div className="flex items-center justify-between text-sm text-gray-500 mb-3">
|
|
<span>창고: <span className="font-semibold text-gray-900">{confirmResult.warehouse}</span></span>
|
|
<span>{confirmResult.date}</span>
|
|
</div>
|
|
|
|
<div className="text-xs font-semibold text-gray-400 mb-2">처리된 품목 ({confirmResult.items.length}건)</div>
|
|
<div className="max-h-[200px] overflow-y-auto flex flex-col gap-2">
|
|
{confirmResult.items.map((item) => (
|
|
<div key={item.id} className="flex items-center justify-between p-3 bg-green-50 rounded-xl border border-green-100">
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-semibold text-gray-900 truncate">{item.item_name}</p>
|
|
<p className="text-[11px] text-gray-400">{item.item_code}</p>
|
|
</div>
|
|
<span className="text-sm font-bold text-green-600 ml-3">{item.inbound_qty?.toLocaleString()} EA</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 확인 버튼 */}
|
|
<div className="px-6 py-4 border-t border-gray-100">
|
|
<button
|
|
onClick={() => {
|
|
setConfirmResult(null);
|
|
router.push("/pop/inbound");
|
|
}}
|
|
className="w-full h-12 rounded-xl text-white font-bold text-base active:scale-[0.98] transition-all"
|
|
style={{ background: "linear-gradient(to bottom, #60a5fa, #2563eb)", boxShadow: "0 4px 12px rgba(59,130,246,.3)" }}
|
|
>
|
|
확인
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|