(대표님, 최겸) 이메일 템플릿, 벤더데이터 변경사항 대응, 기술영업 변경요구사항 구현

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">