star-erp/source-code/ERP(B-aa)-管理採購單/src/components/ViewPurchaseOrderPage.tsx

/**
 * 查看採購單詳情頁面
 */

import { ArrowLeft } from "lucide-react";
import { Button } from "./ui/button";
import { Badge } from "./ui/badge";
import { STATUS_CONFIG, PAYMENT_METHODS, INVOICE_TYPES } from "../constants/purchase-order";
import { StatusProgressBar } from "./purchase-order/StatusProgressBar";
import { Breadcrumb } from "./shared/Breadcrumb";
import { StatusBadge } from "./shared/StatusBadge";
import { CopyButton } from "./shared/CopyButton";
import type { PurchaseOrder } from "../types/purchase-order";
import { formatCurrency } from "../utils/purchase-order";

interface ViewPurchaseOrderPageProps {
  order: PurchaseOrder;
  onBack: () => void;
}

export default function ViewPurchaseOrderPage({
  order,
  onBack,
}: ViewPurchaseOrderPageProps) {
  return (
    <div className="p-6">
      {/* Header */}
      <div className="mb-6">
        <Breadcrumb
          items={[
            { label: "採購管理" },
            { label: "管理採購單" },
            { label: "查看採購單", active: true },
          ]}
        />
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Button
              variant="outline"
              onClick={onBack}
              className="gap-2 button-outlined-primary"
            >
              <ArrowLeft className="h-4 w-4" />
              返回列表
            </Button>
            <h1>查看採購單</h1>
          </div>
          <StatusBadge status={order.status} />
        </div>
      </div>

      {/* 狀態流程條 */}
      {order.status !== "draft" && order.status !== "rejected" && (
        <div className="mb-6">
          <StatusProgressBar currentStatus={order.status} />
        </div>
      )}

      <div className="space-y-6">
        {/* 審核資訊卡片（如果有審核資訊） */}
        {order.reviewInfo && (
          <div
            className={`rounded-lg border-2 p-6 ${
              order.status === "rejected"
                ? "bg-red-50 border-red-200"
                : "bg-green-50 border-green-200"
            }`}
          >
            <h2 className="mb-4">
              {order.status === "rejected" ? "退回資訊" : "審核資訊"}
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="text-sm text-muted-foreground mb-2 block">
                  審核人
                </label>
                <span>{order.reviewInfo.reviewedBy}</span>
              </div>
              <div>
                <label className="text-sm text-muted-foreground mb-2 block">
                  審核時間
                </label>
                <span>{order.reviewInfo.reviewedAt}</span>
              </div>
              {order.reviewInfo.rejectionReason && (
                <div className="md:col-span-2">
                  <label className="text-sm text-muted-foreground mb-2 block">
                    退回原因
                  </label>
                  <p className="text-sm bg-white p-4 rounded-lg border-2 border-red-300">
                    {order.reviewInfo.rejectionReason}
                  </p>
                </div>
              )}
            </div>
          </div>
        )}

        {/* 付款資訊卡片（如果有付款資訊） */}
        {order.paymentInfo && (
          <div className="rounded-lg border-2 p-6 bg-blue-50 border-blue-200">
            <h2 className="mb-4">付款資訊</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="text-sm text-muted-foreground mb-2 block">
                  付款方式
                </label>
                <span>{PAYMENT_METHODS[order.paymentInfo.paymentMethod]}</span>
              </div>
              <div>
                <label className="text-sm text-muted-foreground mb-2 block">
                  付款日期
                </label>
                <span>{order.paymentInfo.paymentDate}</span>
              </div>
              <div>
                <label className="text-sm text-muted-foreground mb-2 block">
                  實際付款金額
                </label>
                <span className="font-medium">
                  ${order.paymentInfo.actualAmount.toLocaleString()}
                </span>
              </div>
              <div>
                <label className="text-sm text-muted-foreground mb-2 block">
                  付款人
                </label>
                <span>{order.paymentInfo.paidBy}</span>
              </div>
              <div>
                <label className="text-sm text-muted-foreground mb-2 block">
                  付款記錄時間
                </label>
                <span>{order.paymentInfo.paidAt}</span>
              </div>
            </div>

            {/* 發票資訊（如果有） */}
            {order.paymentInfo.hasInvoice && order.paymentInfo.invoice && (
              <div className="mt-6 pt-6 border-t-2 border-blue-300">
                <h3 className="font-medium mb-4">發票資訊</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="text-sm text-muted-foreground mb-2 block">
                      發票號碼
                    </label>
                    <span className="font-mono">
                      {order.paymentInfo.invoice.invoiceNumber}
                    </span>
                  </div>
                  <div>
                    <label className="text-sm text-muted-foreground mb-2 block">
                      發票類型
                    </label>
                    <span>
                      {INVOICE_TYPES[order.paymentInfo.invoice.invoiceType]}
                    </span>
                  </div>
                  <div>
                    <label className="text-sm text-muted-foreground mb-2 block">
                      發票金額
                    </label>
                    <span className="font-medium">
                      ${order.paymentInfo.invoice.invoiceAmount.toLocaleString()}
                    </span>
                  </div>
                  <div>
                    <label className="text-sm text-muted-foreground mb-2 block">
                      發票日期
                    </label>
                    <span>{order.paymentInfo.invoice.invoiceDate}</span>
                  </div>
                  {order.paymentInfo.invoice.invoiceType === "triplicate" && (
                    <>
                      <div>
                        <label className="text-sm text-muted-foreground mb-2 block">
                          公司抬頭
                        </label>
                        <span>{order.paymentInfo.invoice.companyName}</span>
                      </div>
                      <div>
                        <label className="text-sm text-muted-foreground mb-2 block">
                          統一編號
                        </label>
                        <span className="font-mono">
                          {order.paymentInfo.invoice.taxId}
                        </span>
                      </div>
                    </>
                  )}
                </div>
              </div>
            )}
          </div>
        )}

        {/* 基本資訊卡片 */}
        <div className="bg-card rounded-lg border-2 border-border p-6">
          <h2 className="mb-4">基本資訊</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* 採購單編號 */}
            <div>
              <label className="text-sm text-muted-foreground mb-2 block">
                採購單編號
              </label>
              <div className="flex items-center gap-2">
                <span className="font-mono">{order.poNumber}</span>
                <CopyButton text={order.poNumber} label="複製採購單編號" />
              </div>
            </div>

            {/* 廠商 */}
            <div>
              <label className="text-sm text-muted-foreground mb-2 block">
                廠商
              </label>
              <span>{order.supplierName}</span>
            </div>

            {/* 申請單位 */}
            <div>
              <label className="text-sm text-muted-foreground mb-2 block">
                申請單位
              </label>
              <span>{order.requesterName}</span>
            </div>

            {/* 申請人 */}
            <div>
              <label className="text-sm text-muted-foreground mb-2 block">
                申請人
              </label>
              <span>{order.createdBy}</span>
            </div>

            {/* 建立日期 */}
            <div>
              <label className="text-sm text-muted-foreground mb-2 block">
                建立日期
              </label>
              <span>{order.createdAt}</span>
            </div>

            {/* 預計到貨日 */}
            <div>
              <label className="text-sm text-muted-foreground mb-2 block">
                預計到貨日
              </label>
              <span>{order.expectedDate}</span>
            </div>
          </div>

          {/* 備註（如果有） */}
          {order.notes && (
            <div className="mt-6">
              <label className="text-sm text-muted-foreground mb-2 block">
                備註
              </label>
              <p className="text-sm bg-muted p-4 rounded-lg">{order.notes}</p>
            </div>
          )}
        </div>

        {/* 採購項目卡片 */}
        <div className="bg-card rounded-lg border-2 border-border p-6">
          <h2 className="mb-4">採購項目</h2>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b-2 border-border">
                  <th className="text-left py-3 px-2 text-sm text-muted-foreground">
                    品項名稱
                  </th>
                  <th className="text-right py-3 px-2 text-sm text-muted-foreground">
                    數量
                  </th>
                  <th className="text-right py-3 px-2 text-sm text-muted-foreground">
                    單位
                  </th>
                  <th className="text-right py-3 px-2 text-sm text-muted-foreground">
                    單價
                  </th>
                  <th className="text-right py-3 px-2 text-sm text-muted-foreground">
                    小計
                  </th>
                </tr>
              </thead>
              <tbody>
                {order.items.map((item, index) => (
                  <tr key={index} className="border-b border-border">
                    <td className="py-4 px-2">
                      <div className="flex flex-col">
                        <span className="font-medium">{item.productName}</span>
                        <span className="text-xs text-muted-foreground">
                          {item.productId}
                        </span>
                      </div>
                    </td>
                    <td className="text-right py-4 px-2">{item.quantity}</td>
                    <td className="text-right py-4 px-2">{item.unit}</td>
                    <td className="text-right py-4 px-2">
                      <div className="flex flex-col items-end">
                        <span>{formatCurrency(item.unitPrice)}</span>
                        {item.previousPrice &&
                          item.previousPrice !== item.unitPrice && (
                            <span className="text-xs text-muted-foreground line-through">
                              {formatCurrency(item.previousPrice)}
                            </span>
                          )}
                      </div>
                    </td>
                    <td className="text-right py-4 px-2 font-medium">
                      {formatCurrency(item.subtotal)}
                    </td>
                  </tr>
                ))}
              </tbody>
              <tfoot>
                <tr className="border-t-2 border-border">
                  <td colSpan={4} className="text-right py-4 px-2 font-medium">
                    總金額
                  </td>
                  <td className="text-right py-4 px-2 font-bold text-lg">
                    {formatCurrency(order.totalAmount)}
                  </td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}