diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/contract/contract-info-card.tsx | 104 | ||||
| -rw-r--r-- | components/contract/contract-items-card.tsx | 76 |
2 files changed, 180 insertions, 0 deletions
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> + ) +} + |