132 lines
4.2 KiB
TypeScript
132 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { X, Info } from "lucide-react";
|
|
import { WorkOrder } from "./types";
|
|
|
|
interface PopAcceptModalProps {
|
|
isOpen: boolean;
|
|
workOrder: WorkOrder | null;
|
|
quantity: number;
|
|
onQuantityChange: (qty: number) => void;
|
|
onConfirm: (quantity: number) => void;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function PopAcceptModal({
|
|
isOpen,
|
|
workOrder,
|
|
quantity,
|
|
onQuantityChange,
|
|
onConfirm,
|
|
onClose,
|
|
}: PopAcceptModalProps) {
|
|
if (!isOpen || !workOrder) return null;
|
|
|
|
const acceptedQty = workOrder.acceptedQuantity || 0;
|
|
const remainingQty = workOrder.orderQuantity - acceptedQty;
|
|
|
|
const handleAdjust = (delta: number) => {
|
|
const newQty = Math.max(1, Math.min(quantity + delta, remainingQty));
|
|
onQuantityChange(newQty);
|
|
};
|
|
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const val = parseInt(e.target.value) || 0;
|
|
const newQty = Math.max(0, Math.min(val, remainingQty));
|
|
onQuantityChange(newQty);
|
|
};
|
|
|
|
const handleConfirm = () => {
|
|
if (quantity > 0) {
|
|
onConfirm(quantity);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="pop-modal-overlay active" onClick={(e) => e.target === e.currentTarget && onClose()}>
|
|
<div className="pop-modal">
|
|
<div className="pop-modal-header">
|
|
<h2 className="pop-modal-title">작업 접수</h2>
|
|
<button className="pop-modal-close" onClick={onClose}>
|
|
<X size={16} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="pop-modal-body">
|
|
<div className="pop-accept-modal-content">
|
|
{/* 작업지시 정보 */}
|
|
<div className="pop-accept-work-info">
|
|
<div className="work-id">{workOrder.id}</div>
|
|
<div className="work-name">
|
|
{workOrder.itemName} ({workOrder.spec})
|
|
</div>
|
|
<div style={{ marginTop: "var(--spacing-sm)", fontSize: "var(--text-xs)", color: "rgb(var(--text-muted))" }}>
|
|
지시수량: {workOrder.orderQuantity} EA | 기 접수: {acceptedQty} EA
|
|
</div>
|
|
</div>
|
|
|
|
{/* 수량 입력 */}
|
|
<div>
|
|
<label className="pop-form-label">접수 수량</label>
|
|
<div className="pop-quantity-input-wrapper">
|
|
<button className="pop-qty-btn minus" onClick={() => handleAdjust(-10)}>
|
|
-10
|
|
</button>
|
|
<button className="pop-qty-btn minus" onClick={() => handleAdjust(-1)}>
|
|
-1
|
|
</button>
|
|
<input
|
|
type="number"
|
|
className="pop-qty-input"
|
|
value={quantity}
|
|
onChange={handleInputChange}
|
|
min={1}
|
|
max={remainingQty}
|
|
/>
|
|
<button className="pop-qty-btn" onClick={() => handleAdjust(1)}>
|
|
+1
|
|
</button>
|
|
<button className="pop-qty-btn" onClick={() => handleAdjust(10)}>
|
|
+10
|
|
</button>
|
|
</div>
|
|
<div className="pop-qty-hint">미접수 수량: {remainingQty} EA</div>
|
|
</div>
|
|
|
|
{/* 분할접수 안내 */}
|
|
{quantity < remainingQty && (
|
|
<div className="pop-accept-info-box">
|
|
<span className="info-icon">
|
|
<Info size={20} />
|
|
</span>
|
|
<div>
|
|
<div className="info-title">분할 접수</div>
|
|
<div className="info-desc">
|
|
{quantity}EA 접수 후 {remainingQty - quantity}EA가 접수대기 상태로 남습니다.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pop-modal-footer">
|
|
<button className="pop-btn pop-btn-outline" style={{ flex: 1 }} onClick={onClose}>
|
|
취소
|
|
</button>
|
|
<button
|
|
className="pop-btn pop-btn-primary"
|
|
style={{ flex: 1 }}
|
|
onClick={handleConfirm}
|
|
disabled={quantity <= 0}
|
|
>
|
|
접수 ({quantity} EA)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|