From e84cf02a1cb4959a9d3bb5bbf37885c13a447f78 Mon Sep 17 00:00:00 2001
From: joonhoekim <26rote@gmail.com>
Date: Mon, 13 Oct 2025 17:29:33 +0900
Subject: (김준회) SHI/벤더 PO 구현
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/contract/contract-info-card.tsx  | 104 ++++++++++++++++++++++++++++
 components/contract/contract-items-card.tsx |  76 ++++++++++++++++++++
 2 files changed, 180 insertions(+)
 create mode 100644 components/contract/contract-info-card.tsx
 create mode 100644 components/contract/contract-items-card.tsx

(limited to 'components/contract')

diff --git a/components/contract/contract-info-card.tsx b/components/contract/contract-info-card.tsx
new file mode 100644
index 00000000..8b9c5103
--- /dev/null
+++ b/components/contract/contract-info-card.tsx
@@ -0,0 +1,104 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { formatCurrency, formatDate } from "@/lib/utils"
+import { FileText, DollarSign } from "lucide-react"
+
+interface ContractInfoCardProps {
+  contract: {
+    contractName?: string | null
+    createdAt?: Date | string | null
+    startDate?: string | null
+    endDate?: string | null
+    contractDate?: Date | string | null
+    purchaseGroup?: string | null
+    totalAmount?: number | string | null
+    currency?: string | null
+    paymentTerms?: string | null
+    deliveryTerms?: string | null
+  }
+}
+
+export function ContractInfoCard({ contract }: ContractInfoCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-lg">계약조건</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-1">
+            <p className="text-sm font-medium text-muted-foreground">계약명</p>
+            <p className="text-sm">{contract.contractName || "-"}</p>
+          </div>
+          <div className="space-y-1">
+            <p className="text-sm font-medium text-muted-foreground">계약요청일</p>
+            <p className="text-sm">
+              {formatDate(contract.createdAt)}
+            </p>
+          </div>
+          <div className="space-y-1">
+            <p className="text-sm font-medium text-muted-foreground">계약기간</p>
+            <p className="text-sm">
+              {contract.startDate && contract.endDate
+                ? `${formatDate(contract.startDate)} ~ ${formatDate(contract.endDate)}`
+                : "-"}
+            </p>
+          </div>
+          <div className="space-y-1">
+            <p className="text-sm font-medium text-muted-foreground">계약체결일</p>
+            <p className="text-sm">
+              {formatDate(contract.contractDate)}
+            </p>
+          </div>
+          <div className="space-y-1">
+            <p className="text-sm font-medium text-muted-foreground">SHI 계약담당자</p>
+            <p className="text-sm">{contract.purchaseGroup || "-"}</p>
+          </div>
+          <div className="space-y-1">
+            <p className="text-sm font-medium text-muted-foreground">연계입찰/견적번호</p>
+            <p className="text-sm">-</p>
+          </div>
+          <div className="space-y-1">
+            <p className="text-sm font-medium text-muted-foreground">계약유효기간</p>
+            <p className="text-sm">
+              {contract.startDate && contract.endDate
+                ? `${formatDate(contract.startDate)} ~ ${formatDate(contract.endDate)}`
+                : "-"}
+            </p>
+          </div>
+          <div className="space-y-1">
+            <p className="text-sm font-medium text-muted-foreground">계약금액</p>
+            <p className="text-sm font-semibold">
+              {contract.totalAmount
+                ? formatCurrency(
+                    parseFloat(contract.totalAmount.toString()),
+                    contract.currency || "KRW"
+                  )
+                : "-"}
+            </p>
+          </div>
+          <div className="space-y-1">
+            <p className="text-sm font-medium text-muted-foreground">지불조건</p>
+            <p className="text-sm">{contract.paymentTerms || "-"}</p>
+          </div>
+          <div className="space-y-1">
+            <p className="text-sm font-medium text-muted-foreground">인도조건</p>
+            <p className="text-sm">{contract.deliveryTerms || "-"}</p>
+          </div>
+        </div>
+
+        <div className="mt-6 flex gap-2">
+          <Button variant="outline" size="sm">
+            <FileText className="h-4 w-4 mr-2" />
+            계약문서
+          </Button>
+          <Button variant="outline" size="sm">
+            <DollarSign className="h-4 w-4 mr-2" />
+            단가상세
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
diff --git a/components/contract/contract-items-card.tsx b/components/contract/contract-items-card.tsx
new file mode 100644
index 00000000..0d43f979
--- /dev/null
+++ b/components/contract/contract-items-card.tsx
@@ -0,0 +1,76 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { formatCurrency } from "@/lib/utils"
+
+interface ContractItem {
+  materialNo?: string
+  itemDescription?: string
+  specification?: string
+  quantity?: number
+  quantityUnit?: string
+  unitPrice?: number | string
+  contractAmount?: number | string
+}
+
+interface ContractItemsCardProps {
+  items: ContractItem[]
+  currency?: string
+}
+
+export function ContractItemsCard({ items, currency = "KRW" }: ContractItemsCardProps) {
+  if (!items || items.length === 0) {
+    return null
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-lg">계약 품목</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead className="border-b bg-muted/50">
+              <tr>
+                <th className="px-4 py-3 text-left font-medium">자재번호</th>
+                <th className="px-4 py-3 text-left font-medium">품목/자재내역</th>
+                <th className="px-4 py-3 text-left font-medium">규격</th>
+                <th className="px-4 py-3 text-right font-medium">수량</th>
+                <th className="px-4 py-3 text-right font-medium">단가</th>
+                <th className="px-4 py-3 text-right font-medium">금액</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((item, idx) => (
+                <tr key={idx} className="border-b last:border-0">
+                  <td className="px-4 py-3">{item.materialNo || "-"}</td>
+                  <td className="px-4 py-3">{item.itemDescription || "-"}</td>
+                  <td className="px-4 py-3">{item.specification || "-"}</td>
+                  <td className="px-4 py-3 text-right">
+                    {item.quantity} {item.quantityUnit || ""}
+                  </td>
+                  <td className="px-4 py-3 text-right font-mono">
+                    {item.unitPrice
+                      ? formatCurrency(
+                          parseFloat(item.unitPrice.toString()),
+                          currency
+                        )
+                      : "-"}
+                  </td>
+                  <td className="px-4 py-3 text-right font-mono font-medium">
+                    {item.contractAmount
+                      ? formatCurrency(
+                          parseFloat(item.contractAmount.toString()),
+                          currency
+                        )
+                      : "-"}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
-- 
cgit v1.2.3