Merge remote-tracking branch 'origin/master'
# Conflicts: # src/components/production/WorkOrders/WorkOrderList.tsx
This commit is contained in:
@@ -11,6 +11,7 @@ import { useRouter } from 'next/navigation';
|
||||
import { ArrowLeft, FileText, X, Edit2, Loader2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { DatePicker } from '@/components/ui/date-picker';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||
@@ -455,11 +456,9 @@ export function WorkOrderCreate() {
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>출고예정일 *</Label>
|
||||
<Input
|
||||
type="date"
|
||||
<DatePicker
|
||||
value={formData.shipmentDate}
|
||||
onChange={(e) => setFormData({ ...formData, shipmentDate: e.target.value })}
|
||||
className="bg-white"
|
||||
onChange={(date) => setFormData({ ...formData, shipmentDate: date })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -369,7 +369,7 @@ export function WorkOrderDetail({ orderId }: WorkOrderDetailProps) {
|
||||
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4 md:p-6">
|
||||
<h3 className="font-semibold mb-4">기본 정보</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-x-4 md:gap-x-6 gap-y-4">
|
||||
{/* 1행: 작업번호 | 수주일 | 공정구분 | 로트번호 */}
|
||||
{/* 1행: 작업번호 | 수주일 | 공정 | 구분 */}
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm text-muted-foreground mb-1">작업번호</p>
|
||||
<p className="font-medium truncate">{order.workOrderNo}</p>
|
||||
@@ -379,15 +379,19 @@ export function WorkOrderDetail({ orderId }: WorkOrderDetailProps) {
|
||||
<p className="font-medium">{order.salesOrderDate || '-'}</p>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm text-muted-foreground mb-1">공정구분</p>
|
||||
<p className="text-sm text-muted-foreground mb-1">공정</p>
|
||||
<p className="font-medium">{order.processName}</p>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm text-muted-foreground mb-1">구분</p>
|
||||
<p className="font-medium">-</p>
|
||||
</div>
|
||||
|
||||
{/* 2행: 로트번호 | 수주처 | 현장명 | 수주 담당자 */}
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm text-muted-foreground mb-1">로트번호</p>
|
||||
<p className="font-medium truncate">{order.lotNo}</p>
|
||||
</div>
|
||||
|
||||
{/* 2행: 수주처 | 현장명 | 수주 담당자 | 담당자 연락처 */}
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-1">수주처</p>
|
||||
<p className="font-medium">{order.client}</p>
|
||||
@@ -400,12 +404,12 @@ export function WorkOrderDetail({ orderId }: WorkOrderDetailProps) {
|
||||
<p className="text-sm text-muted-foreground mb-1">수주 담당자</p>
|
||||
<p className="font-medium">-</p>
|
||||
</div>
|
||||
|
||||
{/* 3행: 담당자 연락처 | 출고예정일 | 틀수 | 우선순위 */}
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-1">담당자 연락처</p>
|
||||
<p className="font-medium">-</p>
|
||||
</div>
|
||||
|
||||
{/* 3행: 출고예정일 | 틀수 | 우선순위 | 부서 */}
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-1">출고예정일</p>
|
||||
<p className="font-medium">{order.shipmentDate || '-'}</p>
|
||||
@@ -418,12 +422,12 @@ export function WorkOrderDetail({ orderId }: WorkOrderDetailProps) {
|
||||
<p className="text-sm text-muted-foreground mb-1">우선순위</p>
|
||||
<p className="font-medium">{order.priorityLabel || '-'}</p>
|
||||
</div>
|
||||
|
||||
{/* 4행: 부서 | 생산 담당자 | 상태 | 비고 */}
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-1">부서</p>
|
||||
<p className="font-medium">{order.department || '-'}</p>
|
||||
</div>
|
||||
|
||||
{/* 4행: 생산 담당자 | 상태 | 비고 (colspan 2) */}
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-1">생산 담당자</p>
|
||||
<p className="font-medium">
|
||||
@@ -438,7 +442,7 @@ export function WorkOrderDetail({ orderId }: WorkOrderDetailProps) {
|
||||
{WORK_ORDER_STATUS_LABELS[order.status]}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-1">비고</p>
|
||||
<p className="font-medium whitespace-pre-wrap">{order.note || '-'}</p>
|
||||
</div>
|
||||
|
||||
@@ -11,6 +11,7 @@ import { useState, useEffect, useCallback } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Pencil, Trash2 } from 'lucide-react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { DatePicker } from '@/components/ui/date-picker';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -365,7 +366,7 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
|
||||
<section className="bg-amber-50 border border-amber-200 rounded-lg p-6">
|
||||
<h3 className="font-semibold mb-4">기본 정보</h3>
|
||||
<div className="grid grid-cols-4 gap-x-6 gap-y-4">
|
||||
{/* 1행: 작업번호(읽기) | 수주일(읽기) | 공정구분(셀렉트) | 로트번호(읽기) */}
|
||||
{/* 1행: 작업번호(읽기) | 수주일(읽기) | 공정(셀렉트) | 구분(읽기) */}
|
||||
<div className="space-y-1">
|
||||
<Label className="text-sm text-muted-foreground">작업번호</Label>
|
||||
<Input value={workOrder?.workOrderNo || '-'} disabled className="bg-muted" />
|
||||
@@ -375,7 +376,7 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
|
||||
<Input value={workOrder?.salesOrderDate || '-'} disabled className="bg-muted" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-sm text-muted-foreground">공정구분 *</Label>
|
||||
<Label className="text-sm text-muted-foreground">공정 *</Label>
|
||||
<Select
|
||||
value={formData.processId?.toString() || ''}
|
||||
onValueChange={(value) => setFormData({ ...formData, processId: parseInt(value) })}
|
||||
@@ -393,12 +394,16 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-sm text-muted-foreground">구분</Label>
|
||||
<Input value="-" disabled className="bg-muted" />
|
||||
</div>
|
||||
|
||||
{/* 2행: 로트번호(읽기) | 수주처(읽기) | 현장명(입력) | 수주 담당자(읽기) */}
|
||||
<div className="space-y-1">
|
||||
<Label className="text-sm text-muted-foreground">로트번호</Label>
|
||||
<Input value={formData.orderNo || '-'} disabled className="bg-muted" />
|
||||
</div>
|
||||
|
||||
{/* 2행: 수주처(읽기) | 현장명(입력) | 수주 담당자(읽기) | 담당자 연락처(읽기) */}
|
||||
<div className="space-y-1">
|
||||
<Label className="text-sm text-muted-foreground">수주처</Label>
|
||||
<Input value={formData.client} disabled className="bg-muted" />
|
||||
@@ -415,19 +420,17 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
|
||||
<Label className="text-sm text-muted-foreground">수주 담당자</Label>
|
||||
<Input value="-" disabled className="bg-muted" />
|
||||
</div>
|
||||
|
||||
{/* 3행: 담당자 연락처(읽기) | 출고예정일(입력) | 틀수(읽기) | 우선순위(셀렉트) */}
|
||||
<div className="space-y-1">
|
||||
<Label className="text-sm text-muted-foreground">담당자 연락처</Label>
|
||||
<Input value="-" disabled className="bg-muted" />
|
||||
</div>
|
||||
|
||||
{/* 3행: 출고예정일(입력) | 틀수(읽기) | 우선순위(셀렉트) | 부서(읽기) */}
|
||||
<div className="space-y-1">
|
||||
<Label className="text-sm text-muted-foreground">출고예정일 *</Label>
|
||||
<Input
|
||||
type="date"
|
||||
<DatePicker
|
||||
value={formData.scheduledDate}
|
||||
onChange={(e) => setFormData({ ...formData, scheduledDate: e.target.value })}
|
||||
className="bg-white"
|
||||
onChange={(date) => setFormData({ ...formData, scheduledDate: date })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
@@ -452,12 +455,12 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 4행: 부서(읽기) | 생산 담당자(선택) | 상태(읽기) | 비고(입력) */}
|
||||
<div className="space-y-1">
|
||||
<Label className="text-sm text-muted-foreground">부서</Label>
|
||||
<Input value={workOrder?.department || '-'} disabled className="bg-muted" />
|
||||
</div>
|
||||
|
||||
{/* 4행: 생산 담당자(선택) | 상태(읽기) | 비고(입력, colspan 2) */}
|
||||
<div className="space-y-1">
|
||||
<Label className="text-sm text-muted-foreground">생산 담당자</Label>
|
||||
<div
|
||||
@@ -475,7 +478,7 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
|
||||
<Label className="text-sm text-muted-foreground">상태</Label>
|
||||
<Input value={workOrder ? (workOrder.status === 'waiting' ? '작업대기' : workOrder.status === 'in_progress' ? '작업중' : workOrder.status === 'completed' ? '작업완료' : workOrder.status) : '-'} disabled className="bg-muted" />
|
||||
</div>
|
||||
<div className="space-y-1 col-span-2">
|
||||
<div className="space-y-1">
|
||||
<Label className="text-sm text-muted-foreground">비고</Label>
|
||||
<Textarea
|
||||
value={formData.note}
|
||||
|
||||
@@ -57,12 +57,11 @@ export function WorkOrderList() {
|
||||
const router = useRouter();
|
||||
|
||||
// ===== 활성 탭 및 재공품 모달 =====
|
||||
const [activeTab, setActiveTab] = useState(TAB_ALL);
|
||||
const [activeTab, setActiveTab] = useState('screen');
|
||||
const [isWipModalOpen, setIsWipModalOpen] = useState(false);
|
||||
|
||||
// ===== 공정 목록 및 ID 매핑 (API에서 동적 로드) =====
|
||||
const [processList, setProcessList] = useState<ProcessOption[]>([]);
|
||||
const [processMap, setProcessMap] = useState<Record<string, number | string>>({});
|
||||
// ===== 공정 ID 매핑 (getProcessOptions) =====
|
||||
const [processMap, setProcessMap] = useState<Record<string, number>>({});
|
||||
const [processMapLoaded, setProcessMapLoaded] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -70,42 +69,17 @@ export function WorkOrderList() {
|
||||
try {
|
||||
const result = await getProcessOptions();
|
||||
if (result.success && result.data) {
|
||||
setProcessList(result.data);
|
||||
|
||||
// 공정 ID → 탭 value 매핑 (공정 ID를 탭 value로 사용)
|
||||
const map: Record<string, number | string> = {
|
||||
[TAB_ALL]: TAB_ALL, // 전체: 필터 없음
|
||||
[TAB_OTHER]: 'none', // 기타: process_id IS NULL
|
||||
};
|
||||
const map: Record<string, number> = {};
|
||||
result.data.forEach((process: ProcessOption) => {
|
||||
// 탭 value = 공정 ID (문자열)
|
||||
map[String(process.id)] = process.id;
|
||||
// process_name 또는 process_code로 탭 매핑
|
||||
const tabKeyByName = PROCESS_NAME_TO_TAB[process.processName];
|
||||
const tabKeyByCode = PROCESS_CODE_TO_TAB[process.processCode];
|
||||
const tabKey = tabKeyByName || tabKeyByCode;
|
||||
if (tabKey) {
|
||||
map[tabKey] = process.id;
|
||||
}
|
||||
});
|
||||
setProcessMap(map);
|
||||
|
||||
// 탭 카운트 조회 (전체 + 기타 + 각 공정)
|
||||
const tabKeys = [TAB_ALL, TAB_OTHER, ...result.data.map(p => String(p.id))];
|
||||
const countPromises = tabKeys.map(async (tabKey) => {
|
||||
let res;
|
||||
if (tabKey === TAB_ALL) {
|
||||
// 전체: processId 파라미터 없이
|
||||
res = await getWorkOrders({ page: 1, perPage: 1 });
|
||||
} else if (tabKey === TAB_OTHER) {
|
||||
// 기타: process_id = none (NULL)
|
||||
res = await getWorkOrders({ page: 1, perPage: 1, processId: 'none' as unknown as number });
|
||||
} else {
|
||||
// 공정별: 해당 공정 ID
|
||||
res = await getWorkOrders({ page: 1, perPage: 1, processId: Number(tabKey) });
|
||||
}
|
||||
return { tabKey, count: res.success ? res.pagination.total : 0 };
|
||||
});
|
||||
|
||||
const counts = await Promise.all(countPromises);
|
||||
const newTabCounts: Record<string, number> = {};
|
||||
counts.forEach(({ tabKey, count }) => {
|
||||
newTabCounts[tabKey] = count;
|
||||
});
|
||||
setTabCounts(newTabCounts);
|
||||
}
|
||||
} catch (error) {
|
||||
if (isNextRedirectError(error)) throw error;
|
||||
@@ -156,24 +130,20 @@ export function WorkOrderList() {
|
||||
router.push('/ko/production/work-orders?mode=new');
|
||||
}, [router]);
|
||||
|
||||
// ===== 탭 옵션 (전체 + 공정들 + 기타) — 카운트는 API 응답으로 동적 업데이트 =====
|
||||
// ===== 탭 옵션 (공정 기반 3개) — 카운트는 API 응답으로 동적 업데이트 =====
|
||||
const [tabCounts, setTabCounts] = useState<Record<string, number>>({
|
||||
[TAB_ALL]: 0,
|
||||
[TAB_OTHER]: 0,
|
||||
screen: 0,
|
||||
slat: 0,
|
||||
bending: 0,
|
||||
});
|
||||
|
||||
const tabs: TabOption[] = useMemo(
|
||||
() => [
|
||||
{ value: TAB_ALL, label: '전체', count: tabCounts[TAB_ALL] },
|
||||
// 공정 목록에서 동적 생성
|
||||
...processList.map((process) => ({
|
||||
value: String(process.id),
|
||||
label: process.processName,
|
||||
count: tabCounts[String(process.id)] || 0,
|
||||
})),
|
||||
{ value: TAB_OTHER, label: '기타', count: tabCounts[TAB_OTHER] },
|
||||
{ value: 'screen', label: '스크린 공정', count: tabCounts.screen },
|
||||
{ value: 'slat', label: '슬랫 공정', count: tabCounts.slat },
|
||||
{ value: 'bending', label: '절곡 공정', count: tabCounts.bending },
|
||||
],
|
||||
[tabCounts, processList]
|
||||
[tabCounts]
|
||||
);
|
||||
|
||||
// ===== 통계 카드 6개 (기획서 기반) =====
|
||||
@@ -235,31 +205,29 @@ export function WorkOrderList() {
|
||||
actions: {
|
||||
getList: async (params?: ListParams) => {
|
||||
try {
|
||||
// 탭 value 확인
|
||||
const tabValue = params?.tab || TAB_ALL;
|
||||
// 탭 → processId 매핑
|
||||
const tabValue = params?.tab || 'screen';
|
||||
setActiveTab(tabValue);
|
||||
const processId = processMap[tabValue];
|
||||
|
||||
// 해당 공정이 DB에 없으면 빈 목록 반환
|
||||
if (!processId) {
|
||||
return {
|
||||
success: true,
|
||||
data: [],
|
||||
totalCount: 0,
|
||||
totalPages: 0,
|
||||
};
|
||||
}
|
||||
|
||||
// 필터 값 추출
|
||||
const statusFilter = params?.filters?.status as string | undefined;
|
||||
const priorityFilter = params?.filters?.priority as string | undefined;
|
||||
|
||||
// processId 결정
|
||||
let processIdParam: number | 'none' | undefined;
|
||||
if (tabValue === TAB_ALL) {
|
||||
// 전체: processId 파라미터 없음
|
||||
processIdParam = undefined;
|
||||
} else if (tabValue === TAB_OTHER) {
|
||||
// 기타: process_id IS NULL
|
||||
processIdParam = 'none';
|
||||
} else {
|
||||
// 공정별: 해당 공정 ID
|
||||
processIdParam = Number(tabValue);
|
||||
}
|
||||
|
||||
const result = await getWorkOrders({
|
||||
page: params?.page || 1,
|
||||
perPage: params?.pageSize || ITEMS_PER_PAGE,
|
||||
processId: processIdParam as number | undefined,
|
||||
processId,
|
||||
status: statusFilter && statusFilter !== 'all'
|
||||
? (statusFilter as WorkOrderStatus)
|
||||
: undefined,
|
||||
@@ -306,8 +274,8 @@ export function WorkOrderList() {
|
||||
{ key: 'lotNo', label: '로트번호', className: 'min-w-[120px]' },
|
||||
{ key: 'client', label: '수주처', className: 'min-w-[120px]' },
|
||||
{ key: 'projectName', label: '현장명', className: 'min-w-[150px]' },
|
||||
{ key: 'processName', label: '공정', className: 'w-[80px]' },
|
||||
{ key: 'itemCount', label: '틀수', className: 'w-[70px] text-center' },
|
||||
{ key: 'shutterCount', label: '틀수', className: 'w-[70px] text-center' },
|
||||
{ key: 'category', label: '구분', className: 'w-[80px]' },
|
||||
{ key: 'status', label: '상태', className: 'w-[90px]' },
|
||||
{ key: 'priority', label: '우선순위', className: 'w-[80px]' },
|
||||
{ key: 'department', label: '부서', className: 'w-[90px]' },
|
||||
@@ -401,18 +369,8 @@ export function WorkOrderList() {
|
||||
<TableCell>{item.lotNo}</TableCell>
|
||||
<TableCell>{item.client}</TableCell>
|
||||
<TableCell className="max-w-[200px] truncate">{item.projectName}</TableCell>
|
||||
<TableCell>
|
||||
{item.processName && item.processName !== '-' ? (
|
||||
<Badge variant="outline" className="text-xs font-medium">
|
||||
{item.processName}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-xs text-muted-foreground">
|
||||
미지정
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">{item.items?.length || item.shutterCount || '-'}</TableCell>
|
||||
<TableCell className="text-center">{item.shutterCount ?? '-'}</TableCell>
|
||||
<TableCell>{'-'}</TableCell>
|
||||
<TableCell>
|
||||
<Badge className={`${WORK_ORDER_STATUS_COLORS[item.status]} border-0`}>
|
||||
{WORK_ORDER_STATUS_LABELS[item.status]}
|
||||
|
||||
@@ -134,13 +134,18 @@ export function WorkItemCard({
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 공정 단계 버튼 - 중간검사는 포장완료 앞에 위치 */}
|
||||
{/* 공정 단계 버튼 - 중간검사 포함 인라인 */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{/* 포장완료 전 단계들 */}
|
||||
{item.steps.slice(0, -1).map((step) => (
|
||||
{item.steps.map((step) => (
|
||||
<button
|
||||
key={step.id}
|
||||
onClick={() => handleStepClick(step)}
|
||||
onClick={() => {
|
||||
if (step.isInspection && onInspectionClick) {
|
||||
onInspectionClick(item.id);
|
||||
} else {
|
||||
handleStepClick(step);
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
|
||||
step.isCompleted
|
||||
@@ -154,36 +159,6 @@ export function WorkItemCard({
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
{/* 중간검사 버튼 - 포장완료 앞 */}
|
||||
{onInspectionClick && (
|
||||
<button
|
||||
onClick={() => onInspectionClick(item.id)}
|
||||
className="px-4 py-2 rounded-lg text-sm font-medium transition-colors bg-gray-800 text-white hover:bg-gray-700"
|
||||
>
|
||||
중간검사
|
||||
</button>
|
||||
)}
|
||||
{/* 포장완료 (마지막 단계) */}
|
||||
{item.steps.length > 0 && (() => {
|
||||
const lastStep = item.steps[item.steps.length - 1];
|
||||
return (
|
||||
<button
|
||||
key={lastStep.id}
|
||||
onClick={() => handleStepClick(lastStep)}
|
||||
className={cn(
|
||||
'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
|
||||
lastStep.isCompleted
|
||||
? 'bg-emerald-500 text-white hover:bg-emerald-600'
|
||||
: 'bg-gray-800 text-white hover:bg-gray-700'
|
||||
)}
|
||||
>
|
||||
{lastStep.name}
|
||||
{lastStep.isCompleted && (
|
||||
<span className="ml-1.5 font-semibold">완료</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{/* 자재 투입 목록 (토글) */}
|
||||
|
||||
@@ -15,10 +15,11 @@
|
||||
|
||||
import { useState, useMemo, useCallback, useEffect } from 'react';
|
||||
import { useMenuStore } from '@/store/menuStore';
|
||||
import { ClipboardList, PlayCircle, CheckCircle2, AlertTriangle } from 'lucide-react';
|
||||
import { ClipboardList, PlayCircle, CheckCircle2, AlertTriangle, ChevronDown, ChevronUp, List } from 'lucide-react';
|
||||
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,
|
||||
@@ -30,6 +31,7 @@ import {
|
||||
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 } from './actions';
|
||||
import { getProcessList } from '@/components/process-management/actions';
|
||||
@@ -67,7 +69,8 @@ const MOCK_ITEMS: Record<ProcessTab, WorkItemData[]> = {
|
||||
{ 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, 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' },
|
||||
@@ -82,7 +85,8 @@ const MOCK_ITEMS: Record<ProcessTab, WorkItemData[]> = {
|
||||
{ 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, isCompleted: false },
|
||||
{ id: 's2-4', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
|
||||
{ id: 's2-5', name: '포장완료', isMaterialInput: false, isCompleted: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -93,7 +97,8 @@ const MOCK_ITEMS: Record<ProcessTab, WorkItemData[]> = {
|
||||
{ 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, isCompleted: false },
|
||||
{ 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' },
|
||||
@@ -108,7 +113,8 @@ const MOCK_ITEMS: Record<ProcessTab, WorkItemData[]> = {
|
||||
steps: [
|
||||
{ id: 'l1-1', name: '자재투입', isMaterialInput: true, isCompleted: true },
|
||||
{ id: 'l1-2', name: '포밍/절단', isMaterialInput: false, isCompleted: false },
|
||||
{ id: 'l1-3', 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' },
|
||||
@@ -121,7 +127,8 @@ const MOCK_ITEMS: Record<ProcessTab, WorkItemData[]> = {
|
||||
steps: [
|
||||
{ id: 'l2-1', name: '자재투입', isMaterialInput: true, isCompleted: false },
|
||||
{ id: 'l2-2', name: '포밍/절단', isMaterialInput: false, isCompleted: false },
|
||||
{ id: 'l2-3', name: '포장완료', isMaterialInput: false, isCompleted: false },
|
||||
{ id: 'l2-3', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
|
||||
{ id: 'l2-4', name: '포장완료', isMaterialInput: false, isCompleted: false },
|
||||
],
|
||||
},
|
||||
],
|
||||
@@ -143,7 +150,7 @@ const MOCK_ITEMS: Record<ProcessTab, WorkItemData[]> = {
|
||||
{ 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, isCompleted: false },
|
||||
{ id: 'b1-4', name: '중간검사', isMaterialInput: false, isInspection: true, isCompleted: false },
|
||||
],
|
||||
},
|
||||
],
|
||||
@@ -159,6 +166,7 @@ const MOCK_ITEMS_BENDING_WIP: WorkItemData[] = [
|
||||
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 },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -169,6 +177,7 @@ const MOCK_ITEMS_BENDING_WIP: WorkItemData[] = [
|
||||
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 },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -179,6 +188,7 @@ const MOCK_ITEMS_BENDING_WIP: WorkItemData[] = [
|
||||
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 },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -193,7 +203,8 @@ const MOCK_ITEMS_SLAT_JOINTBAR: WorkItemData[] = [
|
||||
steps: [
|
||||
{ id: 'jb1-1', name: '자재투입', isMaterialInput: true, isCompleted: true },
|
||||
{ id: 'jb1-2', name: '포밍/절단', isMaterialInput: false, isCompleted: false },
|
||||
{ id: 'jb1-3', 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' },
|
||||
@@ -207,33 +218,60 @@ const MOCK_ITEMS_SLAT_JOINTBAR: WorkItemData[] = [
|
||||
steps: [
|
||||
{ id: 'jb2-1', name: '자재투입', isMaterialInput: true, isCompleted: false },
|
||||
{ id: 'jb2-2', name: '포밍/절단', isMaterialInput: false, isCompleted: false },
|
||||
{ id: 'jb2-3', 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';
|
||||
}
|
||||
|
||||
const MOCK_SIDEBAR_ORDERS: SidebarOrder[] = [
|
||||
{ id: 'order-1', siteName: '현장명', date: '2024-09-24', quantity: 7, shutterCount: 5, priority: 'urgent' },
|
||||
{ id: 'order-2', siteName: '현장명', date: '2024-09-24', quantity: 7, shutterCount: 5, priority: 'priority' },
|
||||
{ id: 'order-3', siteName: '현장명', date: '2024-09-24', quantity: 7, shutterCount: 5, priority: 'normal' },
|
||||
{ id: 'order-4', siteName: '현장명', date: '2024-09-24', quantity: 7, shutterCount: 5, priority: 'normal' },
|
||||
];
|
||||
|
||||
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 }[]> = {
|
||||
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 },
|
||||
{ name: '중간검사', isMaterialInput: false, isInspection: true },
|
||||
],
|
||||
bending_wip: [
|
||||
{ name: '자재투입', isMaterialInput: true },
|
||||
{ name: '절단', isMaterialInput: false },
|
||||
{ name: '중간검사', isMaterialInput: false, isInspection: true },
|
||||
],
|
||||
};
|
||||
|
||||
@@ -247,9 +285,14 @@ export default function WorkerScreen() {
|
||||
const [slatSubMode, setSlatSubMode] = useState<'normal' | 'jointbar'>('normal');
|
||||
|
||||
// 작업 정보
|
||||
const [departmentId, setDepartmentId] = useState('');
|
||||
const [productionManagerId, setProductionManagerId] = useState('');
|
||||
const [productionDate, setProductionDate] = useState('');
|
||||
|
||||
// 좌측 사이드바
|
||||
const [selectedSidebarOrderId, setSelectedSidebarOrderId] = useState<string>('order-1');
|
||||
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
||||
|
||||
// 공정별 step 완료 상태: { [itemId-stepName]: boolean }
|
||||
const [stepCompletionMap, setStepCompletionMap] = useState<Record<string, boolean>>({});
|
||||
|
||||
@@ -276,6 +319,17 @@ export default function WorkerScreen() {
|
||||
loadData();
|
||||
}, [loadData]);
|
||||
|
||||
// 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);
|
||||
@@ -388,13 +442,15 @@ export default function WorkerScreen() {
|
||||
// ===== WorkOrder → WorkItemData 변환 + 목업 =====
|
||||
const workItems: WorkItemData[] = useMemo(() => {
|
||||
const apiItems: WorkItemData[] = filteredWorkOrders.map((order, index) => {
|
||||
const stepsTemplate = PROCESS_STEPS[activeTab];
|
||||
const stepsKey = (activeTab === 'bending' && bendingSubMode === 'wip') ? 'bending_wip' : activeTab;
|
||||
const stepsTemplate = PROCESS_STEPS[stepsKey];
|
||||
const steps: WorkStepData[] = stepsTemplate.map((st, si) => {
|
||||
const stepKey = `${order.id}-${st.name}`;
|
||||
return {
|
||||
id: `${order.id}-step-${si}`,
|
||||
name: st.name,
|
||||
isMaterialInput: st.isMaterialInput,
|
||||
isInspection: st.isInspection,
|
||||
isCompleted: stepCompletionMap[stepKey] || false,
|
||||
};
|
||||
});
|
||||
@@ -708,19 +764,17 @@ export default function WorkerScreen() {
|
||||
|
||||
return (
|
||||
<PageLayout>
|
||||
<div className="space-y-6 pb-20">
|
||||
<div className="pb-20">
|
||||
{/* 완료 토스트 */}
|
||||
{toastInfo && <CompletionToast info={toastInfo} />}
|
||||
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center gap-3">
|
||||
<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">
|
||||
{hasJointBarItems ? '슬랫 조인트바 공정' : hasWipItems ? '절곡 재공품 공정' : '작업자 화면'}
|
||||
</h1>
|
||||
<h1 className="text-2xl font-bold">작업자 화면</h1>
|
||||
<p className="text-sm text-muted-foreground">작업을 관리합니다</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -738,183 +792,183 @@ export default function WorkerScreen() {
|
||||
))}
|
||||
</TabsList>
|
||||
|
||||
{/* 탭 내용은 공통 (탭별 필터링만 다름) */}
|
||||
{(['screen', 'slat', 'bending'] as ProcessTab[]).map((tab) => (
|
||||
<TabsContent key={tab} value={tab}>
|
||||
<div className="space-y-6 mt-4">
|
||||
{/* 상태 카드 */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<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>
|
||||
|
||||
{/* 슬랫 탭: 슬랫/조인트바 전환 토글 */}
|
||||
{tab === 'slat' && (
|
||||
<TabsContent key={tab} value={tab} 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">
|
||||
<div className="flex items-center gap-1 p-1 bg-gray-100 rounded-lg w-fit">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSlatSubMode('normal')}
|
||||
className={`px-4 py-1.5 text-sm font-medium rounded-md transition-colors ${
|
||||
slatSubMode === 'normal'
|
||||
? 'bg-white text-gray-900 shadow-sm'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
슬랫
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSlatSubMode('jointbar')}
|
||||
className={`px-4 py-1.5 text-sm font-medium rounded-md transition-colors ${
|
||||
slatSubMode === 'jointbar'
|
||||
? 'bg-blue-500 text-white shadow-sm'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
조인트바
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-xs text-gray-400">* 샘플 데이터 전환용</span>
|
||||
<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={tab}
|
||||
slatSubMode={slatSubMode}
|
||||
setSlatSubMode={setSlatSubMode}
|
||||
bendingSubMode={bendingSubMode}
|
||||
setBendingSubMode={setBendingSubMode}
|
||||
selectedOrderId={selectedSidebarOrderId}
|
||||
onSelectOrder={(id) => {
|
||||
setSelectedSidebarOrderId(id);
|
||||
setIsSidebarOpen(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 절곡 탭: 절곡/재공품 전환 토글 */}
|
||||
{tab === 'bending' && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1 p-1 bg-gray-100 rounded-lg w-fit">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setBendingSubMode('normal')}
|
||||
className={`px-4 py-1.5 text-sm font-medium rounded-md transition-colors ${
|
||||
bendingSubMode === 'normal'
|
||||
? 'bg-white text-gray-900 shadow-sm'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
절곡
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setBendingSubMode('wip')}
|
||||
className={`px-4 py-1.5 text-sm font-medium rounded-md transition-colors ${
|
||||
bendingSubMode === 'wip'
|
||||
? 'bg-orange-500 text-white shadow-sm'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
재공품
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-xs text-gray-400">* 샘플 데이터 전환용</span>
|
||||
</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={tab}
|
||||
slatSubMode={slatSubMode}
|
||||
setSlatSubMode={setSlatSubMode}
|
||||
bendingSubMode={bendingSubMode}
|
||||
setBendingSubMode={setBendingSubMode}
|
||||
selectedOrderId={selectedSidebarOrderId}
|
||||
onSelectOrder={setSelectedSidebarOrderId}
|
||||
/>
|
||||
</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-2 md:grid-cols-4 gap-x-6 gap-y-3">
|
||||
<InfoField label="수주일" value={orderInfo?.orderDate} />
|
||||
<InfoField label="로트번호" value={orderInfo?.lotNo} />
|
||||
<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>
|
||||
|
||||
{/* 작업 정보 섹션 */}
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<h3 className="text-sm font-semibold text-gray-900 mb-3">작업 정보</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-sm text-gray-600">생산 담당자</Label>
|
||||
<Select
|
||||
value={productionManagerId}
|
||||
onValueChange={setProductionManagerId}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{/* 담당자 목록 - 현재 작업 담당자들 */}
|
||||
{Array.from(
|
||||
new Set(
|
||||
filteredWorkOrders.flatMap((o) => o.assignees || []).filter(Boolean)
|
||||
)
|
||||
).map((name) => (
|
||||
<SelectItem key={name} value={name}>
|
||||
{name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{/* 수주 정보 */}
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<h3 className="text-sm font-semibold text-gray-900 mb-3">수주 정보</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-3">
|
||||
<InfoField label="수주일" value={orderInfo?.orderDate} />
|
||||
<InfoField label="로트번호" value={orderInfo?.lotNo} />
|
||||
<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>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-sm text-gray-600">생산일자</Label>
|
||||
<Input
|
||||
type="date"
|
||||
value={productionDate}
|
||||
onChange={(e) => setProductionDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</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">
|
||||
{workItems.map((item) => (
|
||||
<WorkItemCard
|
||||
key={item.id}
|
||||
item={item}
|
||||
onStepClick={handleStepClick}
|
||||
onEditMaterial={handleEditMaterial}
|
||||
onDeleteMaterial={handleDeleteMaterial}
|
||||
onInspectionClick={handleInspectionClick}
|
||||
/>
|
||||
))}
|
||||
</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-3 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-sm text-gray-600">부서</Label>
|
||||
<Select
|
||||
value={departmentId}
|
||||
onValueChange={setDepartmentId}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="production">생산부서</SelectItem>
|
||||
<SelectItem value="quality">품질관리부</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-sm text-gray-600">생산 담당자</Label>
|
||||
<Select
|
||||
value={productionManagerId}
|
||||
onValueChange={setProductionManagerId}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{Array.from(
|
||||
new Set(
|
||||
filteredWorkOrders.flatMap((o) => o.assignees || []).filter(Boolean)
|
||||
)
|
||||
).map((name) => (
|
||||
<SelectItem key={name} value={name}>
|
||||
{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">
|
||||
{workItems.map((item) => (
|
||||
<WorkItemCard
|
||||
key={item.id}
|
||||
item={item}
|
||||
onStepClick={handleStepClick}
|
||||
onEditMaterial={handleEditMaterial}
|
||||
onDeleteMaterial={handleDeleteMaterial}
|
||||
onInspectionClick={handleInspectionClick}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
@@ -922,11 +976,10 @@ export default function WorkerScreen() {
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
{/* 하단 고정 버튼 - DetailActions 패턴 적용 */}
|
||||
{/* 하단 고정 버튼 */}
|
||||
<div className={`fixed bottom-4 left-4 right-4 px-4 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 md:bottom-6 md:px-6 md:right-[48px] ${sidebarCollapsed ? 'md:left-[156px]' : 'md:left-[316px]'}`}>
|
||||
<div className="flex gap-3">
|
||||
{hasWipItems ? (
|
||||
// 재공품: 버튼 1개
|
||||
<Button
|
||||
onClick={handleInspection}
|
||||
className="flex-1 py-6 text-base font-medium bg-gray-900 hover:bg-gray-800"
|
||||
@@ -934,7 +987,6 @@ export default function WorkerScreen() {
|
||||
작업일지 및 검사성적서 보기
|
||||
</Button>
|
||||
) : (
|
||||
// 일반/조인트바: 버튼 2개
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
@@ -1017,6 +1069,121 @@ export default function WorkerScreen() {
|
||||
);
|
||||
}
|
||||
|
||||
// ===== 사이드바 컨텐츠 =====
|
||||
interface SidebarContentProps {
|
||||
tab: ProcessTab;
|
||||
slatSubMode: 'normal' | 'jointbar';
|
||||
setSlatSubMode: (mode: 'normal' | 'jointbar') => void;
|
||||
bendingSubMode: 'normal' | 'wip';
|
||||
setBendingSubMode: (mode: 'normal' | 'wip') => void;
|
||||
selectedOrderId: string;
|
||||
onSelectOrder: (id: string) => void;
|
||||
}
|
||||
|
||||
function SidebarContent({
|
||||
tab,
|
||||
slatSubMode,
|
||||
setSlatSubMode,
|
||||
bendingSubMode,
|
||||
setBendingSubMode,
|
||||
selectedOrderId,
|
||||
onSelectOrder,
|
||||
}: SidebarContentProps) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-semibold text-gray-900">작업 목록</h3>
|
||||
|
||||
{/* 서브 탭: 슬랫 */}
|
||||
{tab === 'slat' && (
|
||||
<div className="flex items-center gap-1 p-1 bg-gray-100 rounded-lg">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSlatSubMode('normal')}
|
||||
className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
slatSubMode === 'normal'
|
||||
? 'bg-white text-gray-900 shadow-sm'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
슬랫
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSlatSubMode('jointbar')}
|
||||
className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
slatSubMode === 'jointbar'
|
||||
? 'bg-blue-500 text-white shadow-sm'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
조인트바
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 서브 탭: 절곡 */}
|
||||
{tab === 'bending' && (
|
||||
<div className="flex items-center gap-1 p-1 bg-gray-100 rounded-lg">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setBendingSubMode('normal')}
|
||||
className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
bendingSubMode === 'normal'
|
||||
? 'bg-white text-gray-900 shadow-sm'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
절곡
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setBendingSubMode('wip')}
|
||||
className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
bendingSubMode === 'wip'
|
||||
? 'bg-orange-500 text-white shadow-sm'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
재공품
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 우선순위별 작업지시 카드 */}
|
||||
{PRIORITY_GROUPS.map((group) => {
|
||||
const orders = MOCK_SIDEBAR_ORDERS.filter((o) => o.priority === group.key);
|
||||
if (orders.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">
|
||||
{orders.map((order) => (
|
||||
<button
|
||||
key={order.id}
|
||||
type="button"
|
||||
onClick={() => onSelectOrder(order.id)}
|
||||
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'
|
||||
)}
|
||||
>
|
||||
<p className="font-medium text-gray-900">{order.siteName}</p>
|
||||
<div className="flex items-center justify-between mt-1 text-gray-500">
|
||||
<span>{order.date}</span>
|
||||
<span>{order.quantity}/{order.shutterCount}소</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ===== 하위 컴포넌트 =====
|
||||
|
||||
interface StatCardProps {
|
||||
|
||||
@@ -106,8 +106,9 @@ export interface BendingDetailPart {
|
||||
// ===== 공정 단계 (pill) =====
|
||||
export interface WorkStepData {
|
||||
id: string;
|
||||
name: string; // 단계명 (자재투입, 절단, 미싱, 포장완료)
|
||||
name: string; // 단계명 (자재투입, 절단, 미싱, 중간검사, 포장완료)
|
||||
isMaterialInput: boolean; // 자재투입 단계 여부
|
||||
isInspection?: boolean; // 중간검사 단계 여부
|
||||
isCompleted: boolean; // 완료 여부
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user