(김준회) 구매정의서 구현 - PO (shi & vendor)

1 files changed, 199 insertions, 0 deletions

diff --git a/lib/po/vendor-table/vendor-po-items-dialog.tsx b/lib/po/vendor-table/vendor-po-items-dialog.tsx
new file mode 100644
index 00000000..d3b33371
--- /dev/null
+++ b/lib/po/vendor-table/vendor-po-items-dialog.tsx
@@ -0,0 +1,199 @@
+"use client"
+
+import * as React from "react"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Badge } from "@/components/ui/badge"
+import { Skeleton } from "@/components/ui/skeleton"
+import { VendorPO, VendorPOItem } from "./types"
+import { getVendorPOItemsByContractNo } from "./service"
+
+interface VendorPOItemsDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  po: VendorPO | null
+}
+
+export function VendorPOItemsDialog({ open, onOpenChange, po }: VendorPOItemsDialogProps) {
+  const [items, setItems] = React.useState<VendorPOItem[]>([])
+  const [loading, setLoading] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+
+  // 상세품목 데이터 로드
+  React.useEffect(() => {
+    if (!open || !po) {
+      setItems([])
+      setError(null)
+      return
+    }
+
+    const loadItems = async () => {
+      setLoading(true)
+      setError(null)
+      try {
+        const vendorPOItems = await getVendorPOItemsByContractNo(po.contractNo)
+        setItems(vendorPOItems)
+      } catch (err) {
+        console.error("Failed to load vendor PO items:", err)
+        setError("상세품목을 불러오는 중 오류가 발생했습니다.")
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadItems()
+  }, [open, po])
+
+  if (!po) return null
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[95vw] max-h-[90vh] w-full flex flex-col">
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle className="text-lg font-semibold">
+            상세품목 현황 - {po.contractNo}
+          </DialogTitle>
+          <DialogDescription>
+            {po.contractName} ({items.length}개 품목)
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-hidden">
+          {loading ? (
+            <div className="space-y-4">
+              <div className="text-center py-4 text-muted-foreground">
+                상세품목을 불러오는 중...
+              </div>
+              <div className="space-y-2">
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <Skeleton key={i} className="h-12 w-full" />
+                ))}
+              </div>
+            </div>
+          ) : error ? (
+            <div className="text-center py-8 text-destructive">
+              {error}
+            </div>
+          ) : items.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">
+              등록된 상세품목이 없습니다.
+            </div>
+          ) : (
+            <div className="overflow-auto max-h-[60vh]">
+              <Table>
+                <TableHeader className="sticky top-0 bg-background z-10">
+                  <TableRow>
+                    <TableHead className="min-w-[120px] whitespace-nowrap">PO/계약번호</TableHead>
+                    <TableHead className="min-w-[100px] whitespace-nowrap">품번</TableHead>
+                    <TableHead className="min-w-[100px] whitespace-nowrap">P/R번호</TableHead>
+                    <TableHead className="min-w-[120px] whitespace-nowrap">자재그룹(명)</TableHead>
+                    <TableHead className="min-w-[100px] whitespace-nowrap">단가기준</TableHead>
+                    <TableHead className="min-w-[100px] whitespace-nowrap">자재번호</TableHead>
+                    <TableHead className="min-w-[200px] whitespace-nowrap">품목/자재내역</TableHead>
+                    <TableHead className="min-w-[200px] whitespace-nowrap">자재내역사양</TableHead>
+                    <TableHead className="min-w-[120px] whitespace-nowrap">설계자재번호</TableHead>
+                    <TableHead className="min-w-[100px] whitespace-nowrap">Fitting No.</TableHead>
+                    <TableHead className="min-w-[80px] whitespace-nowrap">Cert.</TableHead>
+                    <TableHead className="min-w-[80px] whitespace-nowrap">재질</TableHead>
+                    <TableHead className="min-w-[150px] whitespace-nowrap">규격</TableHead>
+                    <TableHead className="min-w-[80px] text-right whitespace-nowrap">수량</TableHead>
+                    <TableHead className="min-w-[80px] whitespace-nowrap">수량단위</TableHead>
+                    <TableHead className="min-w-[80px] text-right whitespace-nowrap">중량</TableHead>
+                    <TableHead className="min-w-[80px] whitespace-nowrap">중량단위</TableHead>
+                    <TableHead className="min-w-[100px] text-right whitespace-nowrap">총중량</TableHead>
+                    <TableHead className="min-w-[100px] text-right whitespace-nowrap">단가기준</TableHead>
+                    <TableHead className="min-w-[80px] whitespace-nowrap">단가단위</TableHead>
+                    <TableHead className="min-w-[100px] whitespace-nowrap">가격단위값</TableHead>
+                    <TableHead className="min-w-[120px] text-right whitespace-nowrap">PO계약금액</TableHead>
+                    <TableHead className="min-w-[100px] text-right whitespace-nowrap">조정금액</TableHead>
+                    <TableHead className="min-w-[100px] whitespace-nowrap">납기일자</TableHead>
+                    <TableHead className="min-w-[80px] whitespace-nowrap">VAT구분</TableHead>
+                    <TableHead className="min-w-[120px] whitespace-nowrap">철의장 SPEC</TableHead>
+                    <TableHead className="min-w-[100px] whitespace-nowrap">P/R 담당자</TableHead>
+                  </TableRow>
+                </TableHeader>
+              <TableBody>
+                {items.map((item, index) => (
+                  <TableRow key={`${item.contractNo}-${item.itemNo}-${index}`}>
+                    <TableCell className="font-medium">{item.contractNo || '-'}</TableCell>
+                    <TableCell>{item.itemNo || '-'}</TableCell>
+                    <TableCell>{item.prNo || '-'}</TableCell>
+                    <TableCell>{item.materialGroup || '-'}</TableCell>
+                    <TableCell>{item.priceStandard || '-'}</TableCell>
+                    <TableCell className="font-mono text-sm">{item.materialNo || '-'}</TableCell>
+                    <TableCell className="max-w-[200px]">
+                      <div className="truncate" title={item.itemDescription || ''}>
+                        {item.itemDescription || '-'}
+                      </div>
+                    </TableCell>
+                    <TableCell className="max-w-[200px]">
+                      <div className="truncate" title={item.materialSpec || ''}>
+                        {item.materialSpec || '-'}
+                      </div>
+                    </TableCell>
+                    <TableCell>{item.designMaterialNo || '-'}</TableCell>
+                    <TableCell>{item.fittingNo || '-'}</TableCell>
+                    <TableCell>{item.cert || '-'}</TableCell>
+                    <TableCell>{item.material || '-'}</TableCell>
+                    <TableCell>{item.specification || '-'}</TableCell>
+                    <TableCell className="text-right font-mono">
+                      {item.quantity?.toLocaleString() || '-'}
+                    </TableCell>
+                    <TableCell>{item.quantityUnit || '-'}</TableCell>
+                    <TableCell className="text-right font-mono">
+                      {item.weight ? item.weight.toLocaleString() : '-'}
+                    </TableCell>
+                    <TableCell>{item.weightUnit || '-'}</TableCell>
+                    <TableCell className="text-right font-mono">
+                      {item.totalWeight ? item.totalWeight.toLocaleString() : '-'}
+                    </TableCell>
+                    <TableCell className="text-right font-mono">
+                      {item.unitPrice?.toLocaleString() || '-'}
+                    </TableCell>
+                    <TableCell>{item.priceUnit || '-'}</TableCell>
+                    <TableCell>{item.priceUnitValue || '-'}</TableCell>
+                    <TableCell className="text-right font-mono font-semibold">
+                      {item.contractAmount?.toLocaleString() || '-'}
+                    </TableCell>
+                    <TableCell className="text-right font-mono">
+                      {item.adjustmentAmount ? item.adjustmentAmount.toLocaleString() : '-'}
+                    </TableCell>
+                    <TableCell>{item.deliveryDate || '-'}</TableCell>
+                    <TableCell>{item.vatType || '-'}</TableCell>
+                    <TableCell>{item.steelSpec || '-'}</TableCell>
+                    <TableCell>{item.prManager || '-'}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            </div>
+          )}
+        </div>
+
+        {items.length > 0 && (
+          <div className="flex justify-between items-center pt-4 border-t flex-shrink-0">
+            <div className="text-sm text-muted-foreground">
+              총 {items.length}개 품목
+            </div>
+            <div className="text-sm font-medium">
+              총 계약금액: {items.reduce((sum, item) => sum + item.contractAmount, 0).toLocaleString()} 원
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}