+
setPadOpen(false)} />
+
+
+
불량 수량 (최대 {max})
+
{padValue || "0"}
+
+
+ {["1","2","3","4","5","6","7","8","9"].map((k) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ );
+}
+
+/* ------------------------------------------------------------------ */
+/* Disposition labels */
+/* ------------------------------------------------------------------ */
+
+const DISPOSITIONS: { value: DefectEntry["disposition"]; label: string; color: string }[] = [
+ { value: "scrap", label: "폐기", color: "bg-red-100 text-red-700 border-red-200" },
+ { value: "rework", label: "재작업", color: "bg-amber-100 text-amber-700 border-amber-200" },
+ { value: "accept", label: "특채", color: "bg-blue-100 text-blue-700 border-blue-200" },
+];
+
+/* ------------------------------------------------------------------ */
+/* Component */
+/* ------------------------------------------------------------------ */
+
+export function DefectTypeModal({
+ open,
+ onClose,
+ onConfirm,
+ defectTypes,
+ maxQty,
+ initialEntries,
+}: DefectTypeModalProps) {
+ const [entries, setEntries] = useState<
+ Array<{ defect_code: string; defect_name: string; qty: number; disposition: DefectEntry["disposition"] }>
+ >([]);
+
+ useEffect(() => {
+ if (open) {
+ if (initialEntries && initialEntries.length > 0) {
+ setEntries(
+ initialEntries.map((e) => ({
+ ...e,
+ qty: parseInt(e.qty, 10) || 0,
+ }))
+ );
+ } else {
+ setEntries([]);
+ }
+ }
+ }, [open, initialEntries]);
+
+ const totalDefectQty = entries.reduce((sum, e) => sum + e.qty, 0);
+
+ const addEntry = (dt: DefectType) => {
+ // If already exists, just increment
+ const existing = entries.find((e) => e.defect_code === dt.defect_code);
+ if (existing) {
+ setEntries((prev) =>
+ prev.map((e) =>
+ e.defect_code === dt.defect_code ? { ...e, qty: Math.min(e.qty + 1, maxQty) } : e
+ )
+ );
+ } else {
+ setEntries((prev) => [
+ ...prev,
+ {
+ defect_code: dt.defect_code,
+ defect_name: dt.defect_name,
+ qty: 1,
+ disposition: "scrap" as const,
+ },
+ ]);
+ }
+ };
+
+ const removeEntry = (code: string) => {
+ setEntries((prev) => prev.filter((e) => e.defect_code !== code));
+ };
+
+ const updateQty = (code: string, qty: number) => {
+ setEntries((prev) =>
+ prev.map((e) => (e.defect_code === code ? { ...e, qty } : e))
+ );
+ };
+
+ const updateDisposition = (code: string, disposition: DefectEntry["disposition"]) => {
+ setEntries((prev) =>
+ prev.map((e) => (e.defect_code === code ? { ...e, disposition } : e))
+ );
+ };
+
+ const handleConfirm = () => {
+ const validEntries = entries.filter((e) => e.qty > 0);
+ onConfirm(
+ validEntries.map((e) => ({
+ defect_code: e.defect_code,
+ defect_name: e.defect_name,
+ qty: String(e.qty),
+ disposition: e.disposition,
+ }))
+ );
+ onClose();
+ };
+
+ if (!open) return null;
+
+ return (
+
+ {/* Overlay */}
+
+
+ {/* Panel */}
+
+ {/* Header */}
+
+
불량 유형 선택
+
+
+ 총 {totalDefectQty}개
+
+
+
+
+
+ {/* Body */}
+
+ {/* Defect type selection */}
+
불량 유형 선택
+
+ {defectTypes.map((dt) => {
+ const isSelected = entries.some((e) => e.defect_code === dt.defect_code);
+ return (
+
+ );
+ })}
+ {defectTypes.length === 0 && (
+
+ 등록된 불량 유형이 없습니다
+
+ )}
+
+
+ {/* Selected entries */}
+ {entries.length > 0 && (
+ <>
+
불량 상세
+
+ {entries.map((entry) => (
+
+
+
{entry.defect_name}
+
+
+
+ {/* Qty */}
+
+ 수량
+ updateQty(entry.defect_code, v)}
+ max={maxQty}
+ />
+
+
+ {/* Disposition */}
+
+ {DISPOSITIONS.map((d) => (
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+
+ {/* Footer */}
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/production/ProcessDetailModal.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/production/ProcessDetailModal.tsx
new file mode 100644
index 00000000..26022c4a
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/production/ProcessDetailModal.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import React from "react";
+
+/* ------------------------------------------------------------------ */
+/* Types */
+/* ------------------------------------------------------------------ */
+
+export interface ProcessStep {
+ no: number;
+ name: string;
+ code: string;
+ status: "completed" | "in_progress" | "waiting" | "acceptable";
+ inputQty: number;
+ goodQty: number;
+ defectQty: number;
+ planQty: number;
+ availableQty: number;
+}
+
+interface ProcessDetailModalProps {
+ open: boolean;
+ onClose: () => void;
+ workInstructionNo: string;
+ totalQty: number;
+ steps: ProcessStep[];
+}
+
+/* ------------------------------------------------------------------ */
+/* Component */
+/* ------------------------------------------------------------------ */
+
+export function ProcessDetailModal({
+ open,
+ onClose,
+ workInstructionNo,
+ totalQty,
+ steps,
+}: ProcessDetailModalProps) {
+ if (!open) return null;
+
+ const completedCount = steps.filter((s) => s.status === "completed").length;
+ const overallPct = steps.length > 0 ? Math.round((completedCount / steps.length) * 100) : 0;
+
+ return (
+
+
+ {/* Header */}
+
+
+
공정 순서 상세
+
{workInstructionNo}
+
+
+
+
+ {/* Summary bar */}
+
+
+
+ 작업지시 총량
+
+ {totalQty.toLocaleString()} EA
+
+
+
+
+
+ {completedCount}/{steps.length} 공정
+
+
+
+
+
+ {/* Steps */}
+
+ {steps.map((s) => {
+ const borderColor =
+ s.status === "completed"
+ ? "border-green-400 bg-green-50"
+ : s.status === "in_progress"
+ ? "border-blue-400 bg-blue-50"
+ : s.status === "acceptable"
+ ? "border-amber-400 bg-amber-50"
+ : "border-gray-200 bg-gray-50";
+
+ const dotColor =
+ s.status === "completed"
+ ? "bg-green-500"
+ : s.status === "in_progress"
+ ? "bg-blue-500"
+ : s.status === "acceptable"
+ ? "bg-amber-500"
+ : "bg-gray-400";
+
+ const badge =
+ s.status === "completed" ? (
+
완료
+ ) : s.status === "in_progress" ? (
+
진행중
+ ) : s.status === "acceptable" ? (
+
접수가능
+ ) : (
+
대기
+ );
+
+ const barColor =
+ s.status === "completed"
+ ? "bg-green-500"
+ : s.status === "in_progress"
+ ? "bg-blue-500"
+ : s.status === "acceptable"
+ ? "bg-amber-500"
+ : "bg-gray-300";
+
+ const barTextColor =
+ s.status === "completed"
+ ? "text-green-600"
+ : s.status === "in_progress"
+ ? "text-blue-600"
+ : s.status === "acceptable"
+ ? "text-amber-600"
+ : "text-gray-400";
+
+ const pct = s.planQty > 0 ? Math.round((s.inputQty / s.planQty) * 100) : 0;
+ const unaccept = s.planQty - s.inputQty;
+
+ return (
+
+ {/* Header */}
+
+
+ {s.no}
+
+
+
+ {s.name}
+ {badge}
+
+
{s.code}
+
+
+
+ {/* Progress bar */}
+
+
+ {/* Qty grid */}
+
+
+
지시
+
{s.planQty.toLocaleString()}
+
+
+
접수
+
{s.inputQty.toLocaleString()}
+
+
+
양품
+
{s.goodQty.toLocaleString()}
+
+ {s.status === "completed" || s.status === "in_progress" ? (
+
+
불량
+
{s.defectQty.toLocaleString()}
+
+ ) : (
+
+
미접수
+
{Math.max(0, unaccept).toLocaleString()}
+
+ )}
+
+
+ {/* Additional accept qty */}
+ {s.status === "in_progress" && s.availableQty > 0 && (
+
+
+ 추가접수가능 {s.availableQty.toLocaleString()}
+
+
+ )}
+ {s.status === "acceptable" && s.availableQty > 0 && (
+
+
+ 접수가능 {s.availableQty.toLocaleString()}
+
+
+ )}
+
+ );
+ })}
+
+
+ {/* Footer */}
+
+
+
+
+
+ );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/production/ProcessTimer.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/production/ProcessTimer.tsx
new file mode 100644
index 00000000..65a2bec0
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/production/ProcessTimer.tsx
@@ -0,0 +1,243 @@
+"use client";
+
+import React, { useState, useEffect, useRef, useCallback } from "react";
+
+/* ------------------------------------------------------------------ */
+/* Types */
+/* ------------------------------------------------------------------ */
+
+export type TimerStatus = "idle" | "running" | "paused" | "completed";
+
+interface ProcessTimerProps {
+ status: TimerStatus;
+ /** ISO string or epoch — when the timer was first started */
+ startedAt: string | null;
+ /** ISO string or epoch — when paused (null if not paused) */
+ pausedAt: string | null;
+ /** Total paused seconds accumulated before current pause */
+ totalPausedSeconds: number;
+ /** Completed at timestamp */
+ completedAt: string | null;
+ /** Actual work time in seconds (from server, used when completed) */
+ actualWorkTime: number | null;
+ onStart: () => void;
+ onPause: () => void;
+ onResume: () => void;
+ onComplete: () => void;
+ disabled?: boolean;
+}
+
+/* ------------------------------------------------------------------ */
+/* Helpers */
+/* ------------------------------------------------------------------ */
+
+function formatTime(totalSeconds: number): string {
+ const h = Math.floor(totalSeconds / 3600);
+ const m = Math.floor((totalSeconds % 3600) / 60);
+ const s = totalSeconds % 60;
+ return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component */
+/* ------------------------------------------------------------------ */
+
+export function ProcessTimer({
+ status,
+ startedAt,
+ pausedAt,
+ totalPausedSeconds,
+ completedAt,
+ actualWorkTime,
+ onStart,
+ onPause,
+ onResume,
+ onComplete,
+ disabled = false,
+}: ProcessTimerProps) {
+ const [elapsed, setElapsed] = useState(0);
+ const intervalRef = useRef
(null);
+
+ const calcElapsed = useCallback(() => {
+ if (!startedAt) return 0;
+ const start = new Date(startedAt).getTime();
+ const now = Date.now();
+ let pausedMs = totalPausedSeconds * 1000;
+
+ // If currently paused, add time since pause started
+ if (pausedAt) {
+ const pauseStart = new Date(pausedAt).getTime();
+ pausedMs += now - pauseStart;
+ }
+
+ return Math.max(0, Math.floor((now - start - pausedMs) / 1000));
+ }, [startedAt, pausedAt, totalPausedSeconds]);
+
+ useEffect(() => {
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current);
+ intervalRef.current = null;
+ }
+
+ if (status === "completed" && actualWorkTime !== null) {
+ setElapsed(actualWorkTime);
+ return;
+ }
+
+ if (status === "running") {
+ setElapsed(calcElapsed());
+ intervalRef.current = setInterval(() => {
+ setElapsed(calcElapsed());
+ }, 1000);
+ } else if (status === "paused") {
+ setElapsed(calcElapsed());
+ } else if (status === "idle") {
+ setElapsed(0);
+ }
+
+ return () => {
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current);
+ }
+ };
+ }, [status, startedAt, pausedAt, totalPausedSeconds, actualWorkTime, calcElapsed]);
+
+ /* Color by status */
+ const colorMap: Record = {
+ idle: { bg: "bg-gray-50", text: "text-gray-400", border: "border-gray-200", ring: "ring-gray-200" },
+ running: { bg: "bg-blue-50", text: "text-blue-600", border: "border-blue-200", ring: "ring-blue-300" },
+ paused: { bg: "bg-amber-50", text: "text-amber-600", border: "border-amber-200", ring: "ring-amber-300" },
+ completed: { bg: "bg-green-50", text: "text-green-600", border: "border-green-200", ring: "ring-green-300" },
+ };
+
+ const colors = colorMap[status];
+ const statusLabels: Record = {
+ idle: "대기",
+ running: "진행중",
+ paused: "일시정지",
+ completed: "완료",
+ };
+
+ return (
+
+ {/* Status badge */}
+
+
+ {statusLabels[status]}
+
+ {status === "running" && (
+
+
+ 작업중
+
+ )}
+
+
+ {/* Timer display */}
+
+
+ {formatTime(elapsed)}
+
+ {startedAt && (
+
+ 시작: {new Date(startedAt).toLocaleTimeString("ko-KR")}
+ {completedAt && ` | 종료: ${new Date(completedAt).toLocaleTimeString("ko-KR")}`}
+
+ )}
+
+
+ {/* Buttons */}
+
+ {status === "idle" && (
+
+ )}
+
+ {status === "running" && (
+ <>
+
+
+
+ )}
+
+ {status === "paused" && (
+ <>
+
+
+
+ )}
+
+ {status === "completed" && (
+
+ )}
+
+
+
+
+
+
+
+
+ {KEYS.map((key) => (
+
+ ))}
+
+
+
+
+
+
+
공정을 찾을 수 없습니다
+
+
+ {/* ============================================================ */}
+ {/* Info Bar (Dark Header) */}
+ {/* ============================================================ */}
+
+
+
+ {wiInfo && (
+
+ 작업지시
+
+ {wiInfo.work_instruction_no}
+
+
+ )}
+ {wiInfo && (
+
+ 품목
+
+ {wiInfo.item_name}
+
+
+ )}
+ {batchBadge && (
+
+ {batchBadge.isMulti ? (
+
+ 다중 {batchBadge.index}/{batchBadge.total}{batchBadge.itemType ? ` · ${batchBadge.itemType}` : ""}
+
+ ) : (
+
+ 단일{batchBadge.itemType ? ` · ${batchBadge.itemType}` : ""}
+
+ )}
+
+ )}
+
+ 공정
+
+ {process.seq_no ? `${process.seq_no}. ` : ""}
+ {process.process_name || "공정"}
+
+
+
+ 지시
+
+ {parseInt(process.plan_qty || "0", 10).toLocaleString()}
+
+
+
+ 접수
+
+ {inputQty.toLocaleString()}
+
+
+
+ {/* Status badge */}
+
+ {isCompleted
+ ? "완료"
+ : process.status === "in_progress"
+ ? "진행중"
+ : process.status}
+
+ {process.is_rework === "Y" && (
+
+ 재작업
+
+ )}
+
+
+
+ {/* ============================================================ */}
+ {/* Main Layout: Sidebar(left) + Timer+Content(right) */}
+ {/* ============================================================ */}
+ {(hasChecklist || !isConfirmed || (isLastProcess && !inboundDone)) && (
+
+ {/* ========================================================= */}
+ {/* Left Sidebar (always visible) */}
+ {/* ========================================================= */}
+
+
+ {/* Checklist groups by phase */}
+ {availablePhases.map((phase) => {
+ const phaseGroups = groupsByPhase[phase] || [];
+ const phaseDone = phaseGroups.reduce(
+ (s, g) => s + g.completed,
+ 0,
+ );
+ const phaseTotal = phaseGroups.reduce((s, g) => s + g.total, 0);
+ const allDone = phaseDone >= phaseTotal && phaseTotal > 0;
+
+ return (
+
+
+
+
+ {PHASE_LABELS[phase] || phase}
+
+
+ {phaseDone}/{phaseTotal}
+
+
+ {phaseGroups.map((g) => {
+ const isSelected =
+ selectedGroupId === g.itemId &&
+ activeSection === "checklist";
+ const isDone = g.completed >= g.total && g.total > 0;
+ return (
+
+ );
+ })}
+
+ );
+ })}
+
+ {/* Result section link */}
+ {!isConfirmed && (
+
+ {/* 자재 투입 (설정으로 제어) */}
+ {peSettings.materialInput && (
+
+ )}
+
+
+
+ )}
+
+ {/* Inventory section link */}
+ {isLastProcess && (
+
+
+
+ )}
+
+
+
+ {/* ========================================================= */}
+ {/* Mobile Tabs (hidden — sidebar always visible) */}
+ {/* ========================================================= */}
+
+ {availablePhases.map((phase) => {
+ const phaseGroups = groupsByPhase[phase] || [];
+ const phaseDone = phaseGroups.reduce(
+ (s, g) => s + g.completed,
+ 0,
+ );
+ const phaseTotal = phaseGroups.reduce((s, g) => s + g.total, 0);
+ const isActive =
+ activeSection === "checklist" &&
+ selectedGroup &&
+ selectedGroup.phase === phase;
+ return (
+
+ );
+ })}
+ {!isConfirmed && (
+
+ )}
+ {isLastProcess && (
+
+ )}
+
+
+ {/* ========================================================= */}
+ {/* Right Column: Timer + Content */}
+ {/* ========================================================= */}
+
+ {/* Group Summary Bar (요약 정보만 표시) */}
+
+
+
+ {selectedGroup?.title || "그룹 선택"}
+
+ {selectedGroup && (
+ = selectedGroup.total &&
+ selectedGroup.total > 0
+ ? "bg-green-100 text-green-700"
+ : "bg-gray-100 text-gray-500"
+ }`}
+ >
+ 완료 {selectedGroup.completed}/{selectedGroup.total}
+
+ )}
+
+
+
+ {/* Content Area (scrollable) */}
+
+ {/* Checklist Content */}
+ {activeSection === "checklist" && selectedGroup && (
+
+ {/* Group header with timer */}
+
+
+
+ {PHASE_LABELS[selectedGroup.phase] ||
+ selectedGroup.phase}
+
+
+ {selectedGroup.title}
+
+
+
= selectedGroup.total &&
+ selectedGroup.total > 0
+ ? "bg-green-100 text-green-700"
+ : selectedGroup.timerStarted
+ ? "bg-blue-100 text-blue-700"
+ : "bg-gray-100 text-gray-500"
+ }`}
+ >
+ {selectedGroup.completed}/{selectedGroup.total}
+
+
+
+ {/* 그룹 타이머는 상단 통합 타이머로 이동 */}
+
+ {/* Mobile group navigation (sidebar not visible) */}
+
+ {(groupsByPhase[selectedGroup.phase] || []).map((g) => {
+ const isSelected = g.itemId === selectedGroupId;
+ const isDone = g.completed >= g.total && g.total > 0;
+ return (
+
+ );
+ })}
+
+
+ {/* Checklist items */}
+
+ {currentItems.map((item) => (
+
+ ))}
+ {currentItems.length === 0 && (
+
+ 체크리스트 항목이 없습니다
+
+ )}
+
+
+ )}
+
+ {/* ====== Material Input Content (설정) ====== */}
+ {activeSection === "material" && peSettings.materialInput && (
+
+ )}
+
+ {/* ====== Result Content ====== */}
+ {activeSection === "result" && !isConfirmed && (
+
+
+
+ 이번 차수 실적 입력
+ {remaining > 0 && (
+
+ 잔여: {remaining.toLocaleString()}
+
+ )}
+
+
+
+ {/* Production Qty */}
+
+
+ {/* Good Qty (자동 계산) */}
+
+
+ 양품
+
+
+ {goodQtyThisBatch > 0
+ ? `${goodQtyThisBatch.toLocaleString()} EA`
+ : "0 EA"}
+
+
+
+ {/* Defect */}
+
+
+ {/* Defect entries summary */}
+ {defectEntries.length > 0 && (
+
+ {defectEntries.map((de) => (
+
+ {de.defect_name}: {de.qty}개 (
+ {de.disposition === "scrap"
+ ? "폐기"
+ : de.disposition === "rework"
+ ? "재작업"
+ : "특채"}
+ )
+
+ ))}
+
+ )}
+
+ {/* 누적 현황 */}
+ {totalProduced > 0 && (
+
+ 누적: {totalProduced}/{inputQty} (
+ {Math.round((totalProduced / inputQty) * 100)}%)
+
+ )}
+
+ {/* Note */}
+