diff options
Diffstat (limited to 'lib/itb')
| -rw-r--r-- | lib/itb/service.ts | 741 | ||||
| -rw-r--r-- | lib/itb/table/approve-purchase-request-dialog.tsx | 0 | ||||
| -rw-r--r-- | lib/itb/table/create-purchase-request-dialog.tsx | 995 | ||||
| -rw-r--r-- | lib/itb/table/create-rfq-dialog.tsx | 380 | ||||
| -rw-r--r-- | lib/itb/table/delete-purchase-request-dialog.tsx | 225 | ||||
| -rw-r--r-- | lib/itb/table/edit-purchase-request-sheet.tsx | 1081 | ||||
| -rw-r--r-- | lib/itb/table/items-dialog.tsx | 167 | ||||
| -rw-r--r-- | lib/itb/table/purchase-request-columns.tsx | 380 | ||||
| -rw-r--r-- | lib/itb/table/purchase-requests-table.tsx | 229 | ||||
| -rw-r--r-- | lib/itb/table/view-purchase-request-sheet.tsx | 809 | ||||
| -rw-r--r-- | lib/itb/validations.ts | 85 |
11 files changed, 5092 insertions, 0 deletions
diff --git a/lib/itb/service.ts b/lib/itb/service.ts new file mode 100644 index 00000000..66732c02 --- /dev/null +++ b/lib/itb/service.ts @@ -0,0 +1,741 @@ +// app/actions/purchase-requests.ts +"use server"; + +import db from "@/db/db"; +import { purchaseRequestsView, purchaseRequests, purchaseRequestAttachments, rfqsLast, rfqLastAttachments, rfqLastAttachmentRevisions,users } from "@/db/schema"; +import { eq, and, desc, ilike, or, sql, asc, inArray ,like} from "drizzle-orm"; +import { revalidatePath, revalidateTag } from "next/cache"; +import { getServerSession } from 'next-auth/next' +import { authOptions } from '@/app/api/auth/[...nextauth]/route' +import { filterColumns } from "@/lib/filter-columns"; +import { unstable_cache } from "@/lib/unstable-cache"; +import { GetPurchaseRequestsSchema } from "./validations"; +import { z } from "zod" + +const createRequestSchema = z.object({ + requestTitle: z.string().min(1), + requestDescription: z.string().optional(), + projectId: z.number().optional(), + projectCode: z.string().optional(), + projectName: z.string().optional(), + projectCompany: z.string().optional(), + projectSite: z.string().optional(), + classNo: z.string().optional(), + packageNo: z.string().optional(), + packageName: z.string().optional(), + majorItemMaterialCategory: z.string().optional(), + majorItemMaterialDescription: z.string().optional(), + smCode: z.string().optional(), + estimatedBudget: z.string().optional(), + requestedDeliveryDate: z.date().optional(), + items: z.array(z.object({ + id: z.string(), + itemCode: z.string(), + itemName: z.string(), + specification: z.string(), + quantity: z.number(), + unit: z.string(), + estimatedUnitPrice: z.number().optional(), + remarks: z.string().optional(), + })).optional(), + attachments: z.array(z.object({ + fileName: z.string(), + originalFileName: z.string(), + filePath: z.string(), + fileSize: z.number(), + fileType: z.string(), + })).optional(), +}) + +// 구매요청 생성 +export async function createPurchaseRequest(input: z.infer<typeof createRequestSchema>) { + try { + const session = await getServerSession(authOptions) + if (!session?.user?.id) { + return { error: "인증되지 않은 사용자입니다." } + } + + const userId = Number(session.user.id) + const data = createRequestSchema.parse(input) + + const result = await db.transaction(async (tx) => { + // 요청 번호 생성 + const year = new Date().getFullYear() + const lastRequest = await tx + .select() + .from(purchaseRequests) + .where(ilike(purchaseRequests.requestCode, `PR-${year}-%`)) + .orderBy(desc(purchaseRequests.requestCode)) + .limit(1) + + const nextNumber = lastRequest.length > 0 + ? parseInt(lastRequest[0].requestCode.split('-')[2]) + 1 + : 1 + + const requestCode = `PR-${year}-${String(nextNumber).padStart(5, '0')}` + + // 요청 생성 + const [request] = await tx + .insert(purchaseRequests) + .values({ + requestCode, + projectId: data.projectId, + projectCode: data.projectCode, + projectName: data.projectName, + projectCompany: data.projectCompany, + projectSite: data.projectSite, + classNo: data.classNo, + packageNo: data.packageNo, + packageName: data.packageName, + majorItemMaterialCategory: data.majorItemMaterialCategory, + majorItemMaterialDescription: data.majorItemMaterialDescription, + smCode: data.smCode, + requestTitle: data.requestTitle, + requestDescription: data.requestDescription, + estimatedBudget: data.estimatedBudget, + requestedDeliveryDate: data.requestedDeliveryDate, + items: data.items || [], + engPicId: userId, + engPicName: session.user.name, + status: "작성중", + createdBy: userId, + updatedBy: userId, + }) + .returning() + + // 첨부파일 저장 + if (data.attachments && data.attachments.length > 0) { + await tx.insert(purchaseRequestAttachments).values( + data.attachments.map(file => ({ + requestId: request.id, + ...file, + category: "설계문서", + createdBy: userId, + })) + ) + } + + return request + }) + + revalidateTag("purchase-requests") + + return { + success: true, + data: result, + message: `구매요청 ${result.requestCode}이(가) 생성되었습니다.` + } + } catch (error) { + console.error("Create purchase request error:", error) + return { error: "구매요청 생성 중 오류가 발생했습니다." } + } +} + +// 구매요청 수정 +export async function updatePurchaseRequest( + id: number, + input: Partial<z.infer<typeof createRequestSchema>> +) { + try { + const session = await getServerSession(authOptions) + if (!session?.user?.id) { + return { error: "인증되지 않은 사용자입니다." } + } + + const userId = Number(session.user.id) + + const result = await db.transaction(async (tx) => { + // 수정 가능한 상태인지 확인 + const [existing] = await tx + .select() + .from(purchaseRequests) + .where(eq(purchaseRequests.id, id)) + .limit(1) + + if (!existing) { + return { error: "구매요청을 찾을 수 없습니다." } + } + + if (existing.status !== "작성중") { + return { error: "작성중 상태의 요청만 수정할 수 있습니다." } + } + + // 구매요청 업데이트 + const [updated] = await tx + .update(purchaseRequests) + .set({ + projectId: input.projectId, + projectCode: input.projectCode, + projectName: input.projectName, + projectCompany: input.projectCompany, + projectSite: input.projectSite, + classNo: input.classNo, + packageNo: input.packageNo, + packageName: input.packageName, + majorItemMaterialCategory: input.majorItemMaterialCategory, + majorItemMaterialDescription: input.majorItemMaterialDescription, + smCode: input.smCode, + requestTitle: input.requestTitle, + requestDescription: input.requestDescription, + estimatedBudget: input.estimatedBudget, + requestedDeliveryDate: input.requestedDeliveryDate, + items: input.items || [], + updatedBy: userId, + updatedAt: new Date(), + }) + .where(eq(purchaseRequests.id, id)) + .returning() + + // 첨부파일 처리 + if (input.attachments !== undefined) { + // 기존 첨부파일 모두 삭제 + await tx + .delete(purchaseRequestAttachments) + .where(eq(purchaseRequestAttachments.requestId, id)) + + // 새 첨부파일 추가 + if (input.attachments && input.attachments.length > 0) { + await tx.insert(purchaseRequestAttachments).values( + input.attachments.map(file => ({ + requestId: id, + fileName: file.fileName, + originalFileName: file.originalFileName, + filePath: file.filePath, + fileSize: file.fileSize, + fileType: file.fileType, + category: "설계문서", + createdBy: userId, + })) + ) + } + } + + return updated + }) + + revalidateTag("purchase-requests") + + return { + success: true, + data: result, + message: "구매요청이 수정되었습니다." + } + } catch (error) { + console.error("Update purchase request error:", error) + return { error: "구매요청 수정 중 오류가 발생했습니다." } + } +} + +// 첨부파일 삭제 +export async function deletePurchaseRequestAttachment(attachmentId: number) { + const session = await getServerSession(authOptions) + if (!session?.user?.id) throw new Error("Unauthorized"); + await db.delete(purchaseRequestAttachments) + .where(eq(purchaseRequestAttachments.id, attachmentId)); + + revalidatePath("/evcp/purchase-requests"); +} + +// 요청 확정 (작성중 → 요청완료) +export async function confirmPurchaseRequest(requestId: number) { + const session = await getServerSession(authOptions) + if (!session?.user?.id) throw new Error("Unauthorized"); + + const userId = Number(session.user.id) + + const [request] = await db + .select() + .from(purchaseRequests) + .where(eq(purchaseRequests.id, requestId)); + + if (!request) throw new Error("Request not found"); + if (request.status !== "작성중") { + throw new Error("Only draft requests can be confirmed"); + } + + const [updated] = await db + .update(purchaseRequests) + .set({ + status: "요청완료", + confirmedAt: new Date(), + confirmedBy: userId, + updatedBy: userId, + updatedAt: new Date(), + }) + .where(eq(purchaseRequests.id, requestId)) + .returning(); + + revalidatePath("/evcp/purchase-requests"); + return updated; +} + +// 요청 승인 및 RFQ 생성 (첨부파일 이관 포함) +export async function approvePurchaseRequestAndCreateRfq( + requestId: number, + purchasePicId?: number +) { + const session = await getServerSession(authOptions) + if (!session?.user?.id) throw new Error("Unauthorized"); + const userId = Number(session.user.id) + + + return await db.transaction(async (tx) => { + // 구매 요청 및 첨부파일 조회 + const [request] = await tx + .select() + .from(purchaseRequests) + .where(eq(purchaseRequests.id, requestId)); + + const attachments = await tx + .select() + .from(purchaseRequestAttachments) + .where(eq(purchaseRequestAttachments.requestId, requestId)); + + + const rfqCode = await generateItbRfqCode(purchasePicId); + + const [rfq] = await tx.insert(rfqsLast).values({ + rfqCode, + projectId: request.projectId, + itemCode: request.items?.[0]?.itemCode, + itemName: request.items?.[0]?.itemName, + packageNo: request.packageNo, + packageName: request.packageName, + EngPicName: request.engPicName, + pic: purchasePicId || null, + status: "RFQ 생성", + projectCompany: request.projectCompany, + projectSite: request.projectSite, + smCode: request.smCode, + createdBy: userId, + updatedBy: userId, + }).returning(); + + // 첨부파일 이관 + for (const [index, attachment] of attachments.entries()) { + const [rfqAttachment] = await tx.insert(rfqLastAttachments).values({ + attachmentType: "설계", + serialNo: `ENG-${String(index + 1).padStart(3, '0')}`, + rfqId: rfq.id, + description: attachment.description || `설계문서 - ${attachment.originalFileName}`, + currentRevision: "Rev.0", + createdBy: userId, + }).returning(); + + const [revision] = await tx.insert(rfqLastAttachmentRevisions).values({ + attachmentId: rfqAttachment.id, + revisionNo: "Rev.0", + revisionComment: "구매 요청에서 이관된 설계 문서", + isLatest: true, + fileName: attachment.fileName, + originalFileName: attachment.originalFileName, + filePath: attachment.filePath, + fileSize: attachment.fileSize, + fileType: attachment.fileType, + createdBy: userId, + }).returning(); + + await tx + .update(rfqLastAttachments) + .set({ latestRevisionId: revision.id }) + .where(eq(rfqLastAttachments.id, rfqAttachment.id)); + } + + // 구매 요청 상태 업데이트 + await tx + .update(purchaseRequests) + .set({ + status: "RFQ생성완료", + rfqId: rfq.id, + rfqCode: rfq.rfqCode, + rfqCreatedAt: new Date(), + purchasePicId, + updatedBy: userId, + updatedAt: new Date(), + }) + .where(eq(purchaseRequests.id, requestId)); + + return rfq; + }); +} + +export async function getAllPurchaseRequests(input: GetPurchaseRequestsSchema) { + return unstable_cache( + async () => { + // 페이징 + const offset = ((input.page ?? 1) - 1) * (input.perPage ?? 10); + const limit = input.perPage ?? 10; + + // 고급 필터 + const advancedWhere = filterColumns({ + table: purchaseRequestsView, + filters: input.filters ?? [], + joinOperator: input.joinOperator ?? "and", + }); + + // 글로벌 검색 + let globalWhere; + if (input.search) { + const s = `%${input.search}%`; + globalWhere = or( + sql`${purchaseRequestsView.requestCode} ILIKE ${s}`, + sql`${purchaseRequestsView.requestTitle} ILIKE ${s}`, + sql`${purchaseRequestsView.projectCode} ILIKE ${s}`, + sql`${purchaseRequestsView.projectName} ILIKE ${s}`, + sql`${purchaseRequestsView.packageNo} ILIKE ${s}`, + sql`${purchaseRequestsView.packageName} ILIKE ${s}`, + sql`${purchaseRequestsView.engPicName} ILIKE ${s}`, + sql`${purchaseRequestsView.purchasePicName} ILIKE ${s}`, + sql`${purchaseRequestsView.majorItemMaterialCategory} ILIKE ${s}`, + sql`${purchaseRequestsView.smCode} ILIKE ${s}` + ); + } + + // 최종 WHERE + const finalWhere = and(advancedWhere, globalWhere); + + // 정렬 + const orderBy = input.sort?.length + ? input.sort.map((s) => { + const col = (purchaseRequestsView as any)[s.id]; + return s.desc ? desc(col) : asc(col); + }) + : [desc(purchaseRequestsView.createdAt)]; + + // 메인 SELECT + const [rows, total] = await db.transaction(async (tx) => { + const data = await tx + .select() + .from(purchaseRequestsView) + .where(finalWhere) + .orderBy(...orderBy) + .offset(offset) + .limit(limit); + + const [{ count }] = await tx + .select({ count: sql<number>`count(*)`.as("count") }) + .from(purchaseRequestsView) + .where(finalWhere); + + return [data, Number(count)]; + }); + + const pageCount = Math.ceil(total / limit); + return { data: rows, pageCount }; + }, + [JSON.stringify(input)], + { + revalidate: 60, + tags: ["purchase-requests"], + } + )(); +} + +// 통계 정보 조회 함수 (선택사항) +export async function getPurchaseRequestStats() { + return unstable_cache( + async () => { + const stats = await db + .select({ + total: sql<number>`count(*)`.as("total"), + draft: sql<number>`count(*) filter (where status = '작성중')`.as("draft"), + rfqCreated: sql<number>`count(*) filter (where status = 'RFQ생성완료')`.as("rfqCreated"), + }) + .from(purchaseRequestsView); + + return stats[0]; + }, + [], + { + revalidate: 60, + tags: ["purchase-request-stats"], + } + )(); +} + + +// 스키마 정의 +const deleteSchema = z.object({ + ids: z.array(z.number()), +}) + + +// 구매요청 삭제 (단일 또는 복수) +export async function deletePurchaseRequests(input: z.infer<typeof deleteSchema>) { + try { + const session = await getServerSession(authOptions) + if (!session?.user?.id) { + return { error: "인증되지 않은 사용자입니다." } + } + + const { ids } = deleteSchema.parse(input) + + if (ids.length === 0) { + return { error: "삭제할 요청을 선택해주세요." } + } + + // 삭제 가능한 상태인지 확인 (작성중 상태만 삭제 가능) + const requests = await db + .select({ + id: purchaseRequests.id, + status: purchaseRequests.status, + requestCode: purchaseRequests.requestCode, + }) + .from(purchaseRequests) + .where(inArray(purchaseRequests.id, ids)) + + const nonDeletable = requests.filter(req => req.status !== "작성중") + + if (nonDeletable.length > 0) { + const codes = nonDeletable.map(req => req.requestCode).join(", ") + return { + error: `다음 요청은 삭제할 수 없습니다: ${codes}. 작성중 상태의 요청만 삭제 가능합니다.` + } + } + + // 트랜잭션으로 삭제 처리 + await db.transaction(async (tx) => { + // 1. 첨부파일 먼저 삭제 + await tx + .delete(purchaseRequestAttachments) + .where(inArray(purchaseRequestAttachments.requestId, ids)) + + // 2. 구매요청 삭제 + await tx + .delete(purchaseRequests) + .where(inArray(purchaseRequests.id, ids)) + }) + + // 캐시 무효화 + revalidateTag("purchase-requests") + + return { + success: true, + message: ids.length === 1 + ? "구매요청이 삭제되었습니다." + : `${ids.length}개의 구매요청이 삭제되었습니다.` + } + } catch (error) { + console.error("Delete purchase requests error:", error) + return { error: "구매요청 삭제 중 오류가 발생했습니다." } + } +} + +export async function getPurchaseRequestAttachments(requestId: number) { + try { + const attachments = await db + .select({ + id: purchaseRequestAttachments.id, + fileName: purchaseRequestAttachments.fileName, + originalFileName: purchaseRequestAttachments.originalFileName, + filePath: purchaseRequestAttachments.filePath, + fileSize: purchaseRequestAttachments.fileSize, + fileType: purchaseRequestAttachments.fileType, + category: purchaseRequestAttachments.category, + description: purchaseRequestAttachments.description, + createdBy: purchaseRequestAttachments.createdBy, + createdAt: purchaseRequestAttachments.createdAt, + }) + .from(purchaseRequestAttachments) + .where(eq(purchaseRequestAttachments.requestId, requestId)) + .orderBy(desc(purchaseRequestAttachments.createdAt)) + + return { + success: true, + data: attachments + } + } catch (error) { + console.error("Get attachments error:", error) + return { + success: false, + error: "첨부파일 조회 중 오류가 발생했습니다.", + data: [] + } + } +} + + +export async function generateItbRfqCode(purchasePicId?: number): Promise<string> { + try { + let userCode = "???"; + + // purchasePicId가 있으면 users 테이블에서 userCode 조회 + if (purchasePicId) { + const [user] = await db + .select({ userCode: users.userCode }) + .from(users) + .where(eq(users.id, purchasePicId)) + .limit(1); + + if (user?.userCode) { + userCode = user.userCode; + } + } + + // 동일한 userCode로 시작하는 마지막 RFQ 조회 + const lastRfq = await db + .select({ rfqCode: rfqsLast.rfqCode }) + .from(rfqsLast) + .where(like(rfqsLast.rfqCode, `I${userCode}%`)) + .orderBy(desc(rfqsLast.createdAt)) + .limit(1); + + let nextNumber = 1; + + if (lastRfq.length > 0 && lastRfq[0].rfqCode) { + const rfqCode = lastRfq[0].rfqCode; + const serialNumber = rfqCode.slice(-5); // 마지막 5자리 + + if (/^\d{5}$/.test(serialNumber)) { + nextNumber = parseInt(serialNumber) + 1; + } + } + + const paddedNumber = String(nextNumber).padStart(5, "0"); + + return `I${userCode}${paddedNumber}`; + } catch (error) { + console.error("Error generating ITB RFQ code:", error); + const fallback = Date.now().toString().slice(-5); + return `I???${fallback}`; + } + } + + + // lib/purchase-requests/service.ts에 추가 + +// 여러 구매 요청 승인 및 RFQ 생성 +export async function approvePurchaseRequestsAndCreateRfqs( + requestIds: number[], + purchasePicId?: number + ) { + try { + const session = await getServerSession(authOptions) + if (!session?.user?.id) throw new Error("Unauthorized"); + const userId = Number(session.user.id) + + const results = [] + + for (const requestId of requestIds) { + try { + const result = await db.transaction(async (tx) => { + // 구매 요청 조회 + const [request] = await tx + .select() + .from(purchaseRequests) + .where(eq(purchaseRequests.id, requestId)) + + if (!request) { + throw new Error(`구매 요청 ${requestId}를 찾을 수 없습니다.`) + } + + if (request.status === "RFQ생성완료") { + return { skipped: true, requestId, message: "이미 RFQ가 생성되었습니다." } + } + + const attachments = await tx + .select() + .from(purchaseRequestAttachments) + .where(eq(purchaseRequestAttachments.requestId, requestId)) + + const rfqCode = await generateItbRfqCode(purchasePicId) + + const [rfq] = await tx + .insert(rfqsLast) + .values({ + rfqCode, + projectId: request.projectId, + itemCode: request.items?.[0]?.itemCode, + itemName: request.items?.[0]?.itemName, + packageNo: request.packageNo, + packageName: request.packageName, + EngPicName: request.engPicName, + pic: purchasePicId || null, + status: "RFQ 생성", + projectCompany: request.projectCompany, + projectSite: request.projectSite, + smCode: request.smCode, + createdBy: userId, + updatedBy: userId, + }) + .returning() + + // 첨부파일 이관 + for (const [index, attachment] of attachments.entries()) { + const [rfqAttachment] = await tx + .insert(rfqLastAttachments) + .values({ + attachmentType: "설계", + serialNo: `ENG-${String(index + 1).padStart(3, "0")}`, + rfqId: rfq.id, + description: + attachment.description || + `설계문서 - ${attachment.originalFileName}`, + currentRevision: "Rev.0", + createdBy: userId, + }) + .returning() + + const [revision] = await tx + .insert(rfqLastAttachmentRevisions) + .values({ + attachmentId: rfqAttachment.id, + revisionNo: "Rev.0", + revisionComment: "구매 요청에서 이관된 설계 문서", + isLatest: true, + fileName: attachment.fileName, + originalFileName: attachment.originalFileName, + filePath: attachment.filePath, + fileSize: attachment.fileSize, + fileType: attachment.fileType, + createdBy: userId, + }) + .returning() + + await tx + .update(rfqLastAttachments) + .set({ latestRevisionId: revision.id }) + .where(eq(rfqLastAttachments.id, rfqAttachment.id)) + } + + // 구매 요청 상태 업데이트 + await tx + .update(purchaseRequests) + .set({ + status: "RFQ생성완료", + rfqId: rfq.id, + rfqCode: rfq.rfqCode, + rfqCreatedAt: new Date(), + purchasePicId, + updatedBy: userId, + updatedAt: new Date(), + }) + .where(eq(purchaseRequests.id, requestId)) + + return { success: true, rfq, requestId } + }) + + results.push(result) + } catch (err: any) { + console.error(`구매 요청 ${requestId} 처리 중 오류:`, err) + results.push({ + success: false, + requestId, + error: err.message || "알 수 없는 오류 발생", + }) + } + } + + // 캐시 무효화 + revalidateTag("purchase-requests") + revalidateTag( "purchase-request-stats") + + revalidateTag("rfqs") + + return results + } catch (err: any) { + console.error("approvePurchaseRequestsAndCreateRfqs 실행 오류:", err) + throw new Error(err.message || "구매 요청 처리 중 오류가 발생했습니다.") + } + } +
\ No newline at end of file diff --git a/lib/itb/table/approve-purchase-request-dialog.tsx b/lib/itb/table/approve-purchase-request-dialog.tsx new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/lib/itb/table/approve-purchase-request-dialog.tsx diff --git a/lib/itb/table/create-purchase-request-dialog.tsx b/lib/itb/table/create-purchase-request-dialog.tsx new file mode 100644 index 00000000..27b8a342 --- /dev/null +++ b/lib/itb/table/create-purchase-request-dialog.tsx @@ -0,0 +1,995 @@ +// components/purchase-requests/create-purchase-request-dialog.tsx +"use client"; + +import * as React from "react"; +import { useForm, useFieldArray } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import * as z from "zod"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { Button } from "@/components/ui/button"; +import { Calendar } from "@/components/ui/calendar"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { + Tabs, + TabsContent, + TabsList, + TabsTrigger, +} from "@/components/ui/tabs"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { ProjectSelector } from "@/components/ProjectSelector"; +import { PackageSelector } from "@/components/PackageSelector"; +import type { PackageItem } from "@/lib/items/service"; +import { MaterialGroupSelector } from "@/components/common/material/material-group-selector"; +import { + Dropzone, + DropzoneDescription, + DropzoneInput, + DropzoneTitle, + DropzoneUploadIcon, + DropzoneZone, +} from "@/components/ui/dropzone"; +import { + FileList, + FileListAction, + FileListDescription, + FileListHeader, + FileListIcon, + FileListInfo, + FileListItem, + FileListName, + FileListSize, +} from "@/components/ui/file-list"; +import { Progress } from "@/components/ui/progress"; +import { Alert, AlertDescription } from "@/components/ui/alert"; +import { CalendarIcon, X, Plus, FileText, Package, Trash2, Upload, FileIcon, AlertCircle, Paperclip } from "lucide-react"; +import { format } from "date-fns"; +import { cn } from "@/lib/utils"; +import { createPurchaseRequest } from "../service"; +import { toast } from "sonner"; +import { nanoid } from "nanoid"; + +const attachmentSchema = z.object({ + fileName: z.string(), + originalFileName: z.string(), + filePath: z.string(), + fileSize: z.number(), + fileType: z.string(), +}); + +const itemSchema = z.object({ + id: z.string(), + itemCode: z.string(), + itemName: z.string().min(1, "아이템명을 입력해주세요"), + specification: z.string().default(""), + quantity: z.coerce.number().min(1, "수량은 1 이상이어야 합니다"), + unit: z.string().min(1, "단위를 입력해주세요"), + estimatedUnitPrice: z.coerce.number().optional(), + remarks: z.string().optional(), +}); + +const formSchema = z.object({ + requestTitle: z.string().min(1, "요청 제목을 입력해주세요"), + requestDescription: z.string().optional(), + projectId: z.number({ + required_error: "프로젝트를 선택해주세요", + }), + projectCode: z.string().min(1), + projectName: z.string().min(1), + projectCompany: z.string().optional(), + projectSite: z.string().optional(), + classNo: z.string().optional(), + packageNo: z.string({ + required_error: "패키지를 선택해주세요", + }).min(1, "패키지를 선택해주세요"), + packageName: z.string().min(1), + majorItemMaterialCategory: z.string({ + required_error: "자재그룹을 선택해주세요", + }).min(1, "자재그룹을 선택해주세요"), + majorItemMaterialDescription: z.string().min(1), + smCode: z.string({ + required_error: "SM 코드가 필요합니다", + }).min(1, "SM 코드가 필요합니다"), + estimatedBudget: z.string().optional(), + requestedDeliveryDate: z.date().optional(), + items: z.array(itemSchema).optional().default([]), + attachments: z.array(attachmentSchema).min(1, "최소 1개 이상의 파일을 첨부해주세요"), +}); + +type FormData = z.infer<typeof formSchema>; + +interface CreatePurchaseRequestDialogProps { + open: boolean; + onOpenChange: (open: boolean) => void; + onSuccess?: () => void; +} + +export function CreatePurchaseRequestDialog({ + open, + onOpenChange, + onSuccess, +}: CreatePurchaseRequestDialogProps) { + const [isLoading, setIsLoading] = React.useState(false); + const [activeTab, setActiveTab] = React.useState("basic"); + const [selectedPackage, setSelectedPackage] = React.useState<PackageItem | null>(null); + const [selectedMaterials, setSelectedMaterials] = React.useState<any[]>([]); + const [resetKey, setResetKey] = React.useState(0); + const [uploadedFiles, setUploadedFiles] = React.useState<File[]>([]); + const [isUploading, setIsUploading] = React.useState(false); + const [uploadProgress, setUploadProgress] = React.useState(0); + + const form = useForm<FormData>({ + resolver: zodResolver(formSchema), + mode: "onChange", + criteriaMode: "all", + defaultValues: { + requestTitle: "", + requestDescription: "", + projectId: undefined, + projectCode: "", + projectName: "", + projectCompany: "", + projectSite: "", + classNo: "", + packageNo: "", + packageName: "", + majorItemMaterialCategory: "", + majorItemMaterialDescription: "", + smCode: "", + estimatedBudget: "", + requestedDeliveryDate: undefined, + items: [], + attachments: [], + }, + }); + + const { fields, append, remove } = useFieldArray({ + control: form.control, + name: "items", + }); + + // 파일 업로드 핸들러 + const handleFileUpload = async (files: File[]) => { + if (files.length === 0) return; + + setIsUploading(true); + setUploadProgress(0); + + try { + const formData = new FormData(); + files.forEach(file => { + formData.append("files", file); + }); + + // 프로그레스 시뮬레이션 (실제로는 XMLHttpRequest 또는 fetch with progress를 사용) + const progressInterval = setInterval(() => { + setUploadProgress(prev => Math.min(prev + 10, 90)); + }, 200); + + const response = await fetch("/api/upload/purchase-request", { + method: "POST", + body: formData, + }); + + clearInterval(progressInterval); + setUploadProgress(100); + + if (!response.ok) { + throw new Error("파일 업로드 실패"); + } + + const data = await response.json(); + + // 업로드된 파일 정보를 상태에 추가 + const newFiles = [...uploadedFiles, ...data.files]; + setUploadedFiles(newFiles); + + // form의 attachments 필드 업데이트 + form.setValue("attachments", newFiles); + + toast.success(`${files.length}개 파일이 업로드되었습니다`); + } catch (error) { + console.error("Upload error:", error); + toast.error("파일 업로드 중 오류가 발생했습니다"); + } finally { + setIsUploading(false); + setUploadProgress(0); + } + }; + + // 파일 삭제 핸들러 + const handleFileRemove = (fileName: string) => { + const updatedFiles = uploadedFiles.filter(f => f.fileName !== fileName); + setUploadedFiles(updatedFiles); + form.setValue("attachments", updatedFiles); + }; + + // 프로젝트 선택 처리 + const handleProjectSelect = (project: any) => { + form.setValue("projectId", project.id); + form.setValue("projectCode", project.projectCode); + form.setValue("projectName", project.projectName); + form.setValue("projectCompany", project.projectCompany); + form.setValue("projectSite", project.projectSite); + + // 프로젝트 변경시 패키지 초기화 + setSelectedPackage(null); + form.setValue("packageNo", ""); + form.setValue("packageName", ""); + form.setValue("smCode", ""); + + // requestTitle 업데이트 + updateRequestTitle(project.projectName, "", ""); + }; + + // 패키지 선택 처리 + const handlePackageSelect = (packageItem: PackageItem) => { + setSelectedPackage(packageItem); + form.setValue("packageNo", packageItem.packageCode); + form.setValue("packageName", packageItem.description); + + // SM 코드가 패키지에 있으면 자동 설정 + if (packageItem.smCode) { + form.setValue("smCode", packageItem.smCode); + } + + // requestTitle 업데이트 + const projectName = form.getValues("projectName"); + const materialDesc = form.getValues("majorItemMaterialDescription"); + updateRequestTitle(projectName, packageItem.description, materialDesc); + }; + + // 자재그룹 선택 처리 + const handleMaterialsChange = (materials: any[]) => { + setSelectedMaterials(materials); + if (materials.length > 0) { + const material = materials[0]; // single select이므로 첫번째 항목만 + form.setValue("majorItemMaterialCategory", material.materialGroupCode); + form.setValue("majorItemMaterialDescription", material.materialGroupDescription); + + // requestTitle 업데이트 + const projectName = form.getValues("projectName"); + const packageName = form.getValues("packageName"); + updateRequestTitle(projectName, packageName, material.materialGroupDescription); + } else { + form.setValue("majorItemMaterialCategory", ""); + form.setValue("majorItemMaterialDescription", ""); + } + }; + + // requestTitle 자동 생성 + const updateRequestTitle = (projectName: string, packageName: string, materialDesc: string) => { + const parts = []; + if (projectName) parts.push(projectName); + if (packageName) parts.push(packageName); + if (materialDesc) parts.push(materialDesc); + + if (parts.length > 0) { + const title = `${parts.join(" - ")} 구매 요청`; + form.setValue("requestTitle", title); + } + }; + + const addItem = () => { + append({ + id: nanoid(), + itemCode: "", + itemName: "", + specification: "", + quantity: 1, + unit: "개", + estimatedUnitPrice: undefined, + remarks: "", + }); + }; + + const calculateTotal = () => { + const items = form.watch("items"); + return items?.reduce((sum, item) => { + const subtotal = (item.quantity || 0) * (item.estimatedUnitPrice || 0); + return sum + subtotal; + }, 0) || 0; + }; + + const onSubmit = async (values: FormData) => { + try { + setIsLoading(true); + + const result = await createPurchaseRequest({ + ...values, + items: values.items, + attachments: uploadedFiles, // 첨부파일 포함 + }); + + if (result.error) { + toast.error(result.error); + return; + } + + toast.success("구매 요청이 등록되었습니다"); + handleClose(); + onSuccess?.(); + } catch (error) { + toast.error("구매 요청 등록에 실패했습니다"); + console.error(error); + } finally { + setIsLoading(false); + } + }; + + const handleClose = () => { + form.reset({ + requestTitle: "", + requestDescription: "", + projectId: undefined, + projectCode: "", + projectName: "", + projectCompany: "", + projectSite: "", + classNo: "", + packageNo: "", + packageName: "", + majorItemMaterialCategory: "", + majorItemMaterialDescription: "", + smCode: "", + estimatedBudget: "", + requestedDeliveryDate: undefined, + items: [], + attachments: [], + }); + setSelectedPackage(null); + setSelectedMaterials([]); + setUploadedFiles([]); + setActiveTab("basic"); + setResetKey((k) => k + 1); + onOpenChange(false); + }; + + return ( + <Dialog open={open} onOpenChange={handleClose}> + <DialogContent key={resetKey} className="max-w-5xl h-[85vh] overflow-hidden flex flex-col min-h-0"> + <DialogHeader> + <DialogTitle>새 구매 요청</DialogTitle> + <DialogDescription> + 구매가 필요한 품목과 관련 정보를 입력해주세요 + </DialogDescription> + </DialogHeader> + + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmit)} className="flex-1 overflow-hidden flex flex-col min-h-0"> + <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col min-h-0"> + <TabsList className="grid w-full grid-cols-3 flex-shrink-0"> + <TabsTrigger value="basic"> + <FileText className="mr-2 h-4 w-4" /> + 기본 정보 + </TabsTrigger> + <TabsTrigger value="items"> + <Package className="mr-2 h-4 w-4" /> + 품목 정보 + {fields.length > 0 && ( + <span className="ml-2 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground"> + {fields.length} + </span> + )} + </TabsTrigger> + <TabsTrigger value="files"> + <Paperclip className="mr-2 h-4 w-4" /> + 첨부파일 + {uploadedFiles.length > 0 && ( + <span className="ml-2 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground"> + {uploadedFiles.length} + </span> + )} + </TabsTrigger> + </TabsList> + + <div className="flex-1 overflow-y-auto px-1 min-h-0"> + <TabsContent value="basic" className="space-y-6 mt-6"> + {/* 프로젝트 선택 */} + <Card> + <CardHeader> + <CardTitle className="text-base">프로젝트 정보 <span className="text-red-500">*</span></CardTitle> + <CardDescription>프로젝트, 패키지, 자재그룹을 순서대로 선택하세요</CardDescription> + </CardHeader> + <CardContent className="space-y-4"> + {/* 프로젝트 선택 */} + <FormField + control={form.control} + name="projectId" + render={({ field }) => ( + <FormItem> + <FormLabel>프로젝트 <span className="text-red-500">*</span></FormLabel> + <ProjectSelector + key={`project-${resetKey}`} + selectedProjectId={field.value} + onProjectSelect={handleProjectSelect} + placeholder="프로젝트를 검색하여 선택..." + /> + <FormMessage /> + </FormItem> + )} + /> + + {/* 패키지 선택 */} + <FormField + control={form.control} + name="packageNo" + render={({ field }) => ( + <FormItem> + <FormLabel>패키지 <span className="text-red-500">*</span></FormLabel> + <PackageSelector + projectNo={form.watch("projectCode")} + selectedPackage={selectedPackage} + onPackageSelect={handlePackageSelect} + placeholder="패키지 선택..." + /> + <FormMessage /> + </FormItem> + )} + /> + + {/* 자재그룹 선택 */} + <FormField + control={form.control} + name="majorItemMaterialCategory" + render={({ field }) => ( + <FormItem> + <FormLabel>자재그룹 <span className="text-red-500">*</span></FormLabel> + <MaterialGroupSelector + selectedMaterials={selectedMaterials} + onMaterialsChange={handleMaterialsChange} + singleSelect={true} + placeholder="자재그룹을 검색하세요..." + noValuePlaceHolder="자재그룹을 선택해주세요" + /> + <FormMessage /> + </FormItem> + )} + /> + + {/* SM 코드 */} + <FormField + control={form.control} + name="smCode" + render={({ field }) => ( + <FormItem> + <FormLabel>SM 코드 <span className="text-red-500">*</span></FormLabel> + <FormControl> + <Input + placeholder="SM 코드 입력" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* 선택된 정보 표시 */} + {form.watch("projectId") && ( + <div className="grid grid-cols-2 gap-4 pt-4 border-t"> + <div> + <p className="text-sm text-muted-foreground">프로젝트 코드</p> + <p className="font-medium">{form.watch("projectCode") || "-"}</p> + </div> + <div> + <p className="text-sm text-muted-foreground">프로젝트명</p> + <p className="font-medium">{form.watch("projectName") || "-"}</p> + </div> + <div> + <p className="text-sm text-muted-foreground">발주처</p> + <p className="font-medium">{form.watch("projectCompany") || "-"}</p> + </div> + <div> + <p className="text-sm text-muted-foreground">현장</p> + <p className="font-medium">{form.watch("projectSite") || "-"}</p> + </div> + </div> + )} + </CardContent> + </Card> + + {/* 기본 정보 */} + <div className="space-y-4"> + <FormField + control={form.control} + name="requestTitle" + render={({ field }) => ( + <FormItem> + <FormLabel>요청 제목 <span className="text-red-500">*</span></FormLabel> + <FormControl> + <Input + placeholder="예: 프로젝트 A용 밸브 구매" + {...field} + /> + </FormControl> + <FormDescription> + 자동 생성된 제목을 수정할 수 있습니다 + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="requestDescription" + render={({ field }) => ( + <FormItem> + <FormLabel>요청 설명</FormLabel> + <FormControl> + <Textarea + placeholder="구매 요청에 대한 상세 설명을 입력하세요" + className="min-h-[100px]" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </div> + + {/* 예산 및 납기 */} + <div className="space-y-4"> + <h3 className="text-sm font-medium">예산 및 납기</h3> + <div className="grid grid-cols-2 gap-4"> + <FormField + control={form.control} + name="estimatedBudget" + render={({ field }) => ( + <FormItem> + <FormLabel>예상 예산</FormLabel> + <FormControl> + <Input placeholder="예: 10,000,000원" {...field} /> + </FormControl> + <FormDescription> + 전체 구매 예상 예산을 입력하세요 + </FormDescription> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="requestedDeliveryDate" + render={({ field }) => ( + <FormItem> + <FormLabel>희망 납기일</FormLabel> + <Popover> + <PopoverTrigger asChild> + <FormControl> + <Button + variant="outline" + className={cn( + "w-full pl-3 text-left font-normal", + !field.value && "text-muted-foreground" + )} + > + {field.value ? ( + format(field.value, "yyyy-MM-dd") + ) : ( + <span>날짜 선택</span> + )} + <CalendarIcon className="ml-auto h-4 w-4 opacity-50" /> + </Button> + </FormControl> + </PopoverTrigger> + <PopoverContent className="w-auto p-0" align="start"> + <Calendar + mode="single" + selected={field.value} + onSelect={field.onChange} + disabled={(date) => date < new Date()} + /> + </PopoverContent> + </Popover> + <FormDescription> + 자재가 필요한 날짜를 선택하세요 + </FormDescription> + </FormItem> + )} + /> + </div> + </div> + </TabsContent> + + <TabsContent value="items" className="space-y-4 mt-6"> + {/* 품목 목록 */} + <div className="flex justify-between items-center"> + <h3 className="text-sm font-medium">품목 목록</h3> + <Button + type="button" + variant="outline" + size="sm" + onClick={addItem} + > + <Plus className="mr-2 h-4 w-4" /> + 품목 추가 + </Button> + </div> + + {fields.length === 0 ? ( + <Card> + <CardContent className="flex flex-col items-center justify-center py-8"> + <Package className="h-12 w-12 text-muted-foreground mb-4" /> + <p className="text-sm text-muted-foreground mb-4"> + 아직 추가된 품목이 없습니다 + </p> + <Button + type="button" + variant="outline" + size="sm" + onClick={addItem} + > + <Plus className="mr-2 h-4 w-4" /> + 첫 품목 추가 + </Button> + </CardContent> + </Card> + ) : ( + <div className="border rounded-lg"> + <Table> + <TableHeader> + <TableRow> + <TableHead className="w-[120px]">아이템 코드</TableHead> + <TableHead className="w-[150px]">아이템명 <span className="text-red-500">*</span></TableHead> + <TableHead>사양</TableHead> + <TableHead className="w-[80px]">수량 <span className="text-red-500">*</span></TableHead> + <TableHead className="w-[80px]">단위 <span className="text-red-500">*</span></TableHead> + <TableHead className="w-[120px]">예상 단가</TableHead> + <TableHead className="w-[120px]">예상 금액</TableHead> + <TableHead>비고</TableHead> + <TableHead className="w-[50px]"></TableHead> + </TableRow> + </TableHeader> + <TableBody> + {fields.map((field, index) => ( + <TableRow key={field.id}> + <TableCell> + <FormField + control={form.control} + name={`items.${index}.itemCode`} + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + placeholder="코드" + {...field} + className="h-8" + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </TableCell> + <TableCell> + <FormField + control={form.control} + name={`items.${index}.itemName`} + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + placeholder="아이템명" + {...field} + className="h-8" + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </TableCell> + <TableCell> + <FormField + control={form.control} + name={`items.${index}.specification`} + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + placeholder="사양" + {...field} + className="h-8" + /> + </FormControl> + </FormItem> + )} + /> + </TableCell> + <TableCell> + <FormField + control={form.control} + name={`items.${index}.quantity`} + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + type="number" + min="1" + {...field} + className="h-8" + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </TableCell> + <TableCell> + <FormField + control={form.control} + name={`items.${index}.unit`} + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + placeholder="개" + {...field} + className="h-8" + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </TableCell> + <TableCell> + <FormField + control={form.control} + name={`items.${index}.estimatedUnitPrice`} + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + type="number" + min="0" + placeholder="0" + {...field} + className="h-8" + /> + </FormControl> + </FormItem> + )} + /> + </TableCell> + <TableCell> + <div className="text-right font-medium"> + {new Intl.NumberFormat('ko-KR').format( + (form.watch(`items.${index}.quantity`) || 0) * + (form.watch(`items.${index}.estimatedUnitPrice`) || 0) + )} + </div> + </TableCell> + <TableCell> + <FormField + control={form.control} + name={`items.${index}.remarks`} + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + placeholder="비고" + {...field} + className="h-8" + /> + </FormControl> + </FormItem> + )} + /> + </TableCell> + <TableCell> + <Button + type="button" + variant="ghost" + size="icon" + className="h-8 w-8" + onClick={() => remove(index)} + disabled={fields.length === 1} + > + <Trash2 className="h-4 w-4" /> + </Button> + </TableCell> + </TableRow> + ))} + </TableBody> + </Table> + + <div className="flex justify-between items-center p-4 border-t bg-muted/30"> + <div className="text-sm text-muted-foreground"> + 총 {fields.length}개 품목 + </div> + <div className="text-right"> + <p className="text-sm text-muted-foreground">예상 총액</p> + <p className="text-lg font-semibold"> + {new Intl.NumberFormat('ko-KR', { + style: 'currency', + currency: 'KRW' + }).format(calculateTotal())} + </p> + </div> + </div> + </div> + )} + </TabsContent> + + <TabsContent value="files" className="space-y-4 mt-6"> + {/* 파일 업로드 영역 */} + <Card> + <CardHeader> + <CardTitle className="text-base">첨부파일 업로드 <span className="text-red-500">*</span></CardTitle> + <CardDescription> + 설계 도면, 사양서, 견적서 등 구매 요청 관련 문서를 업로드하세요 (필수) + </CardDescription> + </CardHeader> + <CardContent className="space-y-4"> + {/* 필수 알림 */} + <FormField + control={form.control} + name="attachments" + render={({ field }) => ( + <FormItem> + <FormMessage /> + </FormItem> + )} + /> + + {/* 업로드 진행 상태 */} + {isUploading && ( + <Alert> + <AlertCircle className="h-4 w-4" /> + <AlertDescription className="space-y-2"> + <p>파일을 업로드 중입니다...</p> + <Progress value={uploadProgress} className="w-full" /> + </AlertDescription> + </Alert> + )} + + {/* Dropzone */} + <Dropzone + onDrop={handleFileUpload} + accept={{ + 'application/pdf': ['.pdf'], + 'application/vnd.ms-excel': ['.xls'], + 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'], + 'application/msword': ['.doc'], + 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'], + 'image/*': ['.png', '.jpg', '.jpeg', '.gif'], + 'application/x-zip-compressed': ['.zip'], + 'application/x-rar-compressed': ['.rar'], + }} + maxSize={50 * 1024 * 1024} // 50MB + disabled={isUploading} + > + <DropzoneInput /> + <DropzoneZone> + <DropzoneUploadIcon className="h-12 w-12 text-muted-foreground mb-4" /> + <DropzoneTitle> + 파일을 드래그하거나 클릭하여 선택하세요 + </DropzoneTitle> + <DropzoneDescription> + PDF, Excel, Word, 이미지 파일 등을 업로드할 수 있습니다 (최대 50MB) + </DropzoneDescription> + </DropzoneZone> + </Dropzone> + + {/* 업로드된 파일 목록 */} + {uploadedFiles.length > 0 && ( + <div className="space-y-2"> + <div className="flex items-center justify-between"> + <h4 className="text-sm font-medium">업로드된 파일</h4> + <span className="text-sm text-muted-foreground"> + 총 {uploadedFiles.length}개 파일 + </span> + </div> + + <FileList> + {uploadedFiles.map((file) => ( + <FileListItem key={file.fileName}> + <FileListIcon> + <FileIcon className="h-4 w-4" /> + </FileListIcon> + <FileListInfo> + <FileListHeader> + <FileListName> + {file.originalFileName} + </FileListName> + <FileListSize> + {file.fileSize} + </FileListSize> + </FileListHeader> + </FileListInfo> + <FileListAction> + <Button + variant="ghost" + size="icon" + className="h-8 w-8" + onClick={() => handleFileRemove(file.fileName)} + disabled={isLoading || isUploading} + > + <X className="h-4 w-4" /> + </Button> + </FileListAction> + </FileListItem> + ))} + </FileList> + </div> + )} + + {/* 파일 업로드 안내 */} + <Alert> + <AlertCircle className="h-4 w-4" /> + <AlertDescription> + <ul className="list-disc list-inside space-y-1 text-sm"> + <li className="font-medium">최소 1개 이상의 파일 첨부가 필수입니다</li> + <li>최대 파일 크기: 50MB</li> + <li>지원 형식: PDF, Excel, Word, 이미지 파일</li> + <li>여러 파일을 한 번에 선택하여 업로드할 수 있습니다</li> + </ul> + </AlertDescription> + </Alert> + </CardContent> + </Card> + </TabsContent> + </div> + </Tabs> + + <DialogFooter className="mt-6"> + <Button + type="button" + variant="outline" + onClick={handleClose} + disabled={isLoading || isUploading} + > + 취소 + </Button> + <Button + type="submit" + disabled={isLoading || isUploading || !form.formState.isValid} + > + {isLoading ? "등록 중..." : "구매요청 등록"} + </Button> + </DialogFooter> + </form> + </Form> + </DialogContent> + </Dialog> + ); +}
\ No newline at end of file diff --git a/lib/itb/table/create-rfq-dialog.tsx b/lib/itb/table/create-rfq-dialog.tsx new file mode 100644 index 00000000..57a4b9d4 --- /dev/null +++ b/lib/itb/table/create-rfq-dialog.tsx @@ -0,0 +1,380 @@ +// components/purchase-requests/create-rfq-dialog.tsx +"use client"; + +import * as React from "react"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; +import { Button } from "@/components/ui/button"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, +} from "@/components/ui/command"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { Badge } from "@/components/ui/badge"; +import { Alert, AlertDescription } from "@/components/ui/alert"; +import { + FileText, + Package, + AlertCircle, + CheckCircle, + User, + ChevronsUpDown, + Check, + Loader2, + Info +} from "lucide-react"; +import { toast } from "sonner"; +import { cn } from "@/lib/utils"; +import type { PurchaseRequestView } from "@/db/schema"; +import { approvePurchaseRequestsAndCreateRfqs } from "../service"; +import { getPUsersForFilter } from "@/lib/rfq-last/service"; +import { useRouter } from "next/navigation"; + +interface CreateRfqDialogProps { + requests: PurchaseRequestView[]; + open: boolean; + onOpenChange: (open: boolean) => void; + onSuccess?: () => void; +} + +export function CreateRfqDialog({ + requests, + open, + onOpenChange, + onSuccess, +}: CreateRfqDialogProps) { + const [isLoading, setIsLoading] = React.useState(false); + const [userPopoverOpen, setUserPopoverOpen] = React.useState(false); + const [users, setUsers] = React.useState<any[]>([]); + const [selectedUser, setSelectedUser] = React.useState<any>(null); + const [isLoadingUsers, setIsLoadingUsers] = React.useState(false); + const [userSearchTerm, setUserSearchTerm] = React.useState(""); + const router = useRouter(); + + // 유저 목록 로드 + React.useEffect(() => { + const loadUsers = async () => { + setIsLoadingUsers(true); + try { + const userList = await getPUsersForFilter(); + setUsers(userList); + } catch (error) { + console.log("사용자 목록 로드 오류:", error); + toast.error("사용자 목록을 불러오는데 실패했습니다"); + } finally { + setIsLoadingUsers(false); + } + }; + + if (open) { + loadUsers(); + } + }, [open]); + + // 검색된 사용자 필터링 + const filteredUsers = React.useMemo(() => { + if (!userSearchTerm) return users; + + return users.filter(user => + user.name.toLowerCase().includes(userSearchTerm.toLowerCase()) || + user.userCode?.toLowerCase().includes(userSearchTerm.toLowerCase()) + ); + }, [users, userSearchTerm]); + + // 유효한 요청만 필터링 (이미 RFQ 생성된 것 제외) + const validRequests = requests.filter(r => r.status !== "RFQ생성완료"); + const invalidRequests = requests.filter(r => r.status === "RFQ생성완료"); + + const handleSelectUser = (user: any) => { + setSelectedUser(user); + setUserPopoverOpen(false); + }; + + const handleSubmit = async () => { + if (validRequests.length === 0) { + toast.error("RFQ를 생성할 수 있는 구매 요청이 없습니다"); + return; + } + + try { + setIsLoading(true); + + const requestIds = validRequests.map(r => r.id); + const results = await approvePurchaseRequestsAndCreateRfqs( + requestIds, + selectedUser?.id + ); + + const successCount = results.filter(r => r.success).length; + const skipCount = results.filter(r => r.skipped).length; + + if (successCount > 0) { + toast.success(`${successCount}개의 RFQ가 생성되었습니다`); + } + + if (skipCount > 0) { + toast.info(`${skipCount}개는 이미 RFQ가 생성되어 건너뛰었습니다`); + } + + onOpenChange(false); + onSuccess?.(); + router.refresh() + } catch (error) { + console.error("RFQ 생성 오류:", error); + toast.error("RFQ 생성 중 오류가 발생했습니다"); + } finally { + setIsLoading(false); + } + }; + + const handleClose = () => { + if (!isLoading) { + setSelectedUser(null); + setUserSearchTerm(""); + onOpenChange(false); + } + }; + + return ( + <Dialog open={open} onOpenChange={handleClose}> + <DialogContent className="max-w-4xl"> + <DialogHeader> + <DialogTitle className="flex items-center gap-2"> + <FileText className="h-5 w-5" /> + RFQ 생성 + </DialogTitle> + <DialogDescription> + 선택한 구매 요청을 기반으로 RFQ를 생성합니다. + {invalidRequests.length > 0 && " 이미 RFQ가 생성된 항목은 제외됩니다."} + </DialogDescription> + </DialogHeader> + + <div className="space-y-4"> + {/* 경고 메시지 */} + {invalidRequests.length > 0 && ( + <Alert> + <AlertCircle className="h-4 w-4" /> + <AlertDescription> + {invalidRequests.length}개 항목은 이미 RFQ가 생성되어 제외됩니다. + </AlertDescription> + </Alert> + )} + + {/* 구매 담당자 선택 */} + <div className="space-y-2"> + <label className="text-sm font-medium"> + 구매 담당자 (선택사항) + </label> + <Popover open={userPopoverOpen} onOpenChange={setUserPopoverOpen}> + <PopoverTrigger asChild> + <Button + type="button" + variant="outline" + className="w-full justify-between h-10" + disabled={isLoadingUsers} + > + {isLoadingUsers ? ( + <> + <span>담당자 로딩 중...</span> + <Loader2 className="ml-2 h-4 w-4 animate-spin" /> + </> + ) : ( + <> + <span className="flex items-center gap-2"> + <User className="h-4 w-4" /> + {selectedUser ? ( + <> + {selectedUser.name} + {selectedUser.userCode && ( + <span className="text-muted-foreground"> + ({selectedUser.userCode}) + </span> + )} + </> + ) : ( + <span className="text-muted-foreground"> + 구매 담당자를 선택하세요 (선택사항) + </span> + )} + </span> + <ChevronsUpDown className="h-4 w-4 opacity-50" /> + </> + )} + </Button> + </PopoverTrigger> + <PopoverContent className="w-[400px] p-0"> + <Command> + <CommandInput + placeholder="이름 또는 코드로 검색..." + value={userSearchTerm} + onValueChange={setUserSearchTerm} + /> + <CommandList className="max-h-[300px]"> + <CommandEmpty>검색 결과가 없습니다</CommandEmpty> + <CommandGroup> + {filteredUsers.map((user) => ( + <CommandItem + key={user.id} + onSelect={() => handleSelectUser(user)} + className="flex items-center justify-between" + > + <span className="flex items-center gap-2"> + <User className="h-4 w-4" /> + {user.name} + {user.userCode && ( + <span className="text-muted-foreground text-sm"> + ({user.userCode}) + </span> + )} + </span> + <Check + className={cn( + "h-4 w-4", + selectedUser?.id === user.id ? "opacity-100" : "opacity-0" + )} + /> + </CommandItem> + ))} + </CommandGroup> + </CommandList> + </Command> + </PopoverContent> + </Popover> + <p className="text-xs text-muted-foreground"> + 구매 담당자를 선택하지 않으면 나중에 지정할 수 있습니다 + </p> + </div> + + {/* RFQ 생성 대상 목록 */} + <div className="space-y-2"> + <label className="text-sm font-medium"> + RFQ 생성 대상 ({validRequests.length}개) + </label> + <div className="border rounded-lg max-h-[300px] overflow-y-auto"> + <Table> + <TableHeader> + <TableRow> + <TableHead className="w-[140px]">요청번호</TableHead> + <TableHead>요청제목</TableHead> + <TableHead className="w-[120px]">프로젝트</TableHead> + <TableHead className="w-[100px]">패키지</TableHead> + <TableHead className="w-[80px] text-center">품목</TableHead> + <TableHead className="w-[80px] text-center">첨부</TableHead> + </TableRow> + </TableHeader> + <TableBody> + {validRequests.length === 0 ? ( + <TableRow> + <TableCell colSpan={6} className="text-center text-muted-foreground py-8"> + RFQ를 생성할 수 있는 구매 요청이 없습니다 + </TableCell> + </TableRow> + ) : ( + validRequests.map((request) => ( + <TableRow key={request.id}> + <TableCell className="font-mono text-sm"> + {request.requestCode} + </TableCell> + <TableCell className="max-w-[250px]"> + <div className="truncate" title={request.requestTitle}> + {request.requestTitle} + </div> + </TableCell> + <TableCell> + <div className="truncate" title={request.projectName}> + {request.projectCode} + </div> + </TableCell> + <TableCell> + <div className="truncate" title={request.packageName}> + {request.packageNo} + </div> + </TableCell> + <TableCell className="text-center"> + {request.itemCount > 0 && ( + <Badge variant="secondary" className="gap-1"> + <Package className="h-3 w-3" /> + {request.itemCount} + </Badge> + )} + </TableCell> + <TableCell className="text-center"> + {request.attachmentCount > 0 && ( + <Badge variant="secondary" className="gap-1"> + <FileText className="h-3 w-3" /> + {request.attachmentCount} + </Badge> + )} + </TableCell> + </TableRow> + )) + )} + </TableBody> + </Table> + </div> + </div> + + {/* 안내 메시지 */} + <Alert> + <Info className="h-4 w-4" /> + <AlertDescription> + <ul className="list-disc list-inside space-y-1 text-sm"> + <li>RFQ 생성 시 구매 요청의 첨부파일이 자동으로 이관됩니다</li> + <li>구매 요청 상태가 "RFQ생성완료"로 변경됩니다</li> + <li>각 구매 요청별로 개별 RFQ가 생성됩니다</li> + </ul> + </AlertDescription> + </Alert> + </div> + + <DialogFooter> + <Button + variant="outline" + onClick={handleClose} + disabled={isLoading} + > + 취소 + </Button> + <Button + onClick={handleSubmit} + disabled={isLoading || validRequests.length === 0} + > + {isLoading ? ( + <> + <Loader2 className="mr-2 h-4 w-4 animate-spin" /> + RFQ 생성 중... + </> + ) : ( + <> + <CheckCircle className="mr-2 h-4 w-4" /> + RFQ 생성 ({validRequests.length}개) + </> + )} + </Button> + </DialogFooter> + </DialogContent> + </Dialog> + ); +}
\ No newline at end of file diff --git a/lib/itb/table/delete-purchase-request-dialog.tsx b/lib/itb/table/delete-purchase-request-dialog.tsx new file mode 100644 index 00000000..2f09cf70 --- /dev/null +++ b/lib/itb/table/delete-purchase-request-dialog.tsx @@ -0,0 +1,225 @@ +// components/purchase-requests/delete-purchase-request-dialog.tsx +"use client" + +import * as React from "react" +import { type PurchaseRequestView } from "@/db/schema/purchase-requests-view" +import { type Row } from "@tanstack/react-table" +import { Loader, Trash } from "lucide-react" +import { toast } from "sonner" + +import { useMediaQuery } from "@/hooks/use-media-query" +import { Button } from "@/components/ui/button" +import { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog" +import { + Drawer, + DrawerClose, + DrawerContent, + DrawerDescription, + DrawerFooter, + DrawerHeader, + DrawerTitle, + DrawerTrigger, +} from "@/components/ui/drawer" + +import { deletePurchaseRequests } from "../service" + +interface DeletePurchaseRequestDialogProps + extends React.ComponentPropsWithoutRef<typeof Dialog> { + requests?: Row<PurchaseRequestView>["original"][] | PurchaseRequestView[] + request?: PurchaseRequestView // 단일 삭제용 + showTrigger?: boolean + onSuccess?: () => void +} + +export function DeletePurchaseRequestDialog({ + requests: requestsProp, + request, + showTrigger = true, + onSuccess, + ...props +}: DeletePurchaseRequestDialogProps) { + const [isDeletePending, startDeleteTransition] = React.useTransition() + const isDesktop = useMediaQuery("(min-width: 640px)") + + // 단일 또는 복수 요청 처리 + const requests = requestsProp || (request ? [request] : []) + const isMultiple = requests.length > 1 + + // 삭제 불가능한 상태 체크 + const nonDeletableRequests = requests.filter( + req => req.status !== "작성중" + ) + const canDelete = nonDeletableRequests.length === 0 + + function onDelete() { + if (!canDelete) { + toast.error("작성중 상태의 요청만 삭제할 수 있습니다.") + return + } + + startDeleteTransition(async () => { + const { error } = await deletePurchaseRequests({ + ids: requests.map((req) => req.id), + }) + + if (error) { + toast.error(error) + return + } + + props.onOpenChange?.(false) + toast.success( + isMultiple + ? `${requests.length}개의 구매요청이 삭제되었습니다.` + : "구매요청이 삭제되었습니다." + ) + onSuccess?.() + }) + } + + const dialogContent = ( + <> + <div className="space-y-4"> + <div> + <p className="text-sm text-muted-foreground"> + 이 작업은 되돌릴 수 없습니다. + {isMultiple ? ( + <> + 선택한 <span className="font-medium text-foreground">{requests.length}개</span>의 구매요청이 영구적으로 삭제됩니다. + </> + ) : ( + <> + 구매요청 <span className="font-medium text-foreground">{requests[0]?.requestCode}</span>이(가) 영구적으로 삭제됩니다. + </> + )} + </p> + </div> + + {/* 삭제할 요청 목록 표시 (복수인 경우) */} + {isMultiple && ( + <div className="rounded-lg border bg-muted/30 p-3"> + <p className="text-sm font-medium mb-2">삭제할 구매요청:</p> + <ul className="space-y-1 max-h-32 overflow-y-auto"> + {requests.map((req) => ( + <li key={req.id} className="text-sm text-muted-foreground"> + <span className="font-mono">{req.requestCode}</span> + {" - "} + <span className="truncate">{req.requestTitle}</span> + </li> + ))} + </ul> + </div> + )} + + {/* 삭제 불가능한 요청이 있는 경우 경고 */} + {nonDeletableRequests.length > 0 && ( + <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-3"> + <p className="text-sm font-medium text-destructive mb-2"> + 삭제할 수 없는 요청: + </p> + <ul className="space-y-1"> + {nonDeletableRequests.map((req) => ( + <li key={req.id} className="text-sm text-destructive/80"> + <span className="font-mono">{req.requestCode}</span> + {" - 상태: "} + <span className="font-medium">{req.status}</span> + </li> + ))} + </ul> + <p className="text-xs text-destructive/60 mt-2"> + ※ 작성중 상태의 요청만 삭제할 수 있습니다. + </p> + </div> + )} + </div> + </> + ) + + if (isDesktop) { + return ( + <Dialog {...props}> + {showTrigger ? ( + <DialogTrigger asChild> + <Button variant="outline" size="sm" disabled={requests.length === 0}> + <Trash className="mr-2 size-4" aria-hidden="true" /> + 삭제 {requests.length > 0 && `(${requests.length})`} + </Button> + </DialogTrigger> + ) : null} + <DialogContent> + <DialogHeader> + <DialogTitle>구매요청을 삭제하시겠습니까?</DialogTitle> + <DialogDescription> + {dialogContent} + </DialogDescription> + </DialogHeader> + <DialogFooter className="gap-2 sm:space-x-0"> + <DialogClose asChild> + <Button variant="outline">취소</Button> + </DialogClose> + <Button + aria-label="Delete selected requests" + variant="destructive" + onClick={onDelete} + disabled={isDeletePending || !canDelete} + > + {isDeletePending && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + 삭제 + </Button> + </DialogFooter> + </DialogContent> + </Dialog> + ) + } + + return ( + <Drawer {...props}> + {showTrigger ? ( + <DrawerTrigger asChild> + <Button variant="outline" size="sm" disabled={requests.length === 0}> + <Trash className="mr-2 size-4" aria-hidden="true" /> + 삭제 {requests.length > 0 && `(${requests.length})`} + </Button> + </DrawerTrigger> + ) : null} + <DrawerContent> + <DrawerHeader> + <DrawerTitle>구매요청을 삭제하시겠습니까?</DrawerTitle> + <DrawerDescription> + {dialogContent} + </DrawerDescription> + </DrawerHeader> + <DrawerFooter className="gap-2 sm:space-x-0"> + <DrawerClose asChild> + <Button variant="outline">취소</Button> + </DrawerClose> + <Button + aria-label="Delete selected requests" + variant="destructive" + onClick={onDelete} + disabled={isDeletePending || !canDelete} + > + {isDeletePending && ( + <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" /> + )} + 삭제 + </Button> + </DrawerFooter> + </DrawerContent> + </Drawer> + ) +}
\ No newline at end of file diff --git a/lib/itb/table/edit-purchase-request-sheet.tsx b/lib/itb/table/edit-purchase-request-sheet.tsx new file mode 100644 index 00000000..8a818ca5 --- /dev/null +++ b/lib/itb/table/edit-purchase-request-sheet.tsx @@ -0,0 +1,1081 @@ +// components/purchase-requests/edit-purchase-request-sheet.tsx +"use client"; + +import * as React from "react"; +import { useForm, useFieldArray } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import * as z from "zod"; +import { + Sheet, + SheetContent, + SheetDescription, + SheetHeader, + SheetTitle, + SheetFooter, +} from "@/components/ui/sheet"; +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { Button } from "@/components/ui/button"; +import { Calendar } from "@/components/ui/calendar"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { + Tabs, + TabsContent, + TabsList, + TabsTrigger, +} from "@/components/ui/tabs"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { ProjectSelector } from "@/components/ProjectSelector"; +import { PackageSelector } from "@/components/PackageSelector"; +import type { PackageItem } from "@/lib/items/service"; +import { MaterialGroupSelector } from "@/components/common/material/material-group-selector"; +import { CalendarIcon, X, Plus, FileText, Package, Trash2, Upload, FileIcon, AlertCircle, Paperclip, Save } from "lucide-react"; +import { format } from "date-fns"; +import { cn } from "@/lib/utils"; +import { updatePurchaseRequest } from "../service"; +import { toast } from "sonner"; +import { nanoid } from "nanoid"; +import type { PurchaseRequestView } from "@/db/schema"; +import { + Dropzone, + DropzoneDescription, + DropzoneInput, + DropzoneTitle, + DropzoneUploadIcon, + DropzoneZone, +} from "@/components/ui/dropzone"; +import { + FileList, + FileListAction, + FileListDescription, + FileListHeader, + FileListIcon, + FileListInfo, + FileListItem, + FileListName, + FileListSize, +} from "@/components/ui/file-list"; +import { Progress } from "@/components/ui/progress"; +import { Alert, AlertDescription } from "@/components/ui/alert"; + +const attachmentSchema = z.object({ + fileName: z.string(), + originalFileName: z.string(), + filePath: z.string(), + fileSize: z.number(), + fileType: z.string(), +}); + +const itemSchema = z.object({ + id: z.string(), + itemCode: z.string(), + itemName: z.string().min(1, "아이템명을 입력해주세요"), + specification: z.string().default(""), + quantity: z.coerce.number().min(1, "수량은 1 이상이어야 합니다"), + unit: z.string().min(1, "단위를 입력해주세요"), + estimatedUnitPrice: z.coerce.number().optional(), + remarks: z.string().optional(), +}); + +const formSchema = z.object({ + requestTitle: z.string().min(1, "요청 제목을 입력해주세요"), + requestDescription: z.string().optional(), + projectId: z.number({ + required_error: "프로젝트를 선택해주세요", + }), + projectCode: z.string().min(1), + projectName: z.string().min(1), + projectCompany: z.string().optional(), + projectSite: z.string().optional(), + classNo: z.string().optional(), + packageNo: z.string({ + required_error: "패키지를 선택해주세요", + }).min(1, "패키지를 선택해주세요"), + packageName: z.string().min(1), + majorItemMaterialCategory: z.string({ + required_error: "자재그룹을 선택해주세요", + }).min(1, "자재그룹을 선택해주세요"), + majorItemMaterialDescription: z.string().min(1), + smCode: z.string({ + required_error: "SM 코드가 필요합니다", + }).min(1, "SM 코드가 필요합니다"), + estimatedBudget: z.string().optional(), + requestedDeliveryDate: z.date().optional(), + items: z.array(itemSchema).optional().default([]), +}); + +type FormData = z.infer<typeof formSchema>; + +interface EditPurchaseRequestSheetProps { + request: PurchaseRequestView; + open: boolean; + onOpenChange: (open: boolean) => void; + onSuccess?: () => void; +} + +export function EditPurchaseRequestSheet({ + request, + open, + onOpenChange, + onSuccess, +}: EditPurchaseRequestSheetProps) { + const [isLoading, setIsLoading] = React.useState(false); + const [activeTab, setActiveTab] = React.useState("basic"); + const [selectedPackage, setSelectedPackage] = React.useState<PackageItem | null>(null); + const [selectedMaterials, setSelectedMaterials] = React.useState<any[]>([]); + const [resetKey, setResetKey] = React.useState(0); + const [newFiles, setNewFiles] = React.useState<File[]>([]); // 새로 추가할 파일 + const [existingFiles, setExistingFiles] = React.useState<z.infer<typeof attachmentSchema>[]>([]); // 기존 파일 + const [isUploading, setIsUploading] = React.useState(false); + const [uploadProgress, setUploadProgress] = React.useState(0); + + // 기존 아이템 처리 + const existingItems = React.useMemo(() => { + if (!request.items || !Array.isArray(request.items) || request.items.length === 0) { + return []; + } + return request.items.map(item => ({ + ...item, + id: item.id || nanoid(), + })); + }, [request.items]); + + // 기존 첨부파일 로드 (실제로는 API에서 가져와야 함) + React.useEffect(() => { + // TODO: 기존 첨부파일 로드 API 호출 + // setExistingFiles(request.attachments || []); + }, [request.id]); + + // 기존 자재그룹 데이터 설정 + React.useEffect(() => { + if (request.majorItemMaterialCategory && request.majorItemMaterialDescription) { + setSelectedMaterials([{ + materialGroupCode: request.majorItemMaterialCategory, + materialGroupDescription: request.majorItemMaterialDescription, + displayText:`${request.majorItemMaterialCategory} - ${request.majorItemMaterialDescription}` + }]); + } + }, [request.majorItemMaterialCategory, request.majorItemMaterialDescription]); + + // 기존 패키지 데이터 설정 + React.useEffect(() => { + if (request.packageNo && request.packageName) { + setSelectedPackage({ + packageCode: request.packageNo, + description: request.packageName, + smCode: request.smCode || "", + } as PackageItem); + } + }, [request.packageNo, request.packageName, request.smCode]); + + const form = useForm<FormData>({ + resolver: zodResolver(formSchema), + mode: "onChange", + criteriaMode: "all", + defaultValues: { + requestTitle: request.requestTitle || "", + requestDescription: request.requestDescription || "", + projectId: request.projectId || undefined, + projectCode: request.projectCode || "", + projectName: request.projectName || "", + projectCompany: request.projectCompany || "", + projectSite: request.projectSite || "", + classNo: request.classNo || "", + packageNo: request.packageNo || "", + packageName: request.packageName || "", + majorItemMaterialCategory: request.majorItemMaterialCategory || "", + majorItemMaterialDescription: request.majorItemMaterialDescription || "", + smCode: request.smCode || "", + estimatedBudget: request.estimatedBudget || "", + requestedDeliveryDate: request.requestedDeliveryDate + ? new Date(request.requestedDeliveryDate) + : undefined, + items: existingItems, + }, + }); + + const { fields, append, remove } = useFieldArray({ + control: form.control, + name: "items", + }); + + // 프로젝트 선택 처리 + const handleProjectSelect = (project: any) => { + form.setValue("projectId", project.id); + form.setValue("projectCode", project.projectCode); + form.setValue("projectName", project.projectName); + form.setValue("projectCompany", project.projectCompany); + form.setValue("projectSite", project.projectSite); + + // 프로젝트 변경시 패키지 초기화 + setSelectedPackage(null); + form.setValue("packageNo", ""); + form.setValue("packageName", ""); + form.setValue("smCode", ""); + + // requestTitle 업데이트 + updateRequestTitle(project.projectName, "", ""); + }; + + // 패키지 선택 처리 + const handlePackageSelect = (packageItem: PackageItem) => { + setSelectedPackage(packageItem); + form.setValue("packageNo", packageItem.packageCode); + form.setValue("packageName", packageItem.description); + + // SM 코드가 패키지에 있으면 자동 설정 + if (packageItem.smCode) { + form.setValue("smCode", packageItem.smCode); + } + + // requestTitle 업데이트 + const projectName = form.getValues("projectName"); + const materialDesc = form.getValues("majorItemMaterialDescription"); + updateRequestTitle(projectName, packageItem.description, materialDesc); + }; + + // 자재그룹 선택 처리 + const handleMaterialsChange = (materials: any[]) => { + setSelectedMaterials(materials); + if (materials.length > 0) { + const material = materials[0]; // single select이므로 첫번째 항목만 + form.setValue("majorItemMaterialCategory", material.materialGroupCode); + form.setValue("majorItemMaterialDescription", material.materialGroupDescription); + + // requestTitle 업데이트 + const projectName = form.getValues("projectName"); + const packageName = form.getValues("packageName"); + updateRequestTitle(projectName, packageName, material.materialGroupDescription); + } else { + form.setValue("majorItemMaterialCategory", ""); + form.setValue("majorItemMaterialDescription", ""); + } + }; + + // requestTitle 자동 생성 + const updateRequestTitle = (projectName: string, packageName: string, materialDesc: string) => { + const parts = []; + if (projectName) parts.push(projectName); + if (packageName) parts.push(packageName); + if (materialDesc) parts.push(materialDesc); + + if (parts.length > 0) { + const title = `${parts.join(" - ")} 구매 요청`; + form.setValue("requestTitle", title); + } + }; + + const addItem = () => { + append({ + id: nanoid(), + itemCode: "", + itemName: "", + specification: "", + quantity: 1, + unit: "개", + estimatedUnitPrice: undefined, + remarks: "", + }); + }; + + const calculateTotal = () => { + const items = form.watch("items"); + return items?.reduce((sum, item) => { + const subtotal = (item.quantity || 0) * (item.estimatedUnitPrice || 0); + return sum + subtotal; + }, 0) || 0; + }; + + // 파일 추가 핸들러 (로컬 상태로만 저장) + const handleFileAdd = (files: File[]) => { + if (files.length === 0) return; + + // 중복 파일 체크 + const duplicates = files.filter(file => + newFiles.some(existing => existing.name === file.name) + ); + + if (duplicates.length > 0) { + toast.warning(`${duplicates.length}개 파일이 이미 추가되어 있습니다`); + } + + const uniqueFiles = files.filter(file => + !newFiles.some(existing => existing.name === file.name) + ); + + if (uniqueFiles.length > 0) { + setNewFiles(prev => [...prev, ...uniqueFiles]); + toast.success(`${uniqueFiles.length}개 파일이 추가되었습니다`); + } + }; + + // 새 파일 삭제 핸들러 + const handleNewFileRemove = (fileName: string) => { + setNewFiles(prev => prev.filter(f => f.name !== fileName)); + }; + + // 기존 파일 삭제 핸들러 (실제로는 서버에 삭제 요청) + const handleExistingFileRemove = (fileName: string) => { + // TODO: 서버에 삭제 표시 + setExistingFiles(prev => prev.filter(f => f.fileName !== fileName)); + }; + + const onSubmit = async (values: FormData) => { + try { + setIsLoading(true); + + // 새 파일이 있으면 먼저 업로드 + let uploadedAttachments: z.infer<typeof attachmentSchema>[] = []; + + if (newFiles.length > 0) { + setIsUploading(true); + setUploadProgress(10); + + const formData = new FormData(); + newFiles.forEach(file => { + formData.append("files", file); + }); + + setUploadProgress(30); + + try { + const response = await fetch("/api/upload/purchase-request", { + method: "POST", + body: formData, + }); + + setUploadProgress(60); + + if (!response.ok) { + throw new Error("파일 업로드 실패"); + } + + const data = await response.json(); + uploadedAttachments = data.files; + setUploadProgress(80); + } catch (error) { + toast.error("파일 업로드 중 오류가 발생했습니다"); + setIsUploading(false); + setIsLoading(false); + setUploadProgress(0); + return; + } + } + + setUploadProgress(90); + + // 구매 요청 업데이트 (기존 파일 + 새로 업로드된 파일) + const result = await updatePurchaseRequest(request.id, { + ...values, + items: values.items, + attachments: [...existingFiles, ...uploadedAttachments], + }); + + setUploadProgress(100); + + if (result.error) { + toast.error(result.error); + return; + } + + toast.success("구매 요청이 수정되었습니다"); + handleClose(); + onSuccess?.(); + } catch (error) { + toast.error("구매 요청 수정에 실패했습니다"); + console.error(error); + } finally { + setIsLoading(false); + setIsUploading(false); + setUploadProgress(0); + } + }; + + const handleClose = () => { + form.reset(); + setSelectedPackage(null); + setSelectedMaterials([]); + setNewFiles([]); + setExistingFiles([]); + setActiveTab("basic"); + setResetKey((k) => k + 1); + onOpenChange(false); + }; + + const canEdit = request.status === "작성중"; + const totalFileCount = existingFiles.length + newFiles.length; + + return ( + <Sheet open={open} onOpenChange={handleClose}> + <SheetContent key={resetKey} className="w-[900px] max-w-[900px] overflow-hidden flex flex-col min-h-0" style={{width:900, maxWidth:900}}> + <SheetHeader> + <SheetTitle>구매 요청 수정</SheetTitle> + <SheetDescription> + 요청번호: {request.requestCode} | 상태: {request.status} + </SheetDescription> + </SheetHeader> + + {!canEdit ? ( + <div className="flex-1 flex items-center justify-center"> + <Card> + <CardContent className="pt-6"> + <p className="text-center text-muted-foreground"> + 작성중 상태의 요청만 수정할 수 있습니다. + </p> + </CardContent> + </Card> + </div> + ) : ( + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmit)} className="flex-1 overflow-hidden flex flex-col min-h-0"> + <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col min-h-0"> + <TabsList className="grid w-full grid-cols-3 flex-shrink-0"> + <TabsTrigger value="basic"> + <FileText className="mr-2 h-4 w-4" /> + 기본 정보 + </TabsTrigger> + <TabsTrigger value="items"> + <Package className="mr-2 h-4 w-4" /> + 품목 정보 + {fields.length > 0 && ( + <span className="ml-2 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground"> + {fields.length} + </span> + )} + </TabsTrigger> + <TabsTrigger value="files"> + <Paperclip className="mr-2 h-4 w-4" /> + 첨부파일 + {totalFileCount > 0 && ( + <span className="ml-2 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground"> + {totalFileCount} + </span> + )} + </TabsTrigger> + </TabsList> + + <div className="flex-1 overflow-y-auto px-1 min-h-0"> + <TabsContent value="basic" className="space-y-6 mt-6"> + {/* 프로젝트 정보 */} + <Card> + <CardHeader> + <CardTitle className="text-base">프로젝트 정보 <span className="text-red-500">*</span></CardTitle> + <CardDescription>프로젝트, 패키지, 자재그룹을 순서대로 선택하세요</CardDescription> + </CardHeader> + <CardContent className="space-y-4"> + {/* 프로젝트 선택 */} + <FormField + control={form.control} + name="projectId" + render={({ field }) => ( + <FormItem> + <FormLabel>프로젝트 <span className="text-red-500">*</span></FormLabel> + <ProjectSelector + key={`project-${resetKey}`} + selectedProjectId={field.value} + onProjectSelect={handleProjectSelect} + placeholder="프로젝트를 검색하여 선택..." + /> + <FormMessage /> + </FormItem> + )} + /> + + {/* 패키지 선택 */} + <FormField + control={form.control} + name="packageNo" + render={({ field }) => ( + <FormItem> + <FormLabel>패키지 <span className="text-red-500">*</span></FormLabel> + <PackageSelector + projectNo={form.watch("projectCode")} + selectedPackage={selectedPackage} + onPackageSelect={handlePackageSelect} + placeholder="패키지 선택..." + /> + <FormMessage /> + </FormItem> + )} + /> + + {/* 자재그룹 선택 */} + <FormField + control={form.control} + name="majorItemMaterialCategory" + render={({ field }) => ( + <FormItem> + <FormLabel>자재그룹 <span className="text-red-500">*</span></FormLabel> + <MaterialGroupSelector + selectedMaterials={selectedMaterials} + onMaterialsChange={handleMaterialsChange} + singleSelect={true} + placeholder="자재그룹을 검색하세요..." + noValuePlaceHolder="자재그룹을 선택해주세요" + /> + <FormMessage /> + </FormItem> + )} + /> + + {/* SM 코드 */} + <FormField + control={form.control} + name="smCode" + render={({ field }) => ( + <FormItem> + <FormLabel>SM 코드 <span className="text-red-500">*</span></FormLabel> + <FormControl> + <Input + placeholder="SM 코드 입력" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* 선택된 정보 표시 */} + {form.watch("projectId") && ( + <div className="grid grid-cols-2 gap-4 pt-4 border-t"> + <div> + <p className="text-sm text-muted-foreground">프로젝트 코드</p> + <p className="font-medium">{form.watch("projectCode") || "-"}</p> + </div> + <div> + <p className="text-sm text-muted-foreground">프로젝트명</p> + <p className="font-medium">{form.watch("projectName") || "-"}</p> + </div> + <div> + <p className="text-sm text-muted-foreground">발주처</p> + <p className="font-medium">{form.watch("projectCompany") || "-"}</p> + </div> + <div> + <p className="text-sm text-muted-foreground">현장</p> + <p className="font-medium">{form.watch("projectSite") || "-"}</p> + </div> + </div> + )} + </CardContent> + </Card> + + {/* 기본 정보 */} + <div className="space-y-4"> + <FormField + control={form.control} + name="requestTitle" + render={({ field }) => ( + <FormItem> + <FormLabel>요청 제목 <span className="text-red-500">*</span></FormLabel> + <FormControl> + <Input + placeholder="예: 프로젝트 A용 밸브 구매" + {...field} + /> + </FormControl> + <FormDescription> + 자동 생성된 제목을 수정할 수 있습니다 + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="requestDescription" + render={({ field }) => ( + <FormItem> + <FormLabel>요청 설명</FormLabel> + <FormControl> + <Textarea + placeholder="구매 요청에 대한 상세 설명을 입력하세요" + className="min-h-[100px]" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </div> + + {/* 예산 및 납기 */} + <div className="space-y-4"> + <h3 className="text-sm font-medium">예산 및 납기</h3> + <div className="grid grid-cols-2 gap-4"> + <FormField + control={form.control} + name="estimatedBudget" + render={({ field }) => ( + <FormItem> + <FormLabel>예상 예산</FormLabel> + <FormControl> + <Input placeholder="예: 10,000,000원" {...field} /> + </FormControl> + <FormDescription> + 전체 구매 예상 예산을 입력하세요 + </FormDescription> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="requestedDeliveryDate" + render={({ field }) => ( + <FormItem> + <FormLabel>희망 납기일</FormLabel> + <Popover> + <PopoverTrigger asChild> + <FormControl> + <Button + variant="outline" + className={cn( + "w-full pl-3 text-left font-normal", + !field.value && "text-muted-foreground" + )} + > + {field.value ? ( + format(field.value, "yyyy-MM-dd") + ) : ( + <span>날짜 선택</span> + )} + <CalendarIcon className="ml-auto h-4 w-4 opacity-50" /> + </Button> + </FormControl> + </PopoverTrigger> + <PopoverContent className="w-auto p-0" align="start"> + <Calendar + mode="single" + selected={field.value} + onSelect={field.onChange} + disabled={(date) => date < new Date()} + /> + </PopoverContent> + </Popover> + <FormDescription> + 자재가 필요한 날짜를 선택하세요 + </FormDescription> + </FormItem> + )} + /> + </div> + </div> + </TabsContent> + + <TabsContent value="items" className="space-y-4 mt-6"> + {/* 품목 목록 */} + <div className="flex justify-between items-center"> + <h3 className="text-sm font-medium">품목 목록</h3> + <Button + type="button" + variant="outline" + size="sm" + onClick={addItem} + > + <Plus className="mr-2 h-4 w-4" /> + 품목 추가 + </Button> + </div> + + {fields.length === 0 ? ( + <Card> + <CardContent className="flex flex-col items-center justify-center py-8"> + <Package className="h-12 w-12 text-muted-foreground mb-4" /> + <p className="text-sm text-muted-foreground mb-4"> + 아직 추가된 품목이 없습니다 + </p> + <Button + type="button" + variant="outline" + size="sm" + onClick={addItem} + > + <Plus className="mr-2 h-4 w-4" /> + 첫 품목 추가 + </Button> + </CardContent> + </Card> + ) : ( + <div className="border rounded-lg"> + <Table> + <TableHeader> + <TableRow> + <TableHead className="w-[120px]">아이템 코드</TableHead> + <TableHead className="w-[150px]">아이템명 <span className="text-red-500">*</span></TableHead> + <TableHead>사양</TableHead> + <TableHead className="w-[80px]">수량 <span className="text-red-500">*</span></TableHead> + <TableHead className="w-[80px]">단위 <span className="text-red-500">*</span></TableHead> + <TableHead className="w-[120px]">예상 단가</TableHead> + <TableHead className="w-[120px]">예상 금액</TableHead> + <TableHead>비고</TableHead> + <TableHead className="w-[50px]"></TableHead> + </TableRow> + </TableHeader> + <TableBody> + {fields.map((field, index) => ( + <TableRow key={field.id}> + <TableCell> + <FormField + control={form.control} + name={`items.${index}.itemCode`} + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + placeholder="코드" + {...field} + className="h-8" + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </TableCell> + <TableCell> + <FormField + control={form.control} + name={`items.${index}.itemName`} + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + placeholder="아이템명" + {...field} + className="h-8" + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </TableCell> + <TableCell> + <FormField + control={form.control} + name={`items.${index}.specification`} + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + placeholder="사양" + {...field} + className="h-8" + /> + </FormControl> + </FormItem> + )} + /> + </TableCell> + <TableCell> + <FormField + control={form.control} + name={`items.${index}.quantity`} + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + type="number" + min="1" + {...field} + className="h-8" + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </TableCell> + <TableCell> + <FormField + control={form.control} + name={`items.${index}.unit`} + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + placeholder="개" + {...field} + className="h-8" + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </TableCell> + <TableCell> + <FormField + control={form.control} + name={`items.${index}.estimatedUnitPrice`} + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + type="number" + min="0" + placeholder="0" + {...field} + className="h-8" + /> + </FormControl> + </FormItem> + )} + /> + </TableCell> + <TableCell> + <div className="text-right font-medium"> + {new Intl.NumberFormat('ko-KR').format( + (form.watch(`items.${index}.quantity`) || 0) * + (form.watch(`items.${index}.estimatedUnitPrice`) || 0) + )} + </div> + </TableCell> + <TableCell> + <FormField + control={form.control} + name={`items.${index}.remarks`} + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + placeholder="비고" + {...field} + className="h-8" + /> + </FormControl> + </FormItem> + )} + /> + </TableCell> + <TableCell> + <Button + type="button" + variant="ghost" + size="icon" + className="h-8 w-8" + onClick={() => remove(index)} + disabled={fields.length === 1} + > + <Trash2 className="h-4 w-4" /> + </Button> + </TableCell> + </TableRow> + ))} + </TableBody> + </Table> + + <div className="flex justify-between items-center p-4 border-t bg-muted/30"> + <div className="text-sm text-muted-foreground"> + 총 {fields.length}개 품목 + </div> + <div className="text-right"> + <p className="text-sm text-muted-foreground">예상 총액</p> + <p className="text-lg font-semibold"> + {new Intl.NumberFormat('ko-KR', { + style: 'currency', + currency: 'KRW' + }).format(calculateTotal())} + </p> + </div> + </div> + </div> + )} + </TabsContent> + + <TabsContent value="files" className="space-y-4 mt-6"> + {/* 파일 업로드 영역 */} + <Card> + <CardHeader> + <CardTitle className="text-base">첨부파일 관리</CardTitle> + <CardDescription> + 설계 도면, 사양서, 견적서 등 구매 요청 관련 문서를 관리하세요 + </CardDescription> + </CardHeader> + <CardContent className="space-y-4"> + {/* 업로드 진행 상태 */} + {isUploading && ( + <Alert> + <AlertCircle className="h-4 w-4" /> + <AlertDescription className="space-y-2"> + <p>파일을 업로드하고 데이터를 저장 중입니다...</p> + <Progress value={uploadProgress} className="w-full" /> + </AlertDescription> + </Alert> + )} + + {/* 기존 파일 목록 */} + {existingFiles.length > 0 && ( + <div className="space-y-2"> + <h4 className="text-sm font-medium">기존 첨부파일</h4> + <FileList> + {existingFiles.map((file) => ( + <FileListItem key={file.fileName}> + <FileListIcon> + <FileIcon className="h-4 w-4" /> + </FileListIcon> + <FileListInfo> + <FileListHeader> + <FileListName> + {file.originalFileName} + </FileListName> + <FileListSize> + {file.fileSize} + </FileListSize> + </FileListHeader> + + </FileListInfo> + <FileListAction> + <Button + variant="ghost" + size="icon" + className="h-8 w-8" + onClick={() => handleExistingFileRemove(file.fileName)} + disabled={isLoading} + > + <X className="h-4 w-4" /> + </Button> + </FileListAction> + </FileListItem> + ))} + </FileList> + </div> + )} + + {/* Dropzone */} + <Dropzone + onDrop={handleFileAdd} + accept={{ + 'application/pdf': ['.pdf'], + 'application/vnd.ms-excel': ['.xls'], + 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'], + 'application/msword': ['.doc'], + 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'], + 'image/*': ['.png', '.jpg', '.jpeg', '.gif'], + 'application/x-zip-compressed': ['.zip'], + 'application/x-rar-compressed': ['.rar'], + }} + maxSize={50 * 1024 * 1024} // 50MB + disabled={isLoading} + > + <DropzoneInput /> + <DropzoneZone> + <DropzoneUploadIcon className="h-12 w-12 text-muted-foreground mb-4" /> + <DropzoneTitle> + 파일을 드래그하거나 클릭하여 선택하세요 + </DropzoneTitle> + <DropzoneDescription> + PDF, Excel, Word, 이미지 파일 등을 업로드할 수 있습니다 (최대 50MB) + </DropzoneDescription> + </DropzoneZone> + </Dropzone> + + {/* 새로 추가할 파일 목록 */} + {newFiles.length > 0 && ( + <div className="space-y-2"> + <h4 className="text-sm font-medium text-blue-600">새로 추가할 파일</h4> + <FileList> + {newFiles.map((file) => ( + <FileListItem key={file.name} className="bg-blue-50"> + <FileListIcon> + <FileIcon className="h-4 w-4 text-blue-600" /> + </FileListIcon> + <FileListInfo> + <FileListHeader> + <FileListName> + {file.name} + </FileListName> + <FileListSize> + {file.size} + </FileListSize> + </FileListHeader> + <FileListDescription> + {file.type || "application/octet-stream"} + </FileListDescription> + </FileListInfo> + <FileListAction> + <Button + variant="ghost" + size="icon" + className="h-8 w-8" + onClick={() => handleNewFileRemove(file.name)} + disabled={isLoading} + > + <X className="h-4 w-4" /> + </Button> + </FileListAction> + </FileListItem> + ))} + </FileList> + </div> + )} + + {/* 파일 업로드 안내 */} + <Alert> + <AlertCircle className="h-4 w-4" /> + <AlertDescription> + <ul className="list-disc list-inside space-y-1 text-sm"> + <li>새 파일은 수정 완료 시 서버로 업로드됩니다</li> + <li>최대 파일 크기: 50MB</li> + <li>지원 형식: PDF, Excel, Word, 이미지 파일</li> + <li>여러 파일을 한 번에 선택하여 추가할 수 있습니다</li> + </ul> + </AlertDescription> + </Alert> + </CardContent> + </Card> + </TabsContent> + </div> + </Tabs> + + <SheetFooter className="mt-6"> + <Button + type="button" + variant="outline" + onClick={handleClose} + disabled={isLoading || isUploading} + > + 취소 + </Button> + <Button type="submit" disabled={isLoading || isUploading || !form.formState.isValid}> + <Save className="mr-2 h-4 w-4" /> + {isLoading ? "수정 중..." : "수정 완료"} + </Button> + </SheetFooter> + </form> + </Form> + )} + </SheetContent> + </Sheet> + ); +}
\ No newline at end of file diff --git a/lib/itb/table/items-dialog.tsx b/lib/itb/table/items-dialog.tsx new file mode 100644 index 00000000..dd688ce9 --- /dev/null +++ b/lib/itb/table/items-dialog.tsx @@ -0,0 +1,167 @@ +// components/purchase-requests/items-dialog.tsx +"use client"; + +import * as React from "react"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, + TableFooter, +} from "@/components/ui/table"; +import { Badge } from "@/components/ui/badge"; +import { Package } from "lucide-react"; + +interface Item { + id: string; + itemCode: string; + itemName: string; + specification: string; + quantity: number; + unit: string; + estimatedUnitPrice?: number; + remarks?: string; +} + +interface ItemsDialogProps { + requestId: number; + requestCode: string; + items: Item[] | any; + open: boolean; + onOpenChange: (open: boolean) => void; +} + +export function ItemsDialog({ + requestId, + requestCode, + items, + open, + onOpenChange, +}: ItemsDialogProps) { + // items가 없거나 배열이 아닌 경우 처리 + const itemList = React.useMemo(() => { + if (!items || !Array.isArray(items)) return []; + return items; + }, [items]); + + // 총액 계산 + const totalAmount = React.useMemo(() => { + return itemList.reduce((sum, item) => { + const subtotal = (item.quantity || 0) * (item.estimatedUnitPrice || 0); + return sum + subtotal; + }, 0); + }, [itemList]); + + // 총 수량 계산 + const totalQuantity = React.useMemo(() => { + return itemList.reduce((sum, item) => sum + (item.quantity || 0), 0); + }, [itemList]); + + return ( + <Dialog open={open} onOpenChange={onOpenChange}> + <DialogContent className="max-w-5xl max-h-[80vh] overflow-hidden flex flex-col"> + <DialogHeader> + <DialogTitle className="flex items-center gap-2"> + <Package className="h-5 w-5" /> + 품목 상세 정보 + </DialogTitle> + <DialogDescription> + 요청번호: {requestCode} | 총 {itemList.length}개 품목 + </DialogDescription> + </DialogHeader> + + <div className="flex-1 overflow-auto"> + {itemList.length === 0 ? ( + <div className="flex items-center justify-center h-32"> + <p className="text-muted-foreground">등록된 품목이 없습니다.</p> + </div> + ) : ( + <Table> + <TableHeader className="sticky top-0 bg-background"> + <TableRow> + <TableHead className="w-[50px]">번호</TableHead> + <TableHead className="w-[120px]">아이템 코드</TableHead> + <TableHead>아이템명</TableHead> + <TableHead>사양</TableHead> + <TableHead className="text-right w-[80px]">수량</TableHead> + <TableHead className="w-[60px]">단위</TableHead> + <TableHead className="text-right w-[120px]">예상 단가</TableHead> + <TableHead className="text-right w-[140px]">예상 금액</TableHead> + <TableHead className="w-[150px]">비고</TableHead> + </TableRow> + </TableHeader> + <TableBody> + {itemList.map((item, index) => { + const subtotal = (item.quantity || 0) * (item.estimatedUnitPrice || 0); + return ( + <TableRow key={item.id || index}> + <TableCell className="text-center text-muted-foreground"> + {index + 1} + </TableCell> + <TableCell className="font-mono text-sm"> + {item.itemCode} + </TableCell> + <TableCell className="font-medium"> + {item.itemName} + </TableCell> + <TableCell className="text-sm"> + {item.specification || "-"} + </TableCell> + <TableCell className="text-right font-medium"> + {item.quantity?.toLocaleString('ko-KR')} + </TableCell> + <TableCell className="text-center"> + {item.unit} + </TableCell> + <TableCell className="text-right"> + {item.estimatedUnitPrice + ? new Intl.NumberFormat('ko-KR').format(item.estimatedUnitPrice) + : "-"} + </TableCell> + <TableCell className="text-right font-medium"> + {subtotal > 0 + ? new Intl.NumberFormat('ko-KR').format(subtotal) + : "-"} + </TableCell> + <TableCell className="text-sm text-muted-foreground"> + {item.remarks || "-"} + </TableCell> + </TableRow> + ); + })} + </TableBody> + <TableFooter> + <TableRow className="bg-muted/50"> + <TableCell colSpan={4} className="font-medium"> + 합계 + </TableCell> + <TableCell className="text-right font-bold"> + {totalQuantity.toLocaleString('ko-KR')} + </TableCell> + <TableCell></TableCell> + <TableCell></TableCell> + <TableCell className="text-right font-bold text-lg"> + {new Intl.NumberFormat('ko-KR', { + style: 'currency', + currency: 'KRW' + }).format(totalAmount)} + </TableCell> + <TableCell></TableCell> + </TableRow> + </TableFooter> + </Table> + )} + </div> + </DialogContent> + </Dialog> + ); +}
\ No newline at end of file diff --git a/lib/itb/table/purchase-request-columns.tsx b/lib/itb/table/purchase-request-columns.tsx new file mode 100644 index 00000000..55321a21 --- /dev/null +++ b/lib/itb/table/purchase-request-columns.tsx @@ -0,0 +1,380 @@ +// components/purchase-requests/purchase-request-columns.tsx +"use client"; + +import { type ColumnDef } from "@tanstack/react-table"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { + Eye, + Edit, + Trash2, + CheckCircle, + XCircle, + FileText, + Package, + Send, + Clock +} from "lucide-react"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { MoreHorizontal } from "lucide-react"; +import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"; +import { format } from "date-fns"; +import { ko } from "date-fns/locale"; +import type { DataTableRowAction } from "@/types/table"; +import type { PurchaseRequestView } from "@/db/schema"; + +interface GetColumnsProps { + setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<PurchaseRequestView> | null>>; +} + +const statusConfig = { + "작성중": { + label: "작성중", + variant: "secondary" as const, + icon: Edit, + color: "text-gray-500" + }, + "요청완료": { + label: "요청완료", + variant: "default" as const, + icon: Send, + color: "text-blue-500" + }, + "검토중": { + label: "검토중", + variant: "warning" as const, + icon: Clock, + color: "text-yellow-500" + }, + "승인": { + label: "승인", + variant: "success" as const, + icon: CheckCircle, + color: "text-green-500" + }, + "반려": { + label: "반려", + variant: "destructive" as const, + icon: XCircle, + color: "text-red-500" + }, + "RFQ생성완료": { + label: "RFQ생성완료", + variant: "outline" as const, + icon: FileText, + color: "text-purple-500" + }, +}; + +export function getPurchaseRequestColumns({ + setRowAction +}: GetColumnsProps): ColumnDef<PurchaseRequestView>[] { + return [ + { + id: "select", + header: ({ table }) => ( + <Checkbox + checked={ + table.getIsAllPageRowsSelected() || + (table.getIsSomePageRowsSelected() && "indeterminate") + } + onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)} + aria-label="Select all" + /> + ), + cell: ({ row }) => ( + <Checkbox + checked={row.getIsSelected()} + onCheckedChange={(value) => row.toggleSelected(!!value)} + aria-label="Select row" + /> + ), + enableSorting: false, + enableHiding: false, + size: 40, + }, + { + accessorKey: "requestCode", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="요청번호" /> + ), + cell: ({ row }) => ( + <Button + variant="ghost" + className="h-auto p-0 font-mono font-medium text-primary hover:underline" + onClick={() => setRowAction({ row, type: "view" })} + > + {row.getValue("requestCode")} + </Button> + ), + size: 130, + }, + { + accessorKey: "status", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="상태" /> + ), + cell: ({ row }) => { + const status = row.getValue("status") as keyof typeof statusConfig; + const config = statusConfig[status]; + const Icon = config?.icon; + + return ( + <Badge variant={config?.variant} className="font-medium"> + {Icon && <Icon className={`mr-1 h-3 w-3 ${config.color}`} />} + {config?.label || status} + </Badge> + ); + }, + filterFn: (row, id, value) => { + return value.includes(row.getValue(id)); + }, + size: 120, + }, + { + accessorKey: "requestTitle", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="요청제목" /> + ), + cell: ({ row }) => ( + <div className="max-w-[300px]"> + <div className="truncate font-medium" title={row.getValue("requestTitle")}> + {row.getValue("requestTitle")} + </div> + {row.original.requestDescription && ( + <div className="truncate text-xs text-muted-foreground mt-0.5" + title={row.original.requestDescription}> + {row.original.requestDescription} + </div> + )} + </div> + ), + size: 300, + }, + { + accessorKey: "projectName", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="프로젝트" /> + ), + cell: ({ row }) => ( + <div className="flex flex-col space-y-0.5"> + {row.original.projectCode && ( + <span className="font-mono text-xs text-muted-foreground"> + {row.original.projectCode} + </span> + )} + <span className="truncate text-sm" title={row.original.projectName}> + {row.original.projectName || "-"} + </span> + </div> + ), + size: 180, + }, + { + accessorKey: "packageName", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="패키지" /> + ), + cell: ({ row }) => ( + <div className="flex flex-col space-y-0.5"> + {row.original.packageNo && ( + <span className="font-mono text-xs text-muted-foreground"> + {row.original.packageNo} + </span> + )} + <span className="truncate text-sm" title={row.original.packageName}> + {row.original.packageName || "-"} + </span> + </div> + ), + size: 150, + }, + { + id: "attachments", + header: "첨부", + cell: ({ row }) => { + const count = Number(row.original.attachmentCount) || 0; + return count > 0 ? ( + <Button + variant="ghost" + size="sm" + className="h-8 px-2" + onClick={() => setRowAction({ row, type: "attachments" })} + > + <FileText className="h-4 w-4 mr-1" /> + {count} + </Button> + ) : ( + <span className="text-muted-foreground text-sm">-</span> + ); + }, + size: 70, + }, + { + id: "items", + header: "품목", + cell: ({ row }) => { + const count = row.original.itemCount || 0; + const totalQuantity = row.original.totalQuantity; + return count > 0 ? ( + <Button + variant="ghost" + size="sm" + className="h-8 px-2" + onClick={() => setRowAction({ row, type: "items" })} + > + <Package className="h-4 w-4 mr-1" /> + <div className="flex flex-col items-start"> + <span>{count}종</span> + {totalQuantity && ( + <span className="text-xs text-muted-foreground"> + 총 {totalQuantity}개 + </span> + )} + </div> + </Button> + ) : ( + <span className="text-muted-foreground text-sm">-</span> + ); + }, + size: 90, + }, + { + accessorKey: "engPicName", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="설계담당" /> + ), + cell: ({ row }) => ( + <div className="text-sm"> + {row.getValue("engPicName") || "-"} + </div> + ), + size: 100, + }, + { + accessorKey: "purchasePicName", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="구매담당" /> + ), + cell: ({ row }) => ( + <div className="text-sm"> + {row.getValue("purchasePicName") || "-"} + </div> + ), + size: 100, + }, + { + accessorKey: "estimatedBudget", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="예상예산" /> + ), + cell: ({ row }) => ( + <div className="text-sm font-mono"> + {row.getValue("estimatedBudget") || "-"} + </div> + ), + size: 100, + }, + { + accessorKey: "requestedDeliveryDate", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="희망납기" /> + ), + cell: ({ row }) => { + const date = row.getValue("requestedDeliveryDate") as Date | null; + return ( + <div className="text-sm"> + {date ? format(new Date(date), "yyyy-MM-dd", { locale: ko }) : "-"} + </div> + ); + }, + size: 100, + }, + { + accessorKey: "createdAt", + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="등록일" /> + ), + cell: ({ row }) => { + const date = row.getValue("createdAt") as Date; + return ( + <div className="text-sm text-muted-foreground"> + {date ? format(new Date(date), "yyyy-MM-dd", { locale: ko }) : "-"} + </div> + ); + }, + size: 100, + }, + { + id: "actions", + header: "작업", + cell: ({ row }) => { + const status = row.original.status; + + return ( + <DropdownMenu> + <DropdownMenuTrigger asChild> + <Button variant="ghost" className="h-8 w-8 p-0"> + <span className="sr-only">메뉴 열기</span> + <MoreHorizontal className="h-4 w-4" /> + </Button> + </DropdownMenuTrigger> + <DropdownMenuContent align="end"> + <DropdownMenuLabel>작업</DropdownMenuLabel> + <DropdownMenuItem + onClick={() => setRowAction({ row, type: "view" })} + > + <Eye className="mr-2 h-4 w-4" /> + 상세보기 + </DropdownMenuItem> + <DropdownMenuSeparator /> + + + + <DropdownMenuItem + onClick={() => setRowAction({ row, type: "update" })} + > + <Edit className="mr-2 h-4 w-4" /> + 수정 + </DropdownMenuItem> + <DropdownMenuItem + onClick={() => setRowAction({ row, type: "delete" })} + className="text-destructive" + > + <Trash2 className="mr-2 h-4 w-4" /> + 삭제 + </DropdownMenuItem> + + + + +{status ==="작성중" && +<> + <DropdownMenuSeparator /> + <DropdownMenuItem + onClick={() => setRowAction({ row, type: "createRfq" })} + className="text-primary" + > + <FileText className="mr-2 h-4 w-4" /> + RFQ 생성 + </DropdownMenuItem> + </> + } + + </DropdownMenuContent> + </DropdownMenu> + + ); + }, + size: 80, + }, + ]; +}
\ No newline at end of file diff --git a/lib/itb/table/purchase-requests-table.tsx b/lib/itb/table/purchase-requests-table.tsx new file mode 100644 index 00000000..88f27666 --- /dev/null +++ b/lib/itb/table/purchase-requests-table.tsx @@ -0,0 +1,229 @@ +// components/purchase-requests/purchase-requests-table.tsx +"use client"; + +import * as React from "react"; +import { useRouter } from "next/navigation"; +import { Button } from "@/components/ui/button"; +import { Plus, RefreshCw, FileText } from "lucide-react"; +import { DataTable } from "@/components/data-table/data-table"; +import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"; +import { useDataTable } from "@/hooks/use-data-table"; +import { getPurchaseRequestColumns } from "./purchase-request-columns"; +import { CreatePurchaseRequestDialog } from "./create-purchase-request-dialog"; +import { EditPurchaseRequestSheet } from "./edit-purchase-request-sheet"; +import { DeletePurchaseRequestDialog } from "./delete-purchase-request-dialog"; +import { ViewPurchaseRequestSheet } from "./view-purchase-request-sheet"; +// import { AttachmentsDialog } from "./attachments-dialog"; +import { ItemsDialog } from "./items-dialog"; +import type { DataTableRowAction } from "@/types/table"; +import type { PurchaseRequestView } from "@/db/schema"; +import { CreateRfqDialog } from "./create-rfq-dialog"; +import { toast } from "sonner"; + +interface PurchaseRequestsTableProps { + promises: Promise<[ + { + data: PurchaseRequestView[]; + pageCount: number; + }, + any + ]>; +} + +export function PurchaseRequestsTable({ promises }: PurchaseRequestsTableProps) { + const router = useRouter(); + const [{ data, pageCount }] = React.use(promises); + const [isCreateDialogOpen, setIsCreateDialogOpen] = React.useState(false); + const [isCreateRfqDialogOpen, setIsCreateRfqDialogOpen] = React.useState(false); + const [selectedRequestsForRfq, setSelectedRequestsForRfq] = React.useState<PurchaseRequestView[]>([]); + const [rowAction, setRowAction] = React.useState<DataTableRowAction<PurchaseRequestView> | null>(null); + + const columns = React.useMemo( + () => getPurchaseRequestColumns({ setRowAction }), + [setRowAction] + ); + + const { table } = useDataTable({ + data, + columns, + pageCount, + enablePinning: true, + enableAdvancedFilter: true, + defaultPerPage: 10, + defaultSort: [{ id: "createdAt", desc: true }], + }); + + const refreshData = () => { + router.refresh(); + }; + + // 선택된 행들 가져오기 + const selectedRows = table.getSelectedRowModel().rows + .map(row => row.original) + .filter(row => row.status === "작성중") + ; + + // 선택된 행들로 RFQ 생성 다이얼로그 열기 + const handleBulkCreateRfq = () => { + const selectedRequests = selectedRows + + if (selectedRequests.length === 0) { + toast.error("RFQ를 생성할 구매 요청을 선택해주세요"); + return; + } + + setSelectedRequestsForRfq(selectedRequests); + setIsCreateRfqDialogOpen(true); + }; + + // 개별 행 액션 처리 + React.useEffect(() => { + if (rowAction?.type === "createRfq") { + setSelectedRequestsForRfq([rowAction.row.original]); + setIsCreateRfqDialogOpen(true); + setRowAction(null); + } + }, [rowAction]); + + // RFQ 생성 성공 후 처리 + const handleRfqSuccess = () => { + table.resetRowSelection(); // 선택 초기화 + refreshData(); + }; + + return ( + <> + <DataTable table={table}> + <DataTableAdvancedToolbar + table={table} + filterFields={[ + { + id: "requestCode", + label: "요청번호", + placeholder: "PR-2025-00001" + }, + { + id: "requestTitle", + label: "요청제목", + placeholder: "요청 제목 검색" + }, + { + id: "projectName", + label: "프로젝트명", + placeholder: "프로젝트명 검색" + }, + { + id: "packageName", + label: "패키지명", + placeholder: "패키지명 검색" + }, + { + id: "status", + label: "상태", + options: [ + { label: "작성중", value: "작성중" }, + { label: "RFQ생성완료", value: "RFQ생성완료" }, + ] + }, + { + id: "engPicName", + label: "설계 담당자", + placeholder: "담당자명 검색" + }, + { + id: "purchasePicName", + label: "구매 담당자", + placeholder: "담당자명 검색" + }, + ]} + > + <div className="flex items-center gap-2"> + <Button + size="sm" + onClick={() => setIsCreateDialogOpen(true)} + > + <Plus className="mr-2 h-4 w-4" /> + 새 구매요청 + </Button> + + {/* 선택된 항목들로 RFQ 일괄 생성 버튼 */} + {selectedRows.length > 0 && ( + <Button + size="sm" + variant="secondary" + onClick={handleBulkCreateRfq} + > + <FileText className="mr-2 h-4 w-4" /> + RFQ 생성 ({selectedRows.length}개) + </Button> + )} + + <Button + variant="outline" + size="sm" + onClick={refreshData} + > + <RefreshCw className="h-4 w-4" /> + </Button> + </div> + </DataTableAdvancedToolbar> + </DataTable> + + {/* 다이얼로그들 */} + <CreatePurchaseRequestDialog + open={isCreateDialogOpen} + onOpenChange={setIsCreateDialogOpen} + onSuccess={refreshData} + /> + + {/* RFQ 생성 다이얼로그 */} + <CreateRfqDialog + requests={selectedRequestsForRfq} + open={isCreateRfqDialogOpen} + onOpenChange={(open) => { + setIsCreateRfqDialogOpen(open); + if (!open) { + setSelectedRequestsForRfq([]); + } + }} + onSuccess={handleRfqSuccess} + /> + + {rowAction?.type === "view" && ( + <ViewPurchaseRequestSheet + request={rowAction.row.original} + open={true} + onOpenChange={() => setRowAction(null)} + /> + )} + + {rowAction?.type === "update" && ( + <EditPurchaseRequestSheet + request={rowAction.row.original} + open={true} + onOpenChange={() => setRowAction(null)} + onSuccess={refreshData} + /> + )} + + {rowAction?.type === "delete" && ( + <DeletePurchaseRequestDialog + request={rowAction.row.original} + open={true} + onOpenChange={() => setRowAction(null)} + onSuccess={refreshData} + /> + )} + + {rowAction?.type === "items" && ( + <ItemsDialog + requestId={rowAction.row.original.id} + requestCode={rowAction.row.original.requestCode} + items={rowAction.row.original.items} + open={true} + onOpenChange={() => setRowAction(null)} + /> + )} + </> + ); +}
\ No newline at end of file diff --git a/lib/itb/table/view-purchase-request-sheet.tsx b/lib/itb/table/view-purchase-request-sheet.tsx new file mode 100644 index 00000000..c4ff9416 --- /dev/null +++ b/lib/itb/table/view-purchase-request-sheet.tsx @@ -0,0 +1,809 @@ +// components/purchase-requests/view-purchase-request-sheet.tsx +"use client"; + +import * as React from "react"; +import { + Sheet, + SheetContent, + SheetDescription, + SheetHeader, + SheetTitle, + SheetFooter, +} from "@/components/ui/sheet"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { + Tabs, + TabsContent, + TabsList, + TabsTrigger, +} from "@/components/ui/tabs"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, + TableFooter, +} from "@/components/ui/table"; +import { Separator } from "@/components/ui/separator"; +import { + FileList, + FileListDescription, + FileListHeader, + FileListIcon, + FileListInfo, + FileListItem, + FileListName, + FileListSize, +} from "@/components/ui/file-list"; +import { + FileText, + Package, + Edit, + Download, + Calendar, + User, + Building, + MapPin, + Hash, + DollarSign, + Clock, + CheckCircle, + XCircle, + AlertCircle, + Layers, + Tag, + Paperclip, + FileIcon, + Eye +} from "lucide-react"; +import { format } from "date-fns"; +import { ko } from "date-fns/locale"; +import type { PurchaseRequestView } from "@/db/schema"; +import { useRouter } from "next/navigation"; +import { getPurchaseRequestAttachments } from "../service"; +import { downloadFile, quickPreview, formatFileSize, getFileInfo } from "@/lib/file-download"; + +interface ViewPurchaseRequestSheetProps { + request: PurchaseRequestView; + open: boolean; + onOpenChange: (open: boolean) => void; + onEditClick?: () => void; +} + +const statusConfig = { + "작성중": { + variant: "secondary" as const, + color: "text-gray-500", + icon: Edit, + bgColor: "bg-gray-100" + }, + "요청완료": { + variant: "default" as const, + color: "text-blue-500", + icon: CheckCircle, + bgColor: "bg-blue-50" + }, + "검토중": { + variant: "warning" as const, + color: "text-yellow-500", + icon: Clock, + bgColor: "bg-yellow-50" + }, + "승인": { + variant: "success" as const, + color: "text-green-500", + icon: CheckCircle, + bgColor: "bg-green-50" + }, + "반려": { + variant: "destructive" as const, + color: "text-red-500", + icon: XCircle, + bgColor: "bg-red-50" + }, + "RFQ생성완료": { + variant: "outline" as const, + color: "text-purple-500", + icon: Package, + bgColor: "bg-purple-50" + }, +}; + +export function ViewPurchaseRequestSheet({ + request, + open, + onOpenChange, + onEditClick, +}: ViewPurchaseRequestSheetProps) { + const router = useRouter(); + const [activeTab, setActiveTab] = React.useState("overview"); + const [attachments, setAttachments] = React.useState<any[]>([]); + const [isLoadingFiles, setIsLoadingFiles] = React.useState(false); + + // 첨부파일 로드 + React.useEffect(() => { + async function loadAttachments() { + if (open && request.id) { + setIsLoadingFiles(true); + try { + const result = await getPurchaseRequestAttachments(request.id); + if (result.success && result.data) { + setAttachments(result.data); + } else { + console.error("Failed to load attachments:", result.error); + setAttachments([]); + } + } catch (error) { + console.error("Error loading attachments:", error); + setAttachments([]); + } finally { + setIsLoadingFiles(false); + } + } + } + + loadAttachments(); + }, [open, request.id]); + + // 파일 다운로드 핸들러 + const handleFileDownload = async (file: any) => { + const result = await downloadFile(file.filePath, file.originalFileName, { + action: 'download', + showToast: true, + onError: (error) => { + console.error("Download failed:", error); + }, + onSuccess: (fileName, fileSize) => { + console.log(`Successfully downloaded: ${fileName} (${fileSize} bytes)`); + } + }); + + return result; + }; + + // 파일 미리보기 핸들러 + const handleFilePreview = async (file: any) => { + const fileInfo = getFileInfo(file.originalFileName); + + if (!fileInfo.canPreview) { + // 미리보기가 지원되지 않는 파일은 다운로드 + return handleFileDownload(file); + } + + const result = await quickPreview(file.filePath, file.originalFileName); + return result; + }; + + // 전체 다운로드 핸들러 + const handleDownloadAll = async () => { + for (const file of attachments) { + await handleFileDownload(file); + // 여러 파일 다운로드 시 간격 두기 + await new Promise(resolve => setTimeout(resolve, 500)); + } + }; + + // 아이템 총액 계산 + const totalAmount = React.useMemo(() => { + if (!request.items || !Array.isArray(request.items)) return 0; + return request.items.reduce((sum, item) => { + const subtotal = (item.quantity || 0) * (item.estimatedUnitPrice || 0); + return sum + subtotal; + }, 0); + }, [request.items]); + + const handleEdit = () => { + if (onEditClick) { + onEditClick(); + } else { + onOpenChange(false); + } + }; + + const handleExport = () => { + // Export to Excel 기능 + console.log("Export to Excel"); + }; + + const StatusIcon = statusConfig[request.status]?.icon || AlertCircle; + const statusBgColor = statusConfig[request.status]?.bgColor || "bg-gray-50"; + + return ( + <Sheet open={open} onOpenChange={onOpenChange}> + <SheetContent className="w-[900px] max-w-[900px] overflow-hidden flex flex-col min-h-0" style={{width:900 , maxWidth:900}}> + <SheetHeader className="flex-shrink-0"> + <div className="flex items-center justify-between"> + <SheetTitle>구매요청 상세</SheetTitle> + <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full ${statusBgColor}`}> + <StatusIcon className={`h-4 w-4 ${statusConfig[request.status]?.color}`} /> + <span className={`text-sm font-medium ${statusConfig[request.status]?.color}`}> + {request.status} + </span> + </div> + </div> + <SheetDescription> + 요청번호: <span className="font-mono font-medium">{request.requestCode}</span> | + 작성일: {request.createdAt && format(new Date(request.createdAt), "yyyy-MM-dd")} + </SheetDescription> + </SheetHeader> + + <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col min-h-0"> + <TabsList className="grid w-full grid-cols-4 flex-shrink-0"> + <TabsTrigger value="overview"> + <FileText className="mr-2 h-4 w-4" /> + 개요 + </TabsTrigger> + <TabsTrigger value="items"> + <Package className="mr-2 h-4 w-4" /> + 품목 정보 + {request.itemCount > 0 && ( + <span className="ml-2 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground"> + {request.itemCount} + </span> + )} + </TabsTrigger> + <TabsTrigger value="files"> + <Paperclip className="mr-2 h-4 w-4" /> + 첨부파일 + {attachments.length > 0 && ( + <span className="ml-2 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground"> + {attachments.length} + </span> + )} + </TabsTrigger> + <TabsTrigger value="history"> + <Clock className="mr-2 h-4 w-4" /> + 처리 이력 + </TabsTrigger> + </TabsList> + + <div className="flex-1 overflow-y-auto px-1 min-h-0"> + <TabsContent value="overview" className="space-y-6 mt-6"> + {/* 기본 정보 */} + <Card> + <CardHeader> + <CardTitle className="text-base">기본 정보</CardTitle> + </CardHeader> + <CardContent className="space-y-4"> + <div> + <p className="text-sm text-muted-foreground mb-1">요청 제목</p> + <p className="text-lg font-semibold">{request.requestTitle}</p> + </div> + + {request.requestDescription && ( + <div> + <p className="text-sm text-muted-foreground mb-1">요청 설명</p> + <p className="text-sm bg-muted/30 p-3 rounded-lg">{request.requestDescription}</p> + </div> + )} + + <Separator /> + + <div className="grid grid-cols-2 gap-4"> + <div className="flex items-center gap-3"> + <Calendar className="h-4 w-4 text-muted-foreground" /> + <div> + <p className="text-sm text-muted-foreground">희망 납기일</p> + <p className="font-medium"> + {request.requestedDeliveryDate + ? format(new Date(request.requestedDeliveryDate), "yyyy-MM-dd") + : "-"} + </p> + </div> + </div> + + <div className="flex items-center gap-3"> + <DollarSign className="h-4 w-4 text-muted-foreground" /> + <div> + <p className="text-sm text-muted-foreground">예상 예산</p> + <p className="font-medium">{request.estimatedBudget || "-"}</p> + </div> + </div> + </div> + </CardContent> + </Card> + + {/* 프로젝트 & 패키지 정보 */} + <Card> + <CardHeader> + <CardTitle className="text-base">프로젝트 정보</CardTitle> + </CardHeader> + <CardContent className="space-y-4"> + <div className="grid grid-cols-2 gap-4"> + <div className="flex items-start gap-3"> + <Hash className="h-4 w-4 text-muted-foreground mt-0.5" /> + <div> + <p className="text-sm text-muted-foreground">프로젝트 코드</p> + <p className="font-medium">{request.projectCode || "-"}</p> + </div> + </div> + + <div className="flex items-start gap-3"> + <FileText className="h-4 w-4 text-muted-foreground mt-0.5" /> + <div> + <p className="text-sm text-muted-foreground">프로젝트명</p> + <p className="font-medium">{request.projectName || "-"}</p> + </div> + </div> + + <div className="flex items-start gap-3"> + <Building className="h-4 w-4 text-muted-foreground mt-0.5" /> + <div> + <p className="text-sm text-muted-foreground">발주처</p> + <p className="font-medium">{request.projectCompany || "-"}</p> + </div> + </div> + + <div className="flex items-start gap-3"> + <MapPin className="h-4 w-4 text-muted-foreground mt-0.5" /> + <div> + <p className="text-sm text-muted-foreground">현장</p> + <p className="font-medium">{request.projectSite || "-"}</p> + </div> + </div> + </div> + + <Separator /> + + <div className="grid grid-cols-2 gap-4"> + <div className="flex items-start gap-3"> + <Package className="h-4 w-4 text-muted-foreground mt-0.5" /> + <div> + <p className="text-sm text-muted-foreground">패키지</p> + <p className="font-medium">{request.packageNo} - {request.packageName || "-"}</p> + </div> + </div> + + <div className="flex items-start gap-3"> + <Tag className="h-4 w-4 text-muted-foreground mt-0.5" /> + <div> + <p className="text-sm text-muted-foreground">SM 코드</p> + <p className="font-medium">{request.smCode || "-"}</p> + </div> + </div> + </div> + </CardContent> + </Card> + + {/* 자재 정보 */} + {(request.majorItemMaterialCategory || request.majorItemMaterialDescription) && ( + <Card> + <CardHeader> + <CardTitle className="text-base">자재 정보</CardTitle> + </CardHeader> + <CardContent> + <div className="grid grid-cols-2 gap-4"> + <div className="flex items-start gap-3"> + <Layers className="h-4 w-4 text-muted-foreground mt-0.5" /> + <div> + <p className="text-sm text-muted-foreground">자재 그룹</p> + <p className="font-medium">{request.majorItemMaterialCategory || "-"}</p> + </div> + </div> + + <div className="flex items-start gap-3"> + <FileText className="h-4 w-4 text-muted-foreground mt-0.5" /> + <div> + <p className="text-sm text-muted-foreground">자재 설명</p> + <p className="font-medium">{request.majorItemMaterialDescription || "-"}</p> + </div> + </div> + </div> + </CardContent> + </Card> + )} + + {/* 담당자 정보 */} + <Card> + <CardHeader> + <CardTitle className="text-base">담당자 정보</CardTitle> + </CardHeader> + <CardContent> + <div className="grid grid-cols-2 gap-4"> + <div className="flex items-start gap-3"> + <User className="h-4 w-4 text-muted-foreground mt-0.5" /> + <div> + <p className="text-sm text-muted-foreground">설계 담당자</p> + <p className="font-medium">{request.engPicName || "-"}</p> + {request.engPicEmail && ( + <p className="text-sm text-muted-foreground">{request.engPicEmail}</p> + )} + </div> + </div> + + <div className="flex items-start gap-3"> + <User className="h-4 w-4 text-muted-foreground mt-0.5" /> + <div> + <p className="text-sm text-muted-foreground">구매 담당자</p> + <p className="font-medium">{request.purchasePicName || "미배정"}</p> + {request.purchasePicEmail && ( + <p className="text-sm text-muted-foreground">{request.purchasePicEmail}</p> + )} + </div> + </div> + </div> + </CardContent> + </Card> + + {/* 반려 사유 */} + {request.status === "반려" && request.rejectReason && ( + <Card className="border-destructive"> + <CardHeader className="bg-destructive/5"> + <CardTitle className="text-base text-destructive flex items-center gap-2"> + <XCircle className="h-4 w-4" /> + 반려 사유 + </CardTitle> + </CardHeader> + <CardContent className="pt-4"> + <p className="text-sm">{request.rejectReason}</p> + </CardContent> + </Card> + )} + </TabsContent> + + <TabsContent value="items" className="mt-6"> + <Card> + <CardHeader> + <div className="flex items-center justify-between"> + <div> + <CardTitle className="text-base">품목 목록</CardTitle> + <CardDescription className="mt-1"> + 총 {request.itemCount || 0}개 품목 | 총 수량 {request.totalQuantity || 0}개 + </CardDescription> + </div> + <Button variant="outline" size="sm" onClick={handleExport}> + <Download className="mr-2 h-4 w-4" /> + Excel 다운로드 + </Button> + </div> + </CardHeader> + <CardContent> + {(!request.items || request.items.length === 0) ? ( + <div className="flex flex-col items-center justify-center h-32 text-muted-foreground"> + <Package className="h-8 w-8 mb-2" /> + <p>등록된 품목이 없습니다</p> + </div> + ) : ( + <div className="border rounded-lg"> + <Table> + <TableHeader> + <TableRow> + <TableHead className="w-[50px] text-center">번호</TableHead> + <TableHead>아이템 코드</TableHead> + <TableHead>아이템명</TableHead> + <TableHead>사양</TableHead> + <TableHead className="text-right">수량</TableHead> + <TableHead className="text-center">단위</TableHead> + <TableHead className="text-right">예상 단가</TableHead> + <TableHead className="text-right">예상 금액</TableHead> + {request.items[0]?.remarks && <TableHead>비고</TableHead>} + </TableRow> + </TableHeader> + <TableBody> + {request.items.map((item: any, index: number) => { + const subtotal = (item.quantity || 0) * (item.estimatedUnitPrice || 0); + return ( + <TableRow key={item.id || index}> + <TableCell className="text-center">{index + 1}</TableCell> + <TableCell className="font-mono text-sm">{item.itemCode || "-"}</TableCell> + <TableCell className="font-medium">{item.itemName}</TableCell> + <TableCell className="text-sm">{item.specification || "-"}</TableCell> + <TableCell className="text-right font-medium"> + {item.quantity?.toLocaleString('ko-KR')} + </TableCell> + <TableCell className="text-center">{item.unit}</TableCell> + <TableCell className="text-right"> + {item.estimatedUnitPrice + ? item.estimatedUnitPrice.toLocaleString('ko-KR') + "원" + : "-"} + </TableCell> + <TableCell className="text-right font-medium"> + {subtotal > 0 + ? subtotal.toLocaleString('ko-KR') + "원" + : "-"} + </TableCell> + {request.items[0]?.remarks && ( + <TableCell className="text-sm">{item.remarks || "-"}</TableCell> + )} + </TableRow> + ); + })} + </TableBody> + <TableFooter> + <TableRow> + <TableCell colSpan={6} className="text-right font-medium"> + 총 합계 + </TableCell> + <TableCell colSpan={2} className="text-right"> + <div className="flex flex-col"> + <span className="text-2xl font-bold text-primary"> + {new Intl.NumberFormat('ko-KR', { + style: 'currency', + currency: 'KRW' + }).format(totalAmount)} + </span> + </div> + </TableCell> + {request.items[0]?.remarks && <TableCell />} + </TableRow> + </TableFooter> + </Table> + </div> + )} + </CardContent> + </Card> + </TabsContent> + + <TabsContent value="files" className="mt-6"> + <Card> + <CardHeader> + <div className="flex items-center justify-between"> + <div> + <CardTitle className="text-base">첨부파일</CardTitle> + <CardDescription className="mt-1"> + 구매 요청 관련 문서 및 파일 + </CardDescription> + </div> + </div> + </CardHeader> + <CardContent> + {isLoadingFiles ? ( + <div className="flex items-center justify-center h-32"> + <p className="text-muted-foreground">파일 목록을 불러오는 중...</p> + </div> + ) : attachments.length === 0 ? ( + <div className="flex flex-col items-center justify-center h-32 text-muted-foreground"> + <Paperclip className="h-8 w-8 mb-2" /> + <p>첨부된 파일이 없습니다</p> + </div> + ) : ( + <div className="space-y-4"> + <div className="flex items-center justify-between mb-4"> + <p className="text-sm text-muted-foreground"> + 총 {attachments.length}개의 파일이 첨부되어 있습니다 + </p> + <Button + variant="outline" + size="sm" + onClick={handleDownloadAll} + disabled={attachments.length === 0} + > + <Download className="mr-2 h-4 w-4" /> + 전체 다운로드 + </Button> + </div> + + <FileList> + {attachments.map((file, index) => { + const fileInfo = getFileInfo(file.originalFileName || file.fileName); + return ( + <FileListItem key={file.id || file.fileName || index}> + <FileListIcon> + <FileIcon className="h-4 w-4" /> + </FileListIcon> + <FileListInfo> + <FileListHeader> + <FileListName> + {file.originalFileName || file.fileName} + </FileListName> + <FileListSize> + {file.fileSize} + </FileListSize> + </FileListHeader> + <FileListDescription className="flex items-center gap-4"> + {file.createdAt && ( + <span className="text-xs"> + {format(new Date(file.createdAt), "yyyy-MM-dd HH:mm")} + </span> + )} + {file.category && ( + <Badge variant="secondary" className="text-xs"> + {file.category} + </Badge> + )} + </FileListDescription> + </FileListInfo> + <div className="flex items-center gap-1"> + {fileInfo.canPreview && ( + <Button + variant="ghost" + size="icon" + className="h-8 w-8" + onClick={() => handleFilePreview(file)} + title="미리보기" + > + <Eye className="h-4 w-4" /> + </Button> + )} + <Button + variant="ghost" + size="icon" + className="h-8 w-8" + onClick={() => handleFileDownload(file)} + title="다운로드" + > + <Download className="h-4 w-4" /> + </Button> + </div> + </FileListItem> + ); + })} + </FileList> + + {/* 파일 종류별 요약 */} + {attachments.length > 0 && ( + <div className="mt-6 p-4 bg-muted/30 rounded-lg"> + <h4 className="text-sm font-medium mb-3">파일 요약</h4> + <div className="grid grid-cols-3 gap-4 text-sm"> + <div> + <p className="text-muted-foreground">총 파일 수</p> + <p className="font-medium">{attachments.length}개</p> + </div> + <div> + <p className="text-muted-foreground">총 용량</p> + <p className="font-medium"> + {formatFileSize( + attachments.reduce((sum, file) => sum + (file.fileSize || 0), 0) + )} + </p> + </div> + <div> + <p className="text-muted-foreground">최근 업로드</p> + <p className="font-medium"> + {attachments[0]?.createdAt + ? format(new Date(attachments[0].createdAt), "yyyy-MM-dd") + : "-"} + </p> + </div> + </div> + </div> + )} + </div> + )} + </CardContent> + </Card> + </TabsContent> + + <TabsContent value="history" className="mt-6"> + <Card> + <CardHeader> + <CardTitle className="text-base">처리 이력</CardTitle> + <CardDescription>요청서의 처리 현황을 시간순으로 확인할 수 있습니다</CardDescription> + </CardHeader> + <CardContent> + <div className="relative"> + <div className="absolute left-3 top-0 bottom-0 w-0.5 bg-border" /> + + <div className="space-y-6"> + {/* 생성 */} + <div className="flex gap-4"> + <div className="relative"> + <div className="h-6 w-6 rounded-full bg-primary flex items-center justify-center"> + <div className="h-2 w-2 rounded-full bg-white" /> + </div> + </div> + <div className="flex-1 -mt-0.5"> + <p className="font-medium">요청서 작성</p> + <p className="text-sm text-muted-foreground"> + {request.createdByName} ({request.createdByEmail}) + </p> + <p className="text-xs text-muted-foreground mt-1"> + {request.createdAt && format(new Date(request.createdAt), "yyyy-MM-dd HH:mm:ss", { locale: ko })} + </p> + </div> + </div> + + {/* 확정 */} + {request.confirmedAt && ( + <div className="flex gap-4"> + <div className="relative"> + <div className="h-6 w-6 rounded-full bg-blue-500 flex items-center justify-center"> + <CheckCircle className="h-3 w-3 text-white" /> + </div> + </div> + <div className="flex-1 -mt-0.5"> + <p className="font-medium">요청 확정</p> + <p className="text-sm text-muted-foreground"> + {request.confirmedByName} + </p> + <p className="text-xs text-muted-foreground mt-1"> + {format(new Date(request.confirmedAt), "yyyy-MM-dd HH:mm:ss", { locale: ko })} + </p> + </div> + </div> + )} + + {/* 반려 */} + {request.status === "반려" && request.rejectReason && ( + <div className="flex gap-4"> + <div className="relative"> + <div className="h-6 w-6 rounded-full bg-destructive flex items-center justify-center"> + <XCircle className="h-3 w-3 text-white" /> + </div> + </div> + <div className="flex-1 -mt-0.5"> + <p className="font-medium text-destructive">반려됨</p> + <p className="text-sm text-muted-foreground"> + {request.rejectReason} + </p> + <p className="text-xs text-muted-foreground mt-1"> + {request.updatedAt && format(new Date(request.updatedAt), "yyyy-MM-dd HH:mm:ss", { locale: ko })} + </p> + </div> + </div> + )} + + {/* RFQ 생성 */} + {request.rfqCreatedAt && ( + <div className="flex gap-4"> + <div className="relative"> + <div className="h-6 w-6 rounded-full bg-green-500 flex items-center justify-center"> + <Package className="h-3 w-3 text-white" /> + </div> + </div> + <div className="flex-1 -mt-0.5"> + <p className="font-medium">RFQ 생성 완료</p> + <p className="text-sm text-muted-foreground"> + RFQ 번호: <span className="font-mono font-medium">{request.rfqCode}</span> + </p> + <p className="text-xs text-muted-foreground mt-1"> + {format(new Date(request.rfqCreatedAt), "yyyy-MM-dd HH:mm:ss", { locale: ko })} + </p> + </div> + </div> + )} + + {/* 최종 수정 */} + {request.updatedAt && request.updatedAt !== request.createdAt && !request.rfqCreatedAt && request.status !== "반려" && ( + <div className="flex gap-4"> + <div className="relative"> + <div className="h-6 w-6 rounded-full bg-muted flex items-center justify-center"> + <Edit className="h-3 w-3 text-muted-foreground" /> + </div> + </div> + <div className="flex-1 -mt-0.5"> + <p className="font-medium">최종 수정</p> + <p className="text-sm text-muted-foreground"> + {request.updatedByName} ({request.updatedByEmail}) + </p> + <p className="text-xs text-muted-foreground mt-1"> + {format(new Date(request.updatedAt), "yyyy-MM-dd HH:mm:ss", { locale: ko })} + </p> + </div> + </div> + )} + </div> + </div> + </CardContent> + </Card> + </TabsContent> + </div> + </Tabs> + + <SheetFooter className="mt-6 flex-shrink-0"> + <div className="flex w-full justify-between"> + <Button variant="outline" onClick={() => onOpenChange(false)}> + 닫기 + </Button> + {request.status === "작성중" && ( + <Button onClick={handleEdit}> + <Edit className="mr-2 h-4 w-4" /> + 수정하기 + </Button> + )} + </div> + </SheetFooter> + </SheetContent> + </Sheet> + ); +}
\ No newline at end of file diff --git a/lib/itb/validations.ts b/lib/itb/validations.ts new file mode 100644 index 00000000..e481fe73 --- /dev/null +++ b/lib/itb/validations.ts @@ -0,0 +1,85 @@ +// lib/purchase-requests/validations.ts + +import { + createSearchParamsCache, + parseAsArrayOf, + parseAsInteger, + parseAsString, + parseAsStringEnum, + parseAsBoolean + } from "nuqs/server"; + import * as z from "zod"; + + import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"; + import { type PurchaseRequestView } from "@/db/schema"; + + export const searchParamsPurchaseRequestCache = createSearchParamsCache({ + // 1) 공통 플래그 + flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault([]), + + // 2) 페이지네이션 + page: parseAsInteger.withDefault(1), + perPage: parseAsInteger.withDefault(10), + + // 3) 정렬 (PurchaseRequestView 테이블) + sort: getSortingStateParser<PurchaseRequestView>().withDefault([ + { id: "createdAt", desc: true }, + ]), + + // 4) 상태 필터 (선택사항) + status: parseAsArrayOf( + z.enum(["작성중", "RFQ생성완료"]) + ).withDefault([]), + + // 5) 날짜 범위 필터 (선택사항) + dateFrom: parseAsString.withDefault(""), + dateTo: parseAsString.withDefault(""), + + // 6) 고급 필터 (nuqs - filterColumns) + filters: getFiltersStateParser().withDefault([]), + joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"), + + // 7) 글로벌 검색어 + search: parseAsString.withDefault(""), + }); + + export type GetPurchaseRequestsSchema = Awaited< + ReturnType<typeof searchParamsPurchaseRequestCache.parse> + >; + + // 구매요청 생성/수정 스키마 + export const purchaseRequestFormSchema = z.object({ + requestTitle: z.string().min(1, "요청 제목을 입력하세요"), + requestDescription: z.string().optional(), + projectId: z.number().optional(), + projectCode: z.string().optional(), + projectName: z.string().optional(), + projectCompany: z.string().optional(), + projectSite: z.string().optional(), + classNo: z.string().optional(), + packageNo: z.string().optional(), + packageName: z.string().optional(), + majorItemMaterialCategory: z.string().optional(), + majorItemMaterialDescription: z.string().optional(), + smCode: z.string().optional(), + estimatedBudget: z.string().optional(), + requestedDeliveryDate: z.date().optional(), + engPicId: z.number().optional(), + engPicName: z.string().optional(), + purchasePicId: z.number().optional(), + purchasePicName: z.string().optional(), + items: z.array( + z.object({ + id: z.string(), + itemCode: z.string().min(1, "아이템 코드를 입력하세요"), + itemName: z.string().min(1, "아이템명을 입력하세요"), + specification: z.string(), + quantity: z.number().min(1, "수량은 1 이상이어야 합니다"), + unit: z.string().min(1, "단위를 입력하세요"), + estimatedUnitPrice: z.number().optional(), + remarks: z.string().optional(), + }) + ).min(1, "최소 1개 이상의 아이템을 추가하세요"), + }); + + export type PurchaseRequestFormData = z.infer<typeof purchaseRequestFormSchema>;
\ No newline at end of file |