1656 lines
70 KiB
TypeScript
1656 lines
70 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useMemo, 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 { Card, CardContent } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
DialogDescription,
|
|
} from "@/components/ui/dialog";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import {
|
|
ResizableHandle,
|
|
ResizablePanel,
|
|
ResizablePanelGroup,
|
|
} from "@/components/ui/resizable";
|
|
import {
|
|
Search,
|
|
RotateCcw,
|
|
Plus,
|
|
Save,
|
|
ClipboardList,
|
|
Inbox,
|
|
Pencil,
|
|
FileText,
|
|
XCircle,
|
|
ArrowRight,
|
|
Paperclip,
|
|
Upload,
|
|
Loader2,
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { toast } from "sonner";
|
|
import {
|
|
getDesignRequestList,
|
|
createDesignRequest,
|
|
updateDesignRequest,
|
|
addRequestHistory,
|
|
getEcnList,
|
|
createEcn,
|
|
updateEcn,
|
|
} from "@/lib/api/design";
|
|
|
|
// --- Types ---
|
|
type ChangeType = "설계오류" | "원가절감" | "고객요청" | "공정개선" | "법규대응";
|
|
type EcrStatus = "요청접수" | "영향도분석" | "ECN발행" | "기각";
|
|
type EcnStatus = "ECN발행" | "도면변경" | "통보완료" | "적용완료";
|
|
type TabType = "ecr" | "ecn";
|
|
|
|
interface EcrHistory {
|
|
status: string;
|
|
date: string;
|
|
user: string;
|
|
desc: string;
|
|
}
|
|
|
|
interface EcrItem {
|
|
id: string;
|
|
_id?: string;
|
|
date: string;
|
|
changeType: ChangeType;
|
|
urgency: "보통" | "긴급";
|
|
status: EcrStatus;
|
|
target: string;
|
|
drawingNo: string;
|
|
reqDept: string;
|
|
requester: string;
|
|
reason: string;
|
|
content: string;
|
|
impact: string[];
|
|
applyTiming: string;
|
|
ecnNo: string;
|
|
history: EcrHistory[];
|
|
}
|
|
|
|
interface EcnItem {
|
|
id: string;
|
|
_id?: string;
|
|
ecrNo: string;
|
|
ecrId?: string;
|
|
date: string;
|
|
applyDate: string;
|
|
status: EcnStatus;
|
|
target: string;
|
|
drawingBefore: string;
|
|
drawingAfter: string;
|
|
designer: string;
|
|
before: string;
|
|
after: string;
|
|
reason: string;
|
|
notifyDepts: string[];
|
|
remark: string;
|
|
history: EcrHistory[];
|
|
}
|
|
|
|
// --- Style Helpers ---
|
|
const getChangeTypeStyle = (type: ChangeType) => {
|
|
switch (type) {
|
|
case "설계오류":
|
|
return "bg-rose-100 text-rose-800 border-rose-200";
|
|
case "원가절감":
|
|
return "bg-emerald-100 text-emerald-800 border-emerald-200";
|
|
case "고객요청":
|
|
return "bg-blue-100 text-blue-800 border-blue-200";
|
|
case "공정개선":
|
|
return "bg-amber-100 text-amber-800 border-amber-200";
|
|
case "법규대응":
|
|
return "bg-purple-100 text-purple-800 border-purple-200";
|
|
default:
|
|
return "bg-gray-100 text-gray-800 border-gray-200";
|
|
}
|
|
};
|
|
|
|
const getEcrStatusStyle = (status: EcrStatus) => {
|
|
switch (status) {
|
|
case "요청접수":
|
|
return "bg-blue-100 text-blue-800 border-blue-200";
|
|
case "영향도분석":
|
|
return "bg-amber-100 text-amber-800 border-amber-200";
|
|
case "ECN발행":
|
|
return "bg-emerald-100 text-emerald-800 border-emerald-200";
|
|
case "기각":
|
|
return "bg-slate-100 text-slate-800 border-slate-200";
|
|
default:
|
|
return "bg-gray-100 text-gray-800 border-gray-200";
|
|
}
|
|
};
|
|
|
|
const getEcnStatusStyle = (status: EcnStatus) => {
|
|
switch (status) {
|
|
case "ECN발행":
|
|
return "bg-blue-100 text-blue-800 border-blue-200";
|
|
case "도면변경":
|
|
return "bg-purple-100 text-purple-800 border-purple-200";
|
|
case "통보완료":
|
|
return "bg-teal-100 text-teal-800 border-teal-200";
|
|
case "적용완료":
|
|
return "bg-emerald-100 text-emerald-800 border-emerald-200";
|
|
default:
|
|
return "bg-gray-100 text-gray-800 border-gray-200";
|
|
}
|
|
};
|
|
|
|
const getImpactBadgeStyle = (impact: string) => {
|
|
switch (impact) {
|
|
case "BOM":
|
|
return "bg-blue-100 text-blue-800 border-blue-200";
|
|
case "공정":
|
|
return "bg-amber-100 text-amber-800 border-amber-200";
|
|
case "금형":
|
|
return "bg-rose-100 text-rose-800 border-rose-200";
|
|
case "검사기준":
|
|
return "bg-purple-100 text-purple-800 border-purple-200";
|
|
case "구매":
|
|
case "원가":
|
|
return "bg-emerald-100 text-emerald-800 border-emerald-200";
|
|
default:
|
|
return "bg-gray-100 text-gray-800 border-gray-200";
|
|
}
|
|
};
|
|
|
|
// --- Constants ---
|
|
const CHANGE_TYPES: ChangeType[] = ["설계오류", "원가절감", "고객요청", "공정개선", "법규대응"];
|
|
const ECR_STATUSES: EcrStatus[] = ["요청접수", "영향도분석", "ECN발행", "기각"];
|
|
const ECN_STATUSES: EcnStatus[] = ["ECN발행", "도면변경", "통보완료", "적용완료"];
|
|
const DEPARTMENTS = ["품질팀", "생산팀", "영업팀", "구매팀", "설계팀"];
|
|
const DESIGNERS = ["이설계", "박도면", "최기구", "김전장"];
|
|
const IMPACT_OPTIONS = [
|
|
{ key: "BOM", label: "BOM 변경" },
|
|
{ key: "공정", label: "공정 변경" },
|
|
{ key: "금형", label: "금형 변경" },
|
|
{ key: "검사기준", label: "검사기준 변경" },
|
|
{ key: "구매", label: "구매 변경" },
|
|
{ key: "원가", label: "원가 영향" },
|
|
];
|
|
const NOTIFY_DEPTS = [
|
|
{ key: "생산팀", label: "생산팀" },
|
|
{ key: "품질팀", label: "품질팀" },
|
|
{ key: "구매팀", label: "구매팀" },
|
|
{ key: "영업팀", label: "영업팀" },
|
|
{ key: "물류팀", label: "물류팀" },
|
|
{ key: "금형팀", label: "금형팀" },
|
|
];
|
|
|
|
// --- API Response Mapping ---
|
|
function mapEcrFromApi(raw: any): EcrItem {
|
|
const history = (raw.history || []).map((h: any) => ({
|
|
status: h.step || h.status || "",
|
|
date: h.history_date || "",
|
|
user: h.user_name || "",
|
|
desc: h.description || "",
|
|
}));
|
|
return {
|
|
id: raw.request_no || raw.id || "",
|
|
_id: raw.id,
|
|
date: raw.request_date || "",
|
|
changeType: (raw.change_type as ChangeType) || "설계오류",
|
|
urgency: (raw.urgency as "보통" | "긴급") || "보통",
|
|
status: (raw.status as EcrStatus) || "요청접수",
|
|
target: raw.target_name || "",
|
|
drawingNo: raw.drawing_no || "",
|
|
reqDept: raw.req_dept || "",
|
|
requester: raw.requester || "",
|
|
reason: raw.reason || "",
|
|
content: raw.content || "",
|
|
impact: Array.isArray(raw.impact) ? raw.impact : [],
|
|
applyTiming: raw.apply_timing || "",
|
|
ecnNo: raw.ecn_no || "",
|
|
history,
|
|
};
|
|
}
|
|
|
|
function mapEcnFromApi(raw: any, ecrData: EcrItem[]): EcnItem {
|
|
const history = (raw.history || []).map((h: any) => ({
|
|
status: h.status || "",
|
|
date: h.history_date || "",
|
|
user: h.user_name || "",
|
|
desc: h.description || "",
|
|
}));
|
|
const ecrNo = raw.ecr_id
|
|
? ecrData.find((e) => e._id === raw.ecr_id)?.id ?? raw.ecr_id
|
|
: "";
|
|
return {
|
|
id: raw.ecn_no || raw.id || "",
|
|
_id: raw.id,
|
|
ecrNo,
|
|
ecrId: raw.ecr_id,
|
|
date: raw.ecn_date || "",
|
|
applyDate: raw.apply_date || "",
|
|
status: (raw.status as EcnStatus) || "ECN발행",
|
|
target: raw.target || "",
|
|
drawingBefore: raw.drawing_before || "",
|
|
drawingAfter: raw.drawing_after || "",
|
|
designer: raw.designer || "",
|
|
before: raw.before_content || "",
|
|
after: raw.after_content || "",
|
|
reason: raw.reason || "",
|
|
notifyDepts: Array.isArray(raw.notify_depts) ? raw.notify_depts : [],
|
|
remark: raw.remark || "",
|
|
history,
|
|
};
|
|
}
|
|
|
|
// --- Timeline Component ---
|
|
function Timeline({ history }: { history: EcrHistory[] }) {
|
|
return (
|
|
<div className="space-y-0">
|
|
{history.map((h, idx) => {
|
|
const isLast = idx === history.length - 1;
|
|
const isRejected = h.status === "기각";
|
|
const isCompleted = h.status === "적용완료";
|
|
return (
|
|
<div key={idx} className="flex gap-3 relative">
|
|
<div className="flex flex-col items-center">
|
|
<div
|
|
className={cn(
|
|
"w-3 h-3 rounded-full border-2 mt-1.5 shrink-0",
|
|
isLast && isRejected
|
|
? "bg-rose-500 border-rose-300"
|
|
: isLast && isCompleted
|
|
? "bg-emerald-500 border-emerald-300"
|
|
: isLast
|
|
? "bg-primary border-primary/50 ring-4 ring-primary/10"
|
|
: "bg-emerald-500 border-emerald-300"
|
|
)}
|
|
/>
|
|
{!isLast && (
|
|
<div className="w-px flex-1 bg-border min-h-[24px]" />
|
|
)}
|
|
</div>
|
|
<div className="pb-4 min-w-0">
|
|
<div className="flex items-center gap-2 mb-0.5">
|
|
<span
|
|
className={cn(
|
|
"px-2 py-0.5 rounded-full text-[10px] font-medium border",
|
|
h.status === "기각"
|
|
? "bg-slate-100 text-slate-800 border-slate-200"
|
|
: h.status === "적용완료"
|
|
? "bg-emerald-100 text-emerald-800 border-emerald-200"
|
|
: h.status === "ECN발행"
|
|
? "bg-emerald-100 text-emerald-800 border-emerald-200"
|
|
: h.status === "영향도분석"
|
|
? "bg-amber-100 text-amber-800 border-amber-200"
|
|
: h.status === "도면변경"
|
|
? "bg-purple-100 text-purple-800 border-purple-200"
|
|
: h.status === "통보완료"
|
|
? "bg-teal-100 text-teal-800 border-teal-200"
|
|
: "bg-blue-100 text-blue-800 border-blue-200"
|
|
)}
|
|
>
|
|
{h.status}
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-foreground">{h.desc}</p>
|
|
<p className="text-[11px] text-muted-foreground mt-0.5">
|
|
{h.date} · {h.user}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// --- Main Component ---
|
|
export default function DesignChangeManagementPage() {
|
|
const [currentTab, setCurrentTab] = useState<TabType>("ecr");
|
|
const [ecrData, setEcrData] = useState<EcrItem[]>([]);
|
|
const [ecnData, setEcnData] = useState<EcnItem[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [selectedId, setSelectedId] = useState<string | null>(null);
|
|
|
|
// 검색 상태
|
|
const [searchDateFrom, setSearchDateFrom] = useState("");
|
|
const [searchDateTo, setSearchDateTo] = useState("");
|
|
const [searchStatus, setSearchStatus] = useState<string>("all");
|
|
const [searchChangeType, setSearchChangeType] = useState<string>("all");
|
|
const [searchKeyword, setSearchKeyword] = useState("");
|
|
|
|
// ECR 모달
|
|
const [isEcrModalOpen, setIsEcrModalOpen] = useState(false);
|
|
const [isEcrEditMode, setIsEcrEditMode] = useState(false);
|
|
const [ecrForm, setEcrForm] = useState<Partial<EcrItem>>({});
|
|
const [ecrImpactChecks, setEcrImpactChecks] = useState<Record<string, boolean>>({});
|
|
|
|
// ECN 모달
|
|
const [isEcnModalOpen, setIsEcnModalOpen] = useState(false);
|
|
const [ecnForm, setEcnForm] = useState<Partial<EcnItem>>({});
|
|
const [ecnNotifyChecks, setEcnNotifyChecks] = useState<Record<string, boolean>>({});
|
|
|
|
// 기각 모달
|
|
const [isRejectModalOpen, setIsRejectModalOpen] = useState(false);
|
|
const [rejectReason, setRejectReason] = useState("");
|
|
const [rejectTargetId, setRejectTargetId] = useState("");
|
|
|
|
useEffect(() => {
|
|
const today = new Date();
|
|
const threeMonthsAgo = new Date(today);
|
|
threeMonthsAgo.setMonth(today.getMonth() - 3);
|
|
setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
|
|
setSearchDateTo(today.toISOString().split("T")[0]);
|
|
}, []);
|
|
|
|
const fetchData = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [ecrRes, ecnRes] = await Promise.all([
|
|
getDesignRequestList({ source_type: "ecr" }),
|
|
getEcnList(),
|
|
]);
|
|
if (ecrRes.success && ecrRes.data) {
|
|
setEcrData((ecrRes.data as any[]).map(mapEcrFromApi));
|
|
}
|
|
if (ecnRes.success && ecnRes.data) {
|
|
const ecrList = ecrRes.success && ecrRes.data ? (ecrRes.data as any[]).map(mapEcrFromApi) : [];
|
|
setEcnData((ecnRes.data as any[]).map((r) => mapEcnFromApi(r, ecrList)));
|
|
}
|
|
} catch {
|
|
toast.error("데이터를 불러오는데 실패했습니다.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [fetchData]);
|
|
|
|
// --- Filtered Data ---
|
|
const filteredEcr = useMemo(() => {
|
|
return ecrData
|
|
.filter((item) => {
|
|
if (searchDateFrom && item.date < searchDateFrom) return false;
|
|
if (searchDateTo && item.date > searchDateTo) return false;
|
|
if (searchStatus !== "all" && item.status !== searchStatus) return false;
|
|
if (searchChangeType !== "all" && item.changeType !== searchChangeType) return false;
|
|
if (searchKeyword) {
|
|
const kw = searchKeyword.toLowerCase();
|
|
const str = [item.id, item.target, item.requester, item.drawingNo].join(" ").toLowerCase();
|
|
if (!str.includes(kw)) return false;
|
|
}
|
|
return true;
|
|
})
|
|
.sort((a, b) => b.date.localeCompare(a.date));
|
|
}, [ecrData, searchDateFrom, searchDateTo, searchStatus, searchChangeType, searchKeyword]);
|
|
|
|
const filteredEcn = useMemo(() => {
|
|
return ecnData
|
|
.filter((item) => {
|
|
if (searchDateFrom && item.date < searchDateFrom) return false;
|
|
if (searchDateTo && item.date > searchDateTo) return false;
|
|
if (searchStatus !== "all" && item.status !== searchStatus) return false;
|
|
if (searchKeyword) {
|
|
const kw = searchKeyword.toLowerCase();
|
|
const str = [item.id, item.target, item.designer, item.ecrNo].join(" ").toLowerCase();
|
|
if (!str.includes(kw)) return false;
|
|
}
|
|
return true;
|
|
})
|
|
.sort((a, b) => b.date.localeCompare(a.date));
|
|
}, [ecnData, searchDateFrom, searchDateTo, searchStatus, searchKeyword]);
|
|
|
|
// --- Status Counts ---
|
|
const ecrStatusCounts = useMemo(() => {
|
|
const counts: Record<string, number> = {};
|
|
ECR_STATUSES.forEach((s) => (counts[s] = ecrData.filter((r) => r.status === s).length));
|
|
return counts;
|
|
}, [ecrData]);
|
|
|
|
const ecnStatusCounts = useMemo(() => {
|
|
const counts: Record<string, number> = {};
|
|
ECN_STATUSES.forEach((s) => (counts[s] = ecnData.filter((r) => r.status === s).length));
|
|
return counts;
|
|
}, [ecnData]);
|
|
|
|
// --- Selected Items ---
|
|
const selectedEcr = useMemo(
|
|
() => (currentTab === "ecr" ? ecrData.find((r) => r.id === selectedId) : null),
|
|
[ecrData, selectedId, currentTab]
|
|
);
|
|
const selectedEcn = useMemo(
|
|
() => (currentTab === "ecn" ? ecnData.find((r) => r.id === selectedId) : null),
|
|
[ecnData, selectedId, currentTab]
|
|
);
|
|
|
|
// --- Tab Switch ---
|
|
const handleTabSwitch = (tab: TabType) => {
|
|
setCurrentTab(tab);
|
|
setSelectedId(null);
|
|
setSearchStatus("all");
|
|
};
|
|
|
|
// --- Search ---
|
|
const handleResetSearch = () => {
|
|
const today = new Date();
|
|
const threeMonthsAgo = new Date(today);
|
|
threeMonthsAgo.setMonth(today.getMonth() - 3);
|
|
setSearchDateFrom(threeMonthsAgo.toISOString().split("T")[0]);
|
|
setSearchDateTo(today.toISOString().split("T")[0]);
|
|
setSearchStatus("all");
|
|
setSearchChangeType("all");
|
|
setSearchKeyword("");
|
|
};
|
|
|
|
const handleFilterByStatus = (status: string) => {
|
|
setSearchStatus(status);
|
|
};
|
|
|
|
// --- ECR/ECN Navigation ---
|
|
const navigateToLink = (targetId: string) => {
|
|
if (targetId.startsWith("ECN")) {
|
|
setCurrentTab("ecn");
|
|
setSelectedId(targetId);
|
|
setSearchStatus("all");
|
|
} else if (targetId.startsWith("ECR")) {
|
|
setCurrentTab("ecr");
|
|
setSelectedId(targetId);
|
|
setSearchStatus("all");
|
|
}
|
|
};
|
|
|
|
// --- ECR Number Generator ---
|
|
const generateEcrNo = useCallback(() => {
|
|
const year = new Date().getFullYear();
|
|
const prefix = `ECR-${year}-`;
|
|
const existing = ecrData.filter((r) => r.id.startsWith(prefix));
|
|
const maxNum = existing.reduce((max, r) => {
|
|
const num = parseInt(r.id.split("-")[2]);
|
|
return num > max ? num : max;
|
|
}, 0);
|
|
return `${prefix}${String(maxNum + 1).padStart(4, "0")}`;
|
|
}, [ecrData]);
|
|
|
|
const generateEcnNo = useCallback(() => {
|
|
const year = new Date().getFullYear();
|
|
const prefix = `ECN-${year}-`;
|
|
const existing = ecnData.filter((r) => r.id.startsWith(prefix));
|
|
const maxNum = existing.reduce((max, r) => {
|
|
const num = parseInt(r.id.split("-")[2]);
|
|
return num > max ? num : max;
|
|
}, 0);
|
|
return `${prefix}${String(maxNum + 1).padStart(4, "0")}`;
|
|
}, [ecnData]);
|
|
|
|
// --- ECR Modal ---
|
|
const openEcrRegisterModal = () => {
|
|
setIsEcrEditMode(false);
|
|
setEcrForm({
|
|
id: generateEcrNo(),
|
|
date: new Date().toISOString().split("T")[0],
|
|
changeType: undefined,
|
|
urgency: "보통",
|
|
target: "",
|
|
drawingNo: "",
|
|
reqDept: "",
|
|
requester: "",
|
|
reason: "",
|
|
content: "",
|
|
applyTiming: "즉시",
|
|
});
|
|
setEcrImpactChecks({});
|
|
setIsEcrModalOpen(true);
|
|
};
|
|
|
|
const openEcrEditModal = (id: string) => {
|
|
const item = ecrData.find((r) => r.id === id);
|
|
if (!item) return;
|
|
setIsEcrEditMode(true);
|
|
setEcrForm({ ...item });
|
|
const checks: Record<string, boolean> = {};
|
|
IMPACT_OPTIONS.forEach((opt) => {
|
|
checks[opt.key] = item.impact.includes(opt.key);
|
|
});
|
|
setEcrImpactChecks(checks);
|
|
setIsEcrModalOpen(true);
|
|
};
|
|
|
|
const handleSaveEcr = async () => {
|
|
if (!ecrForm.changeType) {
|
|
toast.error("변경 유형을 선택하세요.");
|
|
return;
|
|
}
|
|
if (!ecrForm.target?.trim()) {
|
|
toast.error("대상 품목/설비를 입력하세요.");
|
|
return;
|
|
}
|
|
if (!ecrForm.reason?.trim()) {
|
|
toast.error("변경 사유를 입력하세요.");
|
|
return;
|
|
}
|
|
if (!ecrForm.content?.trim()) {
|
|
toast.error("변경 요구 내용을 입력하세요.");
|
|
return;
|
|
}
|
|
|
|
const impact = IMPACT_OPTIONS.filter((opt) => ecrImpactChecks[opt.key]).map((opt) => opt.key);
|
|
const reqDate = ecrForm.date || new Date().toISOString().split("T")[0];
|
|
const historyEntry = {
|
|
step: "요청접수",
|
|
history_date: reqDate,
|
|
user_name: ecrForm.requester || "시스템",
|
|
description: `${ecrForm.reqDept || ""}에서 ECR 등록`,
|
|
};
|
|
|
|
if (isEcrEditMode && ecrForm._id) {
|
|
const res = await updateDesignRequest(ecrForm._id, {
|
|
request_no: ecrForm.id,
|
|
request_date: reqDate,
|
|
change_type: ecrForm.changeType,
|
|
urgency: ecrForm.urgency || "보통",
|
|
target_name: ecrForm.target,
|
|
drawing_no: ecrForm.drawingNo || "",
|
|
req_dept: ecrForm.reqDept || "",
|
|
requester: ecrForm.requester || "",
|
|
reason: ecrForm.reason,
|
|
content: ecrForm.content,
|
|
impact,
|
|
apply_timing: ecrForm.applyTiming || "즉시",
|
|
});
|
|
if (res.success) {
|
|
toast.success("ECR이 수정되었습니다.");
|
|
setIsEcrModalOpen(false);
|
|
fetchData();
|
|
} else {
|
|
toast.error(res.message || "ECR 수정에 실패했습니다.");
|
|
}
|
|
} else {
|
|
const res = await createDesignRequest({
|
|
request_no: ecrForm.id || generateEcrNo(),
|
|
source_type: "ecr",
|
|
request_date: reqDate,
|
|
change_type: ecrForm.changeType,
|
|
urgency: ecrForm.urgency || "보통",
|
|
status: "요청접수",
|
|
target_name: ecrForm.target,
|
|
drawing_no: ecrForm.drawingNo || "",
|
|
req_dept: ecrForm.reqDept || "",
|
|
requester: ecrForm.requester || "",
|
|
reason: ecrForm.reason,
|
|
content: ecrForm.content,
|
|
impact,
|
|
apply_timing: ecrForm.applyTiming || "즉시",
|
|
history: [historyEntry],
|
|
});
|
|
if (res.success) {
|
|
toast.success("ECR이 등록되었습니다.");
|
|
setIsEcrModalOpen(false);
|
|
fetchData();
|
|
} else {
|
|
toast.error(res.message || "ECR 등록에 실패했습니다.");
|
|
}
|
|
}
|
|
};
|
|
|
|
// --- ECN Modal ---
|
|
const openEcnIssueModal = (ecrId: string) => {
|
|
const ecr = ecrData.find((r) => r.id === ecrId);
|
|
if (!ecr) return;
|
|
|
|
setEcnForm({
|
|
id: generateEcnNo(),
|
|
ecrNo: ecrId,
|
|
ecrId: ecr._id,
|
|
date: new Date().toISOString().split("T")[0],
|
|
target: ecr.target,
|
|
reason: ecr.reason,
|
|
drawingBefore: ecr.drawingNo,
|
|
drawingAfter: "",
|
|
designer: "",
|
|
before: "",
|
|
after: "",
|
|
applyDate: "",
|
|
remark: "",
|
|
});
|
|
setEcnNotifyChecks({});
|
|
setIsEcnModalOpen(true);
|
|
};
|
|
|
|
const handleSaveEcn = async () => {
|
|
if (!ecnForm.after?.trim()) {
|
|
toast.error("변경 후(TO-BE) 내용을 입력하세요.");
|
|
return;
|
|
}
|
|
if (!ecnForm.applyDate) {
|
|
toast.error("적용일자를 입력하세요.");
|
|
return;
|
|
}
|
|
if (!ecnForm.ecrId) {
|
|
toast.error("관련 ECR 정보가 없습니다.");
|
|
return;
|
|
}
|
|
|
|
const notifyDepts = NOTIFY_DEPTS.filter((d) => ecnNotifyChecks[d.key]).map((d) => d.key);
|
|
const ecnDate = ecnForm.date || new Date().toISOString().split("T")[0];
|
|
const historyEntry = {
|
|
status: "ECN발행",
|
|
history_date: ecnDate,
|
|
user_name: ecnForm.designer || "시스템",
|
|
description: "ECN 발행",
|
|
};
|
|
|
|
const ecnNo = ecnForm.id || generateEcnNo();
|
|
const res = await createEcn({
|
|
ecn_no: ecnNo,
|
|
ecr_id: ecnForm.ecrId,
|
|
ecn_date: ecnDate,
|
|
apply_date: ecnForm.applyDate,
|
|
status: "ECN발행",
|
|
target: ecnForm.target || "",
|
|
drawing_before: ecnForm.drawingBefore || "",
|
|
drawing_after: ecnForm.drawingAfter || "(미정)",
|
|
designer: ecnForm.designer || "",
|
|
before_content: ecnForm.before || "",
|
|
after_content: ecnForm.after || "",
|
|
reason: ecnForm.reason || "",
|
|
remark: ecnForm.remark || "",
|
|
notify_depts: notifyDepts,
|
|
history: [historyEntry],
|
|
});
|
|
|
|
if (res.success) {
|
|
await updateDesignRequest(ecnForm.ecrId!, {
|
|
status: "ECN발행",
|
|
ecn_no: ecnNo,
|
|
});
|
|
await addRequestHistory(ecnForm.ecrId!, {
|
|
step: "ECN발행",
|
|
history_date: ecnDate,
|
|
user_name: ecnForm.designer || "시스템",
|
|
description: `${ecnNo} 발행`,
|
|
});
|
|
toast.success("ECN이 발행되었습니다.");
|
|
setIsEcnModalOpen(false);
|
|
fetchData();
|
|
} else {
|
|
toast.error(res.message || "ECN 발행에 실패했습니다.");
|
|
}
|
|
};
|
|
|
|
// --- ECR Reject ---
|
|
const openRejectModal = (id: string) => {
|
|
setRejectTargetId(id);
|
|
setRejectReason("");
|
|
setIsRejectModalOpen(true);
|
|
};
|
|
|
|
const handleRejectSubmit = async () => {
|
|
if (!rejectReason.trim()) {
|
|
toast.error("기각 사유를 입력하세요.");
|
|
return;
|
|
}
|
|
|
|
const ecr = ecrData.find((r) => r.id === rejectTargetId);
|
|
if (!ecr?._id) {
|
|
toast.error("ECR 정보를 찾을 수 없습니다.");
|
|
return;
|
|
}
|
|
|
|
const updateRes = await updateDesignRequest(ecr._id, { status: "기각", review_memo: rejectReason });
|
|
if (!updateRes.success) {
|
|
toast.error(updateRes.message || "ECR 기각에 실패했습니다.");
|
|
return;
|
|
}
|
|
await addRequestHistory(ecr._id, {
|
|
step: "기각",
|
|
history_date: new Date().toISOString().split("T")[0],
|
|
user_name: "설계팀",
|
|
description: rejectReason,
|
|
});
|
|
toast.success("ECR이 기각되었습니다.");
|
|
setIsRejectModalOpen(false);
|
|
fetchData();
|
|
};
|
|
|
|
// --- Stat Cards ---
|
|
const ecrStatCards = [
|
|
{ label: "요청접수", value: ecrStatusCounts["요청접수"] || 0, gradient: "from-indigo-500 to-blue-600", textColor: "text-white" },
|
|
{ label: "영향도분석", value: ecrStatusCounts["영향도분석"] || 0, gradient: "from-amber-400 to-orange-500", textColor: "text-white" },
|
|
{ label: "ECN발행", value: ecrStatusCounts["ECN발행"] || 0, gradient: "from-emerald-400 to-green-600", textColor: "text-white" },
|
|
];
|
|
|
|
const ecnStatCards = [
|
|
{ label: "도면변경", value: ecnStatusCounts["도면변경"] || 0, gradient: "from-purple-400 to-violet-600", textColor: "text-white" },
|
|
{ label: "통보완료", value: ecnStatusCounts["통보완료"] || 0, gradient: "from-teal-400 to-cyan-600", textColor: "text-white" },
|
|
{ label: "적용완료", value: ecnStatusCounts["적용완료"] || 0, gradient: "from-emerald-400 to-green-600", textColor: "text-white" },
|
|
];
|
|
|
|
const currentStatCards = currentTab === "ecr" ? ecrStatCards : ecnStatCards;
|
|
const currentList = currentTab === "ecr" ? filteredEcr : filteredEcn;
|
|
const currentStatuses = currentTab === "ecr" ? ECR_STATUSES : ECN_STATUSES;
|
|
|
|
return (
|
|
<div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/30 p-4 gap-4 relative">
|
|
{loading && (
|
|
<div className="absolute inset-0 bg-background/50 flex items-center justify-center z-50">
|
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
</div>
|
|
)}
|
|
{/* 검색 섹션 */}
|
|
<Card className="shrink-0">
|
|
<CardContent className="p-4 flex flex-wrap items-end gap-4">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs text-muted-foreground">기간</Label>
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
type="date"
|
|
className="w-[140px] h-9"
|
|
value={searchDateFrom}
|
|
onChange={(e) => setSearchDateFrom(e.target.value)}
|
|
/>
|
|
<span className="text-muted-foreground">~</span>
|
|
<Input
|
|
type="date"
|
|
className="w-[140px] h-9"
|
|
value={searchDateTo}
|
|
onChange={(e) => setSearchDateTo(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs text-muted-foreground">구분</Label>
|
|
<Select value={currentTab} onValueChange={(v) => handleTabSwitch(v as TabType)}>
|
|
<SelectTrigger className="w-[150px] h-9">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="ecr">ECR (변경요청)</SelectItem>
|
|
<SelectItem value="ecn">ECN (변경통지)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs text-muted-foreground">상태</Label>
|
|
<Select value={searchStatus} onValueChange={setSearchStatus}>
|
|
<SelectTrigger className="w-[130px] h-9">
|
|
<SelectValue placeholder="전체" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">상태 전체</SelectItem>
|
|
{currentStatuses.map((s) => (
|
|
<SelectItem key={s} value={s}>
|
|
{s}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{currentTab === "ecr" && (
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs text-muted-foreground">변경유형</Label>
|
|
<Select value={searchChangeType} onValueChange={setSearchChangeType}>
|
|
<SelectTrigger className="w-[140px] h-9">
|
|
<SelectValue placeholder="전체" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">변경유형 전체</SelectItem>
|
|
{CHANGE_TYPES.map((t) => (
|
|
<SelectItem key={t} value={t}>
|
|
{t}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs text-muted-foreground">검색어</Label>
|
|
<Input
|
|
placeholder="ECR/ECN번호 / 품목 / 요청자"
|
|
className="w-[260px] h-9"
|
|
value={searchKeyword}
|
|
onChange={(e) => setSearchKeyword(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex-1" />
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="outline" size="sm" className="h-9" onClick={handleResetSearch}>
|
|
<RotateCcw className="w-4 h-4 mr-2" /> 초기화
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 메인 분할 레이아웃 */}
|
|
<div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm">
|
|
<ResizablePanelGroup direction="horizontal">
|
|
{/* 왼쪽: 목록 */}
|
|
<ResizablePanel defaultSize={65} minSize={35}>
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
|
|
<div className="font-semibold flex items-center gap-2">
|
|
<ClipboardList className="w-4 h-4" />
|
|
{currentTab === "ecr" ? "설계변경요청(ECR) 목록" : "설계변경통지(ECN) 목록"}
|
|
<Badge variant="secondary" className="font-normal">
|
|
{currentList.length}건
|
|
</Badge>
|
|
</div>
|
|
{currentTab === "ecr" && (
|
|
<Button size="sm" onClick={openEcrRegisterModal}>
|
|
<Plus className="w-4 h-4 mr-1.5" /> ECR 등록
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-auto">
|
|
{currentTab === "ecr" ? (
|
|
<Table>
|
|
<TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
|
|
<TableRow>
|
|
<TableHead className="w-[50px] text-center">No</TableHead>
|
|
<TableHead className="w-[140px]">ECR번호</TableHead>
|
|
<TableHead className="w-[90px] text-center">변경유형</TableHead>
|
|
<TableHead className="w-[90px] text-center">상태</TableHead>
|
|
<TableHead className="w-[60px] text-center">긴급</TableHead>
|
|
<TableHead className="w-[200px]">대상 품목/설비</TableHead>
|
|
<TableHead className="w-[150px]">도면번호</TableHead>
|
|
<TableHead className="w-[80px]">요청부서</TableHead>
|
|
<TableHead className="w-[70px]">요청자</TableHead>
|
|
<TableHead className="w-[100px]">요청일자</TableHead>
|
|
<TableHead className="w-[130px]">관련 ECN</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredEcr.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={11} className="h-32 text-center text-muted-foreground">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<Inbox className="w-8 h-8 text-muted-foreground/50" />
|
|
<span>조건에 맞는 ECR이 없습니다</span>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredEcr.map((item, idx) => (
|
|
<TableRow
|
|
key={item.id}
|
|
className={cn(
|
|
"cursor-pointer hover:bg-muted/50 transition-colors",
|
|
selectedId === item.id && "bg-primary/5"
|
|
)}
|
|
onClick={() => setSelectedId(item.id)}
|
|
>
|
|
<TableCell className="text-center text-muted-foreground">{idx + 1}</TableCell>
|
|
<TableCell className="font-semibold text-primary">{item.id}</TableCell>
|
|
<TableCell className="text-center">
|
|
<span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getChangeTypeStyle(item.changeType))}>
|
|
{item.changeType}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcrStatusStyle(item.status))}>
|
|
{item.status}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
{item.urgency === "긴급" ? (
|
|
<span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-rose-100 text-rose-800 border-rose-200">
|
|
긴급
|
|
</span>
|
|
) : (
|
|
"-"
|
|
)}
|
|
</TableCell>
|
|
<TableCell className="font-medium">{item.target}</TableCell>
|
|
<TableCell className="text-xs text-muted-foreground">{item.drawingNo}</TableCell>
|
|
<TableCell>{item.reqDept}</TableCell>
|
|
<TableCell>{item.requester}</TableCell>
|
|
<TableCell>{item.date}</TableCell>
|
|
<TableCell>
|
|
{item.ecnNo ? (
|
|
<button
|
|
className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200 transition-colors"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
navigateToLink(item.ecnNo);
|
|
}}
|
|
>
|
|
{item.ecnNo} <ArrowRight className="w-3 h-3 inline" />
|
|
</button>
|
|
) : (
|
|
"-"
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
) : (
|
|
<Table>
|
|
<TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
|
|
<TableRow>
|
|
<TableHead className="w-[50px] text-center">No</TableHead>
|
|
<TableHead className="w-[140px]">ECN번호</TableHead>
|
|
<TableHead className="w-[90px] text-center">상태</TableHead>
|
|
<TableHead className="w-[200px]">대상 품목/설비</TableHead>
|
|
<TableHead className="w-[160px]">도면 (변경 후)</TableHead>
|
|
<TableHead className="w-[80px]">설계담당</TableHead>
|
|
<TableHead className="w-[100px]">발행일자</TableHead>
|
|
<TableHead className="w-[100px]">적용일자</TableHead>
|
|
<TableHead className="w-[140px]">통보 부서</TableHead>
|
|
<TableHead className="w-[130px]">관련 ECR</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredEcn.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={10} className="h-32 text-center text-muted-foreground">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<Inbox className="w-8 h-8 text-muted-foreground/50" />
|
|
<span>조건에 맞는 ECN이 없습니다</span>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredEcn.map((item, idx) => (
|
|
<TableRow
|
|
key={item.id}
|
|
className={cn(
|
|
"cursor-pointer hover:bg-muted/50 transition-colors",
|
|
selectedId === item.id && "bg-primary/5"
|
|
)}
|
|
onClick={() => setSelectedId(item.id)}
|
|
>
|
|
<TableCell className="text-center text-muted-foreground">{idx + 1}</TableCell>
|
|
<TableCell className="font-semibold text-primary">{item.id}</TableCell>
|
|
<TableCell className="text-center">
|
|
<span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getEcnStatusStyle(item.status))}>
|
|
{item.status}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell className="font-medium">{item.target}</TableCell>
|
|
<TableCell className="text-xs text-emerald-600 font-medium">{item.drawingAfter}</TableCell>
|
|
<TableCell>{item.designer}</TableCell>
|
|
<TableCell>{item.date}</TableCell>
|
|
<TableCell>{item.applyDate}</TableCell>
|
|
<TableCell className="text-xs text-muted-foreground">{item.notifyDepts.join(", ")}</TableCell>
|
|
<TableCell>
|
|
<button
|
|
className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 transition-colors"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
navigateToLink(item.ecrNo);
|
|
}}
|
|
>
|
|
{item.ecrNo} <ArrowRight className="w-3 h-3 inline" />
|
|
</button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
|
|
<ResizableHandle withHandle />
|
|
|
|
{/* 오른쪽: 상세 */}
|
|
<ResizablePanel defaultSize={35} minSize={20}>
|
|
<div className="flex flex-col h-full bg-card">
|
|
<div className="flex items-center justify-between p-3 border-b shrink-0">
|
|
<span className="font-semibold flex items-center gap-2">
|
|
<FileText className="w-4 h-4" />
|
|
상세 정보
|
|
</span>
|
|
{selectedEcr && (
|
|
<div className="flex items-center gap-1.5">
|
|
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => openEcrEditModal(selectedEcr.id)}>
|
|
<Pencil className="w-3 h-3 mr-1" /> 수정
|
|
</Button>
|
|
{selectedEcr.status === "영향도분석" && (
|
|
<>
|
|
<Button size="sm" className="h-7 text-xs" onClick={() => openEcnIssueModal(selectedEcr.id)}>
|
|
<FileText className="w-3 h-3 mr-1" /> ECN 발행
|
|
</Button>
|
|
<Button variant="destructive" size="sm" className="h-7 text-xs" onClick={() => openRejectModal(selectedEcr.id)}>
|
|
<XCircle className="w-3 h-3 mr-1" /> 기각
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-auto p-4 space-y-5">
|
|
{/* 현황 카드 */}
|
|
<div className="grid grid-cols-3 gap-3">
|
|
{currentStatCards.map((card) => (
|
|
<button
|
|
key={card.label}
|
|
onClick={() => handleFilterByStatus(card.label)}
|
|
className={cn(
|
|
"rounded-xl p-4 text-center bg-linear-to-br transition-all hover:-translate-y-0.5 hover:shadow-md cursor-pointer",
|
|
card.gradient,
|
|
card.textColor
|
|
)}
|
|
>
|
|
<div className="text-xs font-medium opacity-90 mb-1">{card.label}</div>
|
|
<div className="text-2xl font-bold">{card.value}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* ECR 상세 */}
|
|
{selectedEcr ? (
|
|
<div className="space-y-5">
|
|
<section>
|
|
<h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
|
|
기본 정보
|
|
</h3>
|
|
<div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">ECR번호</span>
|
|
<span className="font-medium text-primary">{selectedEcr.id}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">상태</span>
|
|
<span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcrStatusStyle(selectedEcr.status))}>
|
|
{selectedEcr.status}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">변경 유형</span>
|
|
<span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getChangeTypeStyle(selectedEcr.changeType))}>
|
|
{selectedEcr.changeType}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">긴급도</span>
|
|
<span>
|
|
{selectedEcr.urgency === "긴급" ? (
|
|
<span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-rose-100 text-rose-800 border-rose-200">긴급</span>
|
|
) : (
|
|
"보통"
|
|
)}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
|
|
<span className="font-medium">{selectedEcr.target}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">도면번호</span>
|
|
<span>{selectedEcr.drawingNo}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">요청부서 / 요청자</span>
|
|
<span>{selectedEcr.reqDept} / {selectedEcr.requester}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">요청일자</span>
|
|
<span>{selectedEcr.date}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">희망 적용시점</span>
|
|
<span>{selectedEcr.applyTiming}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">관련 ECN</span>
|
|
{selectedEcr.ecnNo ? (
|
|
<button
|
|
className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200 transition-colors"
|
|
onClick={() => navigateToLink(selectedEcr.ecnNo)}
|
|
>
|
|
{selectedEcr.ecnNo} <ArrowRight className="w-3 h-3 inline" />
|
|
</button>
|
|
) : (
|
|
<span className="text-muted-foreground">미발행</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h3 className="text-sm font-semibold mb-2">변경 사유</h3>
|
|
<div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
|
|
{selectedEcr.reason}
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h3 className="text-sm font-semibold mb-2">변경 요구 내용</h3>
|
|
<div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap min-h-[50px]">
|
|
{selectedEcr.content}
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h3 className="text-sm font-semibold mb-2">영향 범위</h3>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{selectedEcr.impact.map((imp) => (
|
|
<span key={imp} className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getImpactBadgeStyle(imp))}>
|
|
{imp}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h3 className="text-sm font-semibold mb-3">처리 이력</h3>
|
|
<Timeline history={selectedEcr.history} />
|
|
</section>
|
|
</div>
|
|
) : selectedEcn ? (
|
|
<div className="space-y-5">
|
|
<section>
|
|
<h3 className="text-sm font-semibold mb-3 flex items-center gap-2 pt-2 border-t">
|
|
ECN 기본 정보
|
|
</h3>
|
|
<div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">ECN번호</span>
|
|
<span className="font-medium text-primary">{selectedEcn.id}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">상태</span>
|
|
<span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border inline-block", getEcnStatusStyle(selectedEcn.status))}>
|
|
{selectedEcn.status}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">대상 품목/설비</span>
|
|
<span className="font-medium">{selectedEcn.target}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">설계담당</span>
|
|
<span>{selectedEcn.designer}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">발행일자</span>
|
|
<span>{selectedEcn.date}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">적용일자</span>
|
|
<span>{selectedEcn.applyDate}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">관련 ECR</span>
|
|
<button
|
|
className="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 transition-colors"
|
|
onClick={() => navigateToLink(selectedEcn.ecrNo)}
|
|
>
|
|
{selectedEcn.ecrNo} <ArrowRight className="w-3 h-3 inline" />
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground text-xs block mb-1">통보 부서</span>
|
|
<span className="text-xs">{selectedEcn.notifyDepts.join(", ")}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h3 className="text-sm font-semibold mb-2">변경 전/후 비교</h3>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="bg-rose-50 p-3 rounded-md border border-rose-200">
|
|
<div className="text-xs font-semibold text-rose-800 mb-1.5">
|
|
변경 전 ({selectedEcn.drawingBefore})
|
|
</div>
|
|
<div className="text-sm whitespace-pre-wrap">{selectedEcn.before}</div>
|
|
</div>
|
|
<div className="bg-emerald-50 p-3 rounded-md border border-emerald-200">
|
|
<div className="text-xs font-semibold text-emerald-800 mb-1.5">
|
|
변경 후 ({selectedEcn.drawingAfter})
|
|
</div>
|
|
<div className="text-sm whitespace-pre-wrap">{selectedEcn.after}</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h3 className="text-sm font-semibold mb-2">변경 사유</h3>
|
|
<div className="bg-muted/30 p-3 rounded-md border border-border/50 text-sm whitespace-pre-wrap">
|
|
{selectedEcn.reason}
|
|
</div>
|
|
{selectedEcn.remark && (
|
|
<p className="text-xs text-muted-foreground mt-2">비고: {selectedEcn.remark}</p>
|
|
)}
|
|
</section>
|
|
|
|
<section>
|
|
<h3 className="text-sm font-semibold mb-3">처리 이력</h3>
|
|
<Timeline history={selectedEcn.history} />
|
|
</section>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center py-10 text-center">
|
|
<div className="w-14 h-14 rounded-full bg-muted flex items-center justify-center mb-3">
|
|
<FileText className="w-7 h-7 text-muted-foreground" />
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">좌측 목록에서 항목을 선택하세요</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
</div>
|
|
|
|
{/* ECR 등록/수정 모달 */}
|
|
<Dialog open={isEcrModalOpen} onOpenChange={setIsEcrModalOpen}>
|
|
<DialogContent className="max-w-[95vw] sm:max-w-[950px] max-h-[90vh] overflow-hidden flex flex-col">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-base sm:text-lg">
|
|
{isEcrEditMode ? "설계변경요청(ECR) 수정" : "설계변경요청(ECR) 등록"}
|
|
</DialogTitle>
|
|
<DialogDescription className="text-xs sm:text-sm">
|
|
{isEcrEditMode ? "ECR 정보를 수정합니다." : "새로운 설계변경요청을 등록합니다."}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex-1 overflow-auto">
|
|
<div className="flex flex-col md:flex-row gap-5">
|
|
{/* 좌측: 요청 정보 */}
|
|
<div className="md:w-[380px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
|
|
<h3 className="text-sm font-semibold pb-2 border-b">변경 요청 정보</h3>
|
|
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">ECR번호</Label>
|
|
<Input value={ecrForm.id || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">요청일자</Label>
|
|
<Input
|
|
type="date"
|
|
value={ecrForm.date || ""}
|
|
onChange={(e) => setEcrForm((p) => ({ ...p, date: e.target.value }))}
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">희망 적용시점</Label>
|
|
<Select value={ecrForm.applyTiming || "즉시"} onValueChange={(v) => setEcrForm((p) => ({ ...p, applyTiming: v }))}>
|
|
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="즉시">즉시 적용</SelectItem>
|
|
<SelectItem value="재고소진후">재고 소진 후</SelectItem>
|
|
<SelectItem value="특정일자">특정 일자</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">변경 유형 <span className="text-destructive">*</span></Label>
|
|
<Select value={ecrForm.changeType || ""} onValueChange={(v) => setEcrForm((p) => ({ ...p, changeType: v as ChangeType }))}>
|
|
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
<SelectValue placeholder="선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{CHANGE_TYPES.map((t) => (
|
|
<SelectItem key={t} value={t}>{t}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">긴급도</Label>
|
|
<Select value={ecrForm.urgency || "보통"} onValueChange={(v) => setEcrForm((p) => ({ ...p, urgency: v as "보통" | "긴급" }))}>
|
|
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="보통">보통</SelectItem>
|
|
<SelectItem value="긴급">긴급</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">대상 품목/설비 <span className="text-destructive">*</span></Label>
|
|
<Input
|
|
value={ecrForm.target || ""}
|
|
onChange={(e) => setEcrForm((p) => ({ ...p, target: e.target.value }))}
|
|
placeholder="품목코드 / 설비명"
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">대상 도면번호</Label>
|
|
<Input
|
|
value={ecrForm.drawingNo || ""}
|
|
onChange={(e) => setEcrForm((p) => ({ ...p, drawingNo: e.target.value }))}
|
|
placeholder="DWG-XXX-XXX"
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">요청부서</Label>
|
|
<Select value={ecrForm.reqDept || ""} onValueChange={(v) => setEcrForm((p) => ({ ...p, reqDept: v }))}>
|
|
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
<SelectValue placeholder="선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{DEPARTMENTS.map((d) => (
|
|
<SelectItem key={d} value={d}>{d}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">요청자</Label>
|
|
<Input
|
|
value={ecrForm.requester || ""}
|
|
onChange={(e) => setEcrForm((p) => ({ ...p, requester: e.target.value }))}
|
|
placeholder="요청자명"
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 우측: 변경 내용 */}
|
|
<div className="flex-1 min-w-0 flex flex-col gap-4">
|
|
<div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50 flex-1">
|
|
<h3 className="text-sm font-semibold pb-2 border-b">변경 내용</h3>
|
|
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">변경 사유 <span className="text-destructive">*</span></Label>
|
|
<Textarea
|
|
value={ecrForm.reason || ""}
|
|
onChange={(e) => setEcrForm((p) => ({ ...p, reason: e.target.value }))}
|
|
placeholder="변경이 필요한 구체적인 사유를 기술하세요"
|
|
className="min-h-[80px] resize-y text-xs sm:text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">변경 요구 내용 <span className="text-destructive">*</span></Label>
|
|
<Textarea
|
|
value={ecrForm.content || ""}
|
|
onChange={(e) => setEcrForm((p) => ({ ...p, content: e.target.value }))}
|
|
placeholder="어떻게 변경해야 하는지 구체적으로 기술하세요"
|
|
className="min-h-[80px] resize-y text-xs sm:text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">영향 범위 (해당 항목 체크)</Label>
|
|
<div className="grid grid-cols-3 gap-2 mt-2">
|
|
{IMPACT_OPTIONS.map((opt) => (
|
|
<label
|
|
key={opt.key}
|
|
className="flex items-center gap-2 px-3 py-2 bg-background border rounded-md text-xs cursor-pointer hover:bg-muted/50 transition-colors"
|
|
>
|
|
<Checkbox
|
|
checked={!!ecrImpactChecks[opt.key]}
|
|
onCheckedChange={(c) =>
|
|
setEcrImpactChecks((prev) => ({ ...prev, [opt.key]: !!c }))
|
|
}
|
|
/>
|
|
{opt.label}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2 bg-muted/30 p-4 rounded-lg border border-border/50">
|
|
<h3 className="text-sm font-semibold pb-2 border-b flex items-center gap-2">
|
|
<Paperclip className="w-3.5 h-3.5" /> 첨부파일
|
|
</h3>
|
|
<div className="border-2 border-dashed border-border rounded-md p-4 text-center text-xs text-muted-foreground cursor-pointer hover:border-primary/50 hover:bg-muted/30 transition-colors">
|
|
<Upload className="w-5 h-5 mx-auto mb-1.5 text-muted-foreground" />
|
|
클릭하여 파일 첨부 (불량 사진, 참고 도면 등)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="gap-2 sm:gap-0">
|
|
<Button variant="outline" onClick={() => setIsEcrModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
|
|
취소
|
|
</Button>
|
|
<Button onClick={handleSaveEcr} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
|
|
<Save className="w-4 h-4 mr-2" /> 저장
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* ECN 발행 모달 */}
|
|
<Dialog open={isEcnModalOpen} onOpenChange={setIsEcnModalOpen}>
|
|
<DialogContent className="max-w-[95vw] sm:max-w-[950px] max-h-[90vh] overflow-hidden flex flex-col">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-base sm:text-lg">ECN 발행 (설계변경통지)</DialogTitle>
|
|
<DialogDescription className="text-xs sm:text-sm">ECR 기반으로 설계변경통지를 발행합니다.</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex-1 overflow-auto">
|
|
<div className="flex flex-col md:flex-row gap-5">
|
|
{/* 좌측 */}
|
|
<div className="md:w-[380px] shrink-0 space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
|
|
<h3 className="text-sm font-semibold pb-2 border-b">ECN 기본 정보</h3>
|
|
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">ECN번호</Label>
|
|
<Input value={ecnForm.id || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">관련 ECR번호</Label>
|
|
<Input value={ecnForm.ecrNo || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">발행일자</Label>
|
|
<Input
|
|
type="date"
|
|
value={ecnForm.date || ""}
|
|
onChange={(e) => setEcnForm((p) => ({ ...p, date: e.target.value }))}
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">적용일자 <span className="text-destructive">*</span></Label>
|
|
<Input
|
|
type="date"
|
|
value={ecnForm.applyDate || ""}
|
|
onChange={(e) => setEcnForm((p) => ({ ...p, applyDate: e.target.value }))}
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">대상 품목/설비</Label>
|
|
<Input value={ecnForm.target || ""} readOnly className="h-8 text-xs sm:h-10 sm:text-sm bg-muted cursor-not-allowed" />
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">도면번호 (변경 후)</Label>
|
|
<Input
|
|
value={ecnForm.drawingAfter || ""}
|
|
onChange={(e) => setEcnForm((p) => ({ ...p, drawingAfter: e.target.value }))}
|
|
placeholder="변경된 도면번호 (Rev 포함)"
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">설계 담당</Label>
|
|
<Select value={ecnForm.designer || ""} onValueChange={(v) => setEcnForm((p) => ({ ...p, designer: v }))}>
|
|
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
<SelectValue placeholder="선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{DESIGNERS.map((d) => (
|
|
<SelectItem key={d} value={d}>{d}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 우측 */}
|
|
<div className="flex-1 min-w-0 flex flex-col gap-4">
|
|
<div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
|
|
<h3 className="text-sm font-semibold pb-2 border-b">변경 전/후 비교</h3>
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">변경 전 (AS-IS)</Label>
|
|
<Textarea
|
|
value={ecnForm.before || ""}
|
|
onChange={(e) => setEcnForm((p) => ({ ...p, before: e.target.value }))}
|
|
placeholder="변경 전 상태/사양/치수 등"
|
|
className="min-h-[80px] resize-y text-xs sm:text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">변경 후 (TO-BE) <span className="text-destructive">*</span></Label>
|
|
<Textarea
|
|
value={ecnForm.after || ""}
|
|
onChange={(e) => setEcnForm((p) => ({ ...p, after: e.target.value }))}
|
|
placeholder="변경 후 상태/사양/치수 등"
|
|
className="min-h-[80px] resize-y text-xs sm:text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
|
|
<h3 className="text-sm font-semibold pb-2 border-b">통보 대상 부서</h3>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{NOTIFY_DEPTS.map((dept) => (
|
|
<label
|
|
key={dept.key}
|
|
className="flex items-center gap-2 px-3 py-2 bg-background border rounded-md text-xs cursor-pointer hover:bg-muted/50 transition-colors"
|
|
>
|
|
<Checkbox
|
|
checked={!!ecnNotifyChecks[dept.key]}
|
|
onCheckedChange={(c) =>
|
|
setEcnNotifyChecks((prev) => ({ ...prev, [dept.key]: !!c }))
|
|
}
|
|
/>
|
|
{dept.label}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3 bg-muted/30 p-4 rounded-lg border border-border/50">
|
|
<h3 className="text-sm font-semibold pb-2 border-b">변경 사유 및 비고</h3>
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">변경 사유 요약</Label>
|
|
<Textarea
|
|
value={ecnForm.reason || ""}
|
|
readOnly
|
|
className="min-h-[60px] resize-y text-xs sm:text-sm bg-muted cursor-not-allowed"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">비고</Label>
|
|
<Textarea
|
|
value={ecnForm.remark || ""}
|
|
onChange={(e) => setEcnForm((p) => ({ ...p, remark: e.target.value }))}
|
|
placeholder="추가 참고사항"
|
|
className="min-h-[60px] resize-y text-xs sm:text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="gap-2 sm:gap-0">
|
|
<Button variant="outline" onClick={() => setIsEcnModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
|
|
취소
|
|
</Button>
|
|
<Button onClick={handleSaveEcn} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
|
|
<FileText className="w-4 h-4 mr-2" /> ECN 발행
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 기각 모달 */}
|
|
<Dialog open={isRejectModalOpen} onOpenChange={setIsRejectModalOpen}>
|
|
<DialogContent className="max-w-[95vw] sm:max-w-[500px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-base sm:text-lg flex items-center gap-2">
|
|
<XCircle className="w-5 h-5 text-destructive" />
|
|
ECR 기각
|
|
</DialogTitle>
|
|
<DialogDescription className="text-xs sm:text-sm">
|
|
{rejectTargetId}을 기각 처리합니다.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-3 sm:space-y-4">
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">기각 사유 <span className="text-destructive">*</span></Label>
|
|
<Textarea
|
|
value={rejectReason}
|
|
onChange={(e) => setRejectReason(e.target.value)}
|
|
placeholder="기각 사유를 상세히 입력해주세요"
|
|
className="min-h-[100px] resize-y text-xs sm:text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="gap-2 sm:gap-0">
|
|
<Button variant="outline" onClick={() => setIsRejectModalOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
|
|
취소
|
|
</Button>
|
|
<Button variant="destructive" onClick={handleRejectSubmit} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
|
|
<XCircle className="w-4 h-4 mr-2" /> 기각 처리
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|