219 lines
10 KiB
TypeScript
219 lines
10 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 공정 상세 - 작업일지 양식 미리보기 모달
|
|||
|
|
*
|
|||
|
|
* 기획서 기준 양식:
|
|||
|
|
* - 신청업체/신청내용 테이블
|
|||
|
|
* - 순번/작업항목/규격/수량/단위/작업자/비고 테이블
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import { Printer, X } from 'lucide-react';
|
|||
|
|
import {
|
|||
|
|
Dialog,
|
|||
|
|
DialogContent,
|
|||
|
|
DialogTitle,
|
|||
|
|
} from '@/components/ui/dialog';
|
|||
|
|
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
|
|||
|
|
import { Button } from '@/components/ui/button';
|
|||
|
|
import type { Process } from '@/types/process';
|
|||
|
|
|
|||
|
|
interface ProcessWorkLogPreviewModalProps {
|
|||
|
|
open: boolean;
|
|||
|
|
onOpenChange: (open: boolean) => void;
|
|||
|
|
process: Process;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 공정명을 문서 코드로 매핑
|
|||
|
|
const getDocumentCode = (processName: string): string => {
|
|||
|
|
if (processName.includes('스크린')) return 'WL-SCR';
|
|||
|
|
if (processName.includes('슬랫')) return 'WL-SLT';
|
|||
|
|
if (processName.includes('절곡') || processName.includes('포밍')) return 'WL-BEN';
|
|||
|
|
return 'WL-STK';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 공정명을 부서명으로 매핑
|
|||
|
|
const getDepartmentName = (processName: string): string => {
|
|||
|
|
if (processName.includes('스크린')) return '스크린 생산부서';
|
|||
|
|
if (processName.includes('슬랫')) return '슬랫 생산부서';
|
|||
|
|
if (processName.includes('절곡')) return '절곡 생산부서';
|
|||
|
|
if (processName.includes('포밍')) return '포밍 생산부서';
|
|||
|
|
return process?.department || '생산부서';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export function ProcessWorkLogPreviewModal({
|
|||
|
|
open,
|
|||
|
|
onOpenChange,
|
|||
|
|
process
|
|||
|
|
}: ProcessWorkLogPreviewModalProps) {
|
|||
|
|
const handlePrint = () => {
|
|||
|
|
window.print();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const documentCode = getDocumentCode(process.processName);
|
|||
|
|
const departmentName = getDepartmentName(process.processName);
|
|||
|
|
const today = new Date().toLocaleDateString('ko-KR', {
|
|||
|
|
year: 'numeric',
|
|||
|
|
month: '2-digit',
|
|||
|
|
day: '2-digit',
|
|||
|
|
}).replace(/\. /g, '-').replace('.', '');
|
|||
|
|
|
|||
|
|
// 샘플 작업항목 데이터 (기획서 기준)
|
|||
|
|
const workItems = [
|
|||
|
|
{ no: 1, name: '원단 재단', spec: 'W2900 × H3900', qty: 9, unit: 'EA', worker: '이작업', note: '' },
|
|||
|
|
{ no: 2, name: '미싱 작업', spec: 'W2800 × H3800', qty: 8, unit: 'EA', worker: '김작업', note: '' },
|
|||
|
|
{ no: 3, name: '앤드락 조립', spec: 'W2700 × H3700', qty: 7, unit: 'EA', worker: '이작업', note: '' },
|
|||
|
|
{ no: 4, name: '검수', spec: 'W2600 × H3600', qty: 6, unit: 'EA', worker: '김작업', note: '' },
|
|||
|
|
{ no: 5, name: '포장', spec: 'W2500 × H3500', qty: 5, unit: 'EA', worker: '이작업', note: '' },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|||
|
|
<DialogContent className="sm:max-w-5xl max-h-[90vh] overflow-y-auto p-0 gap-0 bg-gray-100">
|
|||
|
|
{/* 접근성을 위한 숨겨진 타이틀 */}
|
|||
|
|
<VisuallyHidden>
|
|||
|
|
<DialogTitle>{process.workLogTemplate} 미리보기</DialogTitle>
|
|||
|
|
</VisuallyHidden>
|
|||
|
|
|
|||
|
|
{/* 모달 헤더 */}
|
|||
|
|
<div className="flex items-center justify-between px-6 py-4 border-b bg-white sticky top-0 z-10">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<span className="font-semibold text-lg">{process.workLogTemplate} 미리보기</span>
|
|||
|
|
<span className="text-sm text-muted-foreground">({documentCode})</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<Button variant="outline" size="sm" onClick={handlePrint}>
|
|||
|
|
<Printer className="w-4 h-4 mr-1.5" />
|
|||
|
|
인쇄
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
variant="ghost"
|
|||
|
|
size="icon"
|
|||
|
|
className="h-8 w-8"
|
|||
|
|
onClick={() => onOpenChange(false)}
|
|||
|
|
>
|
|||
|
|
<X className="w-4 h-4" />
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 문서 본문 */}
|
|||
|
|
<div className="m-6 p-6 bg-white rounded-lg shadow-sm">
|
|||
|
|
{/* 문서 헤더: 로고 + 제목 + 결재라인 */}
|
|||
|
|
<div className="flex border border-gray-300 mb-6">
|
|||
|
|
{/* 좌측: 로고 영역 */}
|
|||
|
|
<div className="w-24 border-r border-gray-300 flex flex-col items-center justify-center p-3 shrink-0">
|
|||
|
|
<div className="text-2xl font-bold">KD</div>
|
|||
|
|
<div className="text-xs text-gray-500">정동기업</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 중앙: 문서 제목 */}
|
|||
|
|
<div className="flex-1 border-r border-gray-300 flex flex-col items-center justify-center p-3">
|
|||
|
|
<h1 className="text-xl font-bold tracking-widest mb-1">작 업 일 지</h1>
|
|||
|
|
<p className="text-xs text-gray-500">{documentCode}</p>
|
|||
|
|
<p className="text-sm font-medium mt-1">{departmentName}</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 우측: 결재라인 */}
|
|||
|
|
<div className="shrink-0">
|
|||
|
|
<table className="border-collapse text-xs h-full">
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td rowSpan={3} className="w-8 border-r border-gray-300 text-center align-middle bg-gray-100 font-medium">
|
|||
|
|
<div>결</div>
|
|||
|
|
<div>재</div>
|
|||
|
|
</td>
|
|||
|
|
<td className="w-16 p-2 text-center font-medium bg-gray-100 border-r border-b border-gray-300">작성</td>
|
|||
|
|
<td className="w-16 p-2 text-center font-medium bg-gray-100 border-r border-b border-gray-300">검토</td>
|
|||
|
|
<td className="w-16 p-2 text-center font-medium bg-gray-100 border-b border-gray-300">승인</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td className="w-16 p-2 text-center border-r border-b border-gray-300">
|
|||
|
|
<div>홍길동</div>
|
|||
|
|
<div className="text-[10px] text-gray-500">12/17</div>
|
|||
|
|
</td>
|
|||
|
|
<td className="w-16 p-2 text-center border-r border-b border-gray-300"></td>
|
|||
|
|
<td className="w-16 p-2 text-center border-b border-gray-300"></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td className="w-16 p-2 text-center bg-gray-50 border-r border-gray-300">판매/전진</td>
|
|||
|
|
<td className="w-16 p-2 text-center bg-gray-50 border-r border-gray-300">생산</td>
|
|||
|
|
<td className="w-16 p-2 text-center bg-gray-50">품질</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 신청업체 / 신청내용 테이블 */}
|
|||
|
|
<table className="w-full border-collapse border border-gray-300 mb-6 text-sm">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th colSpan={2} className="bg-gray-800 text-white p-2.5 font-medium border-r border-gray-300">
|
|||
|
|
신 청 업 체
|
|||
|
|
</th>
|
|||
|
|
<th colSpan={2} className="bg-gray-800 text-white p-2.5 font-medium">
|
|||
|
|
신 청 내 용
|
|||
|
|
</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr className="border-b border-gray-300">
|
|||
|
|
<td className="w-24 bg-gray-100 p-3 font-medium border-r border-gray-300">발 주 일</td>
|
|||
|
|
<td className="p-3 border-r border-gray-300">{today}</td>
|
|||
|
|
<td className="w-24 bg-gray-100 p-3 font-medium border-r border-gray-300">현 장 명</td>
|
|||
|
|
<td className="p-3">송도 오피스텔 A동</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr className="border-b border-gray-300">
|
|||
|
|
<td className="bg-gray-100 p-3 font-medium border-r border-gray-300">업 체 명</td>
|
|||
|
|
<td className="p-3 border-r border-gray-300">(주)인천건설</td>
|
|||
|
|
<td className="bg-gray-100 p-3 font-medium border-r border-gray-300">작업일자</td>
|
|||
|
|
<td className="p-3">{today}</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr className="border-b border-gray-300">
|
|||
|
|
<td className="bg-gray-100 p-3 font-medium border-r border-gray-300">담 당 자</td>
|
|||
|
|
<td className="p-3 border-r border-gray-300">김담당</td>
|
|||
|
|
<td className="bg-gray-100 p-3 font-medium border-r border-gray-300">제품 LOT NO.</td>
|
|||
|
|
<td className="p-3">KD-TS-251217-01-01</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td className="bg-gray-100 p-3 font-medium border-r border-gray-300">제품명</td>
|
|||
|
|
<td className="p-3 border-r border-gray-300">SH3040 방화셔터 W3000×H4000</td>
|
|||
|
|
<td className="bg-gray-100 p-3 font-medium border-r border-gray-300">마감유형</td>
|
|||
|
|
<td className="p-3">스크린 그레이</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
{/* 작업항목 테이블 */}
|
|||
|
|
<table className="w-full border-collapse border border-gray-300 text-sm">
|
|||
|
|
<thead>
|
|||
|
|
<tr className="bg-gray-800 text-white">
|
|||
|
|
<th className="p-2.5 font-medium border-r border-gray-600 w-16">순번</th>
|
|||
|
|
<th className="p-2.5 font-medium border-r border-gray-600">작업항목</th>
|
|||
|
|
<th className="p-2.5 font-medium border-r border-gray-600 w-40">규격</th>
|
|||
|
|
<th className="p-2.5 font-medium border-r border-gray-600 w-20">수량</th>
|
|||
|
|
<th className="p-2.5 font-medium border-r border-gray-600 w-16">단위</th>
|
|||
|
|
<th className="p-2.5 font-medium border-r border-gray-600 w-20">작업자</th>
|
|||
|
|
<th className="p-2.5 font-medium w-24">비고</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
{workItems.map((item, index) => (
|
|||
|
|
<tr key={item.no} className={index < workItems.length - 1 ? 'border-b border-gray-300' : ''}>
|
|||
|
|
<td className="p-3 text-center border-r border-gray-300">{item.no}</td>
|
|||
|
|
<td className="p-3 border-r border-gray-300">{item.name}</td>
|
|||
|
|
<td className="p-3 text-center border-r border-gray-300">{item.spec}</td>
|
|||
|
|
<td className="p-3 text-center border-r border-gray-300">{item.qty}</td>
|
|||
|
|
<td className="p-3 text-center border-r border-gray-300">{item.unit}</td>
|
|||
|
|
<td className="p-3 text-center border-r border-gray-300">{item.worker}</td>
|
|||
|
|
<td className="p-3 text-center">{item.note}</td>
|
|||
|
|
</tr>
|
|||
|
|
))}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</DialogContent>
|
|||
|
|
</Dialog>
|
|||
|
|
);
|
|||
|
|
}
|