diff options
Diffstat (limited to 'lib/basic-contract/gtc-vendor')
18 files changed, 6635 insertions, 0 deletions
diff --git a/lib/basic-contract/gtc-vendor/bulk-update-gtc-clauses-dialog.tsx b/lib/basic-contract/gtc-vendor/bulk-update-gtc-clauses-dialog.tsx new file mode 100644 index 00000000..a9ef0f0e --- /dev/null +++ b/lib/basic-contract/gtc-vendor/bulk-update-gtc-clauses-dialog.tsx @@ -0,0 +1,276 @@ +"use client" + +import * as React from "react" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Textarea } from "@/components/ui/textarea" +import { Badge } from "@/components/ui/badge" +import { Switch } from "@/components/ui/switch" + +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, + FormDescription, +} from "@/components/ui/form" +import { Loader, Edit, AlertCircle } from "lucide-react" +import { toast } from "sonner" + +import { bulkUpdateGtcClausesSchema, type BulkUpdateGtcClausesSchema } from "@/lib/gtc-contract/gtc-clauses/validations" +import { bulkUpdateGtcClauses } from "@/lib/gtc-contract/gtc-clauses/service" +import { type GtcClauseTreeView } from "@/db/schema/gtc" +import { useSession } from "next-auth/react" + +interface BulkUpdateGtcClausesDialogProps + extends React.ComponentPropsWithRef<typeof Dialog> { + selectedClauses: GtcClauseTreeView[] +} + +export function BulkUpdateGtcClausesDialog({ + selectedClauses, + ...props +}: BulkUpdateGtcClausesDialogProps) { + const [isUpdatePending, startUpdateTransition] = React.useTransition() + const { data: session } = useSession() + + const currentUserId = React.useMemo(() => { + return session?.user?.id ? Number(session.user.id) : null + }, [session]) + + const form = useForm<BulkUpdateGtcClausesSchema>({ + resolver: zodResolver(bulkUpdateGtcClausesSchema), + defaultValues: { + clauseIds: selectedClauses.map(clause => clause.id), + updates: { + category: "", + isActive: true, + }, + editReason: "", + }, + }) + + React.useEffect(() => { + if (selectedClauses.length > 0) { + form.setValue("clauseIds", selectedClauses.map(clause => clause.id)) + } + }, [selectedClauses, form]) + + async function onSubmit(data: BulkUpdateGtcClausesSchema) { + startUpdateTransition(async () => { + if (!currentUserId) { + toast.error("로그인이 필요합니다") + return + } + + try { + const result = await bulkUpdateGtcClauses({ + ...data, + updatedById: currentUserId + }) + + if (result.error) { + toast.error(`에러: ${result.error}`) + return + } + + form.reset() + props.onOpenChange?.(false) + toast.success(`${selectedClauses.length}개의 조항이 수정되었습니다.`) + } catch (error) { + toast.error("조항 일괄 수정 중 오류가 발생했습니다.") + } + }) + } + + function handleDialogOpenChange(nextOpen: boolean) { + if (!nextOpen) { + form.reset() + } + props.onOpenChange?.(nextOpen) + } + + // 선택된 조항들의 통계 + const categoryCounts = React.useMemo(() => { + const counts: Record<string, number> = {} + selectedClauses.forEach(clause => { + const category = clause.category || "미분류" + counts[category] = (counts[category] || 0) + 1 + }) + return counts + }, [selectedClauses]) + + const activeCount = selectedClauses.filter(clause => clause.isActive).length + const inactiveCount = selectedClauses.length - activeCount + + if (selectedClauses.length === 0) { + return null + } + + return ( + <Dialog {...props} onOpenChange={handleDialogOpenChange}> + <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto"> + <DialogHeader> + <DialogTitle className="flex items-center gap-2"> + <Edit className="h-5 w-5" /> + 조항 일괄 수정 + </DialogTitle> + <DialogDescription> + 선택한 {selectedClauses.length}개 조항의 공통 속성을 일괄 수정합니다. + </DialogDescription> + </DialogHeader> + + {/* 선택된 조항 요약 */} + <div className="space-y-4 p-4 bg-muted/50 rounded-lg"> + <div className="flex items-center gap-2"> + <AlertCircle className="h-4 w-4 text-muted-foreground" /> + <span className="text-sm font-medium">선택된 조항 정보</span> + </div> + + <div className="grid grid-cols-2 gap-4 text-sm"> + <div> + <div className="font-medium text-muted-foreground mb-1">총 조항 수</div> + <div>{selectedClauses.length}개</div> + </div> + + <div> + <div className="font-medium text-muted-foreground mb-1">상태</div> + <div className="flex gap-2"> + <Badge variant="default">{activeCount}개 활성</Badge> + {inactiveCount > 0 && ( + <Badge variant="secondary">{inactiveCount}개 비활성</Badge> + )} + </div> + </div> + </div> + + {/* 분류별 통계 */} + <div> + <div className="font-medium text-muted-foreground mb-2">현재 분류 현황</div> + <div className="flex flex-wrap gap-1"> + {Object.entries(categoryCounts).map(([category, count]) => ( + <Badge key={category} variant="outline" className="text-xs"> + {category}: {count}개 + </Badge> + ))} + </div> + </div> + + {/* 조항 미리보기 (최대 5개) */} + <div> + <div className="font-medium text-muted-foreground mb-2">포함된 조항 (일부)</div> + <div className="space-y-1 max-h-24 overflow-y-auto"> + {selectedClauses.slice(0, 5).map(clause => ( + <div key={clause.id} className="flex items-center gap-2 text-xs"> + <Badge variant="outline">{clause.itemNumber}</Badge> + <span className="truncate">{clause.subtitle}</span> + </div> + ))} + {selectedClauses.length > 5 && ( + <div className="text-xs text-muted-foreground"> + ... 외 {selectedClauses.length - 5}개 조항 + </div> + )} + </div> + </div> + </div> + + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmit)}> + <div className="space-y-4"> + {/* 분류 수정 */} + <FormField + control={form.control} + name="updates.category" + render={({ field }) => ( + <FormItem> + <FormLabel>분류 변경 (선택사항)</FormLabel> + <FormControl> + <Input + placeholder="새로운 분류명을 입력하세요 (빈칸으로 두면 변경하지 않음)" + {...field} + /> + </FormControl> + <FormDescription> + 모든 선택된 조항의 분류가 동일한 값으로 변경됩니다. + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + {/* 활성 상태 변경 */} + <FormField + control={form.control} + name="updates.isActive" + render={({ field }) => ( + <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4"> + <div className="space-y-0.5"> + <FormLabel className="text-base">활성 상태</FormLabel> + <FormDescription> + 선택된 모든 조항의 활성 상태를 설정합니다. + </FormDescription> + </div> + <FormControl> + <Switch + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + </FormItem> + )} + /> + + {/* 편집 사유 */} + <FormField + control={form.control} + name="editReason" + render={({ field }) => ( + <FormItem> + <FormLabel>편집 사유 *</FormLabel> + <FormControl> + <Textarea + placeholder="일괄 수정 사유를 입력하세요..." + {...field} + rows={3} + /> + </FormControl> + <FormDescription> + 일괄 수정의 이유를 명확히 기록해주세요. + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + </div> + + <DialogFooter className="mt-6"> + <Button + type="button" + variant="outline" + onClick={() => props.onOpenChange?.(false)} + disabled={isUpdatePending} + > + Cancel + </Button> + <Button type="submit" disabled={isUpdatePending}> + {isUpdatePending && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + Update {selectedClauses.length} Clauses + </Button> + </DialogFooter> + </form> + </Form> + </DialogContent> + </Dialog> + ) +}
\ No newline at end of file diff --git a/lib/basic-contract/gtc-vendor/clause-preview-viewer.tsx b/lib/basic-contract/gtc-vendor/clause-preview-viewer.tsx new file mode 100644 index 00000000..f979f0ea --- /dev/null +++ b/lib/basic-contract/gtc-vendor/clause-preview-viewer.tsx @@ -0,0 +1,570 @@ +"use client" + +import React, { + useState, + useEffect, + useRef, + SetStateAction, + Dispatch, +} from "react" +import { WebViewerInstance } from "@pdftron/webviewer" +import { Loader2 } from "lucide-react" +import { toast } from "sonner" + +import { type GtcClauseTreeView } from "@/db/schema/gtc" + +interface ClausePreviewViewerProps { + clauses: GtcClauseTreeView[] + document: any + instance: WebViewerInstance | null + setInstance: Dispatch<SetStateAction<WebViewerInstance | null>> + onSuccess?: () => void + onError?: () => void +} + +export function ClausePreviewViewer({ + clauses, + document, + instance, + setInstance, + onSuccess, + onError, +}: ClausePreviewViewerProps) { + const [fileLoading, setFileLoading] = useState<boolean>(true) + const [loadingStage, setLoadingStage] = useState<string>("뷰어 준비 중...") + const viewer = useRef<HTMLDivElement>(null) + const initialized = useRef(false) + const isCancelled = useRef(false) + + // WebViewer 초기화 (단계별) + useEffect(() => { + if (!initialized.current && viewer.current) { + initialized.current = true + isCancelled.current = false + + initializeViewerStepByStep() + } + + return () => { + if (instance) { + try { + instance.UI.dispose() + } catch (error) { + console.warn("뷰어 정리 중 오류:", error) + } + } + isCancelled.current = true; + setTimeout(() => cleanupHtmlStyle(), 500); + } + }, []) + + const initializeViewerStepByStep = async () => { + try { + setLoadingStage("라이브러리 로딩 중...") + + // 1단계: 라이브러리 동적 import (지연 추가) + await new Promise(resolve => setTimeout(resolve, 300)) + const { default: WebViewer } = await import("@pdftron/webviewer") + + if (isCancelled.current || !viewer.current) { + console.log("📛 WebViewer 초기화 취소됨") + return + } + + setLoadingStage("뷰어 초기화 중...") + + // 2단계: WebViewer 인스턴스 생성 + const webviewerInstance = await WebViewer( + { + path: "/pdftronWeb", + licenseKey: process.env.NEXT_PUBLIC_PDFTRON_WEBVIEW_KEY, + fullAPI: true, + enableOfficeEditing: true, + l: "ko", + enableReadOnlyMode: false, + }, + viewer.current + ) + + if (isCancelled.current) { + console.log("📛 WebViewer 초기화 취소됨") + return + } + + setInstance(webviewerInstance) + setLoadingStage("UI 설정 중...") + + // 3단계: UI 설정 (약간의 지연 후) + await new Promise(resolve => setTimeout(resolve, 500)) + await configureViewerUI(webviewerInstance) + + setLoadingStage("문서 생성 중...") + + // 4단계: 문서 생성 (충분한 지연 후) + await new Promise(resolve => setTimeout(resolve, 800)) + await generateDocumentFromClauses(webviewerInstance, clauses, document) + + } catch (error) { + console.error("❌ WebViewer 단계별 초기화 실패:", error) + setFileLoading(false) + onError?.() // 초기화 실패 콜백 호출 + toast.error(`뷰어 초기화 실패: ${error instanceof Error ? error.message : '알 수 없는 오류'}`) + } + } + + const configureViewerUI = async (webviewerInstance: WebViewerInstance) => { + try { + const { disableElements, enableElements, setToolbarGroup } = webviewerInstance.UI + + // 미리보기에 필요한 도구만 활성화 + enableElements([ + "toolbarGroup-View", + "zoomInButton", + "zoomOutButton", + "fitButton", + "rotateCounterClockwiseButton", + "rotateClockwiseButton", + ]) + + // 편집 도구는 비활성화 + disableElements([ + "toolbarGroup-Edit", + "toolbarGroup-Insert", + "toolbarGroup-Annotate", + "toolbarGroup-Shapes", + "toolbarGroup-Forms", + ]) + + setToolbarGroup("toolbarGroup-View") + + console.log("✅ UI 설정 완료") + } catch (uiError) { + console.warn("⚠️ UI 설정 중 오류:", uiError) + // UI 설정 실패해도 계속 진행 + } + } + + // 문서 생성 함수 (재시도 로직 포함) + const generateDocumentFromClauses = async ( + webviewerInstance: WebViewerInstance, + clauses: GtcClauseTreeView[], + document: any, + retryCount = 0 + ) => { + const MAX_RETRIES = 3 + + try { + console.log("📄 조항 기반 DOCX 문서 생성 시작:", clauses.length) + + // 활성화된 조항만 필터링하고 정렬 + const activeClauses = clauses + .filter(clause => clause.isActive !== false) + .sort((a, b) => { + if (a.sortOrder && b.sortOrder) { + return parseFloat(a.sortOrder) - parseFloat(b.sortOrder) + } + return a.itemNumber.localeCompare(b.itemNumber, undefined, { numeric: true }) + }) + + if (activeClauses.length === 0) { + throw new Error("활성화된 조항이 없습니다.") + } + + setLoadingStage(`문서 생성 중... (${activeClauses.length}개 조항 처리)`) + + // DOCX 문서 생성 (재시도 로직 포함) + const docxBlob = await generateDocxDocumentWithRetry(activeClauses, document) + + // 파일 생성 + const docxFile = new File([docxBlob], `${document?.title || 'GTC계약서'}_미리보기.docx`, { + type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' + }) + + setLoadingStage("문서 로딩 중...") + + // WebViewer가 완전히 준비된 상태인지 확인 + await waitForViewerReady(webviewerInstance) + + // DOCX 문서 로드 (재시도 포함) + await loadDocumentWithRetry(webviewerInstance, docxFile) + + console.log("✅ DOCX 기반 문서 생성 완료") + toast.success("Word 문서 미리보기가 생성되었습니다.") + setFileLoading(false) + onSuccess?.() // 성공 콜백 호출 + + } catch (err) { + console.error(`❌ DOCX 문서 생성 중 오류 (시도 ${retryCount + 1}/${MAX_RETRIES + 1}):`, err) + + if (retryCount < MAX_RETRIES) { + console.log(`🔄 ${(retryCount + 1) * 1000}ms 후 재시도...`) + setLoadingStage(`재시도 중... (${retryCount + 1}/${MAX_RETRIES})`) + + await new Promise(resolve => setTimeout(resolve, (retryCount + 1) * 1000)) + + if (!isCancelled.current) { + return generateDocumentFromClauses(webviewerInstance, clauses, document, retryCount + 1) + } + } else { + setFileLoading(false) + onError?.() // 실패 콜백 호출 + toast.error(`문서 생성 실패: ${err instanceof Error ? err.message : '알 수 없는 오류'}`) + } + } + } + + // WebViewer 준비 상태 확인 + const waitForViewerReady = async (webviewerInstance: WebViewerInstance, timeout = 5000) => { + const startTime = Date.now() + + while (Date.now() - startTime < timeout) { + try { + // UI가 준비되었는지 확인 + if (webviewerInstance.UI && webviewerInstance.Core) { + console.log("✅ WebViewer 준비 완료") + return + } + } catch (error) { + // 아직 준비되지 않음 + } + + await new Promise(resolve => setTimeout(resolve, 100)) + } + + throw new Error("WebViewer 준비 시간 초과") + } + + // 문서 로드 재시도 함수 + const loadDocumentWithRetry = async ( + webviewerInstance: WebViewerInstance, + file: File, + retryCount = 0 + ) => { + const MAX_LOAD_RETRIES = 2 + + try { + await webviewerInstance.UI.loadDocument(file, { + filename: file.name, + enableOfficeEditing: true, + }) + console.log("✅ 문서 로드 성공") + } catch (error) { + console.error(`문서 로드 실패 (시도 ${retryCount + 1}):`, error) + + if (retryCount < MAX_LOAD_RETRIES) { + await new Promise(resolve => setTimeout(resolve, 1000)) + return loadDocumentWithRetry(webviewerInstance, file, retryCount + 1) + } else { + throw new Error(`문서 로드 실패: ${error instanceof Error ? error.message : '알 수 없는 오류'}`) + } + } + } + + // DOCX 생성 재시도 함수 + const generateDocxDocumentWithRetry = async ( + clauses: GtcClauseTreeView[], + document: any, + retryCount = 0 + ): Promise<Blob> => { + try { + return await generateDocxDocument(clauses, document) + } catch (error) { + console.error(`DOCX 생성 실패 (시도 ${retryCount + 1}):`, error) + + if (retryCount < 2) { + await new Promise(resolve => setTimeout(resolve, 500)) + return generateDocxDocumentWithRetry(clauses, document, retryCount + 1) + } else { + throw error + } + } + } + + return ( + <div className="relative w-full h-full overflow-hidden"> + <div + ref={viewer} + className="w-full h-full" + style={{ + position: 'relative', + overflow: 'hidden', + contain: 'layout style paint', + }} + > + {fileLoading && ( + <div className="absolute inset-0 flex flex-col items-center justify-center bg-white bg-opacity-90 z-10"> + <Loader2 className="h-8 w-8 text-blue-500 animate-spin mb-4" /> + <p className="text-sm text-muted-foreground">{loadingStage}</p> + <p className="text-xs text-muted-foreground mt-1"> + {clauses.filter(c => c.isActive !== false).length}개 조항 처리 중 + </p> + <div className="mt-3 text-xs text-gray-400"> + 초기화에 시간이 걸릴 수 있습니다... + </div> + </div> + )} + </div> + </div> + ) +} + +// ===== 유틸리티 함수들 ===== + +// data URL 판별 및 디코딩 유틸 +function isDataUrl(url: string) { + return /^data:/.test(url); +} + +function dataUrlToUint8Array(dataUrl: string): { bytes: Uint8Array; mime: string } { + // 형식: data:<mime>;base64,<payload> + const match = dataUrl.match(/^data:([^;]+);base64,(.*)$/); + if (!match) { + // base64가 아닌 data URL도 가능하지만, 여기서는 base64만 지원 + throw new Error("지원하지 않는 data URL 형식입니다."); + } + const mime = match[1]; + const base64 = match[2]; + const binary = atob(base64); + const len = binary.length; + const bytes = new Uint8Array(len); + for (let i = 0; i < len; i++) bytes[i] = binary.charCodeAt(i); + return { bytes, mime }; +} + +// 이미지 불러오기 + 크기 계산 (data:, http:, / 경로 모두 지원) +async function fetchImageData(url: string, maxWidthPx = 500) { + let blob: Blob; + let bytes: Uint8Array; + + if (isDataUrl(url)) { + // data URL → Uint8Array, Blob + const { bytes: arr, mime } = dataUrlToUint8Array(url); + bytes = arr; + blob = new Blob([bytes], { type: mime }); + } else { + // http(s) 또는 상대 경로 + const res = await fetch(url, { cache: "no-store" }); + if (!res.ok) throw new Error(`이미지 다운로드 실패 (${res.status})`); + blob = await res.blob(); + const arrayBuffer = await blob.arrayBuffer(); + bytes = new Uint8Array(arrayBuffer); + } + + // 원본 크기 파악 (공통) + const dims = await new Promise<{ width: number; height: number }>((resolve) => { + const img = new Image(); + const objectUrl = URL.createObjectURL(blob); + img.onload = () => { + const width = img.naturalWidth || 800; + const height = img.naturalHeight || 600; + URL.revokeObjectURL(objectUrl); + resolve({ width, height }); + }; + img.onerror = () => { + URL.revokeObjectURL(objectUrl); + resolve({ width: 800, height: 600 }); // 실패 시 기본값 + }; + img.src = objectUrl; + }); + + // 비율 유지 축소 + const scale = Math.min(1, maxWidthPx / (dims.width || maxWidthPx)); + const width = Math.round((dims.width || maxWidthPx) * scale); + const height = Math.round((dims.height || Math.round(maxWidthPx * 0.6)) * scale); + + return { data: bytes, width, height }; +} + +// DOCX 문서 생성 (docx 라이브러리 사용) +async function generateDocxDocument( + clauses: GtcClauseTreeView[], + document: any +): Promise<Blob> { + const { Document, Packer, Paragraph, TextRun, AlignmentType, ImageRun } = await import("docx"); + + function textToParagraphs(text: string, indentLeft: number) { + const lines = text.split("\n"); + return [ + new Paragraph({ + children: lines + .map((line, i) => [ + new TextRun({ text: line }), + ...(i < lines.length - 1 ? [new TextRun({ break: 1 })] : []), + ]) + .flat(), + indent: { left: indentLeft }, + }), + ]; + } + + const IMG_TOKEN = /!\[([^\]]+)\]/g; // 예: ![image1753698566087] + + async function pushContentWithInlineImages( + content: string, + indentLeft: number, + children: any[], + imageMap: Map<string, any> + ) { + let lastIndex = 0; + for (const match of content.matchAll(IMG_TOKEN)) { + const start = match.index ?? 0; + const end = start + match[0].length; + const imageId = match[1]; + + // 앞부분 텍스트 + if (start > lastIndex) { + const txt = content.slice(lastIndex, start); + children.push(...textToParagraphs(txt, indentLeft)); + } + + // 이미지 삽입 + const imgMeta = imageMap.get(imageId); + if (imgMeta?.url) { + try { + const { data, width, height } = await fetchImageData(imgMeta.url, 520); + children.push( + new Paragraph({ + children: [ + new ImageRun({ + data, + transformation: { width, height }, + }), + ], + indent: { left: indentLeft }, + }) + ); + // 사용된 이미지 표시(뒤에서 중복 추가 방지) + imageMap.delete(imageId); + } catch (imgError) { + console.warn("이미지 로드 실패:", imgMeta, imgError); + // 이미지 로드 실패시 텍스트로 대체 + children.push( + new Paragraph({ + children: [new TextRun({ text: `[이미지 로드 실패: ${imgMeta.fileName || imageId}]`, color: "999999" })], + indent: { left: indentLeft }, + }) + ); + } + } + // 매칭 실패 시: 아무것도 넣지 않음(토큰 제거) + + lastIndex = end; + } + + // 남은 꼬리 텍스트 + if (lastIndex < content.length) { + const tail = content.slice(lastIndex); + children.push(...textToParagraphs(tail, indentLeft)); + } + } + + const documentTitle = document?.title || "GTC 계약서"; + const currentDate = new Date().toLocaleDateString("ko-KR"); + + // depth 추정/정렬 + const structuredClauses = organizeClausesByHierarchy(clauses); + + const children: any[] = [ + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [new TextRun({ text: documentTitle, bold: true, size: 32 })], + }), + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [new TextRun({ text: `생성일: ${currentDate}`, size: 20, color: "666666" })], + }), + new Paragraph({ text: "" }), + new Paragraph({ text: "" }), + ]; + + for (const clause of structuredClauses) { + const depth = Math.min(clause.estimatedDepth || 0, 3); + const indentLeft = depth * 400; // 번호/제목 + const indentContent = indentLeft + 200; // 본문/이미지 + + // 번호 + 제목 + children.push( + new Paragraph({ + children: [ + new TextRun({ text: `${clause.itemNumber}${clause.subtitle ? "." : ""}`, bold: true, color: "2563eb" }), + ...(clause.subtitle + ? [new TextRun({ text: " " }), new TextRun({ text: clause.subtitle, bold: true })] + : []), + ], + indent: { left: indentLeft }, + }) + ); + + const imageMap = new Map( + Array.isArray((clause as any).images) + ? (clause as any).images.map((im: any) => [String(im.id), im]) + : [] + ); + + // 내용 + const hasContent = clause.content && clause.content.trim(); + if (hasContent) { + await pushContentWithInlineImages(clause.content!, indentContent, children, imageMap); + } + + // 본문에 등장하지 않은 잔여 이미지(선택: 뒤에 추가) + for (const [, imgMeta] of imageMap) { + try { + const { data, width, height } = await fetchImageData(imgMeta.url, 520); + children.push( + new Paragraph({ + children: [new ImageRun({ data, transformation: { width, height } })], + indent: { left: indentContent }, + }) + ); + } catch (e) { + children.push( + new Paragraph({ + children: [new TextRun({ text: `이미지 로드 실패: ${imgMeta.fileName || imgMeta.url}`, color: "b91c1c", size: 20 })], + indent: { left: indentContent }, + }) + ); + console.warn("이미지 로드 실패(잔여):", imgMeta, e); + } + } + + // 조항 간 간격 + children.push(new Paragraph({ text: "" })); + } + + const doc = new Document({ + sections: [{ properties: {}, children }], + }); + + return await Packer.toBlob(doc); +} + +// 조항들을 계층구조로 정리 +function organizeClausesByHierarchy(clauses: GtcClauseTreeView[]) { + // depth가 없는 경우 itemNumber로 depth 추정 + return clauses.map(clause => ({ + ...clause, + estimatedDepth: clause.depth ?? estimateDepthFromItemNumber(clause.itemNumber) + })).sort((a, b) => { + // itemNumber 기준 자연 정렬 + return a.itemNumber.localeCompare(b.itemNumber, undefined, { + numeric: true, + sensitivity: 'base' + }) + }) +} + +// itemNumber로부터 depth 추정 +function estimateDepthFromItemNumber(itemNumber: string): number { + const parts = itemNumber.split('.') + return Math.max(0, parts.length - 1) +} + +// WebViewer 정리 함수 +const cleanupHtmlStyle = () => { + // iframe 스타일 정리 (WebViewer가 추가한 스타일) + const elements = document.querySelectorAll('.Document_container'); + elements.forEach((elem) => { + elem.remove(); + }); +};
\ No newline at end of file diff --git a/lib/basic-contract/gtc-vendor/clause-table.tsx b/lib/basic-contract/gtc-vendor/clause-table.tsx new file mode 100644 index 00000000..a9230cd4 --- /dev/null +++ b/lib/basic-contract/gtc-vendor/clause-table.tsx @@ -0,0 +1,261 @@ +"use client" + +import * as React from "react" +import { type GtcClauseTreeView } from "@/db/schema/gtc" +import type { + DataTableAdvancedFilterField, + DataTableFilterField, + DataTableRowAction, +} from "@/types/table" + +import { useDataTable } from "@/hooks/use-data-table" +import { DataTable } from "@/components/data-table/data-table" +import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar" + +import type { + getGtcClauses, + getUsersForFilter, + getVendorClausesForDocument +} from "@/lib/gtc-contract/gtc-clauses/service" +import { getColumns } from "./gtc-clauses-table-columns" +import { GtcClausesTableToolbarActions } from "./gtc-clauses-table-toolbar-actions" +import { DeleteGtcClausesDialog } from "./delete-gtc-clauses-dialog" +import { UpdateGtcClauseSheet } from "./update-gtc-clause-sheet" +import { CreateVendorGtcClauseDialog } from "./create-gtc-clause-dialog" +import { DuplicateGtcClauseDialog } from "./duplicate-gtc-clause-dialog" + +interface GtcClausesTableProps { + promises: Promise< + [ + Awaited<ReturnType<typeof getGtcClauses>>, + Awaited<ReturnType<typeof getUsersForFilter>>, + Awaited<ReturnType<typeof getVendorClausesForDocument>>, + ] + > + , + documentId: number + document: any + vendorId?: number + vendorName?: string +} + +export function GtcClausesVendorTable({ + promises, + documentId, + document, + vendorId, + vendorName +}: GtcClausesTableProps) { + const [{ data, pageCount }, users, vendorData] = React.use(promises) + + + const [rowAction, setRowAction] = + React.useState<DataTableRowAction<GtcClauseTreeView> | null>(null) + + const dataWithVendor = React.useMemo(() => { + if (!vendorData?.vendorClauseMap) return data + + return data.map(clause => { + const vendorClause = vendorData.vendorClauseMap.get(clause.id) + + return { + ...clause, + vendorInfo: vendorClause || null, + } + }) + }, [data, vendorData]) + + + console.log(dataWithVendor,"dataWithVendor") + console.log(vendorData,"vendorData") + + const columns = React.useMemo( + () => getColumns({ + setRowAction, + documentId, + hasVendorInfo: !!vendorId && !!vendorData?.vendorDocument + }), + [setRowAction, documentId, vendorData] + ) + /** + * Filter fields for the data table. + */ + const filterFields: DataTableFilterField<GtcClauseTreeView>[] = [ + { + id: "itemNumber", + label: "채번", + placeholder: "채번으로 검색...", + }, + { + id: "subtitle", + label: "소제목", + placeholder: "소제목으로 검색...", + }, + { + id: "content", + label: "상세항목", + placeholder: "상세항목으로 검색...", + }, + ] + + /** + * Advanced filter fields for the data table. + */ + const advancedFilterFields: DataTableAdvancedFilterField<GtcClauseTreeView>[] = [ + { + id: "itemNumber", + label: "채번", + type: "text", + }, + { + id: "category", + label: "분류", + type: "text", + }, + { + id: "subtitle", + label: "소제목", + type: "text", + }, + { + id: "content", + label: "상세항목", + type: "text", + }, + { + id: "depth", + label: "계층 깊이", + type: "multi-select", + options: [ + { label: "1단계", value: "0" }, + { label: "2단계", value: "1" }, + { label: "3단계", value: "2" }, + { label: "4단계", value: "3" }, + { label: "5단계", value: "4" }, + ], + }, + { + id: "createdByName", + label: "작성자", + type: "multi-select", + options: users.map((user) => ({ + label: user.name, + value: user.name, + })), + }, + { + id: "updatedByName", + label: "수정자", + type: "multi-select", + options: users.map((user) => ({ + label: user.name, + value: user.name, + })), + }, + { + id: "createdAt", + label: "작성일", + type: "date", + }, + { + id: "updatedAt", + label: "수정일", + type: "date", + }, + ] + + const { table } = useDataTable({ + data: dataWithVendor, + columns, + pageCount, + filterFields, + enablePinning: true, + enableAdvancedFilter: true, + initialState: { + sorting: [{ "id": "itemNumber", "desc": false }], + columnPinning: { right: ["actions"] }, + }, + getRowId: (originalRow) => `${originalRow.id}`, + shallow: false, + clearOnDefault: true, + }) + + return ( + <> + <DataTable + table={table} + // floatingBar={<GtcClausesTableFloatingBar table={table} />} + > + <DataTableAdvancedToolbar + table={table} + filterFields={advancedFilterFields} + shallow={false} + > + <GtcClausesTableToolbarActions + table={table} + documentId={documentId} + document={document} + /> + </DataTableAdvancedToolbar> + </DataTable> + + {/* 삭제 다이얼로그 */} + <DeleteGtcClausesDialog + open={rowAction?.type === "delete"} + onOpenChange={() => setRowAction(null)} + gtcClauses={rowAction?.row.original ? [rowAction?.row.original] : []} + showTrigger={false} + onSuccess={() => rowAction?.row.toggleSelected(false)} + /> + + {/* 수정 시트 */} + <UpdateGtcClauseSheet + open={rowAction?.type === "update"} + onOpenChange={() => setRowAction(null)} + gtcClause={rowAction?.row.original ?? null} + vendorInfo={rowAction?.row.original?.vendorInfo ?? null} + documentId={documentId} + vendorId={vendorId} + vendorName={vendorName} + /> + + {/* 생성 다이얼로그 */} + {/* <CreateVendorGtcClauseDialog + key="main-create" + documentId={documentId} + document={document} + /> */} + + {/* 하위 조항 추가 다이얼로그 */} + <CreateVendorGtcClauseDialog + key={`sub-create-${rowAction?.row.original.id || 'none'}`} + documentId={documentId} + document={document} + parentClause={rowAction?.type === "addSubClause" ? rowAction.row.original : null} + open={rowAction?.type === "addSubClause"} + onOpenChange={(open) => { + if (!open) { + setRowAction(null) + } + }} + showTrigger={false} + onSuccess={() => { + setRowAction(null) + // 테이블 리프레시 로직 + }} + /> + + {/* 조항 복제 다이얼로그 */} + <DuplicateGtcClauseDialog + open={rowAction?.type === "duplicate"} + onOpenChange={() => setRowAction(null)} + sourceClause={rowAction?.row.original ?? null} + onSuccess={() => { + // 테이블 리프레시 로직 + }} + /> + + + </> + ) +}
\ No newline at end of file diff --git a/lib/basic-contract/gtc-vendor/clause-variable-settings-dialog.tsx b/lib/basic-contract/gtc-vendor/clause-variable-settings-dialog.tsx new file mode 100644 index 00000000..36d47403 --- /dev/null +++ b/lib/basic-contract/gtc-vendor/clause-variable-settings-dialog.tsx @@ -0,0 +1,364 @@ +"use client" + +import * as React from "react" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Textarea } from "@/components/ui/textarea" +import { Badge } from "@/components/ui/badge" + +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, + FormDescription, +} from "@/components/ui/form" +import { Loader, Settings2, Wand2, Copy, Eye } from "lucide-react" +import { toast } from "sonner" +import { cn } from "@/lib/utils" + +import { updateGtcClauseSchema, type UpdateGtcClauseSchema } from "@/lib/gtc-contract/gtc-clauses/validations" +import { updateGtcClause } from "@/lib/gtc-contract/gtc-clauses/service" +import { type GtcClauseTreeView } from "@/db/schema/gtc" +import { useSession } from "next-auth/react" + +interface ClauseVariableSettingsDialogProps + extends React.ComponentPropsWithRef<typeof Dialog> { + clause: GtcClauseTreeView | null + onSuccess?: () => void +} + +export function ClauseVariableSettingsDialog({ + clause, + onSuccess, + ...props +}: ClauseVariableSettingsDialogProps) { + const [isUpdatePending, startUpdateTransition] = React.useTransition() + const [showPreview, setShowPreview] = React.useState(false) + const { data: session } = useSession() + + const currentUserId = React.useMemo(() => { + return session?.user?.id ? Number(session.user.id) : null + }, [session]) + + const form = useForm<UpdateGtcClauseSchema>({ + resolver: zodResolver(updateGtcClauseSchema), + defaultValues: { + numberVariableName: "", + subtitleVariableName: "", + contentVariableName: "", + editReason: "", + }, + }) + + // clause가 변경될 때 폼 데이터 설정 + React.useEffect(() => { + if (clause) { + form.reset({ + numberVariableName: clause.numberVariableName || "", + subtitleVariableName: clause.subtitleVariableName || "", + contentVariableName: clause.contentVariableName || "", + editReason: "", + }) + } + }, [clause, form]) + + const generateAutoVariableNames = () => { + if (!clause) return + + const fullPath = clause.fullPath || clause.itemNumber + + console.log(clause.fullPath,fullPath,"fullPath") + console.log(clause, "clause") + + const prefix = "CLAUSE_" + fullPath.replace(/\./g, "_") + + form.setValue("numberVariableName", `${prefix}_NUMBER`) + form.setValue("subtitleVariableName", `${prefix}_SUBTITLE`) + form.setValue("contentVariableName", `${prefix}_CONTENT`) + + toast.success("변수명이 자동 생성되었습니다.") + } + + const copyCurrentVariableNames = () => { + if (!clause) return + + const currentVars = { + number: clause.autoNumberVariable, + subtitle: clause.autoSubtitleVariable, + content: clause.autoContentVariable, + } + + form.setValue("numberVariableName", currentVars.number) + form.setValue("subtitleVariableName", currentVars.subtitle) + form.setValue("contentVariableName", currentVars.content) + + toast.success("현재 변수명이 복사되었습니다.") + } + + async function onSubmit(data: UpdateGtcClauseSchema) { + startUpdateTransition(async () => { + if (!clause || !currentUserId) { + toast.error("조항 정보를 찾을 수 없습니다.") + return + } + + try { + const result = await updateGtcClause(clause.id, { + numberVariableName: data.numberVariableName, + subtitleVariableName: data.subtitleVariableName, + contentVariableName: data.contentVariableName, + editReason: data.editReason || "PDFTron 변수명 설정", + updatedById: currentUserId, + }) + + if (result.error) { + toast.error(result.error) + return + } + + form.reset() + props.onOpenChange?.(false) + toast.success("변수명이 설정되었습니다!") + onSuccess?.() + } catch (error) { + toast.error("변수명 설정 중 오류가 발생했습니다.") + } + }) + } + + function handleDialogOpenChange(nextOpen: boolean) { + if (!nextOpen) { + form.reset() + setShowPreview(false) + } + props.onOpenChange?.(nextOpen) + } + + const currentNumberVar = form.watch("numberVariableName") + const currentSubtitleVar = form.watch("subtitleVariableName") + const currentContentVar = form.watch("contentVariableName") + + const hasAllVariables = currentNumberVar && currentSubtitleVar && currentContentVar + + if (!clause) { + return null + } + + return ( + <Dialog {...props} onOpenChange={handleDialogOpenChange}> + <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col"> + <DialogHeader className="flex-shrink-0"> + <DialogTitle className="flex items-center gap-2"> + <Settings2 className="h-5 w-5" /> + PDFTron 변수명 설정 + </DialogTitle> + <DialogDescription> + 조항의 PDFTron 변수명을 설정하여 문서 생성에 사용합니다. + </DialogDescription> + </DialogHeader> + + {/* 조항 정보 */} + <div className="p-3 bg-muted/50 rounded-lg text-sm flex-shrink-0"> + <div className="font-medium mb-2">대상 조항</div> + <div className="space-y-1 text-muted-foreground"> + <div className="flex items-center gap-2"> + <Badge variant="outline">{clause.itemNumber}</Badge> + <span>{clause.subtitle}</span> + <Badge variant={clause.hasAllVariableNames ? "default" : "destructive"}> + {clause.hasAllVariableNames ? "설정됨" : "미설정"} + </Badge> + </div> + {clause.fullPath && ( + <div className="text-xs">경로: {clause.fullPath}</div> + )} + {clause.category && ( + <div className="text-xs">분류: {clause.category}</div> + )} + </div> + </div> + + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1 min-h-0"> + <div className="flex-1 overflow-y-auto px-1"> + <div className="space-y-4 py-4"> + {/* 자동 생성 버튼들 */} + <div className="flex gap-2"> + <Button + type="button" + variant="outline" + size="sm" + onClick={generateAutoVariableNames} + className="flex items-center gap-2" + > + <Wand2 className="h-4 w-4" /> + 자동 생성 + </Button> + + <Button + type="button" + variant="outline" + size="sm" + onClick={copyCurrentVariableNames} + className="flex items-center gap-2" + > + <Copy className="h-4 w-4" /> + 현재값 복사 + </Button> + + <Button + type="button" + variant="outline" + size="sm" + onClick={() => setShowPreview(!showPreview)} + className="flex items-center gap-2" + > + <Eye className="h-4 w-4" /> + {showPreview ? "미리보기 숨기기" : "미리보기"} + </Button> + </div> + + {/* 현재 설정된 변수명 표시 */} + {clause.hasAllVariableNames && ( + <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg"> + <div className="text-sm font-medium text-blue-900 mb-2">현재 설정된 변수명</div> + <div className="space-y-1 text-xs"> + <div><code className="bg-blue-100 px-1 rounded">{clause.numberVariableName}</code></div> + <div><code className="bg-blue-100 px-1 rounded">{clause.subtitleVariableName}</code></div> + <div><code className="bg-blue-100 px-1 rounded">{clause.contentVariableName}</code></div> + </div> + </div> + )} + + {/* 변수명 입력 필드들 */} + <div className="space-y-4"> + <FormField + control={form.control} + name="numberVariableName" + render={({ field }) => ( + <FormItem> + <FormLabel>채번 변수명 *</FormLabel> + <FormControl> + <Input + placeholder="예: CLAUSE_1_NUMBER, HEADER_1_NUM 등" + {...field} + /> + </FormControl> + <FormDescription> + 문서에서 조항 번호를 표시할 변수명입니다. + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="subtitleVariableName" + render={({ field }) => ( + <FormItem> + <FormLabel>소제목 변수명 *</FormLabel> + <FormControl> + <Input + placeholder="예: CLAUSE_1_SUBTITLE, HEADER_1_TITLE 등" + {...field} + /> + </FormControl> + <FormDescription> + 문서에서 조항 제목을 표시할 변수명입니다. + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="contentVariableName" + render={({ field }) => ( + <FormItem> + <FormLabel>상세항목 변수명 *</FormLabel> + <FormControl> + <Input + placeholder="예: CLAUSE_1_CONTENT, BODY_1_TEXT 등" + {...field} + /> + </FormControl> + <FormDescription> + 문서에서 조항 내용을 표시할 변수명입니다. + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + </div> + + {/* 미리보기 */} + {showPreview && hasAllVariables && ( + <div className="p-3 bg-gray-50 border rounded-lg"> + <div className="text-sm font-medium mb-2">PDFTron 템플릿 미리보기</div> + <div className="space-y-2 text-xs font-mono bg-white p-2 rounded border"> + <div className="text-blue-600">{"{{" + currentNumberVar + "}}"}. {"{{" + currentSubtitleVar + "}}"}</div> + <div className="text-gray-600 ml-4">{"{{" + currentContentVar + "}}"}</div> + </div> + <div className="text-xs text-muted-foreground mt-2"> + 실제 문서에서 위와 같은 형태로 표시됩니다. + </div> + </div> + )} + + {/* 편집 사유 */} + <FormField + control={form.control} + name="editReason" + render={({ field }) => ( + <FormItem> + <FormLabel>편집 사유 (선택사항)</FormLabel> + <FormControl> + <Textarea + placeholder="변수명 설정 사유를 입력하세요..." + {...field} + rows={2} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </div> + </div> + + <DialogFooter className="flex-shrink-0 border-t pt-4"> + <Button + type="button" + variant="outline" + onClick={() => props.onOpenChange?.(false)} + disabled={isUpdatePending} + > + Cancel + </Button> + <Button + type="submit" + disabled={isUpdatePending || !hasAllVariables} + > + {isUpdatePending && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + <Settings2 className="mr-2 h-4 w-4" /> + Save Variables + </Button> + </DialogFooter> + </form> + </Form> + </DialogContent> + </Dialog> + ) +}
\ No newline at end of file diff --git a/lib/basic-contract/gtc-vendor/create-gtc-clause-dialog.tsx b/lib/basic-contract/gtc-vendor/create-gtc-clause-dialog.tsx new file mode 100644 index 00000000..3c98ee4d --- /dev/null +++ b/lib/basic-contract/gtc-vendor/create-gtc-clause-dialog.tsx @@ -0,0 +1,625 @@ +// create-vendor-gtc-clause-dialog.tsx +"use client" + +import * as React from "react" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Textarea } from "@/components/ui/textarea" +import { Checkbox } from "@/components/ui/checkbox" + +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, + FormDescription, +} from "@/components/ui/form" +import { + Popover, + PopoverTrigger, + PopoverContent, +} from "@/components/ui/popover" +import { + Command, + CommandInput, + CommandList, + CommandGroup, + CommandItem, + CommandEmpty, +} from "@/components/ui/command" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" +import { Check, ChevronsUpDown, Loader, Plus, Info } from "lucide-react" +import { cn } from "@/lib/utils" +import { toast } from "sonner" + +import { createVendorGtcClauseSchema, type CreateVendorGtcClauseSchema } from "@/lib/gtc-contract/gtc-clauses/validations" +import { createVendorGtcClause, getGtcClausesTree } from "@/lib/gtc-contract/gtc-clauses/service" +import { type GtcClauseTreeView } from "@/db/schema/gtc" +import { useSession } from "next-auth/react" +import { MarkdownImageEditor } from "./markdown-image-editor" + +interface ClauseImage { + id: string + url: string + fileName: string + size: number +} + +interface CreateVendorGtcClauseDialogProps { + documentId: number + document: any + vendorDocumentId: number + vendorId: number + vendorName?: string + baseClauseId?: number // Optional - if creating a new vendor clause from scratch + baseClause?: GtcClauseTreeView | null // Original clause to modify, if available + parentClause?: GtcClauseTreeView | null + onSuccess?: () => void + open?: boolean + onOpenChange?: (open: boolean) => void + showTrigger?: boolean +} + +export function CreateVendorGtcClauseDialog({ + documentId, + document, + vendorDocumentId, + vendorId, + vendorName, + baseClauseId, + baseClause, + parentClause = null, + onSuccess, + open: controlledOpen, + onOpenChange: controlledOnOpenChange, + showTrigger = true +}: CreateVendorGtcClauseDialogProps) { + const [internalOpen, setInternalOpen] = React.useState(false) + + // controlled vs uncontrolled 모드 + const isControlled = controlledOpen !== undefined + const open = isControlled ? controlledOpen : internalOpen + const setOpen = isControlled ? controlledOnOpenChange! : setInternalOpen + const [parentClauses, setParentClauses] = React.useState<GtcClauseTreeView[]>([]) + const [isCreatePending, startCreateTransition] = React.useTransition() + const { data: session } = useSession() + const [images, setImages] = React.useState<ClauseImage[]>([]) + + const currentUserId = React.useMemo(() => { + return session?.user?.id ? Number(session.user.id) : null + }, [session]) + + React.useEffect(() => { + if (open) { + loadParentClauses() + } + }, [open, documentId]) + + const loadParentClauses = async () => { + try { + const tree = await getGtcClausesTree(documentId) + setParentClauses(flattenTree(tree)) + } catch (error) { + console.error("Error loading parent clauses:", error) + } + } + + const form = useForm<CreateVendorGtcClauseSchema>({ + resolver: zodResolver(createVendorGtcClauseSchema), + defaultValues: { + documentId, + vendorDocumentId, + baseClauseId: baseClauseId || null, + parentId: parentClause?.id || null, + modifiedItemNumber: baseClause?.itemNumber || "", + modifiedCategory: baseClause?.category || "", + modifiedSubtitle: baseClause?.subtitle || "", + modifiedContent: baseClause?.content || "", + isNumberModified: false, + isCategoryModified: false, + isSubtitleModified: false, + isContentModified: false, + sortOrder: 0, + reviewStatus: "draft", + negotiationNote: "", + isExcluded: false, + editReason: "", + }, + }) + + const handleContentImageChange = (content: string, newImages: ClauseImage[]) => { + form.setValue("modifiedContent", content) + setImages(newImages) + } + + async function onSubmit(data: CreateVendorGtcClauseSchema) { + startCreateTransition(async () => { + if (!currentUserId) { + toast.error("로그인이 필요합니다") + return + } + + try { + // 사용자 정보 추가 + const result = await createVendorGtcClause({ + ...data, + images: images, + createdById: currentUserId, + vendorId, // 벤더 ID 추가 + actorName: session?.user?.name || null, + actorEmail: session?.user?.email || null, + }) + + if (result.error) { + toast.error(`에러: ${result.error}`) + return + } + + form.reset() + setImages([]) + setOpen(false) + toast.success("벤더 GTC 조항이 생성되었습니다.") + onSuccess?.() + } catch (error) { + toast.error("벤더 조항 생성 중 오류가 발생했습니다.") + } + }) + } + + function handleDialogOpenChange(nextOpen: boolean) { + if (!nextOpen) { + form.reset() + setImages([]) + } + setOpen(nextOpen) + } + + const selectedParent = parentClauses.find(c => c.id === form.watch("parentId")) + + return ( + <Dialog open={open} onOpenChange={handleDialogOpenChange}> + {showTrigger && ( + <DialogTrigger asChild> + <Button variant="default" size="sm"> + <Plus className="mr-2 h-4 w-4" /> + {baseClause + ? "조항 협의 생성" + : parentClause + ? "하위 조항 추가" + : "조항 추가"} + </Button> + </DialogTrigger> + )} + + <DialogContent className="max-w-4xl h-[90vh] flex flex-col"> + <DialogHeader className="flex-shrink-0"> + <DialogTitle> + {baseClause + ? `${baseClause.subtitle} 조항 협의 생성` + : parentClause + ? "하위 벤더 조항 생성" + : "새 벤더 조항 생성"} + </DialogTitle> + <DialogDescription> + {vendorName + ? `${vendorName}과(와)의 GTC 조항 협의 내용을 입력하세요.` + : '벤더별 GTC 조항 정보를 입력하세요.'} + </DialogDescription> + </DialogHeader> + + {/* 기존 조항 정보 (있는 경우) */} + {baseClause && ( + <div className="p-3 bg-muted/50 rounded-lg text-sm flex-shrink-0 mb-4"> + <div className="font-medium mb-1">원본 조항 정보</div> + <div className="text-muted-foreground space-y-1"> + <div>채번: {baseClause.itemNumber}</div> + {baseClause.category && <div>분류: {baseClause.category}</div>} + <div>소제목: {baseClause.subtitle}</div> + {baseClause.content && <div>내용: {baseClause.content.substring(0, 80)}...</div>} + </div> + </div> + )} + + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1 min-h-0"> + <div className="flex-1 overflow-y-auto px-1"> + <div className="space-y-4 py-4"> + {/* 협의 상태 */} + <FormField + control={form.control} + name="reviewStatus" + render={({ field }) => ( + <FormItem> + <FormLabel>협의 상태</FormLabel> + <Select onValueChange={field.onChange} defaultValue={field.value}> + <FormControl> + <SelectTrigger> + <SelectValue placeholder="협의 상태를 선택하세요" /> + </SelectTrigger> + </FormControl> + <SelectContent> + <SelectItem value="draft">초안</SelectItem> + <SelectItem value="pending">협의 대기</SelectItem> + <SelectItem value="reviewing">협의 중</SelectItem> + <SelectItem value="approved">승인됨</SelectItem> + <SelectItem value="rejected">거부됨</SelectItem> + <SelectItem value="revised">수정됨</SelectItem> + </SelectContent> + </Select> + <FormMessage /> + </FormItem> + )} + /> + + {/* 제외 여부 */} + <FormField + control={form.control} + name="isExcluded" + render={({ field }) => ( + <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4"> + <FormControl> + <Checkbox + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + <div className="space-y-1 leading-none"> + <FormLabel> + 이 조항을 벤더 계약에서 제외 + </FormLabel> + <FormDescription> + 체크하면 최종 계약서에서 이 조항이 제외됩니다 + </FormDescription> + </div> + </FormItem> + )} + /> + + {/* 부모 조항 선택 (벤더 조항에만 필요한 경우) */} + {!baseClause && ( + <FormField + control={form.control} + name="parentId" + render={({ field }) => { + const [popoverOpen, setPopoverOpen] = React.useState(false) + + return ( + <FormItem> + <FormLabel>부모 조항 (선택사항)</FormLabel> + <FormControl> + <Popover + open={popoverOpen} + onOpenChange={setPopoverOpen} + modal={true} + > + <PopoverTrigger asChild> + <Button + variant="outline" + role="combobox" + aria-expanded={popoverOpen} + className="w-full justify-between" + > + {selectedParent + ? `${selectedParent.itemNumber} - ${selectedParent.subtitle}` + : "부모 조항을 선택하세요... (최상위 조항인 경우 선택 안함)"} + <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> + </Button> + </PopoverTrigger> + + <PopoverContent className="w-full p-0"> + <Command> + <CommandInput + placeholder="부모 조항 검색..." + className="h-9" + /> + <CommandList> + <CommandEmpty>조항을 찾을 수 없습니다.</CommandEmpty> + <CommandGroup> + <CommandItem + value="none" + onSelect={() => { + field.onChange(null) + setPopoverOpen(false) + }} + > + 최상위 조항 + <Check + className={cn( + "ml-auto h-4 w-4", + !field.value ? "opacity-100" : "opacity-0" + )} + /> + </CommandItem> + + {parentClauses.map((clause) => ( + <CommandItem + key={clause.id} + value={`${clause.itemNumber} - ${clause.subtitle}`} + onSelect={() => { + field.onChange(clause.id) + setPopoverOpen(false) + }} + > + <div className="flex items-center w-full"> + <span style={{ marginLeft: `${clause.depth * 12}px` }}> + {`${clause.itemNumber} - ${clause.subtitle}`} + </span> + </div> + <Check + className={cn( + "ml-auto h-4 w-4", + selectedParent?.id === clause.id + ? "opacity-100" + : "opacity-0" + )} + /> + </CommandItem> + ))} + </CommandGroup> + </CommandList> + </Command> + </PopoverContent> + </Popover> + </FormControl> + <FormMessage /> + </FormItem> + ) + }} + /> + )} + + {/* 채번 수정 */} + <div className="space-y-2 border rounded-lg p-3"> + <FormField + control={form.control} + name="isNumberModified" + render={({ field }) => ( + <FormItem className="flex flex-row items-center space-x-3 space-y-0"> + <FormControl> + <Checkbox + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + <FormLabel className="font-normal cursor-pointer"> + 채번 수정 + </FormLabel> + </FormItem> + )} + /> + + {form.watch("isNumberModified") && ( + <FormField + control={form.control} + name="modifiedItemNumber" + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + placeholder="수정할 채번 입력" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + )} + </div> + + {/* 분류 수정 */} + <div className="space-y-2 border rounded-lg p-3"> + <FormField + control={form.control} + name="isCategoryModified" + render={({ field }) => ( + <FormItem className="flex flex-row items-center space-x-3 space-y-0"> + <FormControl> + <Checkbox + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + <FormLabel className="font-normal cursor-pointer"> + 분류 수정 + </FormLabel> + </FormItem> + )} + /> + + {form.watch("isCategoryModified") && ( + <FormField + control={form.control} + name="modifiedCategory" + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + placeholder="수정할 분류 입력" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + )} + </div> + + {/* 소제목 수정 */} + <div className="space-y-2 border rounded-lg p-3"> + <FormField + control={form.control} + name="isSubtitleModified" + render={({ field }) => ( + <FormItem className="flex flex-row items-center space-x-3 space-y-0"> + <FormControl> + <Checkbox + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + <FormLabel className="font-normal cursor-pointer"> + 소제목 수정 + </FormLabel> + </FormItem> + )} + /> + + {form.watch("isSubtitleModified") && ( + <FormField + control={form.control} + name="modifiedSubtitle" + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + placeholder="수정할 소제목 입력" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + )} + </div> + + {/* 내용 수정 */} + <div className="space-y-2 border rounded-lg p-3"> + <FormField + control={form.control} + name="isContentModified" + render={({ field }) => ( + <FormItem className="flex flex-row items-center space-x-3 space-y-0"> + <FormControl> + <Checkbox + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + <FormLabel className="font-normal cursor-pointer"> + 상세항목 수정 + </FormLabel> + </FormItem> + )} + /> + + {form.watch("isContentModified") && ( + <FormField + control={form.control} + name="modifiedContent" + render={({ field }) => ( + <FormItem> + <FormControl> + <MarkdownImageEditor + content={field.value || ""} + images={images} + onChange={handleContentImageChange} + placeholder="수정할 내용을 입력하세요..." + rows={6} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + )} + </div> + + {/* 협의 노트 */} + <FormField + control={form.control} + name="negotiationNote" + render={({ field }) => ( + <FormItem> + <FormLabel>협의 메모</FormLabel> + <FormControl> + <Textarea + placeholder="협의 과정에서의 메모나 특이사항을 기록하세요..." + {...field} + rows={3} + /> + </FormControl> + <FormDescription> + 벤더와의 협의 내용이나 변경 사유를 기록합니다 + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + {/* 편집 사유 */} + <FormField + control={form.control} + name="editReason" + render={({ field }) => ( + <FormItem> + <FormLabel>편집 사유 (선택사항)</FormLabel> + <FormControl> + <Textarea + placeholder="조항 생성 사유를 입력하세요..." + {...field} + rows={2} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </div> + </div> + + <DialogFooter className="flex-shrink-0 border-t pt-4"> + <Button + type="button" + variant="outline" + onClick={() => setOpen(false)} + disabled={isCreatePending} + > + 취소 + </Button> + <Button type="submit" disabled={isCreatePending}> + {isCreatePending && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + 생성 + </Button> + </DialogFooter> + </form> + </Form> + </DialogContent> + </Dialog> + ) +} + +// 트리를 평면 배열로 변환하는 유틸리티 함수 +function flattenTree(tree: any[]): any[] { + const result: any[] = [] + + function traverse(nodes: any[]) { + for (const node of nodes) { + result.push(node) + if (node.children && node.children.length > 0) { + traverse(node.children) + } + } + } + + traverse(tree) + return result +}
\ No newline at end of file diff --git a/lib/basic-contract/gtc-vendor/delete-gtc-clauses-dialog.tsx b/lib/basic-contract/gtc-vendor/delete-gtc-clauses-dialog.tsx new file mode 100644 index 00000000..885a78e0 --- /dev/null +++ b/lib/basic-contract/gtc-vendor/delete-gtc-clauses-dialog.tsx @@ -0,0 +1,175 @@ +"use client" + +import * as React from "react" +import { Loader, Trash2, AlertTriangle } from "lucide-react" +import { toast } from "sonner" + +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/components/ui/alert-dialog" +import { Button } from "@/components/ui/button" +import { Badge } from "@/components/ui/badge" + +import { type GtcClauseTreeView } from "@/db/schema/gtc" +import { useSession } from "next-auth/react" +// import { deleteGtcClauses } from "../service" + +interface DeleteGtcClausesDialogProps + extends React.ComponentPropsWithRef<typeof AlertDialog> { + gtcClauses: GtcClauseTreeView[] + showTrigger?: boolean + onSuccess?: () => void +} + +export function DeleteGtcClausesDialog({ + gtcClauses, + showTrigger = true, + onSuccess, + ...props +}: DeleteGtcClausesDialogProps) { + const [isDeletePending, startDeleteTransition] = React.useTransition() + const { data: session } = useSession() + + const currentUserId = React.useMemo(() => { + return session?.user?.id ? Number(session.user.id) : null + }, [session]) + + function onDelete() { + startDeleteTransition(async () => { + if (!currentUserId) { + toast.error("로그인이 필요합니다") + return + } + + try { + // ✅ 한 번에 모든 조항 삭제 (배열로 전달) + const ids = gtcClauses.map(clause => clause.id) + const result = await deleteGtcClauses(ids) + + if (result.error) { + toast.error(`삭제 중 오류가 발생했습니다: ${result.error}`) + return + } + + props.onOpenChange?.(false) + toast.success( + `${result.deletedCount}개의 조항이 삭제되었습니다.` + ) + onSuccess?.() + } catch (error) { + console.error("Delete error:", error) + toast.error("조항 삭제 중 오류가 발생했습니다.") + } + }) + } + + const clausesWithChildren = gtcClauses.filter(clause => clause.childrenCount > 0) + const hasChildrenWarning = clausesWithChildren.length > 0 + + // 총 삭제될 하위 조항 수 계산 + const totalChildrenCount = clausesWithChildren.reduce((sum, clause) => sum + clause.childrenCount, 0) + + return ( + <AlertDialog {...props}> + {showTrigger && ( + <AlertDialogTrigger asChild> + <Button variant="outline" size="sm"> + <Trash2 className="mr-2 h-4 w-4" /> + 삭제 ({gtcClauses.length}) + </Button> + </AlertDialogTrigger> + )} + + <AlertDialogContent className="max-w-md"> + <AlertDialogHeader> + <div className="flex items-center gap-2"> + <AlertTriangle className="h-5 w-5 text-destructive" /> + <AlertDialogTitle>조항 삭제</AlertDialogTitle> + </div> + <AlertDialogDescription asChild> + <div className="space-y-3"> + <p> + 선택한 {gtcClauses.length}개의 조항을 <strong>완전히 삭제</strong>하시겠습니까? + 이 작업은 되돌릴 수 없습니다. + </p> + + {/* 삭제할 조항 목록 */} + <div className="space-y-2"> + <div className="text-sm font-medium">삭제할 조항:</div> + <div className="max-h-32 overflow-y-auto space-y-1"> + {gtcClauses.map((clause) => ( + <div key={clause.id} className="flex items-center gap-2 text-sm p-2 bg-muted/50 rounded"> + <Badge variant="outline" className="text-xs"> + {clause.itemNumber} + </Badge> + <span className="flex-1 truncate">{clause.subtitle}</span> + {clause.childrenCount > 0 && ( + <Badge variant="destructive" className="text-xs"> + 하위 {clause.childrenCount}개 + </Badge> + )} + </div> + ))} + </div> + </div> + + {/* 하위 조항 경고 */} + {hasChildrenWarning && ( + <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-md"> + <div className="flex items-center gap-2 text-destructive text-sm font-medium mb-2"> + <AlertTriangle className="h-4 w-4" /> + 중요: 하위 조항 포함 삭제 + </div> + <div className="space-y-1 text-sm text-destructive/80"> + <p>하위 조항이 있는 조항을 삭제하면 모든 하위 조항도 함께 삭제됩니다.</p> + <p className="font-medium"> + 총 삭제될 조항: {gtcClauses.length + totalChildrenCount}개 + <span className="text-xs ml-1"> + (선택한 {gtcClauses.length}개 + 하위 {totalChildrenCount}개) + </span> + </p> + </div> + <div className="mt-2 text-xs text-destructive/70"> + 영향받는 조항: {clausesWithChildren.map(c => c.itemNumber).join(', ')} + </div> + </div> + )} + + <div className="p-2 bg-amber-50 border border-amber-200 rounded text-xs text-amber-800"> + ⚠️ <strong>실제 삭제</strong>: 데이터베이스에서 완전히 제거되며 복구할 수 없습니다. + </div> + </div> + </AlertDialogDescription> + </AlertDialogHeader> + + <AlertDialogFooter> + <AlertDialogCancel disabled={isDeletePending}> + Cancel + </AlertDialogCancel> + <AlertDialogAction + onClick={onDelete} + disabled={isDeletePending} + className="bg-destructive text-destructive-foreground hover:bg-destructive/90" + > + {isDeletePending && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + <Trash2 className="mr-2 h-4 w-4" /> + Delete Permanently + </AlertDialogAction> + </AlertDialogFooter> + </AlertDialogContent> + </AlertDialog> + ) +}
\ No newline at end of file diff --git a/lib/basic-contract/gtc-vendor/duplicate-gtc-clause-dialog.tsx b/lib/basic-contract/gtc-vendor/duplicate-gtc-clause-dialog.tsx new file mode 100644 index 00000000..cb5ac81d --- /dev/null +++ b/lib/basic-contract/gtc-vendor/duplicate-gtc-clause-dialog.tsx @@ -0,0 +1,372 @@ +"use client" + +import * as React from "react" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Textarea } from "@/components/ui/textarea" +import { Badge } from "@/components/ui/badge" + +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, + FormDescription, +} from "@/components/ui/form" +import { Loader, Copy, Info } from "lucide-react" +import { toast } from "sonner" + +import { createGtcClauseSchema, type CreateGtcClauseSchema } from "@/lib/gtc-contract/gtc-clauses/validations" +import { createGtcClause } from "@/lib/gtc-contract/gtc-clauses/service" +import { type GtcClauseTreeView } from "@/db/schema/gtc" +import { useSession } from "next-auth/react" + +interface DuplicateGtcClauseDialogProps + extends React.ComponentPropsWithRef<typeof Dialog> { + sourceClause: GtcClauseTreeView | null + onSuccess?: () => void +} + +export function DuplicateGtcClauseDialog({ + sourceClause, + onSuccess, + ...props +}: DuplicateGtcClauseDialogProps) { + const [isCreatePending, startCreateTransition] = React.useTransition() + const { data: session } = useSession() + + const currentUserId = React.useMemo(() => { + return session?.user?.id ? Number(session.user.id) : null + }, [session]) + + + const form = useForm<CreateGtcClauseSchema>({ + resolver: zodResolver(createGtcClauseSchema), + defaultValues: { + documentId: 0, + parentId: null, + itemNumber: "", + category: "", + subtitle: "", + content: "", + sortOrder: 0, + // numberVariableName: "", + // subtitleVariableName: "", + // contentVariableName: "", + editReason: "", + }, + }) + + // sourceClause가 변경될 때 폼 데이터 설정 + React.useEffect(() => { + if (sourceClause) { + // 새로운 채번 생성 (원본에 "_copy" 추가) + const newItemNumber = `${sourceClause.itemNumber}_copy` + + form.reset({ + documentId: sourceClause.documentId, + parentId: sourceClause.parentId, + itemNumber: newItemNumber, + category: sourceClause.category || "", + subtitle: `${sourceClause.subtitle} (복제)`, + content: sourceClause.content || "", + sortOrder:parseFloat(sourceClause.sortOrder) + 0.1, // 원본 바로 다음에 위치 + // numberVariableName: "", + // subtitleVariableName: "", + // contentVariableName: "", + editReason: `조항 복제 (원본: ${sourceClause.itemNumber})`, + }) + + // 자동 변수명 생성 + // generateVariableNames(newItemNumber, sourceClause.parentId) + } + }, [sourceClause, form]) + + // const generateVariableNames = (itemNumber: string, parentId: number | null) => { + // if (!sourceClause) return + + // let fullPath = itemNumber + + // if (parentId && sourceClause.fullPath) { + // const parentPath = sourceClause.fullPath.split('.').slice(0, -1).join('.') + // if (parentPath) { + // fullPath = `${parentPath}.${itemNumber}` + // } + // } + + // const prefix = "CLAUSE_" + fullPath.replace(/\./g, "_") + + // form.setValue("numberVariableName", `${prefix}_NUMBER`) + // form.setValue("subtitleVariableName", `${prefix}_SUBTITLE`) + // form.setValue("contentVariableName", `${prefix}_CONTENT`) + // } + + async function onSubmit(data: CreateGtcClauseSchema) { + startCreateTransition(async () => { + if (!currentUserId) { + toast.error("로그인이 필요합니다") + return + } + + try { + const result = await createGtcClause({ + ...data, + createdById: currentUserId + }) + + if (result.error) { + toast.error(`에러: ${result.error}`) + return + } + + form.reset() + props.onOpenChange?.(false) + toast.success("조항이 복제되었습니다.") + onSuccess?.() + } catch (error) { + toast.error("조항 복제 중 오류가 발생했습니다.") + } + }) + } + + function handleDialogOpenChange(nextOpen: boolean) { + if (!nextOpen) { + form.reset() + } + props.onOpenChange?.(nextOpen) + } + + if (!sourceClause) { + return null + } + + return ( + <Dialog {...props} onOpenChange={handleDialogOpenChange}> + <DialogContent className="max-w-2xl h-[90vh] flex flex-col"> + <DialogHeader className="flex-shrink-0"> + <DialogTitle className="flex items-center gap-2"> + <Copy className="h-5 w-5" /> + 조항 복제 + </DialogTitle> + <DialogDescription> + 기존 조항을 복제하여 새로운 조항을 생성합니다. + </DialogDescription> + </DialogHeader> + + {/* 원본 조항 정보 */} + <div className="p-3 bg-muted/50 rounded-lg text-sm flex-shrink-0"> + <div className="flex items-center gap-2 mb-2"> + <Info className="h-4 w-4 text-muted-foreground" /> + <span className="font-medium">복제할 원본 조항</span> + </div> + <div className="space-y-1 text-muted-foreground"> + <div className="flex items-center gap-2"> + <Badge variant="outline">{sourceClause.itemNumber}</Badge> + <span>{sourceClause.subtitle}</span> + </div> + {sourceClause.category && ( + <div>분류: {sourceClause.category}</div> + )} + {sourceClause.content && ( + <div className="text-xs"> + 내용: {sourceClause.content.substring(0, 100)} + {sourceClause.content.length > 100 && "..."} + </div> + )} + </div> + </div> + + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1 min-h-0"> + <div className="flex-1 overflow-y-auto px-1"> + <div className="space-y-4 py-4"> + {/* 새 채번 */} + <FormField + control={form.control} + name="itemNumber" + render={({ field }) => ( + <FormItem> + <FormLabel>새 채번 *</FormLabel> + <FormControl> + <Input + placeholder="예: 1_copy, 1.1_v2, 2.3.1_new 등" + {...field} + /> + </FormControl> + <FormDescription> + 복제된 조항의 새로운 번호입니다. 원본과 다른 번호를 사용해주세요. + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + {/* 분류 */} + <FormField + control={form.control} + name="category" + render={({ field }) => ( + <FormItem> + <FormLabel>분류</FormLabel> + <FormControl> + <Input + placeholder="분류를 수정하거나 그대로 두세요" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* 소제목 */} + <FormField + control={form.control} + name="subtitle" + render={({ field }) => ( + <FormItem> + <FormLabel>소제목 *</FormLabel> + <FormControl> + <Input + placeholder="소제목을 수정하세요" + {...field} + /> + </FormControl> + <FormDescription> + 복제 시 "(복제)" 접미사가 자동으로 추가됩니다. + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + {/* 상세항목 */} + <FormField + control={form.control} + name="content" + render={({ field }) => ( + <FormItem> + <FormLabel>상세항목</FormLabel> + <FormControl> + <Textarea + placeholder="내용을 수정하거나 그대로 두세요" + {...field} + rows={6} + /> + </FormControl> + <FormDescription> + 원본 조항의 내용이 복사됩니다. 필요시 수정하세요. + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + {/* PDFTron 변수명 섹션 */} + {/* <div className="space-y-3 p-3 border rounded-lg"> + <div className="flex items-center gap-2"> + <Info className="h-4 w-4 text-muted-foreground" /> + <span className="text-sm font-medium">PDFTron 변수명 (자동 생성)</span> + </div> + + <div className="grid grid-cols-1 gap-3"> + <FormField + control={form.control} + name="numberVariableName" + render={({ field }) => ( + <FormItem> + <FormLabel>채번 변수명</FormLabel> + <FormControl> + <Input {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="subtitleVariableName" + render={({ field }) => ( + <FormItem> + <FormLabel>소제목 변수명</FormLabel> + <FormControl> + <Input {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="contentVariableName" + render={({ field }) => ( + <FormItem> + <FormLabel>상세항목 변수명</FormLabel> + <FormControl> + <Input {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </div> + + <div className="text-xs text-muted-foreground"> + 새 채번을 기반으로 변수명이 자동 생성됩니다. + </div> + </div> */} + + {/* 편집 사유 */} + <FormField + control={form.control} + name="editReason" + render={({ field }) => ( + <FormItem> + <FormLabel>복제 사유</FormLabel> + <FormControl> + <Textarea + placeholder="조항 복제 사유를 입력하세요..." + {...field} + rows={2} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </div> + </div> + + <DialogFooter className="flex-shrink-0 border-t pt-4"> + <Button + type="button" + variant="outline" + onClick={() => props.onOpenChange?.(false)} + disabled={isCreatePending} + > + Cancel + </Button> + <Button type="submit" disabled={isCreatePending}> + {isCreatePending && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + <Copy className="mr-2 h-4 w-4" /> + Duplicate + </Button> + </DialogFooter> + </form> + </Form> + </DialogContent> + </Dialog> + ) +}
\ No newline at end of file diff --git a/lib/basic-contract/gtc-vendor/excel-import.tsx b/lib/basic-contract/gtc-vendor/excel-import.tsx new file mode 100644 index 00000000..d8f435f7 --- /dev/null +++ b/lib/basic-contract/gtc-vendor/excel-import.tsx @@ -0,0 +1,340 @@ +import { ExcelColumnDef } from "@/lib/export" +import ExcelJS from "exceljs" + +/** + * Excel 템플릿 다운로드 함수 + */ +export async function downloadExcelTemplate( + columns: ExcelColumnDef[], + { + filename = "template", + includeExampleData = true, + useGroupHeader = true, + }: { + filename?: string + includeExampleData?: boolean + useGroupHeader?: boolean + } = {} +): Promise<void> { + let sheetData: any[][] + + if (useGroupHeader) { + // 2줄 헤더 생성 + const row1: string[] = [] + const row2: string[] = [] + + columns.forEach((col) => { + row1.push(col.group ?? "") + row2.push(col.header) + }) + + sheetData = [row1, row2] + + // 예시 데이터 추가 + if (includeExampleData) { + // 빈 행 3개 추가 (사용자가 데이터 입력할 공간) + for (let i = 0; i < 3; i++) { + const exampleRow = columns.map((col) => { + // 컬럼 타입에 따른 예시 데이터 + if (col.id === "itemNumber") return i === 0 ? `1.${i + 1}` : i === 1 ? "2.1" : "" + if (col.id === "subtitle") return i === 0 ? "예시 조항 소제목" : i === 1 ? "하위 조항 예시" : "" + if (col.id === "content") return i === 0 ? "조항의 상세 내용을 입력합니다." : i === 1 ? "하위 조항의 내용" : "" + if (col.id === "category") return i === 0 ? "일반조항" : i === 1 ? "특별조항" : "" + if (col.id === "sortOrder") return i === 0 ? "10" : i === 1 ? "20" : "" + if (col.id === "parentId") return i === 1 ? "1" : "" + if (col.id === "isActive") return i === 0 ? "활성" : i === 1 ? "활성" : "" + if (col.id === "editReason") return i === 0 ? "신규 작성" : "" + return "" + }) + sheetData.push(exampleRow) + } + } + } else { + // 1줄 헤더 + const headerRow = columns.map((col) => col.header) + sheetData = [headerRow] + + if (includeExampleData) { + // 예시 데이터 행 추가 + const exampleRow = columns.map(() => "") + sheetData.push(exampleRow) + } + } + + // ExcelJS로 워크북 생성 + const workbook = new ExcelJS.Workbook() + const worksheet = workbook.addWorksheet("GTC조항템플릿") + + // 데이터 추가 + sheetData.forEach((arr, idx) => { + const row = worksheet.addRow(arr) + + // 헤더 스타일 적용 + if (useGroupHeader) { + if (idx < 2) { + row.font = { bold: true } + row.alignment = { horizontal: "center" } + row.eachCell((cell) => { + cell.fill = { + type: "pattern", + pattern: "solid", + fgColor: { argb: "FFE6F3FF" }, // 연한 파란색 + } + cell.border = { + top: { style: "thin" }, + left: { style: "thin" }, + bottom: { style: "thin" }, + right: { style: "thin" }, + } + }) + } + } else { + if (idx === 0) { + row.font = { bold: true } + row.alignment = { horizontal: "center" } + row.eachCell((cell) => { + cell.fill = { + type: "pattern", + pattern: "solid", + fgColor: { argb: "FFE6F3FF" }, + } + }) + } + } + + // 예시 데이터 행 스타일 + if (includeExampleData && idx === (useGroupHeader ? 2 : 1)) { + row.eachCell((cell) => { + cell.fill = { + type: "pattern", + pattern: "solid", + fgColor: { argb: "FFFFEAA7" }, // 연한 노란색 + } + cell.font = { italic: true, color: { argb: "FF666666" } } + }) + } + }) + + // 그룹 헤더 병합 + if (useGroupHeader) { + const groupRowIndex = 1 + const groupRow = worksheet.getRow(groupRowIndex) + + let start = 1 + let prevValue = groupRow.getCell(start).value + + for (let c = 2; c <= columns.length; c++) { + const cellVal = groupRow.getCell(c).value + if (cellVal !== prevValue) { + if (prevValue && prevValue.toString().trim() !== "") { + worksheet.mergeCells(groupRowIndex, start, groupRowIndex, c - 1) + } + start = c + prevValue = cellVal + } + } + + if (prevValue && prevValue.toString().trim() !== "") { + worksheet.mergeCells(groupRowIndex, start, groupRowIndex, columns.length) + } + } + + // 컬럼 너비 자동 조정 + columns.forEach((col, idx) => { + let width = Math.max(col.header.length + 5, 15) + + // 특정 컬럼은 더 넓게 + if (col.id === "content" || col.id === "subtitle") { + width = 30 + } else if (col.id === "itemNumber") { + width = 15 + } else if (col.id === "editReason") { + width = 20 + } + + worksheet.getColumn(idx + 1).width = width + }) + + // 사용 안내 시트 추가 + const instructionSheet = workbook.addWorksheet("사용안내") + const instructions = [ + ["GTC 조항 Excel 가져오기 사용 안내"], + [""], + ["1. 기본 규칙"], + [" - 첫 번째 시트(GTC조항템플릿)에 데이터를 입력하세요"], + [" - 헤더 행은 수정하지 마세요"], + [" - 예시 데이터(노란색 행)는 삭제하고 실제 데이터를 입력하세요"], + [""], + ["2. 필수 입력 항목"], + [" - 채번: 필수 입력 (예: 1.1, 2.3.1)"], + [" - 소제목: 필수 입력"], + [""], + ["3. 선택 입력 항목"], + [" - 상세항목: 조항의 구체적인 내용"], + [" - 분류: 조항의 카테고리 (예: 일반조항, 특별조항)"], + [" - 순서: 숫자 (기본값: 10, 20, 30...)"], + [" - 상위 조항 ID: 계층 구조를 만들 때 사용"], + [" - 활성 상태: '활성' 또는 '비활성' (기본값: 활성)"], + [" - 편집 사유: 작성/수정 이유"], + [""], + ["4. 자동 처리 항목"], + [" - ID, 생성일, 수정일: 시스템에서 자동 생성"], + [" - 계층 깊이: 상위 조항 ID를 기반으로 자동 계산"], + [" - 전체 경로: 시스템에서 자동 생성"], + [""], + ["5. 채번 규칙"], + [" - 같은 부모 하에서 채번은 유일해야 합니다"], + [" - 예: 상위 조항이 같으면 1.1, 1.2는 가능하지만 1.1이 중복되면 오류"], + [""], + ["6. 계층 구조 만들기"], + [" - 상위 조항 ID: 기존 조항의 ID를 입력"], + [" - 예: ID가 5인 조항 하위에 조항을 만들려면 상위 조항 ID에 5 입력"], + [" - 최상위 조항은 상위 조항 ID를 비워두세요"], + [""], + ["7. 주의사항"], + [" - 순서는 숫자로 입력하세요 (소수점 가능: 10, 15.5, 20)"], + [" - 상위 조항 ID는 반드시 존재하는 조항의 ID여야 합니다"], + [" - 파일 저장 시 .xlsx 형식으로 저장하세요"], + ] + + instructions.forEach((instruction, idx) => { + const row = instructionSheet.addRow(instruction) + if (idx === 0) { + row.font = { bold: true, size: 14 } + row.alignment = { horizontal: "center" } + } else if (instruction[0]?.match(/^\d+\./)) { + row.font = { bold: true } + } + }) + + instructionSheet.getColumn(1).width = 80 + + // 파일 다운로드 + const buffer = await workbook.xlsx.writeBuffer() + const blob = new Blob([buffer], { + type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", + }) + const url = URL.createObjectURL(blob) + const link = document.createElement("a") + link.href = url + link.download = `${filename}.xlsx` + link.click() + URL.revokeObjectURL(url) +} + +/** + * Excel 파일에서 데이터 파싱 + */ +export async function parseExcelFile<TData>( + file: File, + columns: ExcelColumnDef[], + { + hasGroupHeader = true, + sheetName = "GTC조항템플릿", + }: { + hasGroupHeader?: boolean + sheetName?: string + } = {} +): Promise<{ + data: Partial<TData>[] + errors: string[] +}> { + const errors: string[] = [] + const data: Partial<TData>[] = [] + + try { + const arrayBuffer = await file.arrayBuffer() + const workbook = new ExcelJS.Workbook() + await workbook.xlsx.load(arrayBuffer) + + const worksheet = workbook.getWorksheet(sheetName) || workbook.worksheets[0] + + if (!worksheet) { + errors.push("워크시트를 찾을 수 없습니다.") + return { data, errors } + } + + // 헤더 행 인덱스 결정 + const headerRowIndex = hasGroupHeader ? 2 : 1 + const dataStartRowIndex = headerRowIndex + 1 + + // 헤더 검증 + const headerRow = worksheet.getRow(headerRowIndex) + const expectedHeaders = columns.map(col => col.header) + + for (let i = 0; i < expectedHeaders.length; i++) { + const cellValue = headerRow.getCell(i + 1).value?.toString() || "" + if (cellValue !== expectedHeaders[i]) { + errors.push(`헤더가 일치하지 않습니다. 예상: "${expectedHeaders[i]}", 실제: "${cellValue}"`) + } + } + + if (errors.length > 0) { + return { data, errors } + } + + // 데이터 파싱 + let rowIndex = dataStartRowIndex + while (rowIndex <= worksheet.actualRowCount) { + const row = worksheet.getRow(rowIndex) + + // 빈 행 체크 (모든 셀이 비어있으면 스킵) + const isEmpty = columns.every((col, colIndex) => { + const cellValue = row.getCell(colIndex + 1).value + return !cellValue || cellValue.toString().trim() === "" + }) + + if (isEmpty) { + rowIndex++ + continue + } + + const rowData: Partial<TData> = {} + let hasError = false + + columns.forEach((col, colIndex) => { + const cellValue = row.getCell(colIndex + 1).value + let processedValue: any = cellValue + + // 데이터 타입별 처리 + if (cellValue !== null && cellValue !== undefined) { + const strValue = cellValue.toString().trim() + + // 특별한 처리가 필요한 컬럼들 + if (col.id === "isActive") { + processedValue = strValue === "활성" + } else if (col.id === "sortOrder") { + const numValue = parseFloat(strValue) + processedValue = isNaN(numValue) ? null : numValue + } else if (col.id === "parentId") { + const numValue = parseInt(strValue) + processedValue = isNaN(numValue) ? null : numValue + } else { + processedValue = strValue + } + } + + // 필수 필드 검증 + if ((col.id === "itemNumber" || col.id === "subtitle") && (!processedValue || processedValue === "")) { + errors.push(`${rowIndex}행: ${col.header}은(는) 필수 입력 항목입니다.`) + hasError = true + } + + if (processedValue !== null && processedValue !== undefined && processedValue !== "") { + (rowData as any)[col.id] = processedValue + } + }) + + if (!hasError) { + data.push(rowData) + } + + rowIndex++ + } + + } catch (error) { + errors.push(`파일 파싱 중 오류가 발생했습니다: ${error instanceof Error ? error.message : "알 수 없는 오류"}`) + } + + return { data, errors } +}
\ No newline at end of file diff --git a/lib/basic-contract/gtc-vendor/generate-variable-names-dialog.tsx b/lib/basic-contract/gtc-vendor/generate-variable-names-dialog.tsx new file mode 100644 index 00000000..ef4ed9f9 --- /dev/null +++ b/lib/basic-contract/gtc-vendor/generate-variable-names-dialog.tsx @@ -0,0 +1,348 @@ +"use client" + +import * as React from "react" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Badge } from "@/components/ui/badge" +import { Switch } from "@/components/ui/switch" + +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, + FormDescription, +} from "@/components/ui/form" +import { Loader, Wand2, Info, Eye } from "lucide-react" +import { toast } from "sonner" + +import { generateVariableNamesSchema, type GenerateVariableNamesSchema } from "@/lib/gtc-contract/gtc-clauses/validations" +import { generateVariableNames, getGtcClausesTree } from "@/lib/gtc-contract/gtc-clauses/service" +import { type GtcClauseTreeView } from "@/db/schema/gtc" +import { useSession } from "next-auth/react" + +interface GenerateVariableNamesDialogProps + extends React.ComponentPropsWithRef<typeof Dialog> { + documentId: number + document: any +} + +export function GenerateVariableNamesDialog({ + documentId, + document, + ...props +}: GenerateVariableNamesDialogProps) { + const [isGenerating, startGenerating] = React.useTransition() + const [clauses, setClauses] = React.useState<GtcClauseTreeView[]>([]) + const [previewClauses, setPreviewClauses] = React.useState<GtcClauseTreeView[]>([]) + const [showPreview, setShowPreview] = React.useState(false) + const { data: session } = useSession() + + const currentUserId = React.useMemo(() => { + return session?.user?.id ? Number(session.user.id) : null + }, [session]) + + React.useEffect(() => { + if (props.open && documentId) { + loadClauses() + } + }, [props.open, documentId]) + + const loadClauses = async () => { + try { + const tree = await getGtcClausesTree(documentId) + const flatClauses = flattenTree(tree) + setClauses(flatClauses) + } catch (error) { + console.error("Error loading clauses:", error) + } + } + + const form = useForm<GenerateVariableNamesSchema>({ + resolver: zodResolver(generateVariableNamesSchema), + defaultValues: { + documentId, + prefix: "CLAUSE", + includeVendorCode: false, + vendorCode: "", + }, + }) + + const watchedPrefix = form.watch("prefix") + const watchedIncludeVendorCode = form.watch("includeVendorCode") + const watchedVendorCode = form.watch("vendorCode") + + // 미리보기 생성 + React.useEffect(() => { + if (clauses.length > 0) { + generatePreview() + } + }, [clauses, watchedPrefix, watchedIncludeVendorCode, watchedVendorCode]) + + const generatePreview = () => { + const basePrefix = watchedIncludeVendorCode && watchedVendorCode + ? `${watchedVendorCode}_${watchedPrefix}` + : watchedPrefix + + console.log(basePrefix,"basePrefix") + + const updated = clauses.slice(0, 5).map(clause => { + console.log(clause.fullPath,"clause.fullPath") + + const pathPrefix = clause.fullPath?.replace(/\./g, "_") || clause.itemNumber.replace(/\./g, "_") + const varPrefix = `${basePrefix}_${pathPrefix}` + + return { + ...clause, + previewNumberVar: `${varPrefix}_NUMBER`, + previewSubtitleVar: `${varPrefix}_SUBTITLE`, + previewContentVar: `${varPrefix}_CONTENT`, + } + }) + + setPreviewClauses(updated as any) + } + + async function onSubmit(data: GenerateVariableNamesSchema) { + startGenerating(async () => { + if (!currentUserId) { + toast.error("로그인이 필요합니다") + return + } + + try { + const result = await generateVariableNames({ + ...data, + updatedById: currentUserId + }) + + if (result.error) { + toast.error(`에러: ${result.error}`) + return + } + + form.reset() + props.onOpenChange?.(false) + toast.success("PDFTron 변수명이 생성되었습니다.") + } catch (error) { + toast.error("변수명 생성 중 오류가 발생했습니다.") + } + }) + } + + function handleDialogOpenChange(nextOpen: boolean) { + if (!nextOpen) { + form.reset() + setShowPreview(false) + } + props.onOpenChange?.(nextOpen) + } + + const clausesWithoutVariables = clauses.filter(clause => !clause.hasAllVariableNames) + const clausesWithVariables = clauses.filter(clause => clause.hasAllVariableNames) + + return ( + <Dialog {...props} onOpenChange={handleDialogOpenChange}> + <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto"> + <DialogHeader> + <DialogTitle className="flex items-center gap-2"> + <Wand2 className="h-5 w-5" /> + PDFTron 변수명 자동 생성 + </DialogTitle> + <DialogDescription> + 문서의 모든 조항에 대해 PDFTron 변수명을 자동으로 생성합니다. + </DialogDescription> + </DialogHeader> + + {/* 문서 및 조항 현황 */} + <div className="space-y-4 p-4 bg-muted/50 rounded-lg"> + <div className="flex items-center gap-2"> + <Info className="h-4 w-4 text-muted-foreground" /> + <span className="text-sm font-medium">문서 및 조항 현황</span> + </div> + + <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm"> + <div> + <div className="font-medium text-muted-foreground mb-1">문서 타입</div> + <Badge variant={document?.type === "standard" ? "default" : "secondary"}> + {document?.type === "standard" ? "표준" : "프로젝트"} + </Badge> + </div> + + <div> + <div className="font-medium text-muted-foreground mb-1">총 조항 수</div> + <div>{clauses.length}개</div> + </div> + + <div> + <div className="font-medium text-muted-foreground mb-1">변수명 설정 완료</div> + <Badge variant="default">{clausesWithVariables.length}개</Badge> + </div> + + <div> + <div className="font-medium text-muted-foreground mb-1">변수명 미설정</div> + <Badge variant="destructive">{clausesWithoutVariables.length}개</Badge> + </div> + </div> + + {document?.project && ( + <div className="text-sm"> + <span className="font-medium text-muted-foreground">프로젝트: </span> + {document.project.name} ({document.project.code}) + </div> + )} + </div> + + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmit)}> + <div className="space-y-4"> + {/* 기본 접두사 */} + <FormField + control={form.control} + name="prefix" + render={({ field }) => ( + <FormItem> + <FormLabel>기본 접두사</FormLabel> + <FormControl> + <Input + placeholder="CLAUSE" + {...field} + /> + </FormControl> + <FormDescription> + 모든 변수명의 시작에 사용될 접두사입니다. + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + {/* 벤더 코드 포함 여부 */} + <FormField + control={form.control} + name="includeVendorCode" + render={({ field }) => ( + <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4"> + <div className="space-y-0.5"> + <FormLabel className="text-base">벤더 코드 포함</FormLabel> + <FormDescription> + 변수명에 벤더 코드를 포함시킵니다. (벤더별 GTC 용) + </FormDescription> + </div> + <FormControl> + <Switch + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + </FormItem> + )} + /> + + {/* 벤더 코드 입력 */} + {watchedIncludeVendorCode && ( + <FormField + control={form.control} + name="vendorCode" + render={({ field }) => ( + <FormItem> + <FormLabel>벤더 코드</FormLabel> + <FormControl> + <Input + placeholder="예: VENDOR_A, ABC_CORP 등" + {...field} + /> + </FormControl> + <FormDescription> + 변수명에 포함될 벤더 식별 코드입니다. + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + )} + /> + + {/* 미리보기 토글 */} + <div className="flex items-center justify-between"> + <Button + type="button" + variant="outline" + size="sm" + onClick={() => setShowPreview(!showPreview)} + > + <Eye className="mr-2 h-4 w-4" /> + {showPreview ? "미리보기 숨기기" : "미리보기 보기"} + </Button> + </div> + + {/* 미리보기 */} + {showPreview && ( + <div className="space-y-3 p-4 border rounded-lg bg-muted/30"> + <div className="text-sm font-medium">변수명 미리보기 (상위 5개 조항)</div> + <div className="space-y-2 max-h-64 overflow-y-auto"> + {previewClauses.map((clause: any) => ( + <div key={clause.id} className="p-2 bg-background rounded border text-xs"> + <div className="flex items-center gap-2 mb-1"> + <Badge variant="outline">{clause.itemNumber}</Badge> + <span className="font-medium truncate">{clause.subtitle}</span> + </div> + <div className="space-y-1 text-muted-foreground"> + <div>채번: <code className="text-foreground">{clause.previewNumberVar}</code></div> + <div>소제목: <code className="text-foreground">{clause.previewSubtitleVar}</code></div> + <div>상세항목: <code className="text-foreground">{clause.previewContentVar}</code></div> + </div> + </div> + ))} + </div> + </div> + )} + </div> + + <DialogFooter className="mt-6"> + <Button + type="button" + variant="outline" + onClick={() => props.onOpenChange?.(false)} + disabled={isGenerating} + > + Cancel + </Button> + <Button type="submit" disabled={isGenerating}> + {isGenerating && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + Generate Variables + </Button> + </DialogFooter> + </form> + </Form> + </DialogContent> + </Dialog> + ) +} + +// 트리를 평면 배열로 변환하는 유틸리티 함수 +function flattenTree(tree: any[]): any[] { + const result: any[] = [] + + function traverse(nodes: any[]) { + for (const node of nodes) { + result.push(node) + if (node.children && node.children.length > 0) { + traverse(node.children) + } + } + } + + traverse(tree) + return result +}
\ No newline at end of file diff --git a/lib/basic-contract/gtc-vendor/gtc-clauses-table-columns.tsx b/lib/basic-contract/gtc-vendor/gtc-clauses-table-columns.tsx new file mode 100644 index 00000000..b8f92fab --- /dev/null +++ b/lib/basic-contract/gtc-vendor/gtc-clauses-table-columns.tsx @@ -0,0 +1,409 @@ +"use client" + +import * as React from "react" +import { type DataTableRowAction } from "@/types/table" +import { type ColumnDef } from "@tanstack/react-table" +import { Ellipsis, Edit, Trash2, Plus, Copy } from "lucide-react" +import { cn, compareItemNumber, formatDate } from "@/lib/utils" +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { Checkbox } from "@/components/ui/checkbox" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip" +import { toast } from "sonner" +import { useSession } from "next-auth/react" +import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" +import { type GtcClauseTreeView } from "@/db/schema/gtc" + +interface GetColumnsProps { + setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<GtcClauseTreeView> | null>> + documentId: number + hasVendorInfo?: boolean + +} + +export function getColumns({ setRowAction, documentId, hasVendorInfo }: GetColumnsProps): ColumnDef<any>[] { + // 1) select + const selectColumn: ColumnDef<GtcClauseTreeView> = { + id: "select", + header: ({ table }) => ( + <Checkbox + checked={ + table.getIsAllPageRowsSelected() || + (table.getIsSomePageRowsSelected() && "indeterminate") + } + onCheckedChange={(v) => table.toggleAllPageRowsSelected(!!v)} + aria-label="Select all" + className="translate-y-0.5" + /> + ), + cell: ({ row }) => ( + <Checkbox + checked={row.getIsSelected()} + onCheckedChange={(v) => row.toggleSelected(!!v)} + aria-label="Select row" + className="translate-y-0.5" + /> + ), + size: 40, + enableSorting: false, + enableHiding: false, + } + + // 2) 조항 정보 + const clauseInfoColumns: ColumnDef<GtcClauseTreeView>[] = [ + { + accessorKey: "itemNumber", + header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="채번" />, + cell: ({ row }) => { + const itemNumber = row.getValue("itemNumber") as string + const depth = row.original.depth + const childrenCount = row.original.childrenCount + const isModified = row.original.vendorInfo?.isNumberModified + + return ( + <div className="flex items-center gap-2"> + <div style={{ marginLeft: `${depth * 20}px` }} className="flex items-center gap-1"> + <span + className={cn( + "font-mono text-sm font-medium", + isModified && "text-red-500 dark:text-red-400" + )} + > + {itemNumber} + </span> + {childrenCount > 0 && ( + <TooltipProvider> + <Tooltip> + <TooltipTrigger> + <Badge variant="outline" className="h-5 px-1 text-xs"> + {childrenCount} + </Badge> + </TooltipTrigger> + <TooltipContent> + <p>{childrenCount}개의 하위 조항</p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + )} + </div> + </div> + ) + }, + size: 100, + enableResizing: true, + sortingFn: (rowA, rowB, colId) => + compareItemNumber(rowA.getValue<string>(colId), rowB.getValue<string>(colId)), + meta: { excelHeader: "채번" }, + }, + { + accessorKey: "category", + header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="분류" />, + cell: ({ row }) => { + const category = row.getValue("category") as string + const isModified = row.original.vendorInfo?.isCategoryModified + return category ? ( + <Badge + variant="secondary" + className={cn("text-xs", isModified && "bg-red-100 text-red-600")} + > + {category} + </Badge> + ) : ( + <span className="text-muted-foreground">-</span> + ) + }, + size: 100, + enableResizing: true, + meta: { excelHeader: "분류" }, + }, + { + accessorKey: "subtitle", + header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="소제목" />, + cell: ({ row }) => { + const subtitle = row.getValue("subtitle") as string + const depth = row.original.depth + const isModified = row.original.vendorInfo?.isSubtitleModified + + return ( + <div className="flex flex-col min-w-0"> + <span + className={cn( + "font-medium truncate", + depth === 0 && "text-base", + depth === 1 && "text-sm", + depth >= 2 && "text-sm text-muted-foreground", + isModified && "text-red-500 dark:text-red-400" + )} + title={subtitle} + > + {subtitle} + </span> + </div> + ) + }, + size: 150, + enableResizing: true, + meta: { excelHeader: "소제목" }, + }, + { + accessorKey: "content", + header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="상세항목" />, + cell: ({ row }) => { + + const modifiedContent = row.original.vendorInfo?.modifiedContent + + const content = modifiedContent ? modifiedContent : row.getValue("content") as string | null + if (!content) { + return ( + <div className="flex items-center gap-2"> + <Badge variant="outline" className="text-xs">그룹핑 조항</Badge> + <span className="text-xs text-muted-foreground">상세내용 없음</span> + </div> + ) + } + const truncated = content.length > 100 ? `${content.substring(0, 100)}...` : content + return ( + <TooltipProvider> + <Tooltip> + <TooltipTrigger asChild> + <div className=""> + {/* <p className="text-sm line-clamp-2 text-muted-foreground">{content}</p> */} + <p + className={cn( + "text-sm line-clamp-2", + modifiedContent ? "text-red-500 dark:text-red-400" : "text-muted-foreground" + )} + > + {content} + </p> + </div> + </TooltipTrigger> + <TooltipContent className="max-w-sm"> + <p className="whitespace-pre-wrap">{content}</p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + ) + }, + size: 200, + maxSize: 500, + enableResizing: true, + meta: { excelHeader: "상세항목" }, + }, + ] + + // 3) 등록/수정 정보 + const auditColumns: ColumnDef<GtcClauseTreeView>[] = [ + { + accessorKey: "createdAt", + header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="작성일" />, + cell: ({ row }) => { + const date = row.getValue("createdAt") as Date + return date ? formatDate(date, "KR") : "-" + }, + size: 120, + enableResizing: true, + meta: { excelHeader: "작성일" }, + }, + { + accessorKey: "createdByName", + header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="작성자" />, + cell: ({ row }) => { + const v = row.getValue("createdByName") as string + return v ? <span className="text-sm">{v}</span> : <span className="text-muted-foreground">-</span> + }, + size: 80, + enableResizing: true, + meta: { excelHeader: "작성자" }, + }, + { + accessorKey: "updatedAt", + header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="수정일" />, + cell: ({ row }) => { + const date = row.getValue("updatedAt") as Date + return <span className="text-sm">{date ? formatDate(date, "KR") : "-"}</span> + }, + size: 120, + enableResizing: true, + meta: { excelHeader: "수정일" }, + }, + { + accessorKey: "updatedByName", + header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="수정자" />, + cell: ({ row }) => { + const v = row.getValue("updatedByName") as string + return v ? <span className="text-sm">{v}</span> : <span className="text-muted-foreground">-</span> + }, + size: 80, + enableResizing: true, + meta: { excelHeader: "수정자" }, + }, + ] + + // 벤더 관련 칼럼 추가 + const vendorColumns: ColumnDef<any>[] = hasVendorInfo ? [ + { + id: "vendorReviewStatus", + accessorFn: (row) => row.vendorInfo?.reviewStatus, + header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="협의 상태" />, + cell: ({ row }) => { + const status = row.original.vendorInfo?.reviewStatus + if (!status) return <span className="text-muted-foreground">-</span> + + const statusMap = { + draft: { label: "초안", variant: "secondary" }, + pending: { label: "대기", variant: "outline" }, + reviewing: { label: "협의중", variant: "default" }, + approved: { label: "승인", variant: "success" }, + rejected: { label: "거부", variant: "destructive" }, + revised: { label: "수정", variant: "warning" }, + } + + const config = statusMap[status as keyof typeof statusMap] + return <Badge variant={config.variant as any}>{config.label}</Badge> + }, + size: 80, + }, + { + id: "vendorComment", + accessorFn: (row) => row.vendorInfo?.latestComment, + header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="협의 코멘트" />, + cell: ({ row }) => { + const comment = row.original.vendorInfo?.latestComment + const history = row.original.vendorInfo?.negotiationHistory + + if (!comment) return <span className="text-muted-foreground">-</span> + + return ( + <TooltipProvider> + <Tooltip> + <TooltipTrigger asChild> + <div className="flex items-center gap-1"> + <span className="text-sm truncate max-w-[200px]">{comment}</span> + {history && history.length > 1 && ( + <Badge variant="outline" className="h-5 px-1 text-xs"> + {history.length} + </Badge> + )} + </div> + </TooltipTrigger> + <TooltipContent className="max-w-md"> + <div className="space-y-2"> + {history?.slice(0, 3).map((h: any, idx: number) => ( + <div key={idx} className="border-b last:border-0 pb-2 last:pb-0"> + <p className="text-xs text-muted-foreground"> + {h.actorName} • {formatDate(h.createdAt, "KR")} + </p> + <p className="text-sm">{h.comment}</p> + </div> + ))} + </div> + </TooltipContent> + </Tooltip> + </TooltipProvider> + ) + }, + size: 200, + }, + { + id: "vendorModifications", + header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="수정 항목" />, + cell: ({ row }) => { + const info = row.original.vendorInfo + if (!info) return <span className="text-muted-foreground">-</span> + + const mods = [] + if (info.isNumberModified) mods.push("채번") + if (info.isCategoryModified) mods.push("분류") + if (info.isSubtitleModified) mods.push("소제목") + if (info.isContentModified) mods.push("내용") + + if (mods.length === 0) return <span className="text-muted-foreground">없음</span> + + return ( + <div className="flex flex-wrap gap-1"> + {mods.map((mod) => ( + <Badge key={mod} variant="outline" className="text-xs"> + {mod} + </Badge> + ))} + </div> + ) + }, + size: 150, + }, + ] : [] + + // 4) actions + const actionsColumn: ColumnDef<GtcClauseTreeView> = { + id: "actions", + enableHiding: false, + cell: function Cell({ row }) { + const { data: session } = useSession() + const gtcClause = row.original + const currentUserId = React.useMemo( + () => (session?.user?.id ? Number(session.user.id) : null), + [session], + ) + + const handleEdit = () => setRowAction({ row, type: "update" }) + const handleDelete = () => setRowAction({ row, type: "delete" }) + const handleAddSubClause = () => setRowAction({ row, type: "addSubClause" }) + const handleDuplicate = () => setRowAction({ row, type: "duplicate" }) + + return ( + <DropdownMenu> + <DropdownMenuTrigger asChild> + <Button aria-label="Open menu" variant="ghost" className="flex size-8 p-0 data-[state=open]:bg-muted"> + <Ellipsis className="size-4" aria-hidden="true" /> + </Button> + </DropdownMenuTrigger> + <DropdownMenuContent align="end" className="w-48"> + <DropdownMenuItem onSelect={handleEdit}> + <Edit className="mr-2 h-4 w-4" /> + 협의 확인 및 조항 수정 + </DropdownMenuItem> + {/* <DropdownMenuItem onSelect={handleAddSubClause}> + <Plus className="mr-2 h-4 w-4" /> + 하위 조항 추가 + </DropdownMenuItem> + <DropdownMenuItem onSelect={handleDuplicate}> + <Copy className="mr-2 h-4 w-4" /> + 복제 + </DropdownMenuItem> + <DropdownMenuSeparator /> + <DropdownMenuItem onSelect={handleDelete} className="text-destructive"> + <Trash2 className="mr-2 h-4 w-4" /> + 삭제 + <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut> + </DropdownMenuItem> */} + </DropdownMenuContent> + </DropdownMenu> + ) + }, + size: 40, + maxSize: 40, + } + + // 🔹 그룹 헤더 제거: 평탄화된 컬럼 배열 반환 + return [ + selectColumn, + ...clauseInfoColumns, + ...vendorColumns, // 벤더 칼럼 추가 + ...auditColumns, + actionsColumn, + ] +}
\ No newline at end of file diff --git a/lib/basic-contract/gtc-vendor/gtc-clauses-table-floating-bar.tsx b/lib/basic-contract/gtc-vendor/gtc-clauses-table-floating-bar.tsx new file mode 100644 index 00000000..5b701df6 --- /dev/null +++ b/lib/basic-contract/gtc-vendor/gtc-clauses-table-floating-bar.tsx @@ -0,0 +1,239 @@ +"use client" + +import * as React from "react" +import { type Table } from "@tanstack/react-table" +import { + Edit, + Trash2, + ArrowUpDown, + Download, + Copy, + Wand2, + X +} from "lucide-react" + +import { Button } from "@/components/ui/button" +import { Separator } from "@/components/ui/separator" +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip" + +import { type GtcClauseTreeView } from "@/db/schema/gtc" +import { DeleteGtcClausesDialog } from "./delete-gtc-clauses-dialog" + +interface GtcClausesTableFloatingBarProps { + table: Table<GtcClauseTreeView> +} + +export function GtcClausesTableFloatingBar({ table }: GtcClausesTableFloatingBarProps) { + const selectedRows = table.getSelectedRowModel().rows + const selectedCount = selectedRows.length + + const [showDeleteDialog, setShowDeleteDialog] = React.useState(false) + + if (selectedCount === 0) return null + + const selectedClauses = selectedRows.map(row => row.original) + + const handleClearSelection = () => { + table.toggleAllRowsSelected(false) + } + + const handleBulkEdit = () => { + console.log("Bulk edit:", selectedClauses) + } + + const handleReorder = () => { + console.log("Reorder:", selectedClauses) + } + + const handleExport = () => { + console.log("Export:", selectedClauses) + } + + const handleDuplicate = () => { + console.log("Duplicate:", selectedClauses) + } + + const handleGenerateVariables = () => { + console.log("Generate variables:", selectedClauses) + } + + const canReorder = selectedClauses.every(clause => + clause.parentId === selectedClauses[0].parentId + ) + + const hasVariablesMissing = selectedClauses.some(clause => + !clause.hasAllVariableNames + ) + + return ( + <div className="fixed bottom-4 left-1/2 z-50 w-fit -translate-x-1/2"> + <div className="w-fit rounded-lg border bg-card p-2 shadow-2xl animate-in fade-in-0 slide-in-from-bottom-2"> + <div className="flex items-center gap-2"> + {/* 선택된 항목 수 */} + <div className="flex items-center gap-2 px-2"> + <span className="text-sm font-medium"> + {selectedCount}개 선택됨 + </span> + </div> + + <Separator orientation="vertical" className="h-6" /> + + {/* 액션 버튼들 */} + <div className="flex items-center gap-1"> + {/* 일괄 수정 */} + <TooltipProvider> + <Tooltip> + <TooltipTrigger asChild> + <Button + variant="ghost" + size="sm" + onClick={handleBulkEdit} + > + <Edit className="h-4 w-4" /> + </Button> + </TooltipTrigger> + <TooltipContent> + <p>선택한 조항들을 일괄 수정</p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + + {/* 순서 변경 (같은 부모의 조항들만) */} + {canReorder && ( + <TooltipProvider> + <Tooltip> + <TooltipTrigger asChild> + <Button + variant="ghost" + size="sm" + onClick={handleReorder} + > + <ArrowUpDown className="h-4 w-4" /> + </Button> + </TooltipTrigger> + <TooltipContent> + <p>선택한 조항들의 순서 변경</p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + )} + + {/* 복제 */} + <TooltipProvider> + <Tooltip> + <TooltipTrigger asChild> + <Button + variant="ghost" + size="sm" + onClick={handleDuplicate} + > + <Copy className="h-4 w-4" /> + </Button> + </TooltipTrigger> + <TooltipContent> + <p>선택한 조항들을 복제</p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + + {/* 변수명 생성 (변수가 없는 조항이 있을 때만) */} + {hasVariablesMissing && ( + <TooltipProvider> + <Tooltip> + <TooltipTrigger asChild> + <Button + variant="ghost" + size="sm" + onClick={handleGenerateVariables} + > + <Wand2 className="h-4 w-4" /> + </Button> + </TooltipTrigger> + <TooltipContent> + <p>선택한 조항들의 PDFTron 변수명 생성</p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + )} + + {/* 내보내기 */} + <TooltipProvider> + <Tooltip> + <TooltipTrigger asChild> + <Button + variant="ghost" + size="sm" + onClick={handleExport} + > + <Download className="h-4 w-4" /> + </Button> + </TooltipTrigger> + <TooltipContent> + <p>선택한 조항들을 Excel로 내보내기</p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + </div> + + <Separator orientation="vertical" className="h-6" /> + + {/* 삭제 버튼 */} + <TooltipProvider> + <Tooltip> + <TooltipTrigger asChild> + <Button + variant="ghost" + size="sm" + onClick={() => setShowDeleteDialog(true)} + className="text-destructive hover:text-destructive" + > + <Trash2 className="h-4 w-4" /> + </Button> + </TooltipTrigger> + <TooltipContent> + <p>선택한 조항들을 삭제</p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + + <Separator orientation="vertical" className="h-6" /> + + {/* 선택 해제 버튼 */} + <TooltipProvider> + <Tooltip> + <TooltipTrigger asChild> + <Button + variant="ghost" + size="sm" + onClick={handleClearSelection} + > + <X className="h-4 w-4" /> + </Button> + </TooltipTrigger> + <TooltipContent> + <p>선택 해제</p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + </div> + </div> + + {/* 삭제 다이얼로그 */} + <DeleteGtcClausesDialog + open={showDeleteDialog} + onOpenChange={setShowDeleteDialog} + gtcClauses={selectedClauses} + showTrigger={false} + onSuccess={() => { + table.toggleAllRowsSelected(false) + setShowDeleteDialog(false) + }} + /> + </div> + ) +}
\ No newline at end of file diff --git a/lib/basic-contract/gtc-vendor/gtc-clauses-table-toolbar-actions.tsx b/lib/basic-contract/gtc-vendor/gtc-clauses-table-toolbar-actions.tsx new file mode 100644 index 00000000..3a0fbdb6 --- /dev/null +++ b/lib/basic-contract/gtc-vendor/gtc-clauses-table-toolbar-actions.tsx @@ -0,0 +1,350 @@ +"use client" + +import * as React from "react" +import { type Table } from "@tanstack/react-table" +import { + Download, + Upload, + Settings2, + ArrowUpDown, + Edit, + Eye, + FileText, + Wand2 +} from "lucide-react" + +import { Button } from "@/components/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip" + +import { type GtcClauseTreeView } from "@/db/schema/gtc" +import { CreateVendorGtcClauseDialog } from "./create-gtc-clause-dialog" +import { PreviewDocumentDialog } from "./preview-document-dialog" +import { DeleteGtcClausesDialog } from "./delete-gtc-clauses-dialog" +import { exportTableToExcel } from "@/lib/export" +import { exportFullDataToExcel, type ExcelColumnDef } from "@/lib/export" +import { getAllGtcClausesForExport, importGtcClausesFromExcel } from "@/lib/gtc-contract/service" +import { ImportExcelDialog } from "./import-excel-dialog" +import { toast } from "@/hooks/use-toast" + +interface GtcClausesTableToolbarActionsProps { + table: Table<GtcClauseTreeView> + documentId: number + document: any + currentUserId?: number // 현재 사용자 ID 추가 +} + +// GTC 조항을 위한 Excel 컬럼 정의 (실용적으로 간소화) +const gtcClauseExcelColumns: ExcelColumnDef[] = [ + { + id: "itemNumber", + header: "채번", + accessor: "itemNumber", + group: "필수 정보" + }, + { + id: "subtitle", + header: "소제목", + accessor: "subtitle", + group: "필수 정보" + }, + { + id: "content", + header: "상세항목", + accessor: "content", + group: "기본 정보" + }, + { + id: "category", + header: "분류", + accessor: "category", + group: "기본 정보" + }, + { + id: "sortOrder", + header: "순서", + accessor: "sortOrder", + group: "순서" + }, + { + id: "parentId", + header: "상위 조항 ID", + accessor: "parentId", + group: "계층 구조" + }, + { + id: "isActive", + header: "활성 상태", + accessor: (row) => row.isActive ? "활성" : "비활성", + group: "상태" + }, + { + id: "editReason", + header: "편집 사유", + accessor: "editReason", + group: "추가 정보" + } +] + +export function GtcClausesTableToolbarActions({ + table, + documentId, + document, + currentUserId = 1, // 기본값 설정 (실제로는 auth에서 가져와야 함) +}: GtcClausesTableToolbarActionsProps) { + const [showCreateDialog, setShowCreateDialog] = React.useState(false) + const [showReorderDialog, setShowReorderDialog] = React.useState(false) + const [showBulkUpdateDialog, setShowBulkUpdateDialog] = React.useState(false) + const [showGenerateVariablesDialog, setShowGenerateVariablesDialog] = React.useState(false) + const [showPreviewDialog, setShowPreviewDialog] = React.useState(false) + const [isExporting, setIsExporting] = React.useState(false) + + const selectedRows = table.getSelectedRowModel().rows + const selectedCount = selectedRows.length + + // 테이블의 모든 데이터 가져오기 (현재 페이지만) + const allClauses = table.getRowModel().rows.map(row => row.original) + + const transformClausesForPreview = (clauses: GtcClauseTreeView[]) => { + return clauses.map(clause => { + // vendorInfo가 있고 수정된 값이 있는 경우 적용 + if (clause.vendorInfo) { + const { vendorInfo } = clause; + return { + ...clause, + // null이 아닌 수정값이 있으면 해당 값으로 대체 + category: vendorInfo.modifiedCategory ?? clause.category, + content: vendorInfo.modifiedContent ?? clause.content, + itemNumber: vendorInfo.modifiedItemNumber ?? clause.itemNumber, + subtitle: vendorInfo.modifiedSubtitle ?? clause.subtitle, + }; + } + // vendorInfo가 없으면 원본 그대로 반환 + return clause; + }); + }; + + // 컴포넌트 내에서 변환된 데이터 생성 + const previewClauses = React.useMemo( + () => transformClausesForPreview(allClauses), + [allClauses] + ); + + console.log(allClauses, "allClauses") + + // 현재 페이지 데이터만 Excel로 내보내기 + const handleExportCurrentPageToExcel = () => { + exportTableToExcel(table, { + filename: `gtc-clauses-page-${new Date().toISOString().split('T')[0]}`, + excludeColumns: ["select", "actions"], + }) + } + + // 전체 데이터를 Excel로 내보내기 + const handleExportAllToExcel = async () => { + try { + setIsExporting(true) + + // 서버에서 전체 데이터 가져오기 + const allData = await getAllGtcClausesForExport(documentId) + + // 전체 데이터를 Excel로 내보내기 + await exportFullDataToExcel( + allData, + gtcClauseExcelColumns, + { + filename: `gtc-clauses-all-${new Date().toISOString().split('T')[0]}`, + useGroupHeader: true + } + ) + + toast({ + title: "내보내기 완료", + description: `총 ${allData.length}개의 조항이 Excel 파일로 내보내졌습니다.`, + }) + } catch (error) { + console.error("Excel export failed:", error) + toast({ + title: "내보내기 실패", + description: "Excel 파일 내보내기 중 오류가 발생했습니다.", + variant: "destructive" + }) + } finally { + setIsExporting(false) + } + } + + // Excel 데이터 가져오기 처리 + const handleImportExcelData = async (data: Partial<GtcClauseTreeView>[]) => { + try { + const result = await importGtcClausesFromExcel(documentId, data, currentUserId) + + if (result.success) { + toast({ + title: "가져오기 성공", + description: `${result.importedCount}개의 조항이 성공적으로 가져와졌습니다.`, + }) + + // 테이블 새로고침 + handleRefreshTable() + } else { + const errorMessage = result.errors.length > 0 + ? `오류: ${result.errors.slice(0, 3).join(', ')}${result.errors.length > 3 ? '...' : ''}` + : "알 수 없는 오류가 발생했습니다." + + toast({ + title: "가져오기 실패", + description: errorMessage, + variant: "destructive" + }) + + // 오류가 있어도 일부는 성공했을 수 있음 + if (result.importedCount > 0) { + handleRefreshTable() + } + + throw new Error("Import failed with errors") + } + } catch (error) { + console.error("Excel import failed:", error) + throw error // ImportExcelDialog에서 처리하도록 다시 throw + } + } + + const handlePreviewDocument = () => { + setShowPreviewDialog(true) + } + + const handleGenerateDocument = () => { + // 최종 문서 생성 + console.log("Generate final document") + } + + const handleReorderClauses = () => { + setShowReorderDialog(true) + } + + const handleBulkUpdate = () => { + setShowBulkUpdateDialog(true) + } + + const handleGenerateVariables = () => { + setShowGenerateVariablesDialog(true) + } + + const handleRefreshTable = () => { + // 테이블 새로고침 로직 + console.log("Refresh table after creation") + // table.reset() 또는 상위 컴포넌트의 refetch 함수 호출 + } + + return ( + <> + <div className="flex items-center gap-2"> + {/* 조항 추가 버튼 */} + <CreateVendorGtcClauseDialog + documentId={documentId} + document={document} + onSuccess={handleRefreshTable} + /> + + {/* 선택된 항목이 있을 때 표시되는 액션들 */} + {selectedCount > 0 && ( + <> + <DeleteGtcClausesDialog + gtcClauses={allClauses} + onSuccess={() => table.toggleAllRowsSelected(false)} + /> + </> + )} + + {/* 관리 도구 드롭다운 */} + <DropdownMenu> + <DropdownMenuTrigger asChild> + <Button variant="outline" size="sm" disabled={isExporting}> + <Settings2 className="mr-2 h-4 w-4" /> + 관리 도구 + </Button> + </DropdownMenuTrigger> + <DropdownMenuContent align="end" className="w-64"> + <DropdownMenuItem onClick={handleExportCurrentPageToExcel}> + <Download className="mr-2 h-4 w-4" /> + 현재 페이지 Excel로 내보내기 + </DropdownMenuItem> + + <DropdownMenuItem + onClick={handleExportAllToExcel} + disabled={isExporting} + > + <Download className="mr-2 h-4 w-4" /> + {isExporting ? "내보내는 중..." : "전체 데이터 Excel로 내보내기"} + </DropdownMenuItem> + + <DropdownMenuSeparator /> + + {/* <ImportExcelDialog + documentId={documentId} + columns={gtcClauseExcelColumns} + onSuccess={handleRefreshTable} + onImport={handleImportExcelData} + trigger={ + <DropdownMenuItem onSelect={(e) => e.preventDefault()}> + <Upload className="mr-2 h-4 w-4" /> + Excel에서 가져오기 + </DropdownMenuItem> + } + /> */} + + <DropdownMenuSeparator /> + + <DropdownMenuItem onClick={handlePreviewDocument}> + <Eye className="mr-2 h-4 w-4" /> + 문서 미리보기 + </DropdownMenuItem> + </DropdownMenuContent> + </DropdownMenu> + + {/* 조건부로 표시되는 다이얼로그들 */} + {showReorderDialog && ( + <div> + {/* ReorderGtcClausesDialog 컴포넌트가 여기에 올 예정 */} + </div> + )} + + {showBulkUpdateDialog && ( + <div> + {/* BulkUpdateGtcClausesDialog 컴포넌트가 여기에 올 예정 */} + </div> + )} + + {showGenerateVariablesDialog && ( + <div> + {/* GenerateVariableNamesDialog 컴포넌트가 여기에 올 예정 */} + </div> + )} + </div> + + {/* 미리보기 다이얼로그 */} + <PreviewDocumentDialog + open={showPreviewDialog} + onOpenChange={setShowPreviewDialog} + clauses={previewClauses} + document={document} + onExport={() => { + console.log("Export from preview dialog") + }} + /> + </> + ) +}
\ No newline at end of file diff --git a/lib/basic-contract/gtc-vendor/import-excel-dialog.tsx b/lib/basic-contract/gtc-vendor/import-excel-dialog.tsx new file mode 100644 index 00000000..f37566fc --- /dev/null +++ b/lib/basic-contract/gtc-vendor/import-excel-dialog.tsx @@ -0,0 +1,381 @@ +"use client" + +import * as React from "react" +import { Upload, Download, FileText, AlertCircle, CheckCircle2, X } from "lucide-react" + +import { Button } from "@/components/ui/button" +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog" +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table" +import { Badge } from "@/components/ui/badge" +import { Alert, AlertDescription } from "@/components/ui/alert" +import { ScrollArea } from "@/components/ui/scroll-area" +import { Separator } from "@/components/ui/separator" + +import { type ExcelColumnDef } from "@/lib/export" +import { downloadExcelTemplate, parseExcelFile } from "./excel-import" +import { type GtcClauseTreeView } from "@/db/schema/gtc" +import { toast } from "@/hooks/use-toast" + +interface ImportExcelDialogProps { + documentId: number + columns: ExcelColumnDef[] + onSuccess?: () => void + onImport?: (data: Partial<GtcClauseTreeView>[]) => Promise<void> + trigger?: React.ReactNode +} + +type ImportStep = "upload" | "preview" | "importing" | "complete" + +export function ImportExcelDialog({ + documentId, + columns, + onSuccess, + onImport, + trigger, +}: ImportExcelDialogProps) { + const [open, setOpen] = React.useState(false) + const [step, setStep] = React.useState<ImportStep>("upload") + const [selectedFile, setSelectedFile] = React.useState<File | null>(null) + const [parsedData, setParsedData] = React.useState<Partial<GtcClauseTreeView>[]>([]) + const [errors, setErrors] = React.useState<string[]>([]) + const [isProcessing, setIsProcessing] = React.useState(false) + const fileInputRef = React.useRef<HTMLInputElement>(null) + + // 다이얼로그 열기/닫기 시 상태 초기화 + const handleOpenChange = (isOpen: boolean) => { + setOpen(isOpen) + if (!isOpen) { + // 다이얼로그 닫을 때 상태 초기화 + setStep("upload") + setSelectedFile(null) + setParsedData([]) + setErrors([]) + setIsProcessing(false) + if (fileInputRef.current) { + fileInputRef.current.value = "" + } + } + } + + // 템플릿 다운로드 + const handleDownloadTemplate = async () => { + try { + await downloadExcelTemplate(columns, { + filename: `gtc-clauses-template-${new Date().toISOString().split('T')[0]}`, + includeExampleData: true, + useGroupHeader: true, + }) + + toast({ + title: "템플릿 다운로드 완료", + description: "Excel 템플릿이 다운로드되었습니다. 템플릿에 데이터를 입력한 후 업로드해주세요.", + }) + } catch (error) { + toast({ + title: "템플릿 다운로드 실패", + description: "템플릿 다운로드 중 오류가 발생했습니다.", + variant: "destructive", + }) + } + } + + // 파일 선택 + const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => { + const file = event.target.files?.[0] + if (file) { + if (file.type !== "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" && + file.type !== "application/vnd.ms-excel") { + toast({ + title: "잘못된 파일 형식", + description: "Excel 파일(.xlsx, .xls)만 업로드할 수 있습니다.", + variant: "destructive", + }) + return + } + setSelectedFile(file) + } + } + + // 파일 파싱 + const handleParseFile = async () => { + if (!selectedFile) return + + setIsProcessing(true) + try { + const result = await parseExcelFile<GtcClauseTreeView>( + selectedFile, + columns, + { + hasGroupHeader: true, + sheetName: "GTC조항템플릿", + } + ) + + setParsedData(result.data) + setErrors(result.errors) + + if (result.errors.length > 0) { + toast({ + title: "파싱 완료 (오류 있음)", + description: `${result.data.length}개의 행을 파싱했지만 ${result.errors.length}개의 오류가 있습니다.`, + variant: "destructive", + }) + } else { + toast({ + title: "파싱 완료", + description: `${result.data.length}개의 행이 성공적으로 파싱되었습니다.`, + }) + } + + setStep("preview") + } catch (error) { + toast({ + title: "파싱 실패", + description: "파일 파싱 중 오류가 발생했습니다.", + variant: "destructive", + }) + } finally { + setIsProcessing(false) + } + } + + // 데이터 가져오기 실행 + const handleImportData = async () => { + if (parsedData.length === 0 || !onImport) return + + setStep("importing") + try { + await onImport(parsedData) + setStep("complete") + + toast({ + title: "가져오기 완료", + description: `${parsedData.length}개의 조항이 성공적으로 가져와졌습니다.`, + }) + + // 성공 콜백 호출 후 잠시 후 다이얼로그 닫기 + setTimeout(() => { + onSuccess?.() + setOpen(false) + }, 2000) + } catch (error) { + toast({ + title: "가져오기 실패", + description: "데이터 가져오기 중 오류가 발생했습니다.", + variant: "destructive", + }) + setStep("preview") + } + } + + const renderUploadStep = () => ( + <div className="space-y-6"> + <div className="text-center"> + <FileText className="mx-auto h-12 w-12 text-muted-foreground" /> + <h3 className="mt-4 text-lg font-semibold">Excel 파일로 조항 가져오기</h3> + <p className="mt-2 text-sm text-muted-foreground"> + 먼저 템플릿을 다운로드하여 데이터를 입력한 후 업로드해주세요. + </p> + </div> + + <div className="space-y-4"> + <div> + <Button + onClick={handleDownloadTemplate} + variant="outline" + className="w-full" + > + <Download className="mr-2 h-4 w-4" /> + Excel 템플릿 다운로드 + </Button> + <p className="mt-2 text-xs text-muted-foreground"> + 템플릿에는 입력 가이드와 예시 데이터가 포함되어 있습니다. + </p> + </div> + + <Separator /> + + <div> + <input + ref={fileInputRef} + type="file" + accept=".xlsx,.xls" + onChange={handleFileSelect} + className="hidden" + /> + <Button + onClick={() => fileInputRef.current?.click()} + variant={selectedFile ? "secondary" : "outline"} + className="w-full" + > + <Upload className="mr-2 h-4 w-4" /> + {selectedFile ? selectedFile.name : "Excel 파일 선택"} + </Button> + </div> + + {selectedFile && ( + <Button + onClick={handleParseFile} + disabled={isProcessing} + className="w-full" + > + {isProcessing ? "파싱 중..." : "파일 분석하기"} + </Button> + )} + </div> + </div> + ) + + const renderPreviewStep = () => ( + <div className="space-y-4"> + <div className="flex items-center justify-between"> + <h3 className="text-lg font-semibold">데이터 미리보기</h3> + <div className="flex items-center gap-2"> + <Badge variant="secondary"> + {parsedData.length}개 행 + </Badge> + {errors.length > 0 && ( + <Badge variant="destructive"> + {errors.length}개 오류 + </Badge> + )} + </div> + </div> + + {errors.length > 0 && ( + <Alert variant="destructive"> + <AlertCircle className="h-4 w-4" /> + <AlertDescription> + <div className="space-y-1"> + <div className="font-medium">다음 오류들을 확인해주세요:</div> + <ul className="list-disc list-inside space-y-1 text-sm"> + {errors.slice(0, 5).map((error, index) => ( + <li key={index}>{error}</li> + ))} + {errors.length > 5 && ( + <li>... 및 {errors.length - 5}개 추가 오류</li> + )} + </ul> + </div> + </AlertDescription> + </Alert> + )} + + <ScrollArea className="h-[300px] border rounded-md"> + <Table> + <TableHeader> + <TableRow> + <TableHead className="w-12">#</TableHead> + <TableHead>채번</TableHead> + <TableHead>소제목</TableHead> + <TableHead>상세항목</TableHead> + <TableHead>분류</TableHead> + <TableHead>상태</TableHead> + </TableRow> + </TableHeader> + <TableBody> + {parsedData.map((item, index) => ( + <TableRow key={index}> + <TableCell>{index + 1}</TableCell> + <TableCell className="font-mono"> + {item.itemNumber || "-"} + </TableCell> + <TableCell className="max-w-[200px] truncate"> + {item.subtitle || "-"} + </TableCell> + <TableCell className="max-w-[300px] truncate"> + {item.content || "-"} + </TableCell> + <TableCell>{item.category || "-"}</TableCell> + <TableCell> + <Badge variant={item.isActive ? "default" : "secondary"}> + {item.isActive ? "활성" : "비활성"} + </Badge> + </TableCell> + </TableRow> + ))} + </TableBody> + </Table> + </ScrollArea> + + <div className="flex gap-2"> + <Button + variant="outline" + onClick={() => setStep("upload")} + className="flex-1" + > + 다시 선택 + </Button> + <Button + onClick={handleImportData} + disabled={parsedData.length === 0 || errors.length > 0} + className="flex-1" + > + {errors.length > 0 ? "오류 수정 후 가져오기" : `${parsedData.length}개 조항 가져오기`} + </Button> + </div> + </div> + ) + + const renderImportingStep = () => ( + <div className="text-center py-8"> + <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div> + <h3 className="mt-4 text-lg font-semibold">가져오는 중...</h3> + <p className="mt-2 text-sm text-muted-foreground"> + {parsedData.length}개의 조항을 데이터베이스에 저장하고 있습니다. + </p> + </div> + ) + + const renderCompleteStep = () => ( + <div className="text-center py-8"> + <CheckCircle2 className="mx-auto h-12 w-12 text-green-500" /> + <h3 className="mt-4 text-lg font-semibold">가져오기 완료!</h3> + <p className="mt-2 text-sm text-muted-foreground"> + {parsedData.length}개의 조항이 성공적으로 가져와졌습니다. + </p> + </div> + ) + + return ( + <Dialog open={open} onOpenChange={handleOpenChange}> + <DialogTrigger asChild> + {trigger || ( + <Button variant="outline" size="sm"> + <Upload className="mr-2 h-4 w-4" /> + Excel에서 가져오기 + </Button> + )} + </DialogTrigger> + <DialogContent className="max-w-4xl max-h-[80vh] overflow-hidden"> + <DialogHeader> + <DialogTitle>Excel에서 조항 가져오기</DialogTitle> + <DialogDescription> + Excel 파일을 사용하여 여러 조항을 한 번에 가져올 수 있습니다. + </DialogDescription> + </DialogHeader> + + <div className="mt-4"> + {step === "upload" && renderUploadStep()} + {step === "preview" && renderPreviewStep()} + {step === "importing" && renderImportingStep()} + {step === "complete" && renderCompleteStep()} + </div> + </DialogContent> + </Dialog> + ) +}
\ No newline at end of file diff --git a/lib/basic-contract/gtc-vendor/markdown-image-editor.tsx b/lib/basic-contract/gtc-vendor/markdown-image-editor.tsx new file mode 100644 index 00000000..422d8475 --- /dev/null +++ b/lib/basic-contract/gtc-vendor/markdown-image-editor.tsx @@ -0,0 +1,360 @@ +"use client" + +import * as React from "react" +import { Button } from "@/components/ui/button" +import { Textarea } from "@/components/ui/textarea" +import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" +import { Upload, X, Image as ImageIcon, Eye, EyeOff } from "lucide-react" +import { toast } from "sonner" +import { cn } from "@/lib/utils" + +interface ClauseImage { + id: string + url: string + fileName: string + size: number +} + +interface MarkdownImageEditorProps { + content: string + images: ClauseImage[] + onChange: (content: string, images: ClauseImage[]) => void + placeholder?: string + rows?: number + className?: string +} + +export function MarkdownImageEditor({ + content, + images, + onChange, + placeholder = "텍스트를 입력하고, 이미지를 삽입하려면 '이미지 추가' 버튼을 클릭하세요.", + rows = 6, + className +}: MarkdownImageEditorProps) { + const [imageUploadOpen, setImageUploadOpen] = React.useState(false) + const [showPreview, setShowPreview] = React.useState(false) + const [uploading, setUploading] = React.useState(false) + const textareaRef = React.useRef<HTMLTextAreaElement>(null) + + // 이미지 업로드 핸들러 + const handleImageUpload = async (file: File) => { + if (!file.type.startsWith('image/')) { + toast.error('이미지 파일만 업로드 가능합니다.') + return + } + + if (file.size > 5 * 1024 * 1024) { // 5MB 제한 + toast.error('파일 크기는 5MB 이하여야 합니다.') + return + } + + setUploading(true) + try { + // 실제 구현에서는 서버로 업로드 + const uploadedUrl = await uploadImage(file) + const imageId = `image${Date.now()}` + + // 이미지 배열에 추가 + const newImages = [...images, { + id: imageId, + url: uploadedUrl, + fileName: file.name, + size: file.size, + }] + + // 커서 위치에 이미지 참조 삽입 + const imageRef = `![${imageId}]` + const textarea = textareaRef.current + + if (textarea) { + const start = textarea.selectionStart + const end = textarea.selectionEnd + const newContent = content.substring(0, start) + imageRef + content.substring(end) + + onChange(newContent, newImages) + + // 커서 위치를 이미지 참조 뒤로 이동 + setTimeout(() => { + textarea.focus() + textarea.setSelectionRange(start + imageRef.length, start + imageRef.length) + }, 0) + } else { + // 텍스트 끝에 추가 + const newContent = content + (content ? '\n\n' : '') + imageRef + onChange(newContent, newImages) + } + + toast.success('이미지가 추가되었습니다.') + setImageUploadOpen(false) + } catch (error) { + toast.error('이미지 업로드에 실패했습니다.') + console.error('Image upload error:', error) + } finally { + setUploading(false) + } + } + + // 이미지 제거 + const removeImage = (imageId: string) => { + // 이미지 배열에서 제거 + const newImages = images.filter(img => img.id !== imageId) + + // 텍스트에서 이미지 참조 제거 + const imageRef = `![${imageId}]` + const newContent = content.replace(new RegExp(`\\!\\[${imageId}\\]`, 'g'), '') + + onChange(newContent, newImages) + toast.success('이미지가 제거되었습니다.') + } + + // 커서 위치에 텍스트 삽입 + const insertAtCursor = (text: string) => { + const textarea = textareaRef.current + if (!textarea) return + + const start = textarea.selectionStart + const end = textarea.selectionEnd + const newContent = content.substring(0, start) + text + content.substring(end) + + onChange(newContent, images) + + // 커서 위치 조정 + setTimeout(() => { + textarea.focus() + textarea.setSelectionRange(start + text.length, start + text.length) + }, 0) + } + + return ( + <div className={cn("space-y-3", className)}> + {/* 에디터 툴바 */} + <div className="flex items-center justify-between"> + <div className="flex items-center gap-2"> + <Button + type="button" + variant="outline" + size="sm" + onClick={() => setImageUploadOpen(true)} + disabled={uploading} + > + <Upload className="h-4 w-4 mr-1" /> + {uploading ? '업로드 중...' : '이미지 추가'} + </Button> + + <Button + type="button" + variant="outline" + size="sm" + onClick={() => setShowPreview(!showPreview)} + > + {showPreview ? ( + <> + <EyeOff className="h-4 w-4 mr-1" /> + 편집 + </> + ) : ( + <> + <Eye className="h-4 w-4 mr-1" /> + 미리보기 + </> + )} + </Button> + </div> + + {images.length > 0 && ( + <span className="text-xs text-muted-foreground"> + {images.length}개 이미지 첨부됨 + </span> + )} + </div> + + {/* 에디터 영역 */} + {showPreview ? ( + /* 미리보기 모드 */ + <div className="border rounded-lg p-4 bg-muted/10 min-h-[200px]"> + <div className="space-y-3"> + {renderMarkdownPreview(content, images)} + </div> + </div> + ) : ( + /* 편집 모드 */ + <div className="relative"> + <Textarea + ref={textareaRef} + value={content} + onChange={(e) => onChange(e.target.value, images)} + placeholder={placeholder} + rows={rows} + className="font-mono text-sm resize-none" + /> + + {/* 이미지 참조 안내 */} + {content.includes('![image') && ( + <div className="absolute bottom-2 right-2 text-xs text-muted-foreground bg-background/80 px-2 py-1 rounded"> + ![imageXXX] = 이미지 삽입 위치 + </div> + )} + </div> + )} + + {/* 첨부된 이미지 목록 */} + {images.length > 0 && !showPreview && ( + <div className="space-y-2"> + <div className="text-sm font-medium">첨부된 이미지:</div> + <div className="grid grid-cols-2 md:grid-cols-4 gap-2"> + {images.map((img) => ( + <div key={img.id} className="relative group"> + <img + src={img.url} + alt={img.fileName} + className="w-full h-16 object-cover rounded border" + /> + <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded flex items-center justify-center"> + <div className="text-white text-xs text-center"> + <div className="font-medium">![{img.id}]</div> + <div className="truncate max-w-16" title={img.fileName}> + {img.fileName} + </div> + </div> + </div> + <Button + type="button" + variant="destructive" + size="sm" + className="absolute -top-1 -right-1 h-5 w-5 p-0 opacity-0 group-hover:opacity-100" + onClick={() => removeImage(img.id)} + > + <X className="h-3 w-3" /> + </Button> + </div> + ))} + </div> + </div> + )} + + {/* 이미지 업로드 다이얼로그 */} + <Dialog open={imageUploadOpen} onOpenChange={setImageUploadOpen}> + <DialogContent className="max-w-md"> + <DialogHeader> + <DialogTitle>이미지 추가</DialogTitle> + </DialogHeader> + <div className="space-y-4"> + <div className="border-2 border-dashed border-muted-foreground/25 rounded-lg p-6"> + <div className="flex flex-col items-center justify-center text-center"> + <ImageIcon className="h-8 w-8 text-muted-foreground mb-2" /> + <p className="text-sm text-muted-foreground mb-4"> + 이미지를 선택하거나 드래그해서 업로드하세요 + </p> + <input + type="file" + accept="image/*" + onChange={(e) => { + const file = e.target.files?.[0] + if (file) handleImageUpload(file) + }} + className="hidden" + id="image-upload" + disabled={uploading} + /> + <label + htmlFor="image-upload" + className={cn( + "cursor-pointer inline-flex items-center gap-2 text-sm bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2 rounded-md", + uploading && "opacity-50 cursor-not-allowed" + )} + > + <Upload className="h-4 w-4" /> + 파일 선택 + </label> + </div> + </div> + <div className="text-xs text-muted-foreground space-y-1"> + <div>• 지원 형식: JPG, PNG, GIF, WebP</div> + <div>• 최대 크기: 5MB</div> + <div>• 현재 커서 위치에 삽입됩니다</div> + </div> + </div> + </DialogContent> + </Dialog> + </div> + ) +} + +// 마크다운 미리보기 렌더링 +function renderMarkdownPreview(content: string, images: ClauseImage[]) { + if (!content.trim()) { + return ( + <p className="text-muted-foreground italic"> + 내용을 입력하세요... + </p> + ) + } + + const parts = content.split(/(\![a-zA-Z0-9_]+\])/) + + return parts.map((part, index) => { + // 이미지 참조인지 확인 + const imageMatch = part.match(/^!\[(.+)\]$/) + + if (imageMatch) { + const imageId = imageMatch[1] + const image = images.find(img => img.id === imageId) + + if (image) { + return ( + <div key={index} className="my-3"> + <img + src={image.url} + alt={image.fileName} + className="max-w-full h-auto rounded border shadow-sm" + style={{ maxHeight: '400px' }} + /> + <p className="text-xs text-muted-foreground mt-1 text-center"> + {image.fileName} ({formatFileSize(image.size)}) + </p> + </div> + ) + } else { + return ( + <div key={index} className="my-2 p-2 bg-yellow-50 border border-yellow-200 rounded"> + <p className="text-xs text-yellow-700"> + ⚠️ 이미지를 찾을 수 없음: {part} + </p> + </div> + ) + } + } else { + // 일반 텍스트 (줄바꿈 처리) + return part.split('\n').map((line, lineIndex) => ( + <p key={`${index}-${lineIndex}`} className="text-sm"> + {line || '\u00A0'} {/* 빈 줄 처리 */} + </p> + )) + } + }) +} + +// 파일 크기 포맷팅 +function formatFileSize(bytes: number): string { + if (bytes === 0) return '0 Bytes' + + const k = 1024 + const sizes = ['Bytes', 'KB', 'MB', 'GB'] + const i = Math.floor(Math.log(bytes) / Math.log(k)) + + return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i] +} + +// 임시 이미지 업로드 함수 (실제 구현 필요) +async function uploadImage(file: File): Promise<string> { + // TODO: 실제 서버 업로드 로직 구현 + // 현재는 임시로 ObjectURL 반환 + return new Promise((resolve) => { + const reader = new FileReader() + reader.onload = (e) => { + resolve(e.target?.result as string) + } + reader.readAsDataURL(file) + }) +}
\ No newline at end of file diff --git a/lib/basic-contract/gtc-vendor/preview-document-dialog.tsx b/lib/basic-contract/gtc-vendor/preview-document-dialog.tsx new file mode 100644 index 00000000..78ddc7f7 --- /dev/null +++ b/lib/basic-contract/gtc-vendor/preview-document-dialog.tsx @@ -0,0 +1,272 @@ +"use client" + +import * as React from "react" +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" +import { Badge } from "@/components/ui/badge" +import { Separator } from "@/components/ui/separator" + +import { + Eye, + Download, + Loader2, + FileText, + RefreshCw, + Settings, + AlertCircle +} from "lucide-react" +import { toast } from "sonner" + +import { type GtcClauseTreeView } from "@/db/schema/gtc" +import { ClausePreviewViewer } from "./clause-preview-viewer" + +interface PreviewDocumentDialogProps + extends React.ComponentPropsWithRef<typeof Dialog> { + clauses: GtcClauseTreeView[] + document: any + onExport?: () => void +} + +export function PreviewDocumentDialog({ + clauses, + document, + onExport, + ...props +}: PreviewDocumentDialogProps) { + const [isGenerating, setIsGenerating] = React.useState(false) + const [documentGenerated, setDocumentGenerated] = React.useState(false) + const [viewerInstance, setViewerInstance] = React.useState<any>(null) + const [hasError, setHasError] = React.useState(false) + + // 조항 통계 계산 + const stats = React.useMemo(() => { + const activeClausesCount = clauses.filter(c => c.isActive !== false).length + const topLevelCount = clauses.filter(c => !c.parentId && c.isActive !== false).length + const hasContentCount = clauses.filter(c => c.content && c.isActive !== false).length + + return { + total: activeClausesCount, + topLevel: topLevelCount, + withContent: hasContentCount, + withoutContent: activeClausesCount - hasContentCount + } + }, [clauses]) + + const handleGeneratePreview = async () => { + setIsGenerating(true) + setHasError(false) + setDocumentGenerated(false) + + try { + // 실제로는 ClausePreviewViewer에서 문서 생성을 처리하므로 + // 여기서는 상태만 관리 + console.log("🚀 문서 미리보기 생성 시작") + + // ClausePreviewViewer가 완전히 로드될 때까지 기다림 + await new Promise(resolve => setTimeout(resolve, 2000)) + + if (!hasError) { + setDocumentGenerated(true) + toast.success("문서 미리보기가 생성되었습니다.") + } + } catch (error) { + console.error("문서 생성 중 오류:", error) + setHasError(true) + toast.error("문서 생성 중 오류가 발생했습니다.") + } finally { + setIsGenerating(false) + } + } + + const handleExportDocument = () => { + if (viewerInstance) { + try { + // PDFTron의 다운로드 기능 실행 + viewerInstance.UI.downloadPdf({ + filename: `${document?.title || 'GTC계약서'}_미리보기.pdf` + }) + toast.success("PDF 다운로드가 시작됩니다.") + } catch (error) { + console.error("다운로드 오류:", error) + toast.error("다운로드 중 오류가 발생했습니다.") + } + } else { + toast.error("뷰어가 준비되지 않았습니다.") + } + } + + const handleRegenerateDocument = () => { + console.log("🔄 문서 재생성 시작") + setDocumentGenerated(false) + setHasError(false) + handleGeneratePreview() + } + + const handleViewerSuccess = React.useCallback(() => { + setDocumentGenerated(true) + setIsGenerating(false) + setHasError(false) + }, []) + + const handleViewerError = React.useCallback(() => { + setHasError(true) + setIsGenerating(false) + setDocumentGenerated(false) + }, []) + + // 다이얼로그가 열릴 때 자동으로 미리보기 생성 + React.useEffect(() => { + if (props.open && !documentGenerated && !isGenerating && !hasError) { + const timer = setTimeout(() => { + handleGeneratePreview() + }, 300) // 다이얼로그 애니메이션 후 시작 + + return () => clearTimeout(timer) + } + }, [props.open, documentGenerated, isGenerating, hasError]) + + // 다이얼로그가 닫힐 때 상태 초기화 + React.useEffect(() => { + if (!props.open) { + setDocumentGenerated(false) + setIsGenerating(false) + setHasError(false) + setViewerInstance(null) + } + }, [props.open]) + + return ( + <Dialog {...props}> + <DialogContent className="max-w-7xl h-[90vh] flex flex-col"> + <DialogHeader className="flex-shrink-0"> + <DialogTitle className="flex items-center gap-2"> + <Eye className="h-5 w-5" /> + 문서 미리보기 + </DialogTitle> + <DialogDescription> + 현재 조항들을 기반으로 생성된 문서를 미리보기합니다. + </DialogDescription> + </DialogHeader> + + {/* 문서 정보 및 통계 */} + <div className="flex-shrink-0 p-4 bg-muted/30 rounded-lg"> + <div className="flex items-center justify-between mb-3"> + <div className="flex items-center gap-2"> + <FileText className="h-4 w-4" /> + <span className="font-medium">{document?.title || 'GTC 계약서'}</span> + <Badge variant="outline">{stats.total}개 조항</Badge> + {hasError && ( + <Badge variant="destructive" className="gap-1"> + <AlertCircle className="h-3 w-3" /> + 오류 발생 + </Badge> + )} + </div> + <div className="flex items-center gap-2"> + {documentGenerated && !hasError && ( + <> + <Button + variant="outline" + size="sm" + onClick={handleRegenerateDocument} + disabled={isGenerating} + > + <RefreshCw className={`mr-2 h-3 w-3 ${isGenerating ? 'animate-spin' : ''}`} /> + 재생성 + </Button> + {/* <Button + variant="outline" + size="sm" + onClick={handleExportDocument} + disabled={!viewerInstance} + > + <Download className="mr-2 h-3 w-3" /> + PDF 다운로드 + </Button> */} + </> + )} + {hasError && ( + <Button + variant="default" + size="sm" + onClick={handleRegenerateDocument} + disabled={isGenerating} + > + <RefreshCw className={`mr-2 h-3 w-3 ${isGenerating ? 'animate-spin' : ''}`} /> + 다시 시도 + </Button> + )} + </div> + </div> + + <div className="grid grid-cols-4 gap-4 text-sm"> + <div className="text-center p-2 bg-background rounded"> + <div className="font-medium text-lg">{stats.total}</div> + <div className="text-muted-foreground">총 조항</div> + </div> + <div className="text-center p-2 bg-background rounded"> + <div className="font-medium text-lg">{stats.topLevel}</div> + <div className="text-muted-foreground">최상위 조항</div> + </div> + <div className="text-center p-2 bg-background rounded"> + <div className="font-medium text-lg text-green-600">{stats.withContent}</div> + <div className="text-muted-foreground">내용 있음</div> + </div> + <div className="text-center p-2 bg-background rounded"> + <div className="font-medium text-lg text-amber-600">{stats.withoutContent}</div> + <div className="text-muted-foreground">제목만</div> + </div> + </div> + </div> + + <Separator /> + + {/* PDFTron 뷰어 영역 */} + <div className="flex-1 min-h-0 relative"> + {isGenerating ? ( + <div className="absolute inset-0 flex flex-col items-center justify-center bg-background"> + <Loader2 className="h-8 w-8 animate-spin text-primary mb-4" /> + <p className="text-lg font-medium mb-2">문서 생성 중...</p> + <p className="text-sm text-muted-foreground"> + {stats.total}개의 조항을 배치하고 있습니다. + </p> + <p className="text-xs text-gray-400 mt-2"> + 초기화에 시간이 걸릴 수 있습니다... + </p> + </div> + ) : hasError ? ( + <div className="absolute inset-0 flex flex-col items-center justify-center bg-muted/10"> + <AlertCircle className="h-12 w-12 text-destructive mb-4" /> + <p className="text-lg font-medium mb-2 text-destructive">문서 생성 실패</p> + <p className="text-sm text-muted-foreground mb-4 text-center max-w-md"> + 문서 생성 중 오류가 발생했습니다. 네트워크 연결이나 파일 권한을 확인해주세요. + </p> + <Button onClick={handleRegenerateDocument} disabled={isGenerating}> + <RefreshCw className="mr-2 h-4 w-4" /> + 다시 시도 + </Button> + </div> + ) : documentGenerated ? ( + <ClausePreviewViewer + clauses={clauses} + document={document} + instance={viewerInstance} + setInstance={setViewerInstance} + onSuccess={handleViewerSuccess} + onError={handleViewerError} + /> + ) : ( + <div className="absolute inset-0 flex flex-col items-center justify-center bg-muted/10"> + <FileText className="h-12 w-12 text-muted-foreground mb-4" /> + <p className="text-lg font-medium mb-2">문서 미리보기 준비 중</p> + <Button onClick={handleGeneratePreview} disabled={isGenerating}> + <Eye className="mr-2 h-4 w-4" /> + 미리보기 생성 + </Button> + </div> + )} + </div> + </DialogContent> + </Dialog> + ) +}
\ No newline at end of file diff --git a/lib/basic-contract/gtc-vendor/reorder-gtc-clauses-dialog.tsx b/lib/basic-contract/gtc-vendor/reorder-gtc-clauses-dialog.tsx new file mode 100644 index 00000000..7d0180df --- /dev/null +++ b/lib/basic-contract/gtc-vendor/reorder-gtc-clauses-dialog.tsx @@ -0,0 +1,540 @@ +"use client" + +import * as React from "react" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" +import { Textarea } from "@/components/ui/textarea" +import { Badge } from "@/components/ui/badge" +import { ScrollArea } from "@/components/ui/scroll-area" + +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form" +import { + Loader, + ArrowUpDown, + ArrowUp, + ArrowDown, + GripVertical, + RotateCcw, + Info +} from "lucide-react" +import { toast } from "sonner" +import { cn } from "@/lib/utils" + +import { reorderGtcClausesSchema, type ReorderGtcClausesSchema } from "@/lib/gtc-contract/gtc-clauses/validations" +import { reorderGtcClauses, getGtcClausesTree } from "@/lib/gtc-contract/gtc-clauses/service" +import { type GtcClauseTreeView } from "@/db/schema/gtc" +import { useSession } from "next-auth/react" + +interface ReorderGtcClausesDialogProps + extends React.ComponentPropsWithRef<typeof Dialog> { + documentId: number + onSuccess?: () => void +} + +interface ClauseWithOrder extends GtcClauseTreeView { + newSortOrder: number + hasChanges: boolean + children?: ClauseWithOrder[] +} + +export function ReorderGtcClausesDialog({ + documentId, + onSuccess, + ...props +}: ReorderGtcClausesDialogProps) { + const [isUpdatePending, startUpdateTransition] = React.useTransition() + const [clauses, setClauses] = React.useState<ClauseWithOrder[]>([]) + const [originalClauses, setOriginalClauses] = React.useState<ClauseWithOrder[]>([]) + const [isLoading, setIsLoading] = React.useState(false) + const [draggedItem, setDraggedItem] = React.useState<ClauseWithOrder | null>(null) + const { data: session } = useSession() + + const currentUserId = React.useMemo(() => { + return session?.user?.id ? Number(session.user.id) : null + }, [session]) + + const form = useForm<ReorderGtcClausesSchema>({ + resolver: zodResolver(reorderGtcClausesSchema), + defaultValues: { + clauses: [], + editReason: "", + }, + }) + + // 조항 데이터 로드 + React.useEffect(() => { + if (props.open && documentId) { + loadClauses() + } + }, [props.open, documentId]) + + const loadClauses = async () => { + setIsLoading(true) + try { + const tree = await getGtcClausesTree(documentId) + const flatClauses = flattenTreeWithOrder(tree) + setClauses(flatClauses) + setOriginalClauses(JSON.parse(JSON.stringify(flatClauses))) // 깊은 복사 + } catch (error) { + console.error("Error loading clauses:", error) + toast.error("조항 목록을 불러오는 중 오류가 발생했습니다.") + } finally { + setIsLoading(false) + } + } + + // 트리를 평면 배열로 변환하면서 순서 정보 추가 + const flattenTreeWithOrder = (tree: any[]): ClauseWithOrder[] => { + const result: ClauseWithOrder[] = [] + + function traverse(nodes: any[], parentId: number | null = null) { + nodes.forEach((node, index) => { + const clauseWithOrder: ClauseWithOrder = { + ...node, + newSortOrder: parseFloat(node.sortOrder), + hasChanges: false, + } + + result.push(clauseWithOrder) + + if (node.children && node.children.length > 0) { + traverse(node.children, node.id) + } + }) + } + + traverse(tree) + return result + } + + // 조항 순서 변경 + const moveClause = (clauseId: number, direction: 'up' | 'down') => { + setClauses(prev => { + const newClauses = [...prev] + const clauseIndex = newClauses.findIndex(c => c.id === clauseId) + + if (clauseIndex === -1) return prev + + const clause = newClauses[clauseIndex] + + // 같은 부모를 가진 형제 조항들 찾기 + const siblings = newClauses.filter(c => c.parentId === clause.parentId) + const siblingIndex = siblings.findIndex(c => c.id === clauseId) + + if (direction === 'up' && siblingIndex > 0) { + // 위로 이동 + const targetSibling = siblings[siblingIndex - 1] + const tempOrder = clause.newSortOrder + clause.newSortOrder = targetSibling.newSortOrder + targetSibling.newSortOrder = tempOrder + + clause.hasChanges = true + targetSibling.hasChanges = true + } else if (direction === 'down' && siblingIndex < siblings.length - 1) { + // 아래로 이동 + const targetSibling = siblings[siblingIndex + 1] + const tempOrder = clause.newSortOrder + clause.newSortOrder = targetSibling.newSortOrder + targetSibling.newSortOrder = tempOrder + + clause.hasChanges = true + targetSibling.hasChanges = true + } + + // sortOrder로 정렬 + return newClauses.sort((a, b) => { + if (a.parentId !== b.parentId) { + // 부모가 다르면 부모 기준으로 정렬 + return (a.parentId || 0) - (b.parentId || 0) + } + return a.newSortOrder - b.newSortOrder + }) + }) + } + + // 변경사항 초기화 + const resetChanges = () => { + setClauses(JSON.parse(JSON.stringify(originalClauses))) + toast.success("변경사항이 초기화되었습니다.") + } + + // 드래그 앤 드롭 핸들러 + const handleDragStart = (e: React.DragEvent, clause: ClauseWithOrder) => { + setDraggedItem(clause) + e.dataTransfer.effectAllowed = 'move' + } + + const handleDragOver = (e: React.DragEvent) => { + e.preventDefault() + e.dataTransfer.dropEffect = 'move' + } + + const handleDrop = (e: React.DragEvent, targetClause: ClauseWithOrder) => { + e.preventDefault() + + if (!draggedItem || draggedItem.id === targetClause.id) { + setDraggedItem(null) + return + } + + // 같은 부모를 가진 경우에만 순서 변경 허용 + if (draggedItem.parentId === targetClause.parentId) { + setClauses(prev => { + const newClauses = [...prev] + const draggedIndex = newClauses.findIndex(c => c.id === draggedItem.id) + const targetIndex = newClauses.findIndex(c => c.id === targetClause.id) + + if (draggedIndex !== -1 && targetIndex !== -1) { + const tempOrder = newClauses[draggedIndex].newSortOrder + newClauses[draggedIndex].newSortOrder = newClauses[targetIndex].newSortOrder + newClauses[targetIndex].newSortOrder = tempOrder + + newClauses[draggedIndex].hasChanges = true + newClauses[targetIndex].hasChanges = true + } + + return newClauses.sort((a, b) => { + if (a.parentId !== b.parentId) { + return (a.parentId || 0) - (b.parentId || 0) + } + return a.newSortOrder - b.newSortOrder + }) + }) + } + + setDraggedItem(null) + } + + async function onSubmit(data: ReorderGtcClausesSchema) { + startUpdateTransition(async () => { + if (!currentUserId) { + toast.error("로그인이 필요합니다") + return + } + + // 변경된 조항들만 필터링 + const changedClauses = clauses.filter(c => c.hasChanges).map(c => ({ + id: c.id, + sortOrder: c.newSortOrder, + parentId: c.parentId, + depth: c.depth, + fullPath: c.fullPath, + })) + + if (changedClauses.length === 0) { + toast.error("변경된 조항이 없습니다.") + return + } + + try { + const result = await reorderGtcClauses({ + clauses: changedClauses, + editReason: data.editReason || "조항 순서 변경", + updatedById: currentUserId + }) + + if (result.error) { + toast.error(`에러: ${result.error}`) + return + } + + form.reset() + props.onOpenChange?.(false) + toast.success(`${changedClauses.length}개 조항의 순서가 변경되었습니다.`) + onSuccess?.() + } catch (error) { + toast.error("조항 순서 변경 중 오류가 발생했습니다.") + } + }) + } + + function handleDialogOpenChange(nextOpen: boolean) { + if (!nextOpen) { + form.reset() + setClauses([]) + setOriginalClauses([]) + } + props.onOpenChange?.(nextOpen) + } + + const changedCount = clauses.filter(c => c.hasChanges).length + const groupedClauses = groupClausesByParent(clauses) + + return ( + <Dialog {...props} onOpenChange={handleDialogOpenChange}> + <DialogContent className="max-w-4xl h-[90vh] flex flex-col"> + <DialogHeader className="flex-shrink-0"> + <DialogTitle className="flex items-center gap-2"> + <ArrowUpDown className="h-5 w-5" /> + 조항 순서 변경 + </DialogTitle> + <DialogDescription> + 드래그 앤 드롭 또는 화살표 버튼으로 조항의 순서를 변경하세요. 같은 계층 내에서만 순서 변경이 가능합니다. + </DialogDescription> + </DialogHeader> + + {/* 상태 정보 */} + <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg flex-shrink-0"> + <div className="flex items-center gap-4 text-sm"> + <div className="flex items-center gap-2"> + <Info className="h-4 w-4 text-muted-foreground" /> + <span>총 {clauses.length}개 조항</span> + </div> + {changedCount > 0 && ( + <Badge variant="default"> + {changedCount}개 변경됨 + </Badge> + )} + </div> + + <div className="flex gap-2"> + {changedCount > 0 && ( + <Button + type="button" + variant="outline" + size="sm" + onClick={resetChanges} + > + <RotateCcw className="mr-2 h-4 w-4" /> + 초기화 + </Button> + )} + </div> + </div> + + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1 min-h-0"> + {/* 조항 목록 */} + <ScrollArea className="flex-1 border rounded-lg"> + {isLoading ? ( + <div className="flex items-center justify-center h-32"> + <Loader className="h-6 w-6 animate-spin" /> + <span className="ml-2">조항을 불러오는 중...</span> + </div> + ) : ( + <div className="p-4 space-y-2"> + {Object.entries(groupedClauses).map(([parentInfo, clauses]) => ( + <ClauseGroup + key={parentInfo} + parentInfo={parentInfo} + clauses={clauses} + onMove={moveClause} + onDragStart={handleDragStart} + onDragOver={handleDragOver} + onDrop={handleDrop} + /> + ))} + </div> + )} + </ScrollArea> + + {/* 편집 사유 */} + <div className="mt-4 flex-shrink-0"> + <FormField + control={form.control} + name="editReason" + render={({ field }) => ( + <FormItem> + <FormLabel>편집 사유 (선택사항)</FormLabel> + <FormControl> + <Textarea + placeholder="순서 변경 사유를 입력하세요..." + {...field} + rows={2} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </div> + + <DialogFooter className="flex-shrink-0 border-t pt-4 mt-4"> + <Button + type="button" + variant="outline" + onClick={() => props.onOpenChange?.(false)} + disabled={isUpdatePending} + > + Cancel + </Button> + <Button + type="submit" + disabled={isUpdatePending || changedCount === 0} + > + {isUpdatePending && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + <ArrowUpDown className="mr-2 h-4 w-4" /> + Apply Changes ({changedCount}) + </Button> + </DialogFooter> + </form> + </Form> + </DialogContent> + </Dialog> + ) +} + +// 조항 그룹 컴포넌트 +interface ClauseGroupProps { + parentInfo: string + clauses: ClauseWithOrder[] + onMove: (clauseId: number, direction: 'up' | 'down') => void + onDragStart: (e: React.DragEvent, clause: ClauseWithOrder) => void + onDragOver: (e: React.DragEvent) => void + onDrop: (e: React.DragEvent, clause: ClauseWithOrder) => void +} + +function ClauseGroup({ + parentInfo, + clauses, + onMove, + onDragStart, + onDragOver, + onDrop +}: ClauseGroupProps) { + const isRootLevel = parentInfo === "root" + + return ( + <div className="space-y-1"> + {!isRootLevel && ( + <div className="text-sm font-medium text-muted-foreground px-2 py-1 bg-muted/30 rounded"> + {parentInfo} + </div> + )} + + {clauses.map((clause, index) => ( + <ClauseItem + key={clause.id} + clause={clause} + index={index} + isFirst={index === 0} + isLast={index === clauses.length - 1} + onMove={onMove} + onDragStart={onDragStart} + onDragOver={onDragOver} + onDrop={onDrop} + /> + ))} + </div> + ) +} + +// 개별 조항 컴포넌트 +interface ClauseItemProps { + clause: ClauseWithOrder + index: number + isFirst: boolean + isLast: boolean + onMove: (clauseId: number, direction: 'up' | 'down') => void + onDragStart: (e: React.DragEvent, clause: ClauseWithOrder) => void + onDragOver: (e: React.DragEvent) => void + onDrop: (e: React.DragEvent, clause: ClauseWithOrder) => void +} + +function ClauseItem({ + clause, + isFirst, + isLast, + onMove, + onDragStart, + onDragOver, + onDrop +}: ClauseItemProps) { + return ( + <div + className={cn( + "flex items-center gap-2 p-3 border rounded-lg bg-background", + clause.hasChanges && "border-blue-300 bg-blue-50", + "hover:bg-muted/50 transition-colors" + )} + draggable + onDragStart={(e) => onDragStart(e, clause)} + onDragOver={onDragOver} + onDrop={(e) => onDrop(e, clause)} + > + {/* 드래그 핸들 */} + <GripVertical className="h-4 w-4 text-muted-foreground cursor-grab" /> + + {/* 조항 정보 */} + <div className="flex-1 min-w-0"> + <div className="flex items-center gap-2 mb-1"> + <Badge variant="outline" className="text-xs"> + {clause.itemNumber} + </Badge> + <span className="font-medium truncate">{clause.subtitle}</span> + {clause.hasChanges && ( + <Badge variant="default" className="text-xs"> + 변경됨 + </Badge> + )} + </div> + {clause.content && ( + <p className="text-xs text-muted-foreground line-clamp-1"> + {clause.content.substring(0, 100)}... + </p> + )} + </div> + + {/* 순서 변경 버튼 */} + <div className="flex gap-1"> + <Button + type="button" + variant="ghost" + size="sm" + className="h-8 w-8 p-0" + disabled={isFirst} + onClick={() => onMove(clause.id, 'up')} + > + <ArrowUp className="h-4 w-4" /> + </Button> + <Button + type="button" + variant="ghost" + size="sm" + className="h-8 w-8 p-0" + disabled={isLast} + onClick={() => onMove(clause.id, 'down')} + > + <ArrowDown className="h-4 w-4" /> + </Button> + </div> + </div> + ) +} + +// 조항을 부모별로 그룹화 +function groupClausesByParent(clauses: ClauseWithOrder[]): Record<string, ClauseWithOrder[]> { + const groups: Record<string, ClauseWithOrder[]> = {} + + clauses.forEach(clause => { + const parentKey = clause.parentId + ? `${clause.parentItemNumber || 'Unknown'} - ${clause.parentSubtitle || 'Unknown'}` + : "root" + + if (!groups[parentKey]) { + groups[parentKey] = [] + } + groups[parentKey].push(clause) + }) + + // 각 그룹 내에서 sortOrder로 정렬 + Object.keys(groups).forEach(key => { + groups[key].sort((a, b) => a.newSortOrder - b.newSortOrder) + }) + + return groups +}
\ No newline at end of file diff --git a/lib/basic-contract/gtc-vendor/update-gtc-clause-sheet.tsx b/lib/basic-contract/gtc-vendor/update-gtc-clause-sheet.tsx new file mode 100644 index 00000000..3487ebbf --- /dev/null +++ b/lib/basic-contract/gtc-vendor/update-gtc-clause-sheet.tsx @@ -0,0 +1,522 @@ +// update-vendor-gtc-clause-sheet.tsx +"use client" + +import * as React from "react" +import { zodResolver } from "@hookform/resolvers/zod" +import { Loader, Info, AlertCircle } from "lucide-react" +import { useForm } from "react-hook-form" +import { toast } from "sonner" + +import { + Sheet, + SheetClose, + SheetContent, + SheetDescription, + SheetFooter, + SheetHeader, + SheetTitle, +} from "@/components/ui/sheet" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Textarea } from "@/components/ui/textarea" +import { Badge } from "@/components/ui/badge" +import { Label } from "@/components/ui/label" +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, + FormDescription, +} from "@/components/ui/form" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" +import { Separator } from "@/components/ui/separator" + +import { type GtcClauseTreeView } from "@/db/schema/gtc" +import { updateVendorGtcClauseSchema, type UpdateVendorGtcClauseSchema } from "@/lib/gtc-contract/gtc-clauses/validations" +import { updateVendorGtcClause } from "@/lib/gtc-contract/gtc-clauses/service" +import { useSession } from "next-auth/react" +import { MarkdownImageEditor } from "./markdown-image-editor" +import { Checkbox } from "@/components/ui/checkbox" + +interface ClauseImage { + id: string + url: string + fileName: string + size: number + savedName?: string + mimeType?: string + width?: number + height?: number + hash?: string +} + +export interface UpdateVendorGtcClauseSheetProps + extends React.ComponentPropsWithRef<typeof Sheet> { + gtcClause: GtcClauseTreeView | null + vendorInfo?: any // 벤더 조항 정보 + documentId: number + vendorId: number + vendorName?: string +} + +export function UpdateGtcClauseSheet ({ + gtcClause, + vendorInfo, + documentId, + vendorId, + vendorName, + ...props +}: UpdateVendorGtcClauseSheetProps) { + const [isUpdatePending, startUpdateTransition] = React.useTransition() + const { data: session } = useSession() + const [images, setImages] = React.useState<ClauseImage[]>([]) + + console.log(vendorInfo,"vendorInfo") + + const currentUserId = React.useMemo(() => { + return session?.user?.id ? Number(session.user.id) : null + }, [session]) + + const form = useForm<UpdateVendorGtcClauseSchema>({ + resolver: zodResolver(updateVendorGtcClauseSchema), + defaultValues: { + modifiedItemNumber: "", + modifiedCategory: "", + modifiedSubtitle: "", + modifiedContent: "", + isNumberModified: false, + isCategoryModified: false, + isSubtitleModified: false, + isContentModified: false, + reviewStatus: "draft", + negotiationNote: "", + isExcluded: false, + }, + }) + + // 벤더 정보가 있으면 초기값 세팅 + React.useEffect(() => { + if (vendorInfo) { + form.reset({ + modifiedItemNumber: vendorInfo.modifiedItemNumber || "", + modifiedCategory: vendorInfo.modifiedCategory || "", + modifiedSubtitle: vendorInfo.modifiedSubtitle || "", + modifiedContent: vendorInfo.modifiedContent || "", + isNumberModified: vendorInfo.isNumberModified || false, + isCategoryModified: vendorInfo.isCategoryModified || false, + isSubtitleModified: vendorInfo.isSubtitleModified || false, + isContentModified: vendorInfo.isContentModified || false, + reviewStatus: vendorInfo.reviewStatus || "draft", + negotiationNote: vendorInfo.negotiationNote || "", + isExcluded: vendorInfo.isExcluded || false, + }) + setImages((vendorInfo.images as any[]) || []) + } + }, [vendorInfo, form]) + + async function onSubmit(input: UpdateVendorGtcClauseSchema) { + startUpdateTransition(async () => { + if (!gtcClause || !currentUserId) { + toast.error("조항 정보를 찾을 수 없습니다.") + return + } + + try { + const result = await updateVendorGtcClause({ + baseClauseId: gtcClause.id, + documentId, + vendorId, + ...input, + images, + updatedById: currentUserId, + }) + + if (result.error) { + toast.error(result.error) + return + } + + form.reset() + props.onOpenChange?.(false) + toast.success("벤더 협의 내용이 저장되었습니다!") + } catch (error) { + toast.error("벤더 협의 저장 중 오류가 발생했습니다.") + } + }) + } + + const getDepthBadge = (depth: number) => { + const levels = ["1단계", "2단계", "3단계", "4단계", "5단계+"] + return levels[depth] || levels[4] + } + + const handleContentImageChange = (content: string, newImages: ClauseImage[]) => { + form.setValue("modifiedContent", content) + setImages(newImages) + } + + return ( + <Sheet {...props}> + <SheetContent className="flex flex-col sm:max-w-2xl h-full"> + <SheetHeader className="text-left flex-shrink-0"> + <SheetTitle>벤더 GTC 조항 협의</SheetTitle> + <SheetDescription> + {vendorName ? `${vendorName}과(와)의 조항 협의 내용을 입력하세요` : '벤더별 조항 수정사항을 입력하세요'} + </SheetDescription> + </SheetHeader> + + <div className="flex-1 overflow-y-auto"> + {/* 기존 조항 정보 (읽기 전용) */} + <div className="space-y-4 p-4 bg-muted/30 rounded-lg mb-4"> + <div className="flex items-center justify-between"> + <h3 className="text-sm font-semibold">표준 조항 내용</h3> + <Badge variant="outline"> + {getDepthBadge(gtcClause?.depth || 0)} + </Badge> + </div> + + <div className="space-y-3"> + <div> + <Label className="text-xs text-muted-foreground">채번</Label> + <div className="text-sm font-mono mt-1">{gtcClause?.itemNumber}</div> + </div> + + {gtcClause?.category && ( + <div> + <Label className="text-xs text-muted-foreground">분류</Label> + <div className="text-sm mt-1">{gtcClause.category}</div> + </div> + )} + + <div> + <Label className="text-xs text-muted-foreground">소제목</Label> + <div className="text-sm font-medium mt-1">{gtcClause?.subtitle}</div> + </div> + + {gtcClause?.content && ( + <div> + <Label className="text-xs text-muted-foreground">상세항목</Label> + <div className="text-sm mt-1 p-2 bg-background rounded border"> + <pre className="whitespace-pre-wrap font-sans">{gtcClause.content}</pre> + </div> + </div> + )} + </div> + </div> + + <Separator className="my-4" /> + + {/* 벤더별 수정 폼 */} + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 p-4"> + <div className="flex items-center gap-2 mb-4"> + <AlertCircle className="h-4 w-4 text-blue-500" /> + <p className="text-sm text-muted-foreground"> + 수정할 항목에 체크하고 내용을 입력하세요. 체크하지 않은 항목은 표준 조항의 내용을 그대로 사용합니다. + </p> + </div> + + {/* 협의 상태 */} + <FormField + control={form.control} + name="reviewStatus" + render={({ field }) => ( + <FormItem> + <FormLabel>협의 상태</FormLabel> + <Select onValueChange={field.onChange} defaultValue={field.value}> + <FormControl> + <SelectTrigger> + <SelectValue placeholder="협의 상태를 선택하세요" /> + </SelectTrigger> + </FormControl> + <SelectContent> + <SelectItem value="draft">초안</SelectItem> + <SelectItem value="pending">협의 대기</SelectItem> + <SelectItem value="reviewing">협의 중</SelectItem> + <SelectItem value="approved">승인됨</SelectItem> + <SelectItem value="rejected">거부됨</SelectItem> + <SelectItem value="revised">수정됨</SelectItem> + </SelectContent> + </Select> + <FormMessage /> + </FormItem> + )} + /> + + {/* 제외 여부 */} + <FormField + control={form.control} + name="isExcluded" + render={({ field }) => ( + <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4"> + <FormControl> + <Checkbox + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + <div className="space-y-1 leading-none"> + <FormLabel> + 이 조항을 벤더 계약에서 제외 + </FormLabel> + <FormDescription> + 체크하면 최종 계약서에서 이 조항이 제외됩니다 + </FormDescription> + </div> + </FormItem> + )} + /> + + {/* 채번 수정 */} + <div className="space-y-2 border rounded-lg p-3"> + <FormField + control={form.control} + name="isNumberModified" + render={({ field }) => ( + <FormItem className="flex flex-row items-center space-x-3 space-y-0"> + <FormControl> + <Checkbox + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + <FormLabel className="font-normal cursor-pointer"> + 채번 수정 + </FormLabel> + </FormItem> + )} + /> + + {form.watch("isNumberModified") && ( + <FormField + control={form.control} + name="modifiedItemNumber" + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + placeholder="수정할 채번 입력" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + )} + </div> + + {/* 분류 수정 */} + <div className="space-y-2 border rounded-lg p-3"> + <FormField + control={form.control} + name="isCategoryModified" + render={({ field }) => ( + <FormItem className="flex flex-row items-center space-x-3 space-y-0"> + <FormControl> + <Checkbox + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + <FormLabel className="font-normal cursor-pointer"> + 분류 수정 + </FormLabel> + </FormItem> + )} + /> + + {form.watch("isCategoryModified") && ( + <FormField + control={form.control} + name="modifiedCategory" + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + placeholder="수정할 분류 입력" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + )} + </div> + + {/* 소제목 수정 */} + <div className="space-y-2 border rounded-lg p-3"> + <FormField + control={form.control} + name="isSubtitleModified" + render={({ field }) => ( + <FormItem className="flex flex-row items-center space-x-3 space-y-0"> + <FormControl> + <Checkbox + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + <FormLabel className="font-normal cursor-pointer"> + 소제목 수정 + </FormLabel> + </FormItem> + )} + /> + + {form.watch("isSubtitleModified") && ( + <FormField + control={form.control} + name="modifiedSubtitle" + render={({ field }) => ( + <FormItem> + <FormControl> + <Input + placeholder="수정할 소제목 입력" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + )} + </div> + + {/* 내용 수정 */} + <div className="space-y-2 border rounded-lg p-3"> + <FormField + control={form.control} + name="isContentModified" + render={({ field }) => ( + <FormItem className="flex flex-row items-center space-x-3 space-y-0"> + <FormControl> + <Checkbox + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + <FormLabel className="font-normal cursor-pointer"> + 상세항목 수정 + </FormLabel> + </FormItem> + )} + /> + + {form.watch("isContentModified") && ( + <FormField + control={form.control} + name="modifiedContent" + render={({ field }) => ( + <FormItem> + <FormControl> + <MarkdownImageEditor + content={field.value || ""} + images={images} + onChange={handleContentImageChange} + placeholder="수정할 내용을 입력하세요..." + rows={6} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + )} + </div> + + {/* 협의 이력 표시 섹션 */} +{vendorInfo?.negotiationHistory && vendorInfo.negotiationHistory.length > 0 && ( + <div className="space-y-3 mb-4"> + <h3 className="text-sm font-semibold">협의 이력</h3> + <div className="border rounded-lg p-3 max-h-64 overflow-y-auto space-y-3"> + {vendorInfo.negotiationHistory.map((history, index) => ( + <div key={index} className="border-b pb-3 last:border-b-0 last:pb-0"> + <div className="flex justify-between text-xs text-muted-foreground mb-1"> + <div className="font-medium"> + {history.actorName || "시스템"} + {history.previousStatus && history.newStatus && ( + <span className="ml-2 text-xs"> + ({history.previousStatus} → {history.newStatus}) + </span> + )} + </div> + <div> + {new Date(history.createdAt).toLocaleString('ko-KR', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit' + })} + </div> + </div> + {history.comment && ( + <div className="text-sm p-2 bg-muted/30 rounded"> + {history.comment} + </div> + )} + </div> + ))} + </div> + </div> +)} + + {/* 협의 노트 */} + <FormField + control={form.control} + name="negotiationNote" + render={({ field }) => ( + <FormItem> + <FormLabel>협의 메모</FormLabel> + <FormControl> + <Textarea + placeholder="협의 과정에서의 메모나 특이사항을 기록하세요..." + {...field} + rows={3} + /> + </FormControl> + <FormDescription> + 벤더와의 협의 내용이나 변경 사유를 기록합니다 + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + </form> + </Form> + </div> + + <SheetFooter className="gap-2 pt-2 sm:space-x-0 flex-shrink-0"> + <SheetClose asChild> + <Button type="button" variant="outline"> + 취소 + </Button> + </SheetClose> + + <Button + onClick={form.handleSubmit(onSubmit)} + disabled={isUpdatePending} + > + {isUpdatePending && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + 저장 + </Button> + </SheetFooter> + </SheetContent> + </Sheet> + ) +}
\ No newline at end of file diff --git a/lib/basic-contract/gtc-vendor/view-clause-variables-dialog.tsx b/lib/basic-contract/gtc-vendor/view-clause-variables-dialog.tsx new file mode 100644 index 00000000..e500c069 --- /dev/null +++ b/lib/basic-contract/gtc-vendor/view-clause-variables-dialog.tsx @@ -0,0 +1,231 @@ +"use client" + +import * as React from "react" +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" +import { Badge } from "@/components/ui/badge" +import { Input } from "@/components/ui/input" + +import { Eye, Copy, Check, Settings2 } from "lucide-react" +import { toast } from "sonner" +import { cn } from "@/lib/utils" + +import { type GtcClauseTreeView } from "@/db/schema/gtc" + +interface ViewClauseVariablesDialogProps + extends React.ComponentPropsWithRef<typeof Dialog> { + clause: GtcClauseTreeView | null + onEditVariables?: () => void +} + +export function ViewClauseVariablesDialog({ + clause, + onEditVariables, + ...props +}: ViewClauseVariablesDialogProps) { + const [copiedField, setCopiedField] = React.useState<string | null>(null) + + const copyToClipboard = async (text: string, fieldName: string) => { + try { + await navigator.clipboard.writeText(text) + setCopiedField(fieldName) + toast.success(`${fieldName} 변수명이 복사되었습니다.`) + + // 2초 후 복사 상태 초기화 + setTimeout(() => { + setCopiedField(null) + }, 2000) + } catch (error) { + toast.error("복사 중 오류가 발생했습니다.") + } + } + + const copyAllVariables = async () => { + if (!clause) return + + const allVariables = [ + clause.autoNumberVariable, + clause.autoSubtitleVariable, + clause.autoContentVariable + ].filter(Boolean).join('\n') + + try { + await navigator.clipboard.writeText(allVariables) + toast.success("모든 변수명이 복사되었습니다.") + } catch (error) { + toast.error("복사 중 오류가 발생했습니다.") + } + } + + if (!clause) { + return null + } + + const variables = [ + { + label: "채번 변수명", + value: clause.autoNumberVariable, + fieldName: "채번", + description: "조항 번호를 표시하는 변수" + }, + { + label: "소제목 변수명", + value: clause.autoSubtitleVariable, + fieldName: "소제목", + description: "조항 제목을 표시하는 변수" + }, + { + label: "상세항목 변수명", + value: clause.autoContentVariable, + fieldName: "상세항목", + description: "조항 내용을 표시하는 변수" + } + ] + + return ( + <Dialog {...props}> + <DialogContent className="max-w-2xl"> + <DialogHeader> + <DialogTitle className="flex items-center gap-2"> + <Eye className="h-5 w-5" /> + PDFTron 변수명 보기 + </DialogTitle> + <DialogDescription> + 현재 조항에 설정된 PDFTron 변수명을 확인하고 복사할 수 있습니다. + </DialogDescription> + </DialogHeader> + + {/* 조항 정보 */} + <div className="p-3 bg-muted/50 rounded-lg"> + <div className="font-medium mb-2">조항 정보</div> + <div className="space-y-1 text-sm text-muted-foreground"> + <div className="flex items-center gap-2"> + <Badge variant="outline">{clause.itemNumber}</Badge> + <span>{clause.subtitle}</span> + <Badge variant={clause.hasAllVariableNames ? "default" : "destructive"}> + {clause.hasAllVariableNames ? "설정됨" : "미설정"} + </Badge> + </div> + {clause.fullPath && ( + <div>경로: {clause.fullPath}</div> + )} + {clause.category && ( + <div>분류: {clause.category}</div> + )} + </div> + </div> + + {/* 변수명 목록 */} + <div className="space-y-4"> + <div className="flex items-center justify-between"> + <h3 className="text-sm font-medium">설정된 변수명</h3> + <Button + variant="outline" + size="sm" + onClick={copyAllVariables} + className="h-8" + > + <Copy className="mr-2 h-3 w-3" /> + 전체 복사 + </Button> + </div> + + <div className="space-y-3"> + {variables.map((variable, index) => ( + <div key={index} className="space-y-2"> + <div className="flex items-center justify-between"> + <div> + <div className="text-sm font-medium">{variable.label}</div> + <div className="text-xs text-muted-foreground">{variable.description}</div> + </div> + <Button + variant="ghost" + size="sm" + onClick={() => copyToClipboard(variable.value, variable.fieldName)} + className="h-8 px-2" + > + {copiedField === variable.fieldName ? ( + <Check className="h-3 w-3 text-green-500" /> + ) : ( + <Copy className="h-3 w-3" /> + )} + </Button> + </div> + <div className="relative"> + <Input + value={variable.value} + readOnly + className="font-mono text-xs bg-muted/30" + /> + </div> + </div> + ))} + </div> + </div> + + {/* PDFTron 템플릿 미리보기 */} + <div className="space-y-2"> + <h3 className="text-sm font-medium">PDFTron 템플릿 미리보기</h3> + <div className="p-3 bg-gray-50 border rounded-lg"> + <div className="space-y-2 text-xs font-mono"> + <div className="text-blue-600"> + {"{{" + clause.autoNumberVariable + "}}"}. {"{{" + clause.autoSubtitleVariable + "}}"} + </div> + <div className="text-gray-600 ml-4"> + {"{{" + clause.autoContentVariable + "}}"} + </div> + </div> + <div className="text-xs text-muted-foreground mt-2"> + 실제 문서에서 위와 같은 형태로 표시됩니다. + </div> + </div> + </div> + + {/* 실제 값 미리보기 */} + <div className="space-y-2"> + <h3 className="text-sm font-medium">실제 값 미리보기</h3> + <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg"> + <div className="space-y-2 text-sm"> + <div className="font-medium text-blue-900"> + {clause.itemNumber}. {clause.subtitle} + </div> + {clause.content && ( + <div className="text-blue-800 ml-4"> + {clause.content.length > 150 + ? `${clause.content.substring(0, 150)}...` + : clause.content + } + </div> + )} + {!clause.content && ( + <div className="text-blue-600 ml-4 italic"> + (그룹핑 조항 - 상세내용 없음) + </div> + )} + </div> + </div> + </div> + + <DialogFooter> + {onEditVariables && ( + <Button + variant="outline" + onClick={() => { + props.onOpenChange?.(false) + onEditVariables() + }} + > + <Settings2 className="mr-2 h-4 w-4" /> + 변수 설정 수정 + </Button> + )} + <Button + onClick={() => props.onOpenChange?.(false)} + > + Close + </Button> + </DialogFooter> + </DialogContent> + </Dialog> + ) +}
\ No newline at end of file |