diff options
Diffstat (limited to 'lib/vendor-document-list/ship')
4 files changed, 258 insertions, 232 deletions
diff --git a/lib/vendor-document-list/ship/enhanced-doc-table-columns.tsx b/lib/vendor-document-list/ship/enhanced-doc-table-columns.tsx index 9c13573c..51c104dc 100644 --- a/lib/vendor-document-list/ship/enhanced-doc-table-columns.tsx +++ b/lib/vendor-document-list/ship/enhanced-doc-table-columns.tsx @@ -59,7 +59,7 @@ export function getSimplifiedDocumentColumns({ id: "select", header: ({ table }) => ( <div className="flex items-center justify-center"> - <span className="text-xs text-gray-500">선택</span> + <span className="text-xs text-gray-500">Select</span> </div> ), cell: ({ row }) => { @@ -78,7 +78,7 @@ export function getSimplifiedDocumentColumns({ { accessorKey: "docNumber", header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="문서번호" /> + <DataTableColumnHeaderSimple column={column} title="Document No" /> ), cell: ({ row }) => { const doc = row.original @@ -90,7 +90,7 @@ export function getSimplifiedDocumentColumns({ size: 120, enableResizing: true, meta: { - excelHeader: "문서번호" + excelHeader: "Document No" }, }, @@ -98,7 +98,7 @@ export function getSimplifiedDocumentColumns({ { accessorKey: "title", header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="문서명" /> + <DataTableColumnHeaderSimple column={column} title="Title" /> ), cell: ({ row }) => { const doc = row.original @@ -110,7 +110,7 @@ export function getSimplifiedDocumentColumns({ enableResizing: true, maxSize:300, meta: { - excelHeader: "문서명" + excelHeader: "Title" }, }, @@ -118,7 +118,7 @@ export function getSimplifiedDocumentColumns({ { accessorKey: "projectCode", header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="프로젝트" /> + <DataTableColumnHeaderSimple column={column} title="Project" /> ), cell: ({ row }) => { const projectCode = row.original.projectCode @@ -131,7 +131,7 @@ export function getSimplifiedDocumentColumns({ maxSize:100, meta: { - excelHeader: "프로젝트" + excelHeader: "Project" }, }, @@ -141,7 +141,7 @@ export function getSimplifiedDocumentColumns({ header: ({ table }) => { // 첫 번째 행의 firstStageName을 그룹 헤더로 사용 const firstRow = table.getRowModel().rows[0]?.original - const stageName = firstRow?.firstStageName || "1차 스테이지" + const stageName = firstRow?.firstStageName || "First Stage" return ( <div className="text-center font-medium text-gray-700"> {stageName} @@ -152,27 +152,27 @@ export function getSimplifiedDocumentColumns({ { accessorKey: "firstStagePlanDate", header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="계획일" /> + <DataTableColumnHeaderSimple column={column} title="Planned Date" /> ), cell: ({ row }) => { return <FirstStagePlanDateCell row={row} /> }, enableResizing: true, meta: { - excelHeader: "1차 계획일" + excelHeader: "First Planned Date" }, }, { accessorKey: "firstStageActualDate", header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="실제일" /> + <DataTableColumnHeaderSimple column={column} title="Actual Date" /> ), cell: ({ row }) => { return <FirstStageActualDateCell row={row} /> }, enableResizing: true, meta: { - excelHeader: "1차 실제일" + excelHeader: "First Actual Date" }, }, ], @@ -184,7 +184,7 @@ export function getSimplifiedDocumentColumns({ header: ({ table }) => { // 첫 번째 행의 secondStageName을 그룹 헤더로 사용 const firstRow = table.getRowModel().rows[0]?.original - const stageName = firstRow?.secondStageName || "2차 스테이지" + const stageName = firstRow?.secondStageName || "Second Stage" return ( <div className="text-center font-medium text-gray-700"> {stageName} @@ -195,27 +195,27 @@ export function getSimplifiedDocumentColumns({ { accessorKey: "secondStagePlanDate", header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="계획일" /> + <DataTableColumnHeaderSimple column={column} title="Planned Date" /> ), cell: ({ row }) => { return <SecondStagePlanDateCell row={row} /> }, enableResizing: true, meta: { - excelHeader: "2차 계획일" + excelHeader: "Second Planned Date" }, }, { accessorKey: "secondStageActualDate", header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="실제일" /> + <DataTableColumnHeaderSimple column={column} title="Actual Date" /> ), cell: ({ row }) => { return <SecondStageActualDateCell row={row} /> }, enableResizing: true, meta: { - excelHeader: "2차 실제일" + excelHeader: "Second Actual Date" }, }, ], @@ -225,7 +225,7 @@ export function getSimplifiedDocumentColumns({ { accessorKey: "attachmentCount", header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="파일" /> + <DataTableColumnHeaderSimple column={column} title="Files" /> ), cell: ({ row }) => { const count = row.original.attachmentCount || 0 @@ -237,7 +237,7 @@ export function getSimplifiedDocumentColumns({ size: 60, enableResizing: true, meta: { - excelHeader: "첨부파일" + excelHeader: "Attachments" }, }, @@ -245,7 +245,7 @@ export function getSimplifiedDocumentColumns({ { accessorKey: "updatedAt", header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="업데이트" /> + <DataTableColumnHeaderSimple column={column} title="Updated" /> ), cell: ({ cell, row }) => { return ( @@ -254,7 +254,7 @@ export function getSimplifiedDocumentColumns({ }, enableResizing: true, meta: { - excelHeader: "업데이트" + excelHeader: "Updated" }, }, diff --git a/lib/vendor-document-list/ship/enhanced-documents-table.tsx b/lib/vendor-document-list/ship/enhanced-documents-table.tsx index 2354a9be..9885c027 100644 --- a/lib/vendor-document-list/ship/enhanced-documents-table.tsx +++ b/lib/vendor-document-list/ship/enhanced-documents-table.tsx @@ -25,17 +25,17 @@ import { EnhancedDocTableToolbarActions } from "./enhanced-doc-table-toolbar-act const DRAWING_KIND_INFO = { B3: { title: "B3 Vendor", - description: "Approval → Work 단계로 진행되는 승인 중심 도면", + description: "Approval-focused drawings progressing through Approval → Work stages", color: "bg-blue-50 text-blue-700 border-blue-200" }, B4: { title: "B4 GTT", - description: "Pre → Work 단계로 진행되는 DOLCE 연동 도면", + description: "DOLCE-integrated drawings progressing through Pre → Work stages", color: "bg-green-50 text-green-700 border-green-200" }, B5: { title: "B5 FMEA", - description: "First → Second 단계로 진행되는 순차적 도면", + description: "Sequential drawings progressing through First → Second stages", color: "bg-purple-50 text-purple-700 border-purple-200" } } as const @@ -79,22 +79,22 @@ export function SimplifiedDocumentsTable({ const advancedFilterFields: DataTableAdvancedFilterField<SimplifiedDocumentsView>[] = [ { id: "docNumber", - label: "문서번호", - type: "text", - }, - { - id: "vendorDocNumber", - label: "벤더 문서번호", + label: "Document No", type: "text", }, + // { + // id: "vendorDocNumber", + // label: "Vendor Document No", + // type: "text", + // }, { id: "title", - label: "문서제목", + label: "Document Title", type: "text", }, { id: "drawingKind", - label: "문서종류", + label: "Document Type", type: "select", options: [ { label: "B3", value: "B3" }, @@ -104,78 +104,78 @@ export function SimplifiedDocumentsTable({ }, { id: "projectCode", - label: "프로젝트 코드", + label: "Project Code", type: "text", }, { id: "vendorName", - label: "벤더명", + label: "Vendor Name", type: "text", }, { id: "vendorCode", - label: "벤더 코드", + label: "Vendor Code", type: "text", }, { id: "pic", - label: "담당자", + label: "PIC", type: "text", }, { id: "status", - label: "문서 상태", + label: "Document Status", type: "select", options: [ - { label: "활성", value: "ACTIVE" }, - { label: "비활성", value: "INACTIVE" }, - { label: "보류", value: "PENDING" }, - { label: "완료", value: "COMPLETED" }, + { label: "Active", value: "ACTIVE" }, + { label: "Inactive", value: "INACTIVE" }, + { label: "Pending", value: "PENDING" }, + { label: "Completed", value: "COMPLETED" }, ], }, { id: "firstStageName", - label: "1차 스테이지", + label: "First Stage", type: "text", }, { id: "secondStageName", - label: "2차 스테이지", + label: "Second Stage", type: "text", }, { id: "firstStagePlanDate", - label: "1차 계획일", + label: "First Planned Date", type: "date", }, { id: "firstStageActualDate", - label: "1차 실제일", + label: "First Actual Date", type: "date", }, { id: "secondStagePlanDate", - label: "2차 계획일", + label: "Second Planned Date", type: "date", }, { id: "secondStageActualDate", - label: "2차 실제일", + label: "Second Actual Date", type: "date", }, { id: "issuedDate", - label: "발행일", + label: "Issue Date", type: "date", }, { id: "createdAt", - label: "생성일", + label: "Created Date", type: "date", }, { id: "updatedAt", - label: "수정일", + label: "Updated Date", type: "date", }, ] @@ -184,32 +184,32 @@ export function SimplifiedDocumentsTable({ const b4FilterFields: DataTableAdvancedFilterField<SimplifiedDocumentsView>[] = [ { id: "cGbn", - label: "C 구분", + label: "C Category", type: "text", }, { id: "dGbn", - label: "D 구분", + label: "D Category", type: "text", }, { id: "degreeGbn", - label: "Degree 구분", + label: "Degree Category", type: "text", }, { id: "deptGbn", - label: "Dept 구분", + label: "Dept Category", type: "text", }, { id: "jGbn", - label: "J 구분", + label: "J Category", type: "text", }, { id: "sGbn", - label: "S 구분", + label: "S Category", type: "text", }, ] @@ -246,17 +246,17 @@ export function SimplifiedDocumentsTable({ {kindInfo && ( <div className="flex items-center justify-between"> <div className="flex items-center gap-4"> - <Badge variant="default" className="flex items-center gap-1 text-sm"> + {/* <Badge variant="default" className="flex items-center gap-1 text-sm"> <FileText className="w-4 h-4" /> {kindInfo.title} </Badge> <span className="text-sm text-muted-foreground"> {kindInfo.description} - </span> + </span> */} </div> <div className="flex items-center gap-2"> <Badge variant="outline"> - {total}개 문서 + {total} documents </Badge> </div> </div> diff --git a/lib/vendor-document-list/ship/import-from-dolce-button.tsx b/lib/vendor-document-list/ship/import-from-dolce-button.tsx index d4728d22..de9e63bc 100644 --- a/lib/vendor-document-list/ship/import-from-dolce-button.tsx +++ b/lib/vendor-document-list/ship/import-from-dolce-button.tsx @@ -72,7 +72,7 @@ export function ImportFromDOLCEButton({ setVendorContractIds(contractIds) } catch (error) { console.error('Failed to fetch vendor contracts:', error) - toast.error('계약 정보를 가져오는데 실패했습니다.') + toast.error('Failed to fetch contract information.') } finally { setLoadingVendorContracts(false) } @@ -142,7 +142,7 @@ export function ImportFromDOLCEButton({ } catch (error) { console.error('Failed to fetch import statuses:', error) - toast.error('상태를 확인할 수 없습니다. 프로젝트 설정을 확인해주세요.') + toast.error('Unable to check status. Please verify project settings.') } finally { setStatusLoading(false) } @@ -230,16 +230,16 @@ export function ImportFromDOLCEButton({ if (totalResult.success) { toast.success( - `DOLCE 가져오기 완료`, + `DOLCE import completed`, { - description: `신규 ${totalResult.newCount}건, 업데이트 ${totalResult.updatedCount}건, 건너뜀 ${totalResult.skippedCount}건 (${contractIds.length}개 계약)` + description: `New ${totalResult.newCount}, Updated ${totalResult.updatedCount}, Skipped ${totalResult.skippedCount} (${contractIds.length} contracts)` } ) } else { toast.error( - `DOLCE 가져오기 부분 실패`, + `DOLCE import partially failed`, { - description: '일부 계약에서 가져오기에 실패했습니다.' + description: 'Some contracts failed to import.' } ) } @@ -252,34 +252,34 @@ export function ImportFromDOLCEButton({ setImportProgress(0) setIsImporting(false) - toast.error('DOLCE 가져오기 실패', { - description: error instanceof Error ? error.message : '알 수 없는 오류가 발생했습니다.' + toast.error('DOLCE import failed', { + description: error instanceof Error ? error.message : 'An unknown error occurred.' }) } } const getStatusBadge = () => { if (loadingVendorContracts) { - return <Badge variant="secondary">계약 정보 로딩 중...</Badge> + return <Badge variant="secondary">Loading contract information...</Badge> } if (statusLoading) { - return <Badge variant="secondary">DOLCE 연결 확인 중...</Badge> + return <Badge variant="secondary">Checking DOLCE connection...</Badge> } if (importStatusMap.size === 0) { - return <Badge variant="destructive">DOLCE 연결 오류</Badge> + return <Badge variant="destructive">DOLCE Connection Error</Badge> } if (!totalStats.importEnabled) { - return <Badge variant="secondary">DOLCE 가져오기 비활성화</Badge> + return <Badge variant="secondary">DOLCE Import Disabled</Badge> } if (totalStats.newDocuments > 0 || totalStats.updatedDocuments > 0) { return ( <Badge variant="samsung" className="gap-1"> <AlertTriangle className="w-3 h-3" /> - 업데이트 가능 ({contractIds.length}개 계약) + Updates Available ({contractIds.length} contracts) </Badge> ) } @@ -287,7 +287,7 @@ export function ImportFromDOLCEButton({ return ( <Badge variant="default" className="gap-1 bg-green-500 hover:bg-green-600"> <CheckCircle className="w-3 h-3" /> - DOLCE와 동기화됨 + Synchronized with DOLCE </Badge> ) } @@ -316,7 +316,7 @@ export function ImportFromDOLCEButton({ ) : ( <Download className="w-4 h-4" /> )} - <span className="hidden sm:inline">DOLCE에서 가져오기</span> + <span className="hidden sm:inline">Import from DOLCE</span> {totalStats.newDocuments + totalStats.updatedDocuments > 0 && ( <Badge variant="samsung" @@ -332,9 +332,9 @@ export function ImportFromDOLCEButton({ <PopoverContent className="w-96"> <div className="space-y-4"> <div className="space-y-2"> - <h4 className="font-medium">DOLCE 가져오기 상태</h4> + <h4 className="font-medium">DOLCE Import Status</h4> <div className="flex items-center justify-between"> - <span className="text-sm text-muted-foreground">현재 상태</span> + <span className="text-sm text-muted-foreground">Current Status</span> {getStatusBadge()} </div> </div> @@ -342,15 +342,15 @@ export function ImportFromDOLCEButton({ {/* 계약 소스 표시 */} {allDocuments.length === 0 && vendorContractIds.length > 0 && ( <div className="text-xs text-blue-600 bg-blue-50 p-2 rounded"> - 문서가 없어서 전체 계약에서 가져오기를 진행합니다. + No documents found, importing from all contracts. </div> )} {/* 다중 계약 정보 표시 */} {contractIds.length > 1 && ( <div className="text-sm"> - <div className="text-muted-foreground">대상 계약</div> - <div className="font-medium">{contractIds.length}개 계약</div> + <div className="text-muted-foreground">Target Contracts</div> + <div className="font-medium">{contractIds.length} contracts</div> <div className="text-xs text-muted-foreground"> Contract IDs: {contractIds.join(', ')} </div> @@ -363,25 +363,25 @@ export function ImportFromDOLCEButton({ <div className="grid grid-cols-2 gap-4 text-sm"> <div> - <div className="text-muted-foreground">신규 문서</div> - <div className="font-medium">{totalStats.newDocuments || 0}건</div> + <div className="text-muted-foreground">New Documents</div> + <div className="font-medium">{totalStats.newDocuments || 0}</div> </div> <div> - <div className="text-muted-foreground">업데이트</div> - <div className="font-medium">{totalStats.updatedDocuments || 0}건</div> + <div className="text-muted-foreground">Updates</div> + <div className="font-medium">{totalStats.updatedDocuments || 0}</div> </div> </div> <div className="text-sm"> - <div className="text-muted-foreground">DOLCE 전체 문서 (B3/B4/B5)</div> - <div className="font-medium">{totalStats.availableDocuments || 0}건</div> + <div className="text-muted-foreground">Total DOLCE Documents (B3/B4/B5)</div> + <div className="font-medium">{totalStats.availableDocuments || 0}</div> </div> {/* 각 계약별 세부 정보 (펼치기/접기 가능) */} {contractIds.length > 1 && ( <details className="text-sm"> <summary className="cursor-pointer text-muted-foreground hover:text-foreground"> - 계약별 세부 정보 + Details by Contract </summary> <div className="mt-2 space-y-2 pl-2 border-l-2 border-muted"> {contractIds.map(contractId => { @@ -391,10 +391,10 @@ export function ImportFromDOLCEButton({ <div className="font-medium">Contract {contractId}</div> {status ? ( <div className="text-muted-foreground"> - 신규 {status.newDocuments}건, 업데이트 {status.updatedDocuments}건 + New {status.newDocuments}, Updates {status.updatedDocuments} </div> ) : ( - <div className="text-destructive">상태 확인 실패</div> + <div className="text-destructive">Status check failed</div> )} </div> ) @@ -417,12 +417,12 @@ export function ImportFromDOLCEButton({ {isImporting ? ( <> <Loader2 className="w-4 h-4 mr-2 animate-spin" /> - 가져오는 중... + Importing... </> ) : ( <> <Download className="w-4 h-4 mr-2" /> - 지금 가져오기 + Import Now </> )} </Button> @@ -448,10 +448,10 @@ export function ImportFromDOLCEButton({ <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}> <DialogContent className="sm:max-w-md"> <DialogHeader> - <DialogTitle>DOLCE에서 문서 목록 가져오기</DialogTitle> + <DialogTitle>Import Document List from DOLCE</DialogTitle> <DialogDescription> - 삼성중공업 DOLCE 시스템에서 최신 문서 목록을 가져옵니다. - {contractIds.length > 1 && ` (${contractIds.length}개 계약 대상)`} + Import the latest document list from Samsung Heavy Industries DOLCE system. + {contractIds.length > 1 && ` (${contractIds.length} contracts targeted)`} </DialogDescription> </DialogHeader> @@ -459,20 +459,20 @@ export function ImportFromDOLCEButton({ {totalStats && ( <div className="rounded-lg border p-4 space-y-3"> <div className="flex items-center justify-between text-sm"> - <span>가져올 항목</span> + <span>Items to Import</span> <span className="font-medium"> - {totalStats.newDocuments + totalStats.updatedDocuments}건 + {totalStats.newDocuments + totalStats.updatedDocuments} </span> </div> <div className="text-xs text-muted-foreground"> - 신규 문서와 업데이트된 문서가 포함됩니다. (B3, B4, B5) + Includes new and updated documents (B3, B4, B5). <br /> - B4 문서의 경우 GTTPreDwg, GTTWorkingDwg 이슈 스테이지가 자동 생성됩니다. + For B4 documents, GTTPreDwg and GTTWorkingDwg issue stages will be auto-generated. {contractIds.length > 1 && ( <> <br /> - {contractIds.length}개 계약에서 순차적으로 가져옵니다. + Will import sequentially from {contractIds.length} contracts. </> )} </div> @@ -480,7 +480,7 @@ export function ImportFromDOLCEButton({ {isImporting && ( <div className="space-y-2"> <div className="flex items-center justify-between text-sm"> - <span>진행률</span> + <span>Progress</span> <span>{importProgress}%</span> </div> <Progress value={importProgress} className="h-2" /> @@ -495,7 +495,7 @@ export function ImportFromDOLCEButton({ onClick={() => setIsDialogOpen(false)} disabled={isImporting} > - 취소 + Cancel </Button> <Button onClick={handleImport} @@ -504,12 +504,12 @@ export function ImportFromDOLCEButton({ {isImporting ? ( <> <Loader2 className="w-4 h-4 mr-2 animate-spin" /> - 가져오는 중... + Importing... </> ) : ( <> <Download className="w-4 h-4 mr-2" /> - 가져오기 시작 + Start Import </> )} </Button> diff --git a/lib/vendor-document-list/ship/send-to-shi-button.tsx b/lib/vendor-document-list/ship/send-to-shi-button.tsx index 61893da5..4607c994 100644 --- a/lib/vendor-document-list/ship/send-to-shi-button.tsx +++ b/lib/vendor-document-list/ship/send-to-shi-button.tsx @@ -1,8 +1,8 @@ -// components/sync/send-to-shi-button.tsx (다중 계약 버전) +// components/sync/send-to-shi-button.tsx (최종 완성 버전) "use client" import * as React from "react" -import { Send, Loader2, CheckCircle, AlertTriangle, Settings } from "lucide-react" +import { Send, Loader2, CheckCircle, AlertTriangle, Settings, RefreshCw } from "lucide-react" import { toast } from "sonner" import { Button } from "@/components/ui/button" @@ -22,7 +22,9 @@ import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Separator } from "@/components/ui/separator" import { ScrollArea } from "@/components/ui/scroll-area" -import { useSyncStatus, useTriggerSync } from "@/hooks/use-sync-status" +import { Alert, AlertDescription } from "@/components/ui/alert" +// ✅ 업데이트된 Hook import +import { useClientSyncStatus, useTriggerSync, syncUtils } from "@/hooks/use-sync-status" import type { EnhancedDocument } from "@/types/enhanced-documents" interface SendToSHIButtonProps { @@ -31,13 +33,6 @@ interface SendToSHIButtonProps { projectType: "ship" | "plant" } -interface ContractSyncStatus { - contractId: number - syncStatus: any - isLoading: boolean - error: any -} - export function SendToSHIButton({ documents = [], onSyncComplete, @@ -49,75 +44,45 @@ export function SendToSHIButton({ const targetSystem = projectType === 'ship' ? "DOLCE" : "SWP" - // documents에서 contractId 목록 추출 + // 문서에서 유효한 계약 ID 목록 추출 const documentsContractIds = React.useMemo(() => { - const uniqueIds = [...new Set(documents.map(doc => doc.contractId).filter(Boolean))] + const validIds = documents + .map(doc => doc.contractId) + .filter((id): id is number => typeof id === 'number' && id > 0) + + const uniqueIds = [...new Set(validIds)] return uniqueIds.sort() }, [documents]) - // 각 contract별 동기화 상태 조회 - const contractStatuses = React.useMemo(() => { - return documentsContractIds.map(contractId => { - const { - syncStatus, - isLoading, - error, - refetch - } = useSyncStatus(contractId, targetSystem) - - return { - contractId, - syncStatus, - isLoading, - error, - refetch - } - }) - }, [documentsContractIds, targetSystem]) - - const { - triggerSync, - isLoading: isSyncing, - error: syncError - } = useTriggerSync() - - // 전체 통계 계산 - const totalStats = React.useMemo(() => { - let totalPending = 0 - let totalSynced = 0 - let totalFailed = 0 - let hasError = false - let isLoading = false - - contractStatuses.forEach(({ syncStatus, error, isLoading: loading }) => { - if (error) hasError = true - if (loading) isLoading = true - if (syncStatus) { - totalPending += syncStatus.pendingChanges || 0 - totalSynced += syncStatus.syncedChanges || 0 - totalFailed += syncStatus.failedChanges || 0 - } - }) - - return { - totalPending, - totalSynced, - totalFailed, - hasError, - isLoading, - canSync: totalPending > 0 && !hasError - } - }, [contractStatuses]) + // ✅ 클라이언트 전용 Hook 사용 (서버 사이드 렌더링 호환) + const { contractStatuses, totalStats, refetchAll } = useClientSyncStatus( + documentsContractIds, + targetSystem + ) + + const { triggerSync, isLoading: isSyncing, error: syncError } = useTriggerSync() - // 에러 상태 표시 + // 개발 환경에서 디버깅 정보 React.useEffect(() => { - if (totalStats.hasError) { - console.warn('Failed to load sync status for some contracts') + if (process.env.NODE_ENV === 'development') { + console.log('SendToSHIButton Debug Info:', { + documentsContractIds, + totalStats, + contractStatuses: contractStatuses.map(({ contractId, syncStatus, error }) => ({ + contractId, + pendingChanges: syncStatus?.pendingChanges, + hasError: !!error + })) + }) } - }, [totalStats.hasError]) + }, [documentsContractIds, totalStats, contractStatuses]) + // 동기화 실행 함수 const handleSync = async () => { - if (documentsContractIds.length === 0) return + if (documentsContractIds.length === 0) { + toast.info('동기화할 계약이 없습니다.') + return + } setSyncProgress(0) let successfulSyncs = 0 @@ -127,9 +92,17 @@ export function SendToSHIButton({ const errors: string[] = [] try { - const contractsToSync = contractStatuses.filter( - ({ syncStatus, error }) => !error && syncStatus?.syncEnabled && syncStatus?.pendingChanges > 0 - ) + // 동기화 가능한 계약들만 필터링 + const contractsToSync = contractStatuses.filter(({ syncStatus, error }) => { + if (error) { + console.warn(`Contract ${contractStatuses.find(c => c.error === error)?.contractId} has error:`, error) + return false + } + if (!syncStatus) return false + if (!syncStatus.syncEnabled) return false + if (syncStatus.pendingChanges <= 0) return false + return true + }) if (contractsToSync.length === 0) { toast.info('동기화할 변경사항이 없습니다.') @@ -137,12 +110,15 @@ export function SendToSHIButton({ return } + console.log(`Starting sync for ${contractsToSync.length} contracts`) + // 각 contract별로 순차 동기화 for (let i = 0; i < contractsToSync.length; i++) { const { contractId } = contractsToSync[i] setCurrentSyncingContract(contractId) try { + console.log(`Syncing contract ${contractId}...`) const result = await triggerSync({ contractId, targetSystem @@ -151,17 +127,19 @@ export function SendToSHIButton({ if (result?.success) { successfulSyncs++ totalSuccessCount += result.successCount || 0 + console.log(`Contract ${contractId} sync successful:`, result) } else { failedSyncs++ totalFailureCount += result?.failureCount || 0 - if (result?.errors?.[0]) { - errors.push(`Contract ${contractId}: ${result.errors[0]}`) - } + const errorMsg = result?.errors?.[0] || result?.message || 'Unknown sync error' + errors.push(`Contract ${contractId}: ${errorMsg}`) + console.error(`Contract ${contractId} sync failed:`, result) } } catch (error) { failedSyncs++ const errorMessage = error instanceof Error ? error.message : '알 수 없는 오류' errors.push(`Contract ${contractId}: ${errorMessage}`) + console.error(`Contract ${contractId} sync exception:`, error) } // 진행률 업데이트 @@ -170,6 +148,7 @@ export function SendToSHIButton({ setCurrentSyncingContract(null) + // 결과 처리 및 토스트 표시 setTimeout(() => { setSyncProgress(0) setIsDialogOpen(false) @@ -185,7 +164,7 @@ export function SendToSHIButton({ toast.warning( `부분 동기화 완료: ${successfulSyncs}개 성공, ${failedSyncs}개 실패`, { - description: errors[0] || '일부 계약 동기화에 실패했습니다.' + description: errors.slice(0, 3).join(', ') + (errors.length > 3 ? ' 외 더보기...' : '') } ) } else { @@ -198,7 +177,7 @@ export function SendToSHIButton({ } // 모든 contract 상태 갱신 - contractStatuses.forEach(({ refetch }) => refetch?.()) + refetchAll() onSyncComplete?.() }, 500) @@ -206,19 +185,32 @@ export function SendToSHIButton({ setSyncProgress(0) setCurrentSyncingContract(null) + const errorMessage = syncUtils.formatError(error as any) toast.error('동기화 실패', { - description: error instanceof Error ? error.message : '알 수 없는 오류가 발생했습니다.' + description: errorMessage }) + console.error('Sync process failed:', error) } } + // 동기화 상태에 따른 뱃지 생성 const getSyncStatusBadge = () => { if (totalStats.isLoading) { - return <Badge variant="secondary">확인 중...</Badge> + return ( + <Badge variant="secondary" className="gap-1"> + <Loader2 className="w-3 h-3 animate-spin" /> + 확인 중... + </Badge> + ) } if (totalStats.hasError) { - return <Badge variant="destructive">오류</Badge> + return ( + <Badge variant="destructive" className="gap-1"> + <AlertTriangle className="w-3 h-3" /> + 연결 오류 + </Badge> + ) } if (documentsContractIds.length === 0) { @@ -246,10 +238,6 @@ export function SendToSHIButton({ return <Badge variant="secondary">변경사항 없음</Badge> } - const refreshAllStatuses = () => { - contractStatuses.forEach(({ refetch }) => refetch?.()) - } - return ( <> <Popover> @@ -258,7 +246,7 @@ export function SendToSHIButton({ <Button variant="default" size="sm" - className="flex items-center bg-blue-600 hover:bg-blue-700" + className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700" disabled={isSyncing || totalStats.isLoading || documentsContractIds.length === 0} > {isSyncing ? ( @@ -270,7 +258,7 @@ export function SendToSHIButton({ {totalStats.totalPending > 0 && ( <Badge variant="destructive" - className="h-5 w-5 p-0 text-xs flex items-center justify-center" + className="h-5 w-5 p-0 text-xs flex items-center justify-center ml-1" > {totalStats.totalPending} </Badge> @@ -279,33 +267,66 @@ export function SendToSHIButton({ </div> </PopoverTrigger> - <PopoverContent className="w-96"> + <PopoverContent className="w-96" align="end"> <div className="space-y-4"> <div className="space-y-2"> - <h4 className="font-medium">SHI 동기화 상태</h4> + <div className="flex items-center justify-between"> + <h4 className="font-medium">SHI 동기화 상태</h4> + <Button + variant="ghost" + size="sm" + onClick={refetchAll} + disabled={totalStats.isLoading} + className="h-6 w-6 p-0" + > + {totalStats.isLoading ? ( + <Loader2 className="w-3 h-3 animate-spin" /> + ) : ( + <RefreshCw className="w-3 h-3" /> + )} + </Button> + </div> + <div className="flex items-center justify-between"> <span className="text-sm text-muted-foreground">전체 상태</span> {getSyncStatusBadge()} </div> + <div className="text-xs text-muted-foreground"> - {documentsContractIds.length}개 계약 대상 + {documentsContractIds.length}개 계약 대상 • {targetSystem} 시스템 </div> </div> + {/* 에러 상태 표시 */} + {totalStats.hasError && ( + <Alert variant="destructive"> + <AlertTriangle className="h-4 w-4" /> + <AlertDescription> + 일부 계약의 동기화 상태를 확인할 수 없습니다. 네트워크 연결을 확인해주세요. + {process.env.NODE_ENV === 'development' && ( + <div className="text-xs mt-1 font-mono"> + Debug: {contractStatuses.filter(({ error }) => error).length}개 계약에서 오류 + </div> + )} + </AlertDescription> + </Alert> + )} + + {/* 정상 상태일 때 통계 표시 */} {!totalStats.hasError && documentsContractIds.length > 0 && ( <div className="space-y-3"> <Separator /> <div className="grid grid-cols-3 gap-4 text-sm"> - <div> + <div className="text-center"> <div className="text-muted-foreground">대기 중</div> - <div className="font-medium">{totalStats.totalPending}건</div> + <div className="font-medium text-orange-600">{totalStats.totalPending}건</div> </div> - <div> + <div className="text-center"> <div className="text-muted-foreground">동기화됨</div> - <div className="font-medium">{totalStats.totalSynced}건</div> + <div className="font-medium text-green-600">{totalStats.totalSynced}건</div> </div> - <div> + <div className="text-center"> <div className="text-muted-foreground">실패</div> <div className="font-medium text-red-600">{totalStats.totalFailed}건</div> </div> @@ -319,17 +340,26 @@ export function SendToSHIButton({ <div className="space-y-2"> {contractStatuses.map(({ contractId, syncStatus, isLoading, error }) => ( <div key={contractId} className="flex items-center justify-between text-xs p-2 rounded border"> - <span>Contract {contractId}</span> + <span className="font-medium">Contract {contractId}</span> {isLoading ? ( - <Badge variant="secondary" className="text-xs">로딩...</Badge> + <Badge variant="secondary" className="text-xs"> + <Loader2 className="w-3 h-3 mr-1 animate-spin" /> + 로딩... + </Badge> ) : error ? ( - <Badge variant="destructive" className="text-xs">오류</Badge> - ) : syncStatus?.pendingChanges > 0 ? ( + <Badge variant="destructive" className="text-xs"> + <AlertTriangle className="w-3 h-3 mr-1" /> + 오류 + </Badge> + ) : syncStatus && syncStatus.pendingChanges > 0 ? ( <Badge variant="destructive" className="text-xs"> {syncStatus.pendingChanges}건 대기 </Badge> ) : ( - <Badge variant="secondary" className="text-xs">동기화됨</Badge> + <Badge variant="secondary" className="text-xs"> + <CheckCircle className="w-3 h-3 mr-1" /> + 최신 + </Badge> )} </div> ))} @@ -340,28 +370,18 @@ export function SendToSHIButton({ </div> )} - {totalStats.hasError && ( - <div className="space-y-2"> - <Separator /> - <div className="text-sm text-red-600"> - <div className="font-medium">연결 오류</div> - <div className="text-xs">일부 계약의 동기화 상태를 확인할 수 없습니다.</div> - </div> - </div> - )} - + {/* 계약 정보가 없는 경우 */} {documentsContractIds.length === 0 && ( - <div className="space-y-2"> - <Separator /> - <div className="text-sm text-muted-foreground"> - <div className="font-medium">계약 정보 없음</div> - <div className="text-xs">동기화할 문서가 없습니다.</div> - </div> - </div> + <Alert> + <AlertDescription> + 동기화할 문서가 없습니다. 문서를 선택해주세요. + </AlertDescription> + </Alert> )} <Separator /> + {/* 액션 버튼들 */} <div className="flex gap-2"> <Button onClick={() => setIsDialogOpen(true)} @@ -385,8 +405,9 @@ export function SendToSHIButton({ <Button variant="outline" size="sm" - onClick={refreshAllStatuses} + onClick={refetchAll} disabled={totalStats.isLoading} + className="px-3" > {totalStats.isLoading ? ( <Loader2 className="w-4 h-4 animate-spin" /> @@ -403,9 +424,12 @@ export function SendToSHIButton({ <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}> <DialogContent className="sm:max-w-md"> <DialogHeader> - <DialogTitle>SHI 시스템으로 동기화</DialogTitle> + <DialogTitle className="flex items-center gap-2"> + <Send className="w-5 h-5" /> + SHI 시스템으로 동기화 + </DialogTitle> <DialogDescription> - {documentsContractIds.length}개 계약의 변경된 문서 데이터를 SHI 시스템으로 전송합니다. + {documentsContractIds.length}개 계약의 변경된 문서 데이터를 {targetSystem} 시스템으로 전송합니다. </DialogDescription> </DialogHeader> @@ -434,7 +458,8 @@ export function SendToSHIButton({ </div> <Progress value={syncProgress} className="h-2" /> {currentSyncingContract && ( - <div className="text-xs text-muted-foreground"> + <div className="text-xs text-muted-foreground flex items-center gap-1"> + <Loader2 className="w-3 h-3 animate-spin" /> 현재 처리 중: Contract {currentSyncingContract} </div> )} @@ -444,19 +469,20 @@ export function SendToSHIButton({ )} {totalStats.hasError && ( - <div className="rounded-lg border border-red-200 p-4"> - <div className="text-sm text-red-600"> - 일부 계약의 동기화 상태를 확인할 수 없습니다. 네트워크 연결을 확인해주세요. - </div> - </div> + <Alert variant="destructive"> + <AlertTriangle className="h-4 w-4" /> + <AlertDescription> + 일부 계약의 동기화 상태를 확인할 수 없습니다. 네트워크 연결을 확인하고 다시 시도해주세요. + </AlertDescription> + </Alert> )} {documentsContractIds.length === 0 && ( - <div className="rounded-lg border border-yellow-200 p-4"> - <div className="text-sm text-yellow-700"> + <Alert> + <AlertDescription> 동기화할 계약이 없습니다. 문서를 선택해주세요. - </div> - </div> + </AlertDescription> + </Alert> )} <div className="flex justify-end gap-2"> |