track/frontend/src/components/scan/ProductCard.tsx

/** 产品信息卡片 */
import { Package } from "lucide-react";
import type { ProductScanResponse } from "../../types/api";
import { TASK_STATUS } from "../../types/api";

const STATUS_LABELS: Record<string, string> = {
  [TASK_STATUS.PENDING]: "待接收",
  [TASK_STATUS.WIP]: "进行中",
  [TASK_STATUS.COMPLETED]: "已完成",
  [TASK_STATUS.REJECTED]: "已驳回",
  [TASK_STATUS.ARCHIVED]: "已入库",
};

function statusColor(status: string): string {
  switch (status) {
    case TASK_STATUS.PENDING: return "bg-yellow-100 text-yellow-700";
    case TASK_STATUS.WIP: return "bg-blue-100 text-blue-700";
    case TASK_STATUS.COMPLETED: return "bg-green-100 text-green-700";
    case TASK_STATUS.REJECTED: return "bg-red-100 text-red-700";
    default: return "bg-gray-100 text-gray-600";
  }
}

interface ProductCardProps {
  product: ProductScanResponse;
}

export default function ProductCard({ product }: ProductCardProps) {
  return (
    <div className="rounded-xl bg-white p-4 shadow-sm">
      <div className="mb-3 flex items-center gap-2">
        <Package className="h-5 w-5 text-blue-600" />
        <h3 className="font-semibold text-gray-800">产品信息</h3>
        <span className={`ml-auto rounded-full px-2.5 py-0.5 text-xs font-medium ${statusColor(product.status)}`}>
          {STATUS_LABELS[product.status] ?? product.status}
        </span>
      </div>
      <div className="grid grid-cols-2 gap-2 text-sm">
        <div>
          <span className="text-gray-400">序列号</span>
          <p className="font-mono font-medium text-gray-800">{product.serial_number}</p>
        </div>
        <div>
          <span className="text-gray-400">物料名称</span>
          <p className="font-medium text-gray-800">{product.material_name || product.material_id || "—"}</p>
        </div>
        <div>
          <span className="text-gray-400">规格型号</span>
          <p className="font-medium text-gray-800">{product.spec_model || "—"}</p>
        </div>
        <div>
          <span className="text-gray-400">订单编号</span>
          <p className="font-medium text-gray-800">{product.order_no || "—"}</p>
        </div>
        {product.current_location_id && (
          <div>
            <span className="text-gray-400">当前位置</span>
            <p className={`font-medium ${product.current_location_id === "virtual_warehouse" ? "text-purple-600" : "text-gray-800"}`}>
              {product.current_location_id === "virtual_warehouse" ? "🏭 仓库" : product.current_location_id}
            </p>
          </div>
        )}
      </div>
    </div>
  );
}