refactor: UI 컴포넌트 추상화 및 입금/출금 등록 버튼 추가

- 입금관리, 출금관리 리스트에 등록 버튼 추가
- skeleton, confirm-dialog, empty-state, status-badge UI 컴포넌트 추가
- document-system 컴포넌트 추상화 (ApprovalLine, DocumentHeader 등)
- 여러 페이지 컴포넌트 리팩토링 및 코드 정리

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/orders/documents/ContractDocument.tsx

@@ -2,12 +2,14 @@
 
 /**
  * 계약서 문서 컴포넌트
- * - 스크린샷 형식 + 지출결의서 디자인 스타일
- * - 제품 정보는 견적의 calculation_inputs에서 추출한 products로 표시
+ *
+ * 공통 컴포넌트 사용:
+ * - DocumentHeader: simple 레이아웃 (결재란 없음)
  */
 
 import { formatAmount } from "@/utils/formatAmount";
 import { OrderItem } from "../actions";
+import { DocumentHeader } from "@/components/document-system";
 
 // 제품 정보 타입
 interface ProductInfo {
@@ -66,13 +68,14 @@ export function ContractDocument({
 
   return (
     <div className="bg-white p-8 min-h-full">
-      {/* 제목 */}
-      <div className="text-center mb-6">
-        <h1 className="text-2xl font-bold tracking-widest mb-2">계 약 서</h1>
-        <p className="text-sm text-gray-600">
-          수주번호: {orderNumber} | 계약일자: {orderDate}
-        </p>
-      </div>
+      {/* 문서 헤더 (공통 컴포넌트) */}
+      <DocumentHeader
+        title="계 약 서"
+        subtitle={`수주번호: ${orderNumber} | 계약일자: ${orderDate}`}
+        layout="simple"
+        approval={null}
+        className="mb-6"
+      />
 
       {/* 제품 정보 (개소별) */}
       <div className="border border-gray-300 mb-4">

src/components/orders/documents/TransactionDocument.tsx

@@ -2,11 +2,14 @@
 
 /**
  * 거래명세서 문서 컴포넌트
- * - 스크린샷 형식 + 지출결의서 디자인 스타일
+ *
+ * 공통 컴포넌트 사용:
+ * - DocumentHeader: simple 레이아웃 (결재란 없음)
  */
 
 import { formatAmount } from "@/utils/formatAmount";
 import { OrderItem } from "../actions";
+import { DocumentHeader } from "@/components/document-system";
 
 interface TransactionDocumentProps {
   orderNumber: string;
@@ -54,13 +57,14 @@ export function TransactionDocument({
 
   return (
     <div className="bg-white p-8 min-h-full">
-      {/* 제목 */}
-      <div className="text-center mb-6">
-        <h1 className="text-2xl font-bold tracking-widest mb-2">거 래 명 세 서</h1>
-        <p className="text-sm text-gray-600">
-          수주번호: {orderNumber} | 발행일: {orderDate}
-        </p>
-      </div>
+      {/* 문서 헤더 (공통 컴포넌트) */}
+      <DocumentHeader
+        title="거 래 명 세 서"
+        subtitle={`수주번호: ${orderNumber} | 발행일: ${orderDate}`}
+        layout="simple"
+        approval={null}
+        className="mb-6"
+      />
 
       {/* 공급자/공급받는자 정보 */}
       <div className="grid grid-cols-2 gap-4 mb-4">