1913 lines
80 KiB
TypeScript
1913 lines
80 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* 작업자 화면 메인 컴포넌트 (기획서 기반 전면 개편)
|
|
*
|
|
* 구조:
|
|
* - 상단: 페이지 제목
|
|
* - 탭: 스크린/슬랫/절곡 (디폴트: 스크린)
|
|
* - 상태 카드 4개 (할일/작업중/완료/긴급)
|
|
* - 수주 정보 섹션 (읽기 전용)
|
|
* - 작업 정보 섹션 (생산담당자 셀렉트 + 생산일자)
|
|
* - 작업 목록 (WorkItemCard 나열)
|
|
* - 하단 고정 버튼 (작업일지보기 / 중간검사하기)
|
|
*/
|
|
|
|
import { useState, useMemo, useCallback, useEffect } from 'react';
|
|
import dynamic from 'next/dynamic';
|
|
import { useSidebarCollapsed } from '@/stores/menuStore';
|
|
import { ClipboardList, PlayCircle, CheckCircle2, AlertTriangle, ChevronDown, ChevronUp, List } from 'lucide-react';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
} from '@/components/ui/dialog';
|
|
import { ContentSkeleton } from '@/components/ui/skeleton';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { DatePicker } from '@/components/ui/date-picker';
|
|
import { Label } from '@/components/ui/label';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
|
|
import { Button } from '@/components/ui/button';
|
|
import { PageLayout } from '@/components/organisms/PageLayout';
|
|
import { cn } from '@/lib/utils';
|
|
import { toast } from 'sonner';
|
|
import { getMyWorkOrders, completeWorkOrder, saveItemInspection, getWorkOrderInspectionData, saveInspectionDocument, getInspectionTemplate, getStepProgress, toggleStepProgress, deleteMaterialInput, updateMaterialInput, getDepartments, getDepartmentUsers } from './actions';
|
|
import type { StepProgressItem, DepartmentOption, DepartmentUser } from './actions';
|
|
import type { InspectionTemplateData } from './types';
|
|
import { getProcessList } from '@/components/process-management/actions';
|
|
import type { InspectionSetting, Process } from '@/types/process';
|
|
import type { WorkOrder } from '../ProductionDashboard/types';
|
|
import { isNextRedirectError } from '@/lib/utils/redirect-error';
|
|
import type {
|
|
WorkerStats,
|
|
CompletionToastInfo,
|
|
MaterialInput,
|
|
ProcessTab,
|
|
WorkItemData,
|
|
WorkStepData,
|
|
MaterialListItem,
|
|
} from './types';
|
|
import { PROCESS_TAB_LABELS } from './types';
|
|
import { WorkItemCard } from './WorkItemCard';
|
|
import { CompletionConfirmDialog } from './CompletionConfirmDialog';
|
|
import { CompletionToast } from './CompletionToast';
|
|
import type { InspectionProcessType, InspectionData } from './InspectionInputModal';
|
|
|
|
const InspectionInputModal = dynamic(
|
|
() => import('./InspectionInputModal').then(mod => ({ default: mod.InspectionInputModal })),
|
|
);
|
|
const MaterialInputModal = dynamic(
|
|
() => import('./MaterialInputModal').then(mod => ({ default: mod.MaterialInputModal })),
|
|
);
|
|
const WorkLogModal = dynamic(
|
|
() => import('./WorkLogModal').then(mod => ({ default: mod.WorkLogModal })),
|
|
);
|
|
const IssueReportModal = dynamic(
|
|
() => import('./IssueReportModal').then(mod => ({ default: mod.IssueReportModal })),
|
|
);
|
|
const WorkCompletionResultDialog = dynamic(
|
|
() => import('./WorkCompletionResultDialog').then(mod => ({ default: mod.WorkCompletionResultDialog })),
|
|
);
|
|
const InspectionReportModal = dynamic(
|
|
() => import('../WorkOrders/documents').then(mod => ({ default: mod.InspectionReportModal })),
|
|
);
|
|
|
|
// ===== 목업 데이터 =====
|
|
const MOCK_ITEMS: Record<ProcessTab, WorkItemData[]> = {
|
|
screen: [
|
|
{
|
|
id: 'mock-s1', itemNo: 1, itemCode: 'KWWS03', itemName: '와이어', floor: '1층', code: 'FSS-01',
|
|
width: 8260, height: 8350, quantity: 2, processType: 'screen',
|
|
cuttingInfo: { width: 1210, sheets: 8 },
|
|
steps: [
|
|
{ id: 's1-1', name: '자재투입', isMaterialInput: true, isCompleted: true },
|
|
{ id: 's1-2', name: '절단', isMaterialInput: false, isCompleted: true },
|
|
{ id: 's1-3', name: '미싱', isMaterialInput: false, isCompleted: false },
|
|
{ id: 's1-4', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
|
|
{ id: 's1-5', name: '포장완료', isMaterialInput: false, isCompleted: false },
|
|
],
|
|
materialInputs: [
|
|
{ id: 'm1', lotNo: 'LOT-2026-001', itemName: '스크린 원단 A', quantity: 500, unit: 'm' },
|
|
{ id: 'm2', lotNo: 'LOT-2026-002', itemName: '와이어 B', quantity: 120, unit: 'EA' },
|
|
],
|
|
},
|
|
{
|
|
id: 'mock-s2', itemNo: 2, itemCode: 'KWWS05', itemName: '메쉬', floor: '2층', code: 'FSS-03',
|
|
width: 6400, height: 5200, quantity: 4, processType: 'screen',
|
|
cuttingInfo: { width: 1600, sheets: 4 },
|
|
steps: [
|
|
{ id: 's2-1', name: '자재투입', isMaterialInput: true, isCompleted: false },
|
|
{ id: 's2-2', name: '절단', isMaterialInput: false, isCompleted: false },
|
|
{ id: 's2-3', name: '미싱', isMaterialInput: false, isCompleted: false },
|
|
{ id: 's2-4', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
|
|
{ id: 's2-5', name: '포장완료', isMaterialInput: false, isCompleted: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'mock-s3', itemNo: 3, itemCode: 'KWWS08', itemName: '와이어(광폭)', floor: '3층', code: 'FSS-05',
|
|
width: 12000, height: 4500, quantity: 1, processType: 'screen',
|
|
cuttingInfo: { width: 2400, sheets: 5 },
|
|
steps: [
|
|
{ id: 's3-1', name: '자재투입', isMaterialInput: true, isCompleted: true },
|
|
{ id: 's3-2', name: '절단', isMaterialInput: false, isCompleted: true },
|
|
{ id: 's3-3', name: '미싱', isMaterialInput: false, isCompleted: true },
|
|
{ id: 's3-4', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
|
|
{ id: 's3-5', name: '포장완료', isMaterialInput: false, isCompleted: false },
|
|
],
|
|
materialInputs: [
|
|
{ id: 'm3', lotNo: 'LOT-2026-005', itemName: '광폭 원단', quantity: 300, unit: 'm' },
|
|
],
|
|
},
|
|
],
|
|
slat: [
|
|
{
|
|
id: 'mock-l1', itemNo: 1, itemCode: 'KQTS01', itemName: '슬랫코일', floor: '1층', code: 'FSS-01',
|
|
width: 8260, height: 8350, quantity: 2, processType: 'slat',
|
|
slatInfo: { length: 3910, slatCount: 40, jointBar: 4, glassQty: 2 },
|
|
steps: [
|
|
{ id: 'l1-1', name: '자재투입', isMaterialInput: true, isCompleted: true },
|
|
{ id: 'l1-2', name: '포밍/절단', isMaterialInput: false, isCompleted: false },
|
|
{ id: 'l1-3', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
|
|
{ id: 'l1-4', name: '포장완료', isMaterialInput: false, isCompleted: false },
|
|
],
|
|
materialInputs: [
|
|
{ id: 'm4', lotNo: 'LOT-2026-010', itemName: '슬랫 코일 A', quantity: 200, unit: 'kg' },
|
|
],
|
|
},
|
|
{
|
|
id: 'mock-l2', itemNo: 2, itemCode: 'KQTS03', itemName: '슬랫코일(광폭)', floor: '2층', code: 'FSS-02',
|
|
width: 10500, height: 6200, quantity: 3, processType: 'slat',
|
|
slatInfo: { length: 5200, slatCount: 55, jointBar: 6, glassQty: 3 },
|
|
steps: [
|
|
{ id: 'l2-1', name: '자재투입', isMaterialInput: true, isCompleted: false },
|
|
{ id: 'l2-2', name: '포밍/절단', isMaterialInput: false, isCompleted: false },
|
|
{ id: 'l2-3', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
|
|
{ id: 'l2-4', name: '포장완료', isMaterialInput: false, isCompleted: false },
|
|
],
|
|
},
|
|
],
|
|
bending: [
|
|
{
|
|
id: 'mock-b1', itemNo: 1, itemCode: 'KWWS03', itemName: '가이드레일', floor: '1층', code: 'FSS-01',
|
|
width: 0, height: 0, quantity: 6, processType: 'bending',
|
|
bendingInfo: {
|
|
common: {
|
|
kind: '혼합형 120X70', type: '혼합형',
|
|
lengthQuantities: [{ length: 4000, quantity: 6 }, { length: 3000, quantity: 6 }],
|
|
},
|
|
detailParts: [
|
|
{ partName: '엘바', material: 'EGI 1.6T', barcyInfo: '16 I 75' },
|
|
{ partName: '하장바', material: 'EGI 1.6T', barcyInfo: '16|75|16|75|16(A각)' },
|
|
],
|
|
},
|
|
steps: [
|
|
{ id: 'b1-1', name: '자재투입', isMaterialInput: true, isCompleted: true },
|
|
{ id: 'b1-2', name: '절단', isMaterialInput: false, isCompleted: true },
|
|
{ id: 'b1-3', name: '절곡', isMaterialInput: false, isCompleted: false },
|
|
{ id: 'b1-4', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
// 절곡 재공품 전용 목업 데이터 (토글로 전환)
|
|
const MOCK_ITEMS_BENDING_WIP: WorkItemData[] = [
|
|
{
|
|
id: 'mock-bw1', itemNo: 1, itemCode: 'KWWS03', itemName: '케이스 - 전면부', floor: '-', code: '-',
|
|
width: 0, height: 0, quantity: 6, processType: 'bending',
|
|
isWip: true,
|
|
wipInfo: { specification: 'EGI 1.55T (W576)', lengthQuantity: '4,000mm X 6개' },
|
|
steps: [
|
|
{ id: 'bw1-1', name: '자재투입', isMaterialInput: true, isCompleted: false },
|
|
{ id: 'bw1-2', name: '절단', isMaterialInput: false, isCompleted: false },
|
|
{ id: 'bw1-3', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'mock-bw2', itemNo: 2, itemCode: 'KWWS04', itemName: '케이스 - 후면부', floor: '-', code: '-',
|
|
width: 0, height: 0, quantity: 4, processType: 'bending',
|
|
isWip: true,
|
|
wipInfo: { specification: 'EGI 1.55T (W576)', lengthQuantity: '3,500mm X 4개' },
|
|
steps: [
|
|
{ id: 'bw2-1', name: '자재투입', isMaterialInput: true, isCompleted: false },
|
|
{ id: 'bw2-2', name: '절단', isMaterialInput: false, isCompleted: false },
|
|
{ id: 'bw2-3', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
|
|
],
|
|
},
|
|
{
|
|
id: 'mock-bw3', itemNo: 3, itemCode: 'KWWS05', itemName: '하단마감재', floor: '-', code: '-',
|
|
width: 0, height: 0, quantity: 10, processType: 'bending',
|
|
isWip: true,
|
|
wipInfo: { specification: 'EGI 1.2T (W400)', lengthQuantity: '2,800mm X 10개' },
|
|
steps: [
|
|
{ id: 'bw3-1', name: '자재투입', isMaterialInput: true, isCompleted: false },
|
|
{ id: 'bw3-2', name: '절단', isMaterialInput: false, isCompleted: false },
|
|
{ id: 'bw3-3', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
|
|
],
|
|
},
|
|
];
|
|
|
|
// 슬랫 조인트바 전용 목업 데이터 (토글로 전환)
|
|
const MOCK_ITEMS_SLAT_JOINTBAR: WorkItemData[] = [
|
|
{
|
|
id: 'mock-jb1', itemNo: 1, itemCode: 'KQJB01', itemName: '조인트바 A', floor: '1층', code: 'FSS-01',
|
|
width: 0, height: 0, quantity: 8, processType: 'slat',
|
|
isJointBar: true,
|
|
slatJointBarInfo: { specification: 'EGI 1.6T', length: 3910, quantity: 8 },
|
|
steps: [
|
|
{ id: 'jb1-1', name: '자재투입', isMaterialInput: true, isCompleted: true },
|
|
{ id: 'jb1-2', name: '포밍/절단', isMaterialInput: false, isCompleted: false },
|
|
{ id: 'jb1-3', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
|
|
{ id: 'jb1-4', name: '포장완료', isMaterialInput: false, isCompleted: false },
|
|
],
|
|
materialInputs: [
|
|
{ id: 'mjb1', lotNo: 'LOT-2026-020', itemName: '조인트바 코일', quantity: 100, unit: 'kg' },
|
|
],
|
|
},
|
|
{
|
|
id: 'mock-jb2', itemNo: 2, itemCode: 'KQJB02', itemName: '조인트바 B', floor: '2층', code: 'FSS-02',
|
|
width: 0, height: 0, quantity: 12, processType: 'slat',
|
|
isJointBar: true,
|
|
slatJointBarInfo: { specification: 'EGI 1.6T', length: 5200, quantity: 12 },
|
|
steps: [
|
|
{ id: 'jb2-1', name: '자재투입', isMaterialInput: true, isCompleted: false },
|
|
{ id: 'jb2-2', name: '포밍/절단', isMaterialInput: false, isCompleted: false },
|
|
{ id: 'jb2-3', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
|
|
{ id: 'jb2-4', name: '포장완료', isMaterialInput: false, isCompleted: false },
|
|
],
|
|
},
|
|
];
|
|
|
|
// 사이드바 작업지시 목업 데이터
|
|
interface SidebarOrder {
|
|
id: string;
|
|
siteName: string;
|
|
date: string;
|
|
quantity: number;
|
|
shutterCount: number;
|
|
priority: 'urgent' | 'priority' | 'normal';
|
|
subType?: 'slat' | 'jointbar' | 'bending' | 'wip';
|
|
}
|
|
|
|
// 스크린: subType 없음 / 슬랫: slat|jointbar / 절곡: bending|wip
|
|
const MOCK_SIDEBAR_ORDERS: Record<ProcessTab, SidebarOrder[]> = {
|
|
screen: [
|
|
{ id: 'order-s1', siteName: '현장명', date: '2024-09-24', quantity: 7, shutterCount: 5, priority: 'urgent' },
|
|
{ id: 'order-s2', siteName: '현장명', date: '2024-09-24', quantity: 7, shutterCount: 5, priority: 'priority' },
|
|
{ id: 'order-s3', siteName: '현장명', date: '2024-09-24', quantity: 7, shutterCount: 5, priority: 'normal' },
|
|
{ id: 'order-s4', siteName: '현장명', date: '2024-09-24', quantity: 7, shutterCount: 5, priority: 'normal' },
|
|
],
|
|
slat: [
|
|
{ id: 'order-l1', siteName: '현장명A', date: '2024-09-24', quantity: 7, shutterCount: 5, priority: 'urgent', subType: 'slat' },
|
|
{ id: 'order-l2', siteName: '현장명B', date: '2024-09-24', quantity: 3, shutterCount: 2, priority: 'priority', subType: 'jointbar' },
|
|
{ id: 'order-l3', siteName: '현장명C', date: '2024-09-24', quantity: 5, shutterCount: 4, priority: 'normal', subType: 'slat' },
|
|
{ id: 'order-l4', siteName: '현장명D', date: '2024-09-24', quantity: 4, shutterCount: 3, priority: 'normal', subType: 'jointbar' },
|
|
],
|
|
bending: [
|
|
{ id: 'order-b1', siteName: '현장명A', date: '2024-09-24', quantity: 7, shutterCount: 5, priority: 'urgent', subType: 'bending' },
|
|
{ id: 'order-b2', siteName: '현장명B', date: '2024-09-24', quantity: 3, shutterCount: 2, priority: 'priority', subType: 'wip' },
|
|
{ id: 'order-b3', siteName: '현장명C', date: '2024-09-24', quantity: 5, shutterCount: 4, priority: 'normal', subType: 'bending' },
|
|
{ id: 'order-b4', siteName: '현장명D', date: '2024-09-24', quantity: 4, shutterCount: 3, priority: 'normal', subType: 'wip' },
|
|
],
|
|
};
|
|
|
|
const SUB_TYPE_TAGS: Record<string, { label: string; className: string }> = {
|
|
slat: { label: '슬랫', className: 'bg-blue-100 text-blue-700' },
|
|
jointbar: { label: '조인트바', className: 'bg-purple-100 text-purple-700' },
|
|
bending: { label: '절곡', className: 'bg-amber-100 text-amber-700' },
|
|
wip: { label: '재공품', className: 'bg-orange-100 text-orange-700' },
|
|
};
|
|
|
|
const PRIORITY_GROUPS = [
|
|
{ key: 'urgent' as const, label: '긴급', color: 'text-red-600' },
|
|
{ key: 'priority' as const, label: '우선', color: 'text-orange-600' },
|
|
{ key: 'normal' as const, label: '일반', color: 'text-gray-600' },
|
|
];
|
|
|
|
// 하드코딩된 공정별 단계 폴백
|
|
const PROCESS_STEPS: Record<string, { name: string; isMaterialInput: boolean; isInspection?: boolean }[]> = {
|
|
screen: [
|
|
{ name: '자재투입', isMaterialInput: true },
|
|
{ name: '절단', isMaterialInput: false },
|
|
{ name: '미싱', isMaterialInput: false },
|
|
{ name: '중간검사', isMaterialInput: false, isInspection: true },
|
|
{ name: '포장완료', isMaterialInput: false },
|
|
],
|
|
slat: [
|
|
{ name: '자재투입', isMaterialInput: true },
|
|
{ name: '포밍/절단', isMaterialInput: false },
|
|
{ name: '중간검사', isMaterialInput: false, isInspection: true },
|
|
{ name: '포장완료', isMaterialInput: false },
|
|
],
|
|
bending: [
|
|
{ name: '자재투입', isMaterialInput: true },
|
|
{ name: '절단', isMaterialInput: false },
|
|
{ name: '절곡', isMaterialInput: false },
|
|
{ name: '중간검사', isMaterialInput: false, isInspection: true },
|
|
],
|
|
bending_wip: [
|
|
{ name: '자재투입', isMaterialInput: true },
|
|
{ name: '절단', isMaterialInput: false },
|
|
{ name: '중간검사', isMaterialInput: false, isInspection: true },
|
|
],
|
|
};
|
|
|
|
export default function WorkerScreen() {
|
|
// ===== 상태 관리 =====
|
|
const sidebarCollapsed = useSidebarCollapsed();
|
|
const [workOrders, setWorkOrders] = useState<WorkOrder[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [activeTab, setActiveTab] = useState<string>('');
|
|
const [bendingSubMode, setBendingSubMode] = useState<'normal' | 'wip'>('normal');
|
|
const [slatSubMode, setSlatSubMode] = useState<'normal' | 'jointbar'>('normal');
|
|
|
|
// 작업 정보
|
|
const [departmentId, setDepartmentId] = useState('');
|
|
const [productionManagerId, setProductionManagerId] = useState('');
|
|
const [productionDate, setProductionDate] = useState('');
|
|
const [departmentList, setDepartmentList] = useState<DepartmentOption[]>([]);
|
|
const [departmentUsers, setDepartmentUsers] = useState<DepartmentUser[]>([]);
|
|
|
|
// 좌측 사이드바
|
|
const [selectedSidebarOrderId, setSelectedSidebarOrderId] = useState<string>('');
|
|
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
|
|
|
// 공정별 step 완료 상태: { [itemId-stepName]: boolean }
|
|
const [stepCompletionMap, setStepCompletionMap] = useState<Record<string, boolean>>({});
|
|
|
|
// 작업지시별 단계 진행 캐시: { [workOrderId]: StepProgressItem[] }
|
|
const [stepProgressMap, setStepProgressMap] = useState<Record<string, StepProgressItem[]>>({});
|
|
|
|
// 데이터 로드
|
|
const loadData = useCallback(async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const result = await getMyWorkOrders();
|
|
if (result.success) {
|
|
setWorkOrders(result.data);
|
|
} else {
|
|
toast.error(result.error || '작업 목록 조회에 실패했습니다.');
|
|
}
|
|
} catch (error) {
|
|
if (isNextRedirectError(error)) throw error;
|
|
console.error('[WorkerScreen] loadData error:', error);
|
|
toast.error('데이터 로드 중 오류가 발생했습니다.');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
// 부서 목록 로드
|
|
getDepartments().then((res) => {
|
|
if (res.success) setDepartmentList(res.data);
|
|
});
|
|
}, [loadData]);
|
|
|
|
// 부서 선택 시 해당 부서 사용자 목록 로드
|
|
useEffect(() => {
|
|
if (!departmentId) {
|
|
setDepartmentUsers([]);
|
|
setProductionManagerId('');
|
|
return;
|
|
}
|
|
getDepartmentUsers(Number(departmentId)).then((res) => {
|
|
if (res.success) {
|
|
setDepartmentUsers(res.data);
|
|
} else {
|
|
setDepartmentUsers([]);
|
|
}
|
|
setProductionManagerId('');
|
|
});
|
|
}, [departmentId]);
|
|
|
|
// PC에서 사이드바 sticky 동작을 위해 main의 overflow 임시 해제
|
|
useEffect(() => {
|
|
const mainEl = document.querySelector('main');
|
|
if (!mainEl) return;
|
|
const original = mainEl.style.overflow;
|
|
mainEl.style.overflow = 'visible';
|
|
return () => {
|
|
mainEl.style.overflow = original;
|
|
};
|
|
}, []);
|
|
|
|
// 모달/다이얼로그 상태
|
|
const [selectedOrder, setSelectedOrder] = useState<WorkOrder | null>(null);
|
|
const [isCompletionDialogOpen, setIsCompletionDialogOpen] = useState(false);
|
|
const [isMaterialModalOpen, setIsMaterialModalOpen] = useState(false);
|
|
const [selectedWorkOrderItemId, setSelectedWorkOrderItemId] = useState<number | undefined>();
|
|
const [selectedWorkOrderItemIds, setSelectedWorkOrderItemIds] = useState<number[] | undefined>();
|
|
const [selectedWorkOrderItemName, setSelectedWorkOrderItemName] = useState<string | undefined>();
|
|
const [isWorkLogModalOpen, setIsWorkLogModalOpen] = useState(false);
|
|
const [isInspectionModalOpen, setIsInspectionModalOpen] = useState(false);
|
|
const [isIssueReportModalOpen, setIsIssueReportModalOpen] = useState(false);
|
|
const [isInspectionInputModalOpen, setIsInspectionInputModalOpen] = useState(false);
|
|
// 공정의 중간검사 설정
|
|
const [currentInspectionSetting, setCurrentInspectionSetting] = useState<InspectionSetting | undefined>();
|
|
// 문서 템플릿 데이터 (document_template 기반 동적 검사용)
|
|
const [inspectionTemplateData, setInspectionTemplateData] = useState<InspectionTemplateData | undefined>();
|
|
const [inspectionDimensions, setInspectionDimensions] = useState<{ width?: number; height?: number }>({});
|
|
// 검사 클릭 시 해당 step name 추적 (하드코딩 '중간검사' 제거용)
|
|
const [inspectionStepName, setInspectionStepName] = useState<string>('');
|
|
|
|
// 중간검사 체크 상태 관리: { [itemId]: boolean }
|
|
const [inspectionCheckedMap, setInspectionCheckedMap] = useState<Record<string, boolean>>({});
|
|
|
|
// 체크된 검사 항목 수 계산
|
|
const checkedInspectionCount = useMemo(() => {
|
|
return Object.values(inspectionCheckedMap).filter(Boolean).length;
|
|
}, [inspectionCheckedMap]);
|
|
|
|
// 중간검사 완료 데이터 관리
|
|
const [inspectionDataMap, setInspectionDataMap] = useState<Map<string, InspectionData>>(new Map());
|
|
|
|
// 전량완료 흐름 상태
|
|
const [isCompletionFlow, setIsCompletionFlow] = useState(false);
|
|
const [isCompletionResultOpen, setIsCompletionResultOpen] = useState(false);
|
|
const [completionLotNo, setCompletionLotNo] = useState('');
|
|
|
|
// 투입된 자재 관리 (orderId -> MaterialInput[])
|
|
const [inputMaterialsMap, setInputMaterialsMap] = useState<Map<string, MaterialInput[]>>(
|
|
new Map()
|
|
);
|
|
|
|
// 자재 수정 Dialog 상태
|
|
const [editMaterialTarget, setEditMaterialTarget] = useState<{ itemId: string; material: MaterialListItem } | null>(null);
|
|
const [editMaterialQty, setEditMaterialQty] = useState('');
|
|
|
|
// 완료 토스트 상태
|
|
const [toastInfo, setToastInfo] = useState<CompletionToastInfo | null>(null);
|
|
|
|
// 공정 목록 캐시
|
|
const [processListCache, setProcessListCache] = useState<Process[]>([]);
|
|
|
|
// 공정 목록 조회 (최초 1회)
|
|
useEffect(() => {
|
|
const fetchProcessList = async () => {
|
|
try {
|
|
const result = await getProcessList({ size: 100 });
|
|
if (result.success && result.data?.items) {
|
|
setProcessListCache(result.data.items);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch process list:', error);
|
|
}
|
|
};
|
|
fetchProcessList();
|
|
}, []);
|
|
|
|
// 활성 공정 목록 (탭용) - 공정관리에서 등록된 활성 공정만
|
|
const processTabs = useMemo(() => {
|
|
return processListCache.filter((p) => p.status === '사용중');
|
|
}, [processListCache]);
|
|
|
|
// 공정 목록 로드 후 첫 번째 공정을 기본 선택
|
|
useEffect(() => {
|
|
if (processTabs.length > 0 && !activeTab) {
|
|
setActiveTab(processTabs[0].id);
|
|
}
|
|
}, [processTabs, activeTab]);
|
|
|
|
// 선택된 공정의 ProcessTab 키 (mock 데이터 및 기존 로직 호환용)
|
|
const activeProcessTabKey: ProcessTab = useMemo(() => {
|
|
const process = processListCache.find((p) => p.id === activeTab);
|
|
if (!process) return 'screen';
|
|
const name = process.processName.toLowerCase();
|
|
if (name.includes('스크린')) return 'screen';
|
|
if (name.includes('슬랫')) return 'slat';
|
|
if (name.includes('절곡')) return 'bending';
|
|
return 'screen';
|
|
}, [activeTab, processListCache]);
|
|
|
|
// 선택된 공정의 작업일지/검사성적서 설정
|
|
const activeProcessSettings = useMemo(() => {
|
|
const process = processListCache.find((p) => p.id === activeTab);
|
|
return {
|
|
needsWorkLog: process?.needsWorkLog ?? false,
|
|
hasDocumentTemplate: !!process?.documentTemplateId,
|
|
workLogTemplateId: process?.workLogTemplateId,
|
|
workLogTemplateName: process?.workLogTemplateName,
|
|
};
|
|
}, [activeTab, processListCache]);
|
|
|
|
// activeTab 변경 시 해당 공정의 중간검사 설정 조회
|
|
useEffect(() => {
|
|
if (processListCache.length === 0 || !activeTab) return;
|
|
|
|
const matchedProcess = processListCache.find((p) => p.id === activeTab);
|
|
|
|
if (matchedProcess?.steps) {
|
|
const inspectionStep = matchedProcess.steps.find(
|
|
(step) => step.needsInspection && step.inspectionSetting
|
|
);
|
|
setCurrentInspectionSetting(inspectionStep?.inspectionSetting);
|
|
} else {
|
|
setCurrentInspectionSetting(undefined);
|
|
}
|
|
}, [activeTab, processListCache]);
|
|
|
|
// ===== 작업지시 선택 시 단계 진행 데이터 로드 =====
|
|
useEffect(() => {
|
|
if (!selectedSidebarOrderId) return;
|
|
if (selectedSidebarOrderId.startsWith('order-')) return;
|
|
|
|
const loadStepProgress = async () => {
|
|
try {
|
|
const result = await getStepProgress(selectedSidebarOrderId);
|
|
if (result.success) {
|
|
setStepProgressMap((prev) => ({ ...prev, [selectedSidebarOrderId]: result.data }));
|
|
}
|
|
} catch {
|
|
// step progress 로드 실패 시 무시
|
|
}
|
|
};
|
|
loadStepProgress();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [selectedSidebarOrderId]);
|
|
|
|
// ===== 탭별 필터링된 작업 =====
|
|
const filteredWorkOrders = useMemo(() => {
|
|
const selectedProcess = processListCache.find((p) => p.id === activeTab);
|
|
if (!selectedProcess) return workOrders;
|
|
|
|
const selectedName = selectedProcess.processName.toLowerCase();
|
|
return workOrders.filter((order) => {
|
|
const orderProcessName = (order.processName || '').toLowerCase();
|
|
return orderProcessName.includes(selectedName) || selectedName.includes(orderProcessName);
|
|
});
|
|
}, [workOrders, activeTab, processListCache]);
|
|
|
|
// ===== API WorkOrders → SidebarOrder 변환 =====
|
|
const apiSidebarOrders: SidebarOrder[] = useMemo(() => {
|
|
return filteredWorkOrders.map((wo) => ({
|
|
id: wo.id,
|
|
siteName: wo.projectName || wo.client || '-',
|
|
date: wo.dueDate || (wo.createdAt ? wo.createdAt.slice(0, 10) : '-'),
|
|
quantity: wo.quantity,
|
|
shutterCount: wo.shutterCount || 0,
|
|
priority: (wo.isUrgent ? 'urgent' : (wo.priority <= 3 ? 'priority' : 'normal')) as SidebarOrder['priority'],
|
|
}));
|
|
}, [filteredWorkOrders]);
|
|
|
|
// ===== 탭 변경/데이터 로드 시 최상위 우선순위 작업 자동 선택 =====
|
|
useEffect(() => {
|
|
if (isLoading) return;
|
|
|
|
const allOrders: SidebarOrder[] = [...apiSidebarOrders, ...MOCK_SIDEBAR_ORDERS[activeProcessTabKey]];
|
|
|
|
// 현재 선택이 유효하면 자동 전환하지 않음 (데이터 새로고침 시 선택 유지)
|
|
if (selectedSidebarOrderId && allOrders.some((o) => o.id === selectedSidebarOrderId)) {
|
|
return;
|
|
}
|
|
|
|
// API 작업지시 우선 선택 (부서/담당자 연동을 위해)
|
|
if (apiSidebarOrders.length > 0) {
|
|
const firstApi = apiSidebarOrders[0];
|
|
setSelectedSidebarOrderId(firstApi.id);
|
|
if (activeProcessTabKey === 'slat') {
|
|
setSlatSubMode(firstApi.subType === 'jointbar' ? 'jointbar' : 'normal');
|
|
}
|
|
if (activeProcessTabKey === 'bending') {
|
|
setBendingSubMode(firstApi.subType === 'wip' ? 'wip' : 'normal');
|
|
}
|
|
return;
|
|
}
|
|
|
|
// API 작업지시 없으면 목업에서 우선순위 순서: urgent → priority → normal
|
|
for (const group of PRIORITY_GROUPS) {
|
|
const first = allOrders.find((o) => o.priority === group.key);
|
|
if (first) {
|
|
setSelectedSidebarOrderId(first.id);
|
|
if (activeProcessTabKey === 'slat') {
|
|
setSlatSubMode(first.subType === 'jointbar' ? 'jointbar' : 'normal');
|
|
}
|
|
if (activeProcessTabKey === 'bending') {
|
|
setBendingSubMode(first.subType === 'wip' ? 'wip' : 'normal');
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
}, [isLoading, apiSidebarOrders, activeProcessTabKey, selectedSidebarOrderId]);
|
|
|
|
// ===== 통계 계산 (탭별) =====
|
|
const stats: WorkerStats = useMemo(() => {
|
|
return {
|
|
assigned: filteredWorkOrders.length,
|
|
inProgress: filteredWorkOrders.filter((o) => o.status === 'inProgress').length,
|
|
completed: 0,
|
|
urgent: filteredWorkOrders.filter((o) => o.isUrgent).length,
|
|
};
|
|
}, [filteredWorkOrders]);
|
|
|
|
// ===== 선택된 작업지시의 개소별 WorkItemData 변환 + 목업 =====
|
|
|
|
// 현재 활성 공정의 단계 설정 (processListCache 기반)
|
|
const activeProcessSteps = useMemo(() => {
|
|
const process = processListCache.find((p) => p.id === activeTab);
|
|
return process?.steps || [];
|
|
}, [activeTab, processListCache]);
|
|
|
|
const workItems: WorkItemData[] = useMemo(() => {
|
|
const selectedOrder = filteredWorkOrders.find((wo) => wo.id === selectedSidebarOrderId);
|
|
const stepsKey = (activeProcessTabKey === 'bending' && bendingSubMode === 'wip') ? 'bending_wip' : activeProcessTabKey;
|
|
const hardcodedSteps = PROCESS_STEPS[stepsKey];
|
|
|
|
// 공정관리 API에서 가져온 단계가 있으면 우선 사용, 없으면 하드코딩 폴백
|
|
const useApiSteps = activeProcessSteps.length > 0;
|
|
const stepsTemplate: { name: string; isMaterialInput: boolean; isInspection?: boolean }[] = useApiSteps
|
|
? activeProcessSteps
|
|
.filter((ps) => ps.isActive)
|
|
.sort((a, b) => a.order - b.order)
|
|
.map((ps) => ({
|
|
name: ps.stepName,
|
|
isMaterialInput: ps.stepName.includes('자재투입'),
|
|
isInspection: ps.needsInspection,
|
|
}))
|
|
: hardcodedSteps;
|
|
|
|
// step에 API 설정 속성을 매칭하는 헬퍼
|
|
const orderProgress = stepProgressMap[selectedSidebarOrderId || ''] || [];
|
|
const enrichStep = (st: { name: string; isMaterialInput: boolean; isInspection?: boolean }, stepId: string, stepKey: string, apiItemId?: number) => {
|
|
const matched = activeProcessSteps.find((ps) => ps.stepName === st.name);
|
|
// stepProgress 매칭 (개소별: work_order_item_id로 필터)
|
|
const spMatch = orderProgress.find((sp) =>
|
|
sp.step_name === st.name &&
|
|
(sp.work_order_item_id === null || sp.work_order_item_id === (apiItemId ?? null))
|
|
);
|
|
return {
|
|
id: stepId,
|
|
name: st.name,
|
|
isMaterialInput: st.isMaterialInput,
|
|
isInspection: matched ? matched.needsInspection : (st.isInspection || false),
|
|
isCompleted: stepKey in stepCompletionMap ? stepCompletionMap[stepKey] : (spMatch?.is_completed || false),
|
|
stepProgressId: spMatch?.id,
|
|
needsInspection: matched?.needsInspection,
|
|
connectionType: matched?.connectionType,
|
|
connectionTarget: matched?.connectionTarget,
|
|
completionType: matched?.completionType,
|
|
};
|
|
};
|
|
|
|
const apiItems: WorkItemData[] = [];
|
|
|
|
if (selectedOrder && selectedOrder.nodeGroups && selectedOrder.nodeGroups.length > 0) {
|
|
// 개소별로 WorkItemData 생성
|
|
selectedOrder.nodeGroups.forEach((group, index) => {
|
|
const nodeKey = group.nodeId != null ? String(group.nodeId) : `unassigned-${index}`;
|
|
const firstItem = group.items[0];
|
|
const firstItemId = firstItem?.id as number | undefined;
|
|
const steps: WorkStepData[] = stepsTemplate.map((st, si) => {
|
|
const stepKey = `${selectedOrder.id}-${nodeKey}-${st.name}`;
|
|
return enrichStep(st, `${selectedOrder.id}-${nodeKey}-step-${si}`, stepKey, firstItemId);
|
|
});
|
|
|
|
// 개소 내 아이템 이름 요약
|
|
const itemNames = group.items.map((it) => it.itemName).filter(Boolean);
|
|
const itemSummary = itemNames.length > 0 ? itemNames.join(', ') : '-';
|
|
const opts = (firstItem?.options || {}) as Record<string, unknown>;
|
|
|
|
// 개소별 투입 자재 매핑 (로컬 오버라이드 > API 초기 데이터)
|
|
const itemMapKey = firstItem?.id ? `${selectedOrder.id}-item-${firstItem.id}` : '';
|
|
const savedMats = inputMaterialsMap.get(itemMapKey) || inputMaterialsMap.get(selectedOrder.id);
|
|
let materialInputsList: MaterialListItem[];
|
|
if (savedMats) {
|
|
materialInputsList = savedMats.map((m) => ({ id: m.id, lotNo: m.lotNo, itemName: m.materialName, quantity: m.inputQuantity, unit: m.unit }));
|
|
} else {
|
|
// API 초기 데이터에서 투입 이력 추출
|
|
const apiMaterialInputs = group.items.flatMap((it) => it.materialInputs || []);
|
|
materialInputsList = apiMaterialInputs.map((mi) => ({
|
|
id: String(mi.id),
|
|
lotNo: mi.lotNo || '',
|
|
itemName: mi.materialName || '',
|
|
quantity: mi.qty,
|
|
unit: mi.unit,
|
|
}));
|
|
}
|
|
|
|
// API 데이터에서 자재투입 이력이 있으면 자재투입 step 완료 처리
|
|
if (materialInputsList.length > 0) {
|
|
const matStep = steps.find((s) => s.isMaterialInput);
|
|
if (matStep && !matStep.isCompleted) {
|
|
matStep.isCompleted = true;
|
|
}
|
|
}
|
|
|
|
// 개소 내 모든 item IDs 수집 (절곡 공정 등에서 복수 items)
|
|
const allItemIds = group.items.map((it) => it.id as number).filter(Boolean);
|
|
|
|
const workItem: WorkItemData = {
|
|
id: `${selectedOrder.id}-node-${nodeKey}`,
|
|
apiItemId: firstItem?.id as number | undefined,
|
|
apiItemIds: allItemIds.length > 0 ? allItemIds : undefined,
|
|
workOrderId: selectedOrder.id,
|
|
itemNo: index + 1,
|
|
itemCode: selectedOrder.orderNo || '-',
|
|
itemName: selectedOrder.productCode !== '-' ? selectedOrder.productCode : itemSummary,
|
|
floor: (opts.floor as string) || '-',
|
|
code: (opts.code as string) || '-',
|
|
width: (opts.width as number) || 0,
|
|
height: (opts.height as number) || 0,
|
|
quantity: group.totalQuantity,
|
|
processType: activeProcessTabKey,
|
|
steps,
|
|
materialInputs: materialInputsList,
|
|
};
|
|
|
|
// 공정별 추가 정보 추출
|
|
if (opts.cutting_info) {
|
|
const ci = opts.cutting_info as { width: number; sheets: number };
|
|
workItem.cuttingInfo = { width: ci.width, sheets: ci.sheets };
|
|
}
|
|
if (opts.slat_info) {
|
|
const si = opts.slat_info as { length: number; slat_count: number; joint_bar: number; glass_qty: number };
|
|
workItem.slatInfo = { length: si.length, slatCount: si.slat_count, jointBar: si.joint_bar, glassQty: si.glass_qty || 0 };
|
|
}
|
|
if (opts.bending_info) {
|
|
const bi = opts.bending_info as {
|
|
common: { kind: string; type: string; length_quantities: { length: number; quantity: number }[] };
|
|
detail_parts: { part_name: string; material: string; barcy_info: string }[];
|
|
};
|
|
workItem.bendingInfo = {
|
|
common: { kind: bi.common?.kind || '', type: bi.common?.type || '', lengthQuantities: bi.common?.length_quantities || [] },
|
|
detailParts: (bi.detail_parts || []).map(dp => ({ partName: dp.part_name, material: dp.material, barcyInfo: dp.barcy_info })),
|
|
};
|
|
}
|
|
if (opts.is_wip) {
|
|
workItem.isWip = true;
|
|
const wi = opts.wip_info as { specification: string; length_quantity: string; drawing_url?: string } | undefined;
|
|
if (wi) {
|
|
workItem.wipInfo = { specification: wi.specification, lengthQuantity: wi.length_quantity, drawingUrl: wi.drawing_url };
|
|
}
|
|
}
|
|
if (opts.is_joint_bar) {
|
|
workItem.isJointBar = true;
|
|
const jb = opts.slat_joint_bar_info as { specification: string; length: number; quantity: number } | undefined;
|
|
if (jb) workItem.slatJointBarInfo = jb;
|
|
}
|
|
|
|
apiItems.push(workItem);
|
|
});
|
|
} else if (selectedOrder) {
|
|
// nodeGroups가 없는 경우 폴백 (단일 항목)
|
|
const steps: WorkStepData[] = stepsTemplate.map((st, si) => {
|
|
const stepKey = `${selectedOrder.id}-${st.name}`;
|
|
return enrichStep(st, `${selectedOrder.id}-step-${si}`, stepKey);
|
|
});
|
|
const fallbackMats = inputMaterialsMap.get(selectedOrder.id);
|
|
const fallbackMaterialsList: MaterialListItem[] = fallbackMats
|
|
? fallbackMats.map((m) => ({ id: m.id, lotNo: m.lotNo, itemName: m.materialName, quantity: m.inputQuantity, unit: m.unit }))
|
|
: [];
|
|
apiItems.push({
|
|
id: selectedOrder.id,
|
|
workOrderId: selectedOrder.id,
|
|
itemNo: 1,
|
|
itemCode: selectedOrder.orderNo || '-',
|
|
itemName: selectedOrder.productCode !== '-' ? selectedOrder.productCode : (selectedOrder.productName || '-'),
|
|
floor: '-',
|
|
code: '-',
|
|
width: 0,
|
|
height: 0,
|
|
quantity: selectedOrder.quantity || 0,
|
|
processType: activeProcessTabKey,
|
|
steps,
|
|
materialInputs: fallbackMaterialsList,
|
|
});
|
|
}
|
|
|
|
// 목업 데이터 합치기 (API 데이터 뒤에 번호 이어서)
|
|
// 절곡 탭에서 재공품 서브모드면 WIP 전용 목업 사용
|
|
// 슬랫 탭에서 조인트바 서브모드면 조인트바 전용 목업 사용
|
|
const baseMockItems = (activeProcessTabKey === 'bending' && bendingSubMode === 'wip')
|
|
? MOCK_ITEMS_BENDING_WIP
|
|
: (activeProcessTabKey === 'slat' && slatSubMode === 'jointbar')
|
|
? MOCK_ITEMS_SLAT_JOINTBAR
|
|
: MOCK_ITEMS[activeProcessTabKey];
|
|
const mockItems = baseMockItems.map((item, i) => ({
|
|
...item,
|
|
itemNo: apiItems.length + i + 1,
|
|
steps: item.steps.map((step) => {
|
|
const stepKey = `${item.id}-${step.name}`;
|
|
return {
|
|
...step,
|
|
isCompleted: stepCompletionMap[stepKey] ?? step.isCompleted,
|
|
};
|
|
}),
|
|
}));
|
|
|
|
return [...apiItems, ...mockItems];
|
|
}, [filteredWorkOrders, selectedSidebarOrderId, activeProcessTabKey, stepCompletionMap, bendingSubMode, slatSubMode, activeProcessSteps, inputMaterialsMap, stepProgressMap]);
|
|
|
|
// ===== 작업지시 선택 시 기존 검사 데이터 로드 =====
|
|
// workItems 선언 이후에 위치해야 workItems.length 참조 가능
|
|
// workItems.length 의존성: selectedSidebarOrderId 변경 시점에 workItems가 아직 비어있을 수 있음
|
|
// (filteredWorkOrders API 응답이 늦은 경우). workItems가 채워지면 재실행하여 매칭 보장.
|
|
useEffect(() => {
|
|
if (!selectedSidebarOrderId) return;
|
|
// 목업 ID면 건너뛰기
|
|
if (selectedSidebarOrderId.startsWith('order-')) return;
|
|
// workItems가 아직 비어있으면 대기 (채워지면 재실행됨)
|
|
if (workItems.length === 0) return;
|
|
|
|
const loadInspectionData = async () => {
|
|
try {
|
|
const result = await getWorkOrderInspectionData(selectedSidebarOrderId);
|
|
if (result.success && result.data?.items) {
|
|
const completionUpdates: Record<string, boolean> = {};
|
|
setInspectionDataMap((prev) => {
|
|
const next = new Map(prev);
|
|
for (const apiItem of result.data!.items) {
|
|
if (!apiItem.inspection_data) continue;
|
|
// workItems에서 apiItemId가 일치하는 항목 찾기
|
|
const match = workItems.find((w) => w.apiItemId === apiItem.item_id);
|
|
if (match) {
|
|
next.set(match.id, apiItem.inspection_data as unknown as InspectionData);
|
|
// 검사 step 완료 처리 (실제 step name 사용)
|
|
const inspStep = match.steps.find((s) => s.isInspection || s.needsInspection);
|
|
if (inspStep) {
|
|
const stepKey = `${match.id.replace('-node-', '-')}-${inspStep.name}`;
|
|
completionUpdates[stepKey] = true;
|
|
}
|
|
}
|
|
}
|
|
return next;
|
|
});
|
|
// stepCompletionMap 일괄 업데이트
|
|
if (Object.keys(completionUpdates).length > 0) {
|
|
setStepCompletionMap((prev) => ({ ...prev, ...completionUpdates }));
|
|
}
|
|
}
|
|
} catch {
|
|
// 검사 데이터 로드 실패는 무시 (새 작업일 수 있음)
|
|
}
|
|
};
|
|
loadInspectionData();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [selectedSidebarOrderId, workItems.length]);
|
|
|
|
// ===== 작업지시 변경 시 작업 정보 자동 세팅 =====
|
|
useEffect(() => {
|
|
const apiOrder = filteredWorkOrders.find((wo) => wo.id === selectedSidebarOrderId);
|
|
if (apiOrder) {
|
|
// 부서 세팅: 1순위 work_orders.team_id → 2순위 process.department(부서명 매칭)
|
|
if (apiOrder.teamId) {
|
|
setDepartmentId(String(apiOrder.teamId));
|
|
} else if (apiOrder.processDepartment && departmentList.length > 0) {
|
|
const matched = departmentList.find((d) => d.name === apiOrder.processDepartment);
|
|
setDepartmentId(matched ? String(matched.id) : '');
|
|
} else {
|
|
setDepartmentId('');
|
|
}
|
|
// 생산일자 세팅
|
|
setProductionDate(apiOrder.scheduledDate || '');
|
|
} else {
|
|
setDepartmentId('');
|
|
setProductionManagerId('');
|
|
setProductionDate('');
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [selectedSidebarOrderId, filteredWorkOrders, departmentList]);
|
|
|
|
// ===== 수주 정보 (사이드바 선택 항목 기반) =====
|
|
const orderInfo = useMemo(() => {
|
|
// 1. 선택된 API 작업지시에서 찾기
|
|
const apiOrder = filteredWorkOrders.find((wo) => wo.id === selectedSidebarOrderId);
|
|
if (apiOrder) {
|
|
return {
|
|
orderDate: apiOrder.createdAt ? new Date(apiOrder.createdAt).toLocaleDateString('ko-KR') : '-',
|
|
salesOrderNo: apiOrder.salesOrderNo || '-',
|
|
siteName: apiOrder.projectName || '-',
|
|
client: apiOrder.client || '-',
|
|
salesManager: apiOrder.salesManager || '-',
|
|
managerPhone: apiOrder.managerPhone || '-',
|
|
shippingDate: apiOrder.dueDate ? new Date(apiOrder.dueDate).toLocaleDateString('ko-KR') : '-',
|
|
};
|
|
}
|
|
|
|
// 2. 목업 사이드바에서 찾기
|
|
const mockOrder = MOCK_SIDEBAR_ORDERS[activeProcessTabKey].find((o) => o.id === selectedSidebarOrderId);
|
|
if (mockOrder) {
|
|
return {
|
|
orderDate: mockOrder.date,
|
|
salesOrderNo: 'SO-2024-0001',
|
|
siteName: mockOrder.siteName,
|
|
client: '-',
|
|
salesManager: '-',
|
|
managerPhone: '-',
|
|
shippingDate: '-',
|
|
};
|
|
}
|
|
|
|
// 3. 폴백: 첫 번째 작업
|
|
const first = filteredWorkOrders[0];
|
|
if (!first) return null;
|
|
return {
|
|
orderDate: first.createdAt ? new Date(first.createdAt).toLocaleDateString('ko-KR') : '-',
|
|
salesOrderNo: first.salesOrderNo || '-',
|
|
siteName: first.projectName || '-',
|
|
client: first.client || '-',
|
|
salesManager: first.salesManager || '-',
|
|
managerPhone: first.managerPhone || '-',
|
|
shippingDate: first.dueDate ? new Date(first.dueDate).toLocaleDateString('ko-KR') : '-',
|
|
};
|
|
}, [filteredWorkOrders, selectedSidebarOrderId, activeProcessTabKey]);
|
|
|
|
// ===== 핸들러 =====
|
|
|
|
// 중간검사 버튼 클릭 핸들러 - 템플릿 로드 후 모달 열기
|
|
const handleInspectionClick = useCallback(async (itemId: string, stepName?: string) => {
|
|
// 해당 아이템 찾기
|
|
const item = workItems.find((w) => w.id === itemId);
|
|
if (item) {
|
|
// 클릭된 검사 step name 저장 (stepName 미전달 시 item.steps에서 검사 step 탐색)
|
|
const resolvedStepName = stepName
|
|
|| item.steps.find((s) => s.isInspection || s.needsInspection)?.name
|
|
|| '';
|
|
setInspectionStepName(resolvedStepName);
|
|
|
|
// 합성 WorkOrder 생성
|
|
const syntheticOrder: WorkOrder = {
|
|
id: item.id,
|
|
orderNo: item.itemCode,
|
|
productCode: item.itemCode,
|
|
productName: item.itemName,
|
|
processCode: item.processType,
|
|
processName: PROCESS_TAB_LABELS[item.processType],
|
|
client: '-',
|
|
projectName: '-',
|
|
assignees: [],
|
|
quantity: item.quantity,
|
|
shutterCount: 0,
|
|
dueDate: '',
|
|
priority: 5,
|
|
status: 'waiting',
|
|
isUrgent: false,
|
|
isDelayed: false,
|
|
createdAt: '',
|
|
};
|
|
setSelectedOrder(syntheticOrder);
|
|
setInspectionDimensions({ width: item.width, height: item.height });
|
|
|
|
// 실제 API 아이템인 경우 검사 템플릿 로딩 시도
|
|
if (item.workOrderId && !item.id.startsWith('mock-')) {
|
|
try {
|
|
const tplResult = await getInspectionTemplate(item.workOrderId);
|
|
if (tplResult.success && tplResult.data?.has_template) {
|
|
setInspectionTemplateData(tplResult.data);
|
|
} else {
|
|
setInspectionTemplateData(undefined);
|
|
}
|
|
} catch {
|
|
setInspectionTemplateData(undefined);
|
|
}
|
|
} else {
|
|
setInspectionTemplateData(undefined);
|
|
}
|
|
|
|
setIsInspectionInputModalOpen(true);
|
|
}
|
|
}, [workItems]);
|
|
|
|
// pill 클릭 핸들러
|
|
const handleStepClick = useCallback(
|
|
async (itemId: string, step: WorkStepData) => {
|
|
if (step.isMaterialInput) {
|
|
// 자재투입 → 자재 투입 모달 열기 (개소별)
|
|
const order = workOrders.find((o) => o.id === itemId || itemId.startsWith(`${o.id}-node-`));
|
|
const workItem = workItems.find((item) => item.id === itemId);
|
|
if (order) {
|
|
setSelectedOrder(order);
|
|
// 개소별 API 호출을 위한 apiItemId(s) 설정
|
|
setSelectedWorkOrderItemId(workItem?.apiItemId);
|
|
setSelectedWorkOrderItemIds(workItem?.apiItemIds);
|
|
setSelectedWorkOrderItemName(workItem ? `${workItem.itemName} (${workItem.code})` : undefined);
|
|
setIsMaterialModalOpen(true);
|
|
} else {
|
|
// 목업 아이템인 경우 합성 WorkOrder 생성
|
|
const mockItem = workItems.find((item) => item.id === itemId);
|
|
if (mockItem) {
|
|
const syntheticOrder: WorkOrder = {
|
|
id: mockItem.id,
|
|
orderNo: mockItem.itemCode,
|
|
productCode: mockItem.itemCode,
|
|
productName: mockItem.itemName,
|
|
processCode: mockItem.processType,
|
|
processName: PROCESS_TAB_LABELS[mockItem.processType],
|
|
client: '-',
|
|
projectName: '-',
|
|
assignees: [],
|
|
quantity: mockItem.quantity,
|
|
shutterCount: 0,
|
|
dueDate: '',
|
|
priority: 5,
|
|
status: 'waiting',
|
|
isUrgent: false,
|
|
isDelayed: false,
|
|
createdAt: '',
|
|
};
|
|
setSelectedOrder(syntheticOrder);
|
|
setIsMaterialModalOpen(true);
|
|
}
|
|
}
|
|
} else if (step.connectionType === '팝업' && step.connectionTarget === '중간검사') {
|
|
// 연결정보: 팝업 + 중간검사 → 중간검사 모달 열기
|
|
handleInspectionClick(itemId, step.name);
|
|
} else if (step.needsInspection || step.isInspection) {
|
|
// 검사 단계 (processListCache 설정 또는 하드코딩 폴백) → 중간검사 모달 열기
|
|
handleInspectionClick(itemId, step.name);
|
|
} else if (step.completionType === 'click_complete' && step.stepProgressId) {
|
|
// 클릭 시 완료 → 서버 토글 API 호출
|
|
const workItem = workItems.find((item) => item.id === itemId);
|
|
const orderId = workItem?.workOrderId;
|
|
if (orderId) {
|
|
// enrichStep의 stepKey와 동일한 형식 사용 (-node- 제거)
|
|
const stepKey = `${itemId.replace('-node-', '-')}-${step.name}`;
|
|
try {
|
|
const result = await toggleStepProgress(orderId, step.stepProgressId);
|
|
if (result.success && result.data) {
|
|
setStepCompletionMap((prev) => ({
|
|
...prev,
|
|
[stepKey]: result.data!.is_completed,
|
|
}));
|
|
toast.success(result.data.is_completed ? `${step.name} 완료` : `${step.name} 완료 취소`);
|
|
} else {
|
|
toast.error(result.error || '단계 완료 처리에 실패했습니다.');
|
|
}
|
|
} catch {
|
|
toast.error('단계 완료 처리 중 오류가 발생했습니다.');
|
|
}
|
|
}
|
|
} else {
|
|
// 기타 → 완료/미완료 토글 (로컬) - enrichStep stepKey 형식 일치
|
|
const stepKey = `${itemId.replace('-node-', '-')}-${step.name}`;
|
|
setStepCompletionMap((prev) => ({
|
|
...prev,
|
|
[stepKey]: !prev[stepKey],
|
|
}));
|
|
}
|
|
},
|
|
[workOrders, workItems, handleInspectionClick]
|
|
);
|
|
|
|
// 자재 수정 핸들러 - Dialog 열기
|
|
const handleEditMaterial = useCallback(
|
|
(itemId: string, material: MaterialListItem) => {
|
|
setEditMaterialTarget({ itemId, material });
|
|
setEditMaterialQty(String(material.quantity));
|
|
},
|
|
[]
|
|
);
|
|
|
|
// 자재 수정 확정
|
|
const handleEditMaterialConfirm = useCallback(async () => {
|
|
if (!editMaterialTarget) return;
|
|
const { itemId, material } = editMaterialTarget;
|
|
const newQty = parseFloat(editMaterialQty);
|
|
if (isNaN(newQty) || newQty <= 0) {
|
|
toast.error('올바른 수량을 입력해주세요.');
|
|
return;
|
|
}
|
|
|
|
const workItem = workItems.find((w) => w.id === itemId);
|
|
const orderId = workItem?.workOrderId;
|
|
if (!orderId) return;
|
|
|
|
const result = await updateMaterialInput(orderId, parseInt(material.id), newQty);
|
|
if (result.success) {
|
|
toast.success('투입 수량이 수정되었습니다.');
|
|
setEditMaterialTarget(null);
|
|
// 데이터 새로고침
|
|
try {
|
|
const refreshResult = await getMyWorkOrders();
|
|
if (refreshResult.success) setWorkOrders(refreshResult.data);
|
|
} catch {}
|
|
} else {
|
|
toast.error(result.error || '수정에 실패했습니다.');
|
|
}
|
|
}, [editMaterialTarget, editMaterialQty, workItems]);
|
|
|
|
// 자재 삭제 핸들러
|
|
const handleDeleteMaterial = useCallback(
|
|
async (itemId: string, materialId: string) => {
|
|
const workItem = workItems.find((w) => w.id === itemId);
|
|
const orderId = workItem?.workOrderId;
|
|
if (!orderId) return;
|
|
|
|
const result = await deleteMaterialInput(orderId, parseInt(materialId));
|
|
if (result.success) {
|
|
toast.success('자재 투입이 삭제되었습니다.');
|
|
|
|
// 해당 개소에 더이상 투입 이력이 없으면 자재투입 step 완료 해제
|
|
const nodeMatch = itemId.match(/-node-(.+)$/);
|
|
if (nodeMatch) {
|
|
const stepKey = `${orderId}-${nodeMatch[1]}-자재투입`;
|
|
// 현재 해당 노드의 materialInputs에서 삭제 대상 제외 후 남은 것 확인
|
|
const currentInputs = workItem.materialInputs?.filter((m) => m.id !== materialId);
|
|
if (!currentInputs || currentInputs.length === 0) {
|
|
setStepCompletionMap((prev) => {
|
|
const next = { ...prev };
|
|
delete next[stepKey];
|
|
return next;
|
|
});
|
|
}
|
|
}
|
|
|
|
// 데이터 새로고침
|
|
try {
|
|
const refreshResult = await getMyWorkOrders();
|
|
if (refreshResult.success) {
|
|
setWorkOrders(refreshResult.data);
|
|
// 로컬 오버라이드 모두 제거 (API 데이터가 최신)
|
|
setInputMaterialsMap(new Map());
|
|
}
|
|
} catch {}
|
|
} else {
|
|
toast.error(result.error || '삭제에 실패했습니다.');
|
|
}
|
|
},
|
|
[workItems]
|
|
);
|
|
|
|
// 자재 저장 핸들러
|
|
const handleSaveMaterials = useCallback(async (orderId: string, materials: MaterialInput[]) => {
|
|
// 개소별 키: workOrderItemId가 있으면 개소별, 없으면 orderId 기준
|
|
const mapKey = selectedWorkOrderItemId ? `${orderId}-item-${selectedWorkOrderItemId}` : orderId;
|
|
setInputMaterialsMap((prev) => {
|
|
const next = new Map(prev);
|
|
next.set(mapKey, materials);
|
|
return next;
|
|
});
|
|
|
|
// 자재투입 step 완료로 마킹 - workItem의 id 기반으로 stepKey 생성
|
|
// workItems에서 해당 개소를 찾아 정확한 stepKey 사용
|
|
const matchedItem = workItems.find((item) =>
|
|
selectedWorkOrderItemId
|
|
? item.apiItemId === selectedWorkOrderItemId
|
|
: item.workOrderId === orderId || item.id === orderId
|
|
);
|
|
if (matchedItem) {
|
|
// workItems의 step 생성 시 stepKey = `${orderId}-${nodeKey}-자재투입` 형식
|
|
// matchedItem.id에서 nodeKey 추출: `${orderId}-node-${nodeKey}`
|
|
const nodeMatch = matchedItem.id.match(/-node-(.+)$/);
|
|
const stepKey = nodeMatch
|
|
? `${orderId}-${nodeMatch[1]}-자재투입`
|
|
: `${orderId}-자재투입`;
|
|
setStepCompletionMap((prev) => ({
|
|
...prev,
|
|
[stepKey]: true,
|
|
}));
|
|
}
|
|
|
|
// 로컬 오버라이드로 즉시 반영 (전체 새로고침 없이 현재 선택 수주 유지)
|
|
}, [selectedWorkOrderItemId, workItems]);
|
|
|
|
// 완료 확인 → MaterialInputModal 열기
|
|
const handleCompletionConfirm = useCallback(() => {
|
|
setIsCompletionFlow(true);
|
|
setIsMaterialModalOpen(true);
|
|
}, []);
|
|
|
|
// MaterialInputModal 완료 후 → 작업 완료 결과 팝업
|
|
const handleWorkCompletion = useCallback(() => {
|
|
if (!selectedOrder) return;
|
|
const lotNo = `KD-SA-${new Date().toISOString().slice(2, 10).replace(/-/g, '')}-01`;
|
|
setCompletionLotNo(lotNo);
|
|
setIsCompletionResultOpen(true);
|
|
setIsCompletionFlow(false);
|
|
}, [selectedOrder]);
|
|
|
|
// 완료 결과 팝업 확인 → API 완료 처리
|
|
const handleCompletionResultConfirm = useCallback(async () => {
|
|
if (!selectedOrder) return;
|
|
|
|
try {
|
|
const materials = inputMaterialsMap.get(selectedOrder.id);
|
|
const result = await completeWorkOrder(
|
|
selectedOrder.id,
|
|
materials?.map((m) => ({
|
|
materialId: parseInt(m.id),
|
|
quantity: m.inputQuantity,
|
|
lotNo: m.lotNo,
|
|
}))
|
|
);
|
|
|
|
if (result.success) {
|
|
toast.success('작업이 완료되었습니다.');
|
|
setInputMaterialsMap((prev) => {
|
|
const next = new Map(prev);
|
|
next.delete(selectedOrder.id);
|
|
return next;
|
|
});
|
|
setWorkOrders((prev) => prev.filter((o) => o.id !== selectedOrder.id));
|
|
} else {
|
|
toast.error(result.error || '작업 완료 처리에 실패했습니다.');
|
|
}
|
|
} catch (error) {
|
|
if (isNextRedirectError(error)) throw error;
|
|
console.error('[WorkerScreen] handleCompletionResultConfirm error:', error);
|
|
toast.error('작업 완료 중 오류가 발생했습니다.');
|
|
} finally {
|
|
setSelectedOrder(null);
|
|
setCompletionLotNo('');
|
|
}
|
|
}, [selectedOrder, inputMaterialsMap]);
|
|
|
|
// 하단 버튼용 합성 WorkOrder (사이드바 선택 우선, 없으면 첫 번째, 그래도 없으면 목업 폴백)
|
|
const getTargetOrder = useCallback((): WorkOrder | null => {
|
|
// 사이드바에서 선택된 작업지시 우선
|
|
const selected = selectedSidebarOrderId
|
|
? filteredWorkOrders.find((wo) => wo.id === selectedSidebarOrderId)
|
|
: null;
|
|
if (selected) return selected;
|
|
|
|
// 선택 없으면 첫 번째 작업지시
|
|
const apiTarget = filteredWorkOrders[0];
|
|
if (apiTarget) return apiTarget;
|
|
|
|
// 목업 아이템으로 폴백
|
|
const mockItem = workItems[0];
|
|
if (!mockItem) return null;
|
|
return {
|
|
id: mockItem.id,
|
|
orderNo: mockItem.itemCode,
|
|
productCode: mockItem.itemCode,
|
|
productName: mockItem.itemName,
|
|
processCode: mockItem.processType,
|
|
processName: PROCESS_TAB_LABELS[mockItem.processType],
|
|
client: '-',
|
|
projectName: '-',
|
|
assignees: [],
|
|
quantity: mockItem.quantity,
|
|
shutterCount: 0,
|
|
dueDate: '',
|
|
priority: 5,
|
|
status: 'waiting',
|
|
isUrgent: false,
|
|
isDelayed: false,
|
|
createdAt: '',
|
|
};
|
|
}, [filteredWorkOrders, workItems, selectedSidebarOrderId]);
|
|
|
|
// 현재 공정에 맞는 중간검사 타입 결정
|
|
const getInspectionProcessType = useCallback((): InspectionProcessType => {
|
|
if (activeProcessTabKey === 'bending' && bendingSubMode === 'wip') {
|
|
return 'bending_wip';
|
|
}
|
|
if (activeProcessTabKey === 'slat' && slatSubMode === 'jointbar') {
|
|
return 'slat_jointbar';
|
|
}
|
|
return activeProcessTabKey as InspectionProcessType;
|
|
}, [activeProcessTabKey, bendingSubMode, slatSubMode]);
|
|
|
|
// 하단 버튼 핸들러
|
|
const handleWorkLog = useCallback(() => {
|
|
const target = getTargetOrder();
|
|
if (target) {
|
|
setSelectedOrder(target);
|
|
setIsWorkLogModalOpen(true);
|
|
} else {
|
|
toast.error('표시할 작업이 없습니다.');
|
|
}
|
|
}, [getTargetOrder]);
|
|
|
|
const handleInspection = useCallback(() => {
|
|
const target = getTargetOrder();
|
|
if (target) {
|
|
setSelectedOrder(target);
|
|
setIsInspectionModalOpen(true);
|
|
} else {
|
|
toast.error('표시할 작업이 없습니다.');
|
|
}
|
|
}, [getTargetOrder]);
|
|
|
|
// 검사 완료 핸들러 (API 저장 + 메모리 업데이트 + 공정 단계 완료 처리)
|
|
const handleInspectionComplete = useCallback(async (data: InspectionData) => {
|
|
if (!selectedOrder) return;
|
|
|
|
// stepCompletionMap 키 생성 헬퍼 (enrichStep 형식 일치: -node- 제거 + 실제 step name)
|
|
const buildStepKey = (stepName: string) =>
|
|
`${selectedOrder.id.replace('-node-', '-')}-${stepName}`;
|
|
|
|
// 메모리에 즉시 반영
|
|
setInspectionDataMap((prev) => {
|
|
const next = new Map(prev);
|
|
next.set(selectedOrder.id, data);
|
|
return next;
|
|
});
|
|
|
|
// 실제 API item인 경우 서버에 저장
|
|
const targetItem = workItems.find((w) => w.id === selectedOrder.id);
|
|
if (targetItem?.apiItemId && targetItem?.workOrderId) {
|
|
try {
|
|
// 1. 기존: work_order_items.options에 저장
|
|
const result = await saveItemInspection(
|
|
targetItem.workOrderId,
|
|
targetItem.apiItemId,
|
|
getInspectionProcessType(),
|
|
data as unknown as Record<string, unknown>
|
|
);
|
|
if (result.success) {
|
|
toast.success('검사가 저장되었습니다.');
|
|
} else {
|
|
toast.error(result.error || '검사 데이터 저장에 실패했습니다.');
|
|
}
|
|
|
|
// 2. Document 동기화: 백엔드가 원본(work_order_items)에서 전체 수집하여 document_data 갱신
|
|
try {
|
|
await saveInspectionDocument(targetItem.workOrderId, {});
|
|
} catch {
|
|
// Document 동기화 실패는 무시 (template 미연결 시 404 가능)
|
|
}
|
|
|
|
// 3. 검사 단계 자동 완료 처리 (inspectionStepName 우선, 없으면 steps에서 탐색)
|
|
const stepName = inspectionStepName
|
|
|| targetItem.steps.find((s) => (s.completionType === 'inspection_complete') || s.needsInspection || s.isInspection)?.name
|
|
|| '';
|
|
const inspectionStep = stepName
|
|
? targetItem.steps.find((s) => s.name === stepName)
|
|
: undefined;
|
|
|
|
if (inspectionStep?.stepProgressId) {
|
|
// 서버에 단계 완료 토글
|
|
try {
|
|
const toggleResult = await toggleStepProgress(targetItem.workOrderId, inspectionStep.stepProgressId);
|
|
if (toggleResult.success) {
|
|
setStepCompletionMap((prev) => ({ ...prev, [buildStepKey(stepName)]: true }));
|
|
}
|
|
} catch {
|
|
// 단계 완료 실패 시 로컬만 업데이트
|
|
setStepCompletionMap((prev) => ({ ...prev, [buildStepKey(stepName)]: true }));
|
|
}
|
|
} else if (stepName) {
|
|
// stepProgressId 없으면 로컬만 완료 처리
|
|
setStepCompletionMap((prev) => ({ ...prev, [buildStepKey(stepName)]: true }));
|
|
}
|
|
} catch {
|
|
toast.error('검사 데이터 저장 중 오류가 발생했습니다.');
|
|
}
|
|
} else if (inspectionStepName) {
|
|
// 목업 데이터는 메모리만 저장 + 로컬 완료 처리
|
|
setStepCompletionMap((prev) => ({ ...prev, [buildStepKey(inspectionStepName)]: true }));
|
|
toast.success('중간검사가 완료되었습니다.');
|
|
}
|
|
}, [selectedOrder, workItems, getInspectionProcessType, inspectionStepName]);
|
|
|
|
// ===== 재공품 감지 =====
|
|
const hasWipItems = useMemo(() => {
|
|
return activeProcessTabKey === 'bending' && workItems.some(item => item.isWip);
|
|
}, [activeProcessTabKey, workItems]);
|
|
|
|
// ===== 조인트바 감지 =====
|
|
const hasJointBarItems = useMemo(() => {
|
|
return activeProcessTabKey === 'slat' && slatSubMode === 'jointbar';
|
|
}, [activeProcessTabKey, slatSubMode]);
|
|
|
|
// 재공품 통합 문서 (작업일지 + 중간검사) 핸들러
|
|
const handleWipInspection = useCallback(() => {
|
|
const target = getTargetOrder();
|
|
if (target) {
|
|
setSelectedOrder(target);
|
|
setIsInspectionModalOpen(true);
|
|
} else {
|
|
toast.error('표시할 작업이 없습니다.');
|
|
}
|
|
}, [getTargetOrder]);
|
|
|
|
return (
|
|
<PageLayout>
|
|
<div className="pb-20 overflow-x-hidden">
|
|
{/* 완료 토스트 */}
|
|
{toastInfo && <CompletionToast info={toastInfo} />}
|
|
|
|
{/* 헤더 */}
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
|
|
<ClipboardList className="h-5 w-5 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold">작업자 화면</h1>
|
|
<p className="text-sm text-muted-foreground">작업을 관리합니다</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 공정별 탭 (공정관리 API 기반 동적 생성) */}
|
|
<Tabs
|
|
value={activeTab}
|
|
onValueChange={(v) => setActiveTab(v)}
|
|
>
|
|
<div className="overflow-x-auto -mx-3 px-3 md:mx-0 md:px-0">
|
|
<TabsList className="w-max md:w-full">
|
|
{processTabs.length > 0 ? (
|
|
processTabs.map((proc) => (
|
|
<TabsTrigger key={proc.id} value={proc.id} className="px-4 md:flex-1">
|
|
{proc.processName}
|
|
</TabsTrigger>
|
|
))
|
|
) : (
|
|
(['screen', 'slat', 'bending'] as ProcessTab[]).map((tab) => (
|
|
<TabsTrigger key={tab} value={tab} className="px-4 md:flex-1">
|
|
{PROCESS_TAB_LABELS[tab]}
|
|
</TabsTrigger>
|
|
))
|
|
)}
|
|
</TabsList>
|
|
</div>
|
|
|
|
{(processTabs.length > 0
|
|
? processTabs.map((p) => p.id)
|
|
: ['screen', 'slat', 'bending']
|
|
).map((tabValue) => (
|
|
<TabsContent key={tabValue} value={tabValue} className="mt-4">
|
|
{/* 모바일: 사이드바 토글 */}
|
|
<div className="md:hidden mb-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
|
|
className="w-full flex items-center justify-between px-4 py-3 bg-gray-50 rounded-lg border"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<List className="h-4 w-4" />
|
|
<span className="text-sm font-medium">수주 목록</span>
|
|
</div>
|
|
{isSidebarOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
|
</button>
|
|
{isSidebarOpen && (
|
|
<div className="mt-2 p-3 border rounded-lg bg-white max-h-[300px] overflow-y-auto">
|
|
<SidebarContent
|
|
tab={activeProcessTabKey}
|
|
selectedOrderId={selectedSidebarOrderId}
|
|
apiOrders={apiSidebarOrders}
|
|
onSelectOrder={(id, subType) => {
|
|
setSelectedSidebarOrderId(id);
|
|
if (subType === 'slat' || subType === 'jointbar') setSlatSubMode(subType === 'jointbar' ? 'jointbar' : 'normal');
|
|
if (subType === 'bending' || subType === 'wip') setBendingSubMode(subType === 'wip' ? 'wip' : 'normal');
|
|
setIsSidebarOpen(false);
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 2-패널 레이아웃 */}
|
|
<div className="flex gap-6">
|
|
{/* 좌측 사이드바 - 데스크탑만 (스크롤 따라다님) */}
|
|
<aside className="hidden md:block w-[250px] shrink-0 self-start sticky top-[6.5rem]">
|
|
<Card className="max-h-[calc(100vh-7.5rem)] overflow-y-auto">
|
|
<CardContent className="p-4">
|
|
<SidebarContent
|
|
tab={activeProcessTabKey}
|
|
selectedOrderId={selectedSidebarOrderId}
|
|
apiOrders={apiSidebarOrders}
|
|
onSelectOrder={(id, subType) => {
|
|
setSelectedSidebarOrderId(id);
|
|
if (subType === 'slat' || subType === 'jointbar') setSlatSubMode(subType === 'jointbar' ? 'jointbar' : 'normal');
|
|
if (subType === 'bending' || subType === 'wip') setBendingSubMode(subType === 'wip' ? 'wip' : 'normal');
|
|
}}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</aside>
|
|
|
|
{/* 우측 메인 패널 */}
|
|
<div className="flex-1 min-w-0 space-y-6">
|
|
{/* 상태 카드 */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
|
<StatCard
|
|
title="할일"
|
|
value={stats.assigned}
|
|
icon={<ClipboardList className="h-4 w-4" />}
|
|
variant="default"
|
|
/>
|
|
<StatCard
|
|
title="작업중"
|
|
value={stats.inProgress}
|
|
icon={<PlayCircle className="h-4 w-4" />}
|
|
variant="blue"
|
|
/>
|
|
<StatCard
|
|
title="완료"
|
|
value={stats.completed}
|
|
icon={<CheckCircle2 className="h-4 w-4" />}
|
|
variant="green"
|
|
/>
|
|
<StatCard
|
|
title="긴급"
|
|
value={stats.urgent}
|
|
icon={<AlertTriangle className="h-4 w-4" />}
|
|
variant="red"
|
|
/>
|
|
</div>
|
|
|
|
{/* 수주 정보 */}
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<h3 className="text-sm font-semibold text-gray-900 mb-3">수주 정보</h3>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-3">
|
|
<InfoField label="수주일" value={orderInfo?.orderDate} />
|
|
<InfoField label="수주로트" value={orderInfo?.salesOrderNo} />
|
|
<InfoField label="현장명" value={orderInfo?.siteName} />
|
|
<InfoField label="수주처" value={orderInfo?.client} />
|
|
<InfoField label="수주 담당자" value={orderInfo?.salesManager} />
|
|
<InfoField label="담당자 연락처" value={orderInfo?.managerPhone} />
|
|
<InfoField label="출고예정일" value={orderInfo?.shippingDate} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 작업 정보 - API 연동 */}
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<h3 className="text-sm font-semibold text-gray-900 mb-3">작업 정보</h3>
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm text-gray-600">부서</Label>
|
|
<Select
|
|
key={`dept-${departmentId}`}
|
|
value={departmentId}
|
|
onValueChange={setDepartmentId}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{departmentList.map((dept) => (
|
|
<SelectItem key={dept.id} value={String(dept.id)}>
|
|
{dept.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm text-gray-600">생산 담당자</Label>
|
|
<Select
|
|
key={`manager-${departmentId}-${productionManagerId}`}
|
|
value={productionManagerId}
|
|
onValueChange={setProductionManagerId}
|
|
disabled={!departmentId}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={departmentId ? '선택' : '부서를 먼저 선택'} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{departmentUsers.map((user) => (
|
|
<SelectItem key={user.id} value={String(user.id)}>
|
|
{user.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm text-gray-600">생산일자</Label>
|
|
<DatePicker
|
|
value={productionDate}
|
|
onChange={(date) => setProductionDate(date)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 작업 목록 */}
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-gray-900 mb-3">작업 목록</h3>
|
|
{isLoading ? (
|
|
<ContentSkeleton type="cards" rows={4} />
|
|
) : workItems.length === 0 ? (
|
|
<Card>
|
|
<CardContent className="py-12 text-center text-muted-foreground">
|
|
해당 공정에 배정된 작업이 없습니다.
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{(() => {
|
|
const apiCount = workItems.filter((i) => !i.id.startsWith('mock-')).length;
|
|
return apiCount > 0 ? (
|
|
<span className="text-[10px] font-semibold text-blue-600 bg-blue-50 px-2 py-0.5 rounded inline-block">
|
|
실제 데이터 ({apiCount}건)
|
|
</span>
|
|
) : null;
|
|
})()}
|
|
{workItems.map((item, index) => {
|
|
const isFirstMock = item.id.startsWith('mock-') &&
|
|
(index === 0 || !workItems[index - 1]?.id.startsWith('mock-'));
|
|
return (
|
|
<div key={item.id}>
|
|
{isFirstMock && (
|
|
<div className="mb-3 pt-1 space-y-2">
|
|
{workItems.some((i) => !i.id.startsWith('mock-')) && <div className="border-t border-dashed border-gray-300" />}
|
|
<span className="text-[10px] font-semibold text-orange-600 bg-orange-50 px-2 py-0.5 rounded inline-block">
|
|
목업 데이터
|
|
</span>
|
|
</div>
|
|
)}
|
|
<WorkItemCard
|
|
item={item}
|
|
onStepClick={handleStepClick}
|
|
onEditMaterial={handleEditMaterial}
|
|
onDeleteMaterial={handleDeleteMaterial}
|
|
onInspectionClick={handleInspectionClick}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
))}
|
|
</Tabs>
|
|
</div>
|
|
|
|
{/* 하단 고정 버튼 */}
|
|
{(hasWipItems || activeProcessSettings.needsWorkLog || activeProcessSettings.hasDocumentTemplate) && (
|
|
<div className={`fixed bottom-4 left-3 right-3 px-3 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 md:bottom-6 md:left-auto md:right-[24px] md:px-6 ${sidebarCollapsed ? 'md:left-[113px]' : 'md:left-[304px]'}`}>
|
|
<div className="flex gap-2 md:gap-3">
|
|
{hasWipItems ? (
|
|
<Button
|
|
onClick={handleInspection}
|
|
className="flex-1 py-5 md:py-6 text-sm md:text-base font-medium bg-gray-900 hover:bg-gray-800"
|
|
>
|
|
작업일지 및 검사성적서
|
|
</Button>
|
|
) : (
|
|
<>
|
|
{activeProcessSettings.needsWorkLog && (
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleWorkLog}
|
|
className="flex-1 py-5 md:py-6 text-sm md:text-base font-medium"
|
|
>
|
|
작업일지 보기
|
|
</Button>
|
|
)}
|
|
{activeProcessSettings.hasDocumentTemplate && (
|
|
<Button
|
|
onClick={handleInspection}
|
|
className="flex-1 py-5 md:py-6 text-sm md:text-base font-medium bg-gray-900 hover:bg-gray-800"
|
|
>
|
|
검사성적서 보기
|
|
</Button>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 모달/다이얼로그 */}
|
|
<CompletionConfirmDialog
|
|
open={isCompletionDialogOpen}
|
|
onOpenChange={setIsCompletionDialogOpen}
|
|
order={selectedOrder}
|
|
onConfirm={handleCompletionConfirm}
|
|
/>
|
|
|
|
<MaterialInputModal
|
|
open={isMaterialModalOpen}
|
|
onOpenChange={(open) => {
|
|
setIsMaterialModalOpen(open);
|
|
if (!open) {
|
|
setSelectedWorkOrderItemId(undefined);
|
|
setSelectedWorkOrderItemIds(undefined);
|
|
setSelectedWorkOrderItemName(undefined);
|
|
}
|
|
}}
|
|
order={selectedOrder}
|
|
workOrderItemId={selectedWorkOrderItemId}
|
|
workOrderItemIds={selectedWorkOrderItemIds}
|
|
workOrderItemName={selectedWorkOrderItemName}
|
|
isCompletionFlow={isCompletionFlow}
|
|
onComplete={handleWorkCompletion}
|
|
onSaveMaterials={handleSaveMaterials}
|
|
savedMaterials={selectedOrder ? inputMaterialsMap.get(selectedOrder.id) : undefined}
|
|
/>
|
|
|
|
<WorkLogModal
|
|
open={isWorkLogModalOpen}
|
|
onOpenChange={setIsWorkLogModalOpen}
|
|
workOrderId={selectedOrder?.id || null}
|
|
processType={activeProcessTabKey}
|
|
workLogTemplateId={activeProcessSettings.workLogTemplateId}
|
|
workLogTemplateName={activeProcessSettings.workLogTemplateName}
|
|
/>
|
|
|
|
<InspectionReportModal
|
|
open={isInspectionModalOpen}
|
|
onOpenChange={setIsInspectionModalOpen}
|
|
workOrderId={selectedOrder?.id || null}
|
|
processType={hasWipItems ? 'bending_wip' : activeProcessTabKey}
|
|
readOnly={true}
|
|
isJointBar={hasJointBarItems}
|
|
inspectionData={selectedOrder ? inspectionDataMap.get(selectedOrder.id) : undefined}
|
|
workItems={workItems}
|
|
inspectionDataMap={inspectionDataMap}
|
|
inspectionSetting={currentInspectionSetting}
|
|
/>
|
|
|
|
<IssueReportModal
|
|
open={isIssueReportModalOpen}
|
|
onOpenChange={setIsIssueReportModalOpen}
|
|
order={selectedOrder}
|
|
/>
|
|
|
|
<WorkCompletionResultDialog
|
|
open={isCompletionResultOpen}
|
|
onOpenChange={setIsCompletionResultOpen}
|
|
lotNo={completionLotNo}
|
|
onConfirm={handleCompletionResultConfirm}
|
|
/>
|
|
|
|
{/* 자재 투입 수량 수정 Dialog */}
|
|
<Dialog open={!!editMaterialTarget} onOpenChange={(open) => { if (!open) setEditMaterialTarget(null); }}>
|
|
<DialogContent className="!max-w-sm">
|
|
<DialogHeader>
|
|
<DialogTitle>투입 수량 수정</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-3 py-2">
|
|
<p className="text-sm text-gray-600">{editMaterialTarget?.material.itemName}</p>
|
|
<Input
|
|
type="number"
|
|
inputMode="numeric"
|
|
value={editMaterialQty}
|
|
onChange={(e) => setEditMaterialQty(e.target.value)}
|
|
placeholder="수량 입력"
|
|
min={1}
|
|
autoFocus
|
|
onKeyDown={(e) => { if (e.key === 'Enter') handleEditMaterialConfirm(); }}
|
|
/>
|
|
</div>
|
|
<DialogFooter className="gap-2">
|
|
<Button variant="outline" onClick={() => setEditMaterialTarget(null)}>취소</Button>
|
|
<Button onClick={handleEditMaterialConfirm}>수정</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<InspectionInputModal
|
|
open={isInspectionInputModalOpen}
|
|
onOpenChange={setIsInspectionInputModalOpen}
|
|
processType={getInspectionProcessType()}
|
|
productName={selectedOrder?.productCode && selectedOrder.productCode !== '-' ? selectedOrder.productCode : (selectedOrder?.productName || workItems[0]?.itemName || '')}
|
|
specification={workItems[0]?.slatJointBarInfo?.specification || workItems[0]?.wipInfo?.specification || ''}
|
|
initialData={selectedOrder ? inspectionDataMap.get(selectedOrder.id) : undefined}
|
|
onComplete={handleInspectionComplete}
|
|
templateData={inspectionTemplateData}
|
|
workItemDimensions={inspectionDimensions}
|
|
/>
|
|
</PageLayout>
|
|
);
|
|
}
|
|
|
|
// ===== 사이드바 컨텐츠 =====
|
|
interface SidebarContentProps {
|
|
tab: ProcessTab;
|
|
selectedOrderId: string;
|
|
apiOrders: SidebarOrder[];
|
|
onSelectOrder: (id: string, subType?: SidebarOrder['subType']) => void;
|
|
}
|
|
|
|
function SidebarContent({
|
|
tab,
|
|
selectedOrderId,
|
|
onSelectOrder,
|
|
apiOrders,
|
|
}: SidebarContentProps) {
|
|
const mockOrders = MOCK_SIDEBAR_ORDERS[tab];
|
|
|
|
const renderOrders = (orders: SidebarOrder[]) => (
|
|
<>
|
|
{PRIORITY_GROUPS.map((group) => {
|
|
const groupOrders = orders.filter((o) => o.priority === group.key);
|
|
if (groupOrders.length === 0) return null;
|
|
return (
|
|
<div key={group.key}>
|
|
<p className={`text-xs font-semibold mb-1.5 ${group.color}`}>{group.label}</p>
|
|
<div className="space-y-1.5">
|
|
{groupOrders.map((order) => {
|
|
const tag = order.subType ? SUB_TYPE_TAGS[order.subType] : null;
|
|
return (
|
|
<button
|
|
key={order.id}
|
|
type="button"
|
|
onClick={() => onSelectOrder(order.id, order.subType)}
|
|
className={cn(
|
|
'w-full text-left p-2.5 rounded-lg border transition-colors text-xs',
|
|
selectedOrderId === order.id
|
|
? 'border-primary bg-primary/5 ring-1 ring-primary/20'
|
|
: 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<p className="font-medium text-gray-900">{order.siteName}</p>
|
|
{tag && (
|
|
<span className={`px-1.5 py-0.5 rounded text-[10px] font-semibold ${tag.className}`}>
|
|
{tag.label}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center justify-between mt-1 text-gray-500">
|
|
<span>{order.date}</span>
|
|
<span>{order.shutterCount}개소</span>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<h3 className="text-sm font-semibold text-gray-900">수주 목록</h3>
|
|
|
|
{/* API 실제 데이터 */}
|
|
{apiOrders.length > 0 && (
|
|
<div className="space-y-2">
|
|
<span className="text-[10px] font-semibold text-blue-600 bg-blue-50 px-2 py-0.5 rounded">
|
|
실제 데이터 ({apiOrders.length}건)
|
|
</span>
|
|
{renderOrders(apiOrders)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 구분선 */}
|
|
{apiOrders.length > 0 && mockOrders.length > 0 && (
|
|
<div className="border-t border-dashed border-gray-300 my-1" />
|
|
)}
|
|
|
|
{/* 목업 데이터 */}
|
|
{mockOrders.length > 0 && (
|
|
<div className="space-y-2">
|
|
<span className="text-[10px] font-semibold text-orange-600 bg-orange-50 px-2 py-0.5 rounded">
|
|
목업 데이터
|
|
</span>
|
|
{renderOrders(mockOrders)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ===== 하위 컴포넌트 =====
|
|
|
|
interface StatCardProps {
|
|
title: string;
|
|
value: number;
|
|
icon: React.ReactNode;
|
|
variant: 'default' | 'blue' | 'green' | 'red';
|
|
}
|
|
|
|
function StatCard({ title, value, icon, variant }: StatCardProps) {
|
|
const variantClasses = {
|
|
default: 'bg-gray-50 text-gray-700',
|
|
blue: 'bg-blue-50 text-blue-700',
|
|
green: 'bg-green-50 text-green-700',
|
|
red: 'bg-red-50 text-red-700',
|
|
};
|
|
|
|
return (
|
|
<Card className={variantClasses[variant]}>
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium">{title}</span>
|
|
{icon}
|
|
</div>
|
|
<p className="text-2xl font-bold mt-2">{value}</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
interface InfoFieldProps {
|
|
label: string;
|
|
value?: string;
|
|
}
|
|
|
|
function InfoField({ label, value }: InfoFieldProps) {
|
|
return (
|
|
<div>
|
|
<p className="text-xs text-gray-500">{label}</p>
|
|
<p className="text-sm font-medium text-gray-900 mt-0.5">{value || '-'}</p>
|
|
</div>
|
|
);
|
|
}
|