first commit

2025-12-30 15:03:19 +08:00
commit c735c36009
902 changed files with 83591 additions and 0 deletions
--- a/source-code/ERP(B-aa)-管理採購單/README.md
+++ b/source-code/ERP(B-aa)-管理採購單/README.md
@@ -0,0 +1,11 @@
+
+  # ERP(B-aa)-管理採購單
+
+  This is a code bundle for ERP(B-aa)-管理採購單. The original project is available at https://www.figma.com/design/dYAEZGooDTMAK7RUTZLgoB/ERP-B-aa--%E7%AE%A1%E7%90%86%E6%8E%A1%E8%B3%BC%E5%96%AE.
+
+  ## Running the code
+
+  Run `npm i` to install the dependencies.
+
+  Run `npm run dev` to start the development server.
+  
--- a/source-code/ERP(B-aa)-管理採購單/README.md:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/README.md:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/index.html
+++ b/source-code/ERP(B-aa)-管理採購單/index.html
@@ -0,0 +1,15 @@
+
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>ERP(B-aa)-管理採購單</title>
+    </head>
+
+    <body>
+      <div id="root"></div>
+      <script type="module" src="/src/main.tsx"></script>
+    </body>
+  </html>
+  
--- a/source-code/ERP(B-aa)-管理採購單/index.html:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/index.html:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/package.json
+++ b/source-code/ERP(B-aa)-管理採購單/package.json
@@ -0,0 +1,59 @@
+
+  {
+      "name": "ERP(B-aa)-管理採購單",
+      "version": "0.1.0",
+      "private": true,
+      "dependencies": {
+          "@radix-ui/react-accordion": "^1.2.3",
+          "@radix-ui/react-alert-dialog": "^1.1.6",
+          "@radix-ui/react-aspect-ratio": "^1.1.2",
+          "@radix-ui/react-avatar": "^1.1.3",
+          "@radix-ui/react-checkbox": "^1.1.4",
+          "@radix-ui/react-collapsible": "^1.1.3",
+          "@radix-ui/react-context-menu": "^2.2.6",
+          "@radix-ui/react-dialog": "^1.1.6",
+          "@radix-ui/react-dropdown-menu": "^2.1.6",
+          "@radix-ui/react-hover-card": "^1.1.6",
+          "@radix-ui/react-label": "^2.1.2",
+          "@radix-ui/react-menubar": "^1.1.6",
+          "@radix-ui/react-navigation-menu": "^1.2.5",
+          "@radix-ui/react-popover": "^1.1.6",
+          "@radix-ui/react-progress": "^1.1.2",
+          "@radix-ui/react-radio-group": "^1.2.3",
+          "@radix-ui/react-scroll-area": "^1.2.3",
+          "@radix-ui/react-select": "^2.1.6",
+          "@radix-ui/react-separator": "^1.1.2",
+          "@radix-ui/react-slider": "^1.2.3",
+          "@radix-ui/react-slot": "^1.1.2",
+          "@radix-ui/react-switch": "^1.1.3",
+          "@radix-ui/react-tabs": "^1.1.3",
+          "@radix-ui/react-toggle": "^1.1.2",
+          "@radix-ui/react-toggle-group": "^1.1.2",
+          "@radix-ui/react-tooltip": "^1.1.8",
+          "class-variance-authority": "^0.7.1",
+          "clsx": "*",
+          "cmdk": "^1.1.1",
+          "embla-carousel-react": "^8.6.0",
+          "input-otp": "^1.4.2",
+          "lucide-react": "^0.487.0",
+          "next-themes": "^0.4.6",
+          "react": "^18.3.1",
+          "react-day-picker": "^8.10.1",
+          "react-dom": "^18.3.1",
+          "react-hook-form": "^7.55.0",
+          "react-resizable-panels": "^2.1.7",
+          "recharts": "^2.15.2",
+          "sonner": "^2.0.3",
+          "tailwind-merge": "*",
+          "vaul": "^1.1.2"
+      },
+      "devDependencies": {
+          "@types/node": "^20.10.0",
+          "@vitejs/plugin-react-swc": "^3.10.2",
+          "vite": "6.3.5"
+      },
+      "scripts": {
+          "dev": "vite",
+          "build": "vite build"
+      }
+  }
--- a/source-code/ERP(B-aa)-管理採購單/package.json:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/package.json:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/App.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/App.tsx
@@ -0,0 +1,609 @@
+import { useState } from "react";
+import { Toaster, toast } from "sonner@2.0.3";
+import PurchaseOrderManagement from "./components/PurchaseOrderManagement";
+import CreatePurchaseOrderPage from "./components/CreatePurchaseOrderPage";
+import InspectionPage from "./components/InspectionPage";
+import ViewPurchaseOrderPage from "./components/ViewPurchaseOrderPage";
+import NavigationSidebar from "./components/NavigationSidebar";
+import type { PurchaseOrder, PurchaseOrderStatus, Supplier, PurchaseOrderItem, PaymentInfo } from "./types/purchase-order";
+import type { Store, Warehouse } from "./types/requester";
+import { STATUS_CONFIG } from "./constants/purchase-order";
+
+// Mock suppliers data
+const mockSuppliers: Supplier[] = [
+  {
+    id: "sup-1",
+    name: "美食材料供應商",
+    contact: "王小明",
+    phone: "02-2345-6789",
+    email: "supplier1@example.com",
+    commonProducts: [
+      { productId: "prod-1", productName: "高筋麵粉", unit: "公斤", lastPrice: 45 },
+      { productId: "prod-2", productName: "無鹽奶油", unit: "公斤", lastPrice: 280 },
+      { productId: "prod-3", productName: "細砂糖", unit: "公斤", lastPrice: 35 },
+      { productId: "prod-4", productName: "雞蛋", unit: "打", lastPrice: 65 },
+    ],
+  },
+  {
+    id: "sup-2",
+    name: "優質乳製品公司",
+    contact: "李美玲",
+    phone: "02-3456-7890",
+    email: "dairy@example.com",
+    commonProducts: [
+      { productId: "prod-5", productName: "鮮奶油", unit: "公升", lastPrice: 180 },
+      { productId: "prod-6", productName: "馬斯卡彭起司", unit: "公斤", lastPrice: 450 },
+      { productId: "prod-7", productName: "鮮奶", unit: "公升", lastPrice: 55 },
+    ],
+  },
+  {
+    id: "sup-3",
+    name: "進口巧克力專賣店",
+    contact: "張大華",
+    phone: "02-4567-8901",
+    email: "chocolate@example.com",
+    commonProducts: [
+      { productId: "prod-8", productName: "70%黑巧克力", unit: "公斤", lastPrice: 520 },
+      { productId: "prod-9", productName: "白巧克力", unit: "公斤", lastPrice: 480 },
+      { productId: "prod-10", productName: "可可粉", unit: "公斤", lastPrice: 380 },
+    ],
+  },
+];
+
+// Mock stores data
+const mockStores: Store[] = [
+  {
+    id: "store-1",
+    name: "總店",
+    address: "台北市大安區信義路四段100號",
+    manager: "王小華",
+    phone: "02-2700-1000",
+  },
+  {
+    id: "store-2",
+    name: "A 店（東區店）",
+    address: "台北市大安區忠孝東路四段200號",
+    manager: "李美玲",
+    phone: "02-2771-2000",
+  },
+  {
+    id: "store-3",
+    name: "B 店（西門店）",
+    address: "台北市萬華區成都路50號",
+    manager: "張大明",
+    phone: "02-2388-3000",
+  },
+  {
+    id: "store-4",
+    name: "C 店（天母店）",
+    address: "台北市士林區中山北路七段150號",
+    manager: "周小姐",
+    phone: "02-2876-4000",
+  },
+];
+
+// Mock warehouses data
+const mockWarehouses: Warehouse[] = [
+  {
+    id: "warehouse-1",
+    name: "中央倉庫",
+    address: "新北市新莊區中正路500號",
+    manager: "劉主管",
+    phone: "02-2990-5000",
+  },
+  {
+    id: "warehouse-2",
+    name: "南區倉庫",
+    address: "台中市西屯區工業區一路200號",
+    manager: "黃主管",
+    phone: "04-2350-6000",
+  },
+];
+
+const initialPurchaseOrders: PurchaseOrder[] = [
+  {
+    id: "po-1",
+    poNumber: "PO202411001",
+    supplierId: "sup-1",
+    supplierName: "美食材料供應商",
+    expectedDate: "2024-11-25",
+    status: "pending_confirm",
+    createdBy: "王小華",
+    requesterType: "store",
+    requesterId: "store-1",
+    requesterName: "總店",
+    department: "總店",
+    items: [
+      {
+        productId: "prod-1",
+        productName: "高筋麵粉",
+        quantity: 50,
+        unit: "公斤",
+        unitPrice: 45,
+        previousPrice: 45,
+        subtotal: 2250,
+      },
+      {
+        productId: "prod-3",
+        productName: "細砂糖",
+        quantity: 30,
+        unit: "公斤",
+        unitPrice: 35,
+        previousPrice: 35,
+        subtotal: 1050,
+      },
+    ],
+    totalAmount: 3300,
+    createdAt: "2024-11-18",
+    reviewInfo: {
+      reviewedBy: "張主管",
+      reviewedAt: "2024-11-19 10:30",
+    },
+  },
+  {
+    id: "po-2",
+    poNumber: "PO202411002",
+    supplierId: "sup-2",
+    supplierName: "優質乳製品公司",
+    expectedDate: "2024-11-26",
+    status: "shipping",
+    createdBy: "李美玲",
+    requesterType: "store",
+    requesterId: "store-2",
+    requesterName: "A 店（東區店）",
+    department: "A 店",
+    items: [
+      {
+        productId: "prod-5",
+        productName: "鮮奶油",
+        quantity: 20,
+        unit: "公升",
+        unitPrice: 180,
+        previousPrice: 180,
+        subtotal: 3600,
+      },
+    ],
+    totalAmount: 3600,
+    createdAt: "2024-11-19",
+    reviewInfo: {
+      reviewedBy: "陳主管",
+      reviewedAt: "2024-11-20 14:15",
+    },
+  },
+  {
+    id: "po-3",
+    poNumber: "PO202411003",
+    supplierId: "sup-3",
+    supplierName: "進口巧克力專賣店",
+    expectedDate: "2024-11-28",
+    status: "draft",
+    createdBy: "張大明",
+    requesterType: "store",
+    requesterId: "store-3",
+    requesterName: "B 店（西門店）",
+    department: "B 店",
+    items: [
+      {
+        productId: "prod-8",
+        productName: "70%黑巧克力",
+        quantity: 10,
+        unit: "公斤",
+        unitPrice: 520,
+        previousPrice: 500,
+        subtotal: 5200,
+      },
+    ],
+    totalAmount: 5200,
+    createdAt: "2024-11-20",
+  },
+  {
+    id: "po-4",
+    poNumber: "PO202411004",
+    supplierId: "sup-1",
+    supplierName: "美食材料供應商",
+    expectedDate: "2024-11-30",
+    status: "review_pending",
+    createdBy: "陳雅婷",
+    requesterType: "store",
+    requesterId: "store-1",
+    requesterName: "總店",
+    department: "總店",
+    items: [
+      {
+        productId: "prod-2",
+        productName: "無鹽奶油",
+        quantity: 15,
+        unit: "公斤",
+        unitPrice: 280,
+        previousPrice: 280,
+        subtotal: 4200,
+      },
+      {
+        productId: "prod-4",
+        productName: "雞蛋",
+        quantity: 10,
+        unit: "打",
+        unitPrice: 65,
+        previousPrice: 65,
+        subtotal: 650,
+      },
+    ],
+    totalAmount: 4850,
+    createdAt: "2024-11-21",
+  },
+  {
+    id: "po-5",
+    poNumber: "PO202411005",
+    supplierId: "sup-2",
+    supplierName: "優質乳製品公司",
+    expectedDate: "2024-12-02",
+    status: "completed",
+    createdBy: "林志豪",
+    requesterType: "store",
+    requesterId: "store-2",
+    requesterName: "A 店（東區店）",
+    department: "A 店",
+    items: [
+      {
+        productId: "prod-6",
+        productName: "馬斯卡彭起司",
+        quantity: 5,
+        unit: "公斤",
+        unitPrice: 450,
+        previousPrice: 450,
+        subtotal: 2250,
+      },
+    ],
+    totalAmount: 2250,
+    createdAt: "2024-11-15",
+    reviewInfo: {
+      reviewedBy: "王主管",
+      reviewedAt: "2024-11-16 09:00",
+    },
+  },
+  {
+    id: "po-6",
+    poNumber: "PO202411006",
+    supplierId: "sup-1",
+    supplierName: "美食材料供應商",
+    expectedDate: "2024-11-27",
+    status: "processing",
+    createdBy: "劉主管",
+    requesterType: "warehouse",
+    requesterId: "warehouse-1",
+    requesterName: "中央倉庫",
+    department: "中央倉庫",
+    items: [
+      {
+        productId: "prod-1",
+        productName: "高筋麵粉",
+        quantity: 200,
+        unit: "公斤",
+        unitPrice: 45,
+        previousPrice: 45,
+        subtotal: 9000,
+      },
+      {
+        productId: "prod-3",
+        productName: "細砂糖",
+        quantity: 100,
+        unit: "公斤",
+        unitPrice: 35,
+        previousPrice: 35,
+        subtotal: 3500,
+      },
+    ],
+    totalAmount: 12500,
+    createdAt: "2024-11-19",
+    reviewInfo: {
+      reviewedBy: "李主管",
+      reviewedAt: "2024-11-20 11:30",
+    },
+  },
+  {
+    id: "po-7",
+    poNumber: "PO202411007",
+    supplierId: "sup-3",
+    supplierName: "進口巧克力專賣店",
+    expectedDate: "2024-11-29",
+    status: "rejected",
+    createdBy: "黃主管",
+    requesterType: "warehouse",
+    requesterId: "warehouse-2",
+    requesterName: "南區倉庫",
+    department: "南區倉庫",
+    items: [
+      {
+        productId: "prod-8",
+        productName: "70%黑巧克力",
+        quantity: 30,
+        unit: "公斤",
+        unitPrice: 520,
+        previousPrice: 500,
+        subtotal: 15600,
+      },
+      {
+        productId: "prod-10",
+        productName: "可可粉",
+        quantity: 20,
+        unit: "公斤",
+        unitPrice: 380,
+        previousPrice: 380,
+        subtotal: 7600,
+      },
+    ],
+    totalAmount: 23200,
+    createdAt: "2024-11-20",
+    reviewInfo: {
+      reviewedBy: "陳主管",
+      reviewedAt: "2024-11-21 16:45",
+      rejectionReason: "數量過多，超出本月預算",
+    },
+  },
+  {
+    id: "po-8",
+    poNumber: "PO202411008",
+    supplierId: "sup-2",
+    supplierName: "優質乳製品公司",
+    expectedDate: "2024-12-01",
+    status: "pending_confirm",
+    createdBy: "周小姐",
+    requesterType: "store",
+    requesterId: "store-4",
+    requesterName: "C 店（天母店）",
+    department: "C 店",
+    items: [
+      {
+        productId: "prod-5",
+        productName: "鮮奶油",
+        quantity: 10,
+        unit: "公升",
+        unitPrice: 180,
+        previousPrice: 180,
+        subtotal: 1800,
+      },
+    ],
+    totalAmount: 1800,
+    createdAt: "2024-11-22",
+    reviewInfo: {
+      reviewedBy: "張主管",
+      reviewedAt: "2024-11-23 10:00",
+    },
+  },
+  {
+    id: "po-9",
+    poNumber: "PO202411009",
+    supplierId: "sup-1",
+    supplierName: "美食材料供應商",
+    expectedDate: "2024-12-03",
+    status: "completed",
+    createdBy: "吳經理",
+    requesterType: "warehouse",
+    requesterId: "warehouse-1",
+    requesterName: "中央倉庫",
+    department: "中央倉庫",
+    items: [
+      {
+        productId: "prod-2",
+        productName: "無鹽奶油",
+        quantity: 25,
+        unit: "公斤",
+        unitPrice: 280,
+        previousPrice: 280,
+        subtotal: 7000,
+      },
+    ],
+    totalAmount: 7000,
+    createdAt: "2024-11-16",
+    reviewInfo: {
+      reviewedBy: "林主管",
+      reviewedAt: "2024-11-17 09:30",
+    },
+    paymentInfo: {
+      paymentMethod: "bank_transfer",
+      paymentDate: "2024-11-28",
+      actualAmount: 7000,
+      paidBy: "財務部 陳小姐",
+      paidAt: "2024-11-28 14:30",
+      hasInvoice: true,
+      invoice: {
+        invoiceNumber: "AB-12345678",
+        invoiceAmount: 7000,
+        invoiceDate: "2024-11-28",
+        invoiceType: "triplicate",
+        companyName: "甜點連鎖股份有限公司",
+        taxId: "12345678",
+      },
+    },
+  },
+];
+
+export default function App() {
+  const [currentPage, setCurrentPage] = useState("purchase-order-management");
+  const [purchaseOrders, setPurchaseOrders] = useState<PurchaseOrder[]>(initialPurchaseOrders);
+  const [inspectingOrder, setInspectingOrder] = useState<PurchaseOrder | undefined>();
+  const [editingOrder, setEditingOrder] = useState<PurchaseOrder | undefined>();
+  const [viewingOrder, setViewingOrder] = useState<PurchaseOrder | undefined>();
+
+  const handleNavigate = (path: string) => {
+    setCurrentPage(path);
+  };
+
+  const handleNavigateToInspection = (order: PurchaseOrder) => {
+    setInspectingOrder(order);
+    setCurrentPage("inspection");
+  };
+
+  const handleNavigateToCreateOrder = () => {
+    setEditingOrder(undefined);
+    setCurrentPage("create-purchase-order");
+  };
+
+  const handleNavigateToEditOrder = (order: PurchaseOrder) => {
+    setEditingOrder(order);
+    setCurrentPage("create-purchase-order");
+  };
+
+  const handleNavigateToViewOrder = (order: PurchaseOrder) => {
+    setViewingOrder(order);
+    setCurrentPage("view-purchase-order");
+  };
+
+  const handleSaveOrder = (order: PurchaseOrder) => {
+    if (editingOrder) {
+      setPurchaseOrders((prev) =>
+        prev.map((o) => (o.id === order.id ? order : o))
+      );
+      toast.success("採購單已更新");
+    } else {
+      setPurchaseOrders((prev) => [...prev, order]);
+      toast.success("採購單已建立");
+    }
+    setCurrentPage("purchase-order-management");
+    setEditingOrder(undefined);
+  };
+
+  const handleDeleteOrder = (id: string) => {
+    setPurchaseOrders((prev) => prev.filter((o) => o.id !== id));
+    toast.success("採購單已刪除");
+  };
+
+  const handleStatusChange = (id: string, newStatus: PurchaseOrderStatus, reviewInfo?: any) => {
+    setPurchaseOrders((prev) =>
+      prev.map((o) => {
+        if (o.id === id) {
+          const updatedOrder = { ...o, status: newStatus };
+          if (reviewInfo) {
+            updatedOrder.reviewInfo = reviewInfo;
+          }
+          return updatedOrder;
+        }
+        return o;
+      })
+    );
+    toast.success(`採購單狀態已更新為：${STATUS_CONFIG[newStatus].label}`);
+  };
+
+  const handleCancelCreateOrder = () => {
+    setCurrentPage("purchase-order-management");
+    setEditingOrder(undefined);
+  };
+
+  const handleCompleteInspection = (orderId: string, items: PurchaseOrderItem[]) => {
+    // 驗收完成後自動轉為「待確認」狀態
+    setPurchaseOrders((prev) =>
+      prev.map((o) =>
+        o.id === orderId ? { ...o, status: "pending_confirm" as const, items } : o
+      )
+    );
+    
+    toast.success("驗收完成！已自動產生應付帳款記錄，請進行付款作業");
+    
+    setCurrentPage("purchase-order-management");
+    setInspectingOrder(undefined);
+  };
+
+  const handlePayment = (orderId: string, paymentInfo: PaymentInfo) => {
+    setPurchaseOrders((prev) =>
+      prev.map((o) => {
+        if (o.id === orderId) {
+          // 付款完成後自動轉為「已完成」狀態
+          return {
+            ...o,
+            status: "completed" as const,
+            paymentInfo,
+          };
+        }
+        return o;
+      })
+    );
+    
+    toast.success("付款完成！採購單已完成所有作業");
+  };
+
+  const handleCancelInspection = () => {
+    setCurrentPage("purchase-order-management");
+    setInspectingOrder(undefined);
+  };
+
+  const renderPage = () => {
+    switch (currentPage) {
+      case "purchase-order-management":
+        return (
+          <PurchaseOrderManagement
+            orders={purchaseOrders}
+            onNavigateToInspection={handleNavigateToInspection}
+            onNavigateToCreateOrder={handleNavigateToCreateOrder}
+            onNavigateToEditOrder={handleNavigateToEditOrder}
+            onNavigateToViewOrder={handleNavigateToViewOrder}
+            onDeleteOrder={handleDeleteOrder}
+            onStatusChange={handleStatusChange}
+            onPayment={handlePayment}
+          />
+        );
+      case "create-purchase-order":
+        return (
+          <CreatePurchaseOrderPage
+            order={editingOrder}
+            onSave={handleSaveOrder}
+            onCancel={handleCancelCreateOrder}
+            onDelete={handleDeleteOrder}
+            suppliers={mockSuppliers}
+            stores={mockStores}
+            warehouses={mockWarehouses}
+          />
+        );
+      case "inspection":
+        return (
+          <InspectionPage
+            order={inspectingOrder}
+            onComplete={handleCompleteInspection}
+            onCancel={handleCancelInspection}
+          />
+        );
+      case "view-purchase-order":
+        return (
+          <ViewPurchaseOrderPage
+            order={viewingOrder}
+            onBack={() => setCurrentPage("purchase-order-management")}
+          />
+        );
+      default:
+        return (
+          <PurchaseOrderManagement
+            orders={purchaseOrders}
+            onNavigateToInspection={handleNavigateToInspection}
+            onNavigateToCreateOrder={handleNavigateToCreateOrder}
+            onNavigateToEditOrder={handleNavigateToEditOrder}
+            onNavigateToViewOrder={handleNavigateToViewOrder}
+            onDeleteOrder={handleDeleteOrder}
+            onStatusChange={handleStatusChange}
+            onPayment={handlePayment}
+          />
+        );
+    }
+  };
+
+  const hidesSidebarOnMobile = 
+    currentPage === "inspection" || 
+    currentPage === "create-purchase-order";
+
+  return (
+    <div className="flex min-h-screen" style={{ backgroundColor: 'var(--bg-page)' }}>
+      {/* Sidebar Navigation - 某些頁面在手機版隱藏 */}
+      <div className={hidesSidebarOnMobile ? "hidden md:block" : ""}>
+        <NavigationSidebar
+          currentPath={currentPage}
+          onNavigate={handleNavigate}
+        />
+      </div>
+
+      {/* Main Content */}
+      <main className="flex-1 overflow-auto" style={{ backgroundColor: 'var(--bg-page)' }}>
+        {renderPage()}
+      </main>
+
+      <Toaster />
+    </div>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/App.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/App.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/Attributions.md
+++ b/source-code/ERP(B-aa)-管理採購單/src/Attributions.md
@@ -0,0 +1,3 @@
+This Figma Make file includes components from [shadcn/ui](https://ui.shadcn.com/) used under [MIT license](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md).
+
+This Figma Make file includes photos from [Unsplash](https://unsplash.com) used under [license](https://unsplash.com/license).
--- a/source-code/ERP(B-aa)-管理採購單/src/Attributions.md:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/Attributions.md:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/PROJECT_STRUCTURE.md
+++ b/source-code/ERP(B-aa)-管理採購單/src/PROJECT_STRUCTURE.md
@@ -0,0 +1,180 @@
+# 甜點店 ERP 系統 - 專案結構說明
+
+## 📁 專案架構
+
+```
+/
+├── types/                          # 型別定義
+│   └── purchase-order.ts          # 採購單相關型別
+│
+├── constants/                      # 常數定義
+│   └── purchase-order.ts          # 採購單相關常數
+│
+├── utils/                          # 工具函式
+│   └── purchase-order.ts          # 採購單相關工具函式
+│
+├── hooks/                          # 自定義 Hooks
+│   ├── usePurchaseOrderForm.ts    # 採購單表單管理
+│   └── useInspection.ts           # 驗收流程管理
+│
+├── components/                     # 元件
+│   ├── shared/                    # 共用元件
+│   │   ├── StatusBadge.tsx        # 狀態徽章
+│   │   └── Breadcrumb.tsx         # 麵包屑導航
+│   │
+│   ├── purchase-order/            # 採購單相關元件
+│   │   ├── PurchaseOrderFilters.tsx    # 篩選器
+│   │   ├── PurchaseOrderActions.tsx    # 操作按鈕
+│   │   └── PurchaseOrderItemsTable.tsx # 商品表格
+│   │
+│   ├── inspection/                # 驗收相關元件
+│   │   ├── InspectionTable.tsx    # 驗收明細表格
+│   │   └── InspectionSummary.tsx  # 驗收統計摘要
+│   │
+│   ├── PurchaseOrderManagement.tsx    # 採購單管理頁面
+│   ├── PurchaseOrderTable.tsx         # 採購單列表
+│   ├── CreatePurchaseOrderPage.tsx    # 建立/編輯採購單頁面
+│   ├── InspectionPage.tsx             # 驗收頁面
+│   ├── NavigationSidebar.tsx          # 側邊導航
+│   └── ui/                            # UI 基礎元件庫
+│
+└── App.tsx                        # 主應用程式
+```
+
+## 🎯 模組說明
+
+### 1. 型別定義 (`/types`)
+- 集中管理所有資料型別
+- 提供型別安全和 IntelliSense 支援
+- 便於維護和修改資料結構
+
+### 2. 常數定義 (`/constants`)
+- 狀態配置、流轉規則
+- 異常原因選項
+- 閾值設定
+- 避免魔法數字和重複定義
+
+### 3. 工具函式 (`/utils`)
+- 金額格式化
+- 價格計算和驗證
+- 日期處理
+- 表單驗證
+- 純函式，易於測試
+
+### 4. 自定義 Hooks (`/hooks`)
+- **usePurchaseOrderForm**: 採購單表單狀態管理
+  - 表單資料管理
+  - 商品項目 CRUD
+  - 自動計算
+  
+- **useInspection**: 驗收流程管理
+  - 驗收項目狀態
+  - 數量調整邏輯
+  - 統計計算
+
+### 5. 共用元件 (`/components/shared`)
+- 可重用的 UI 元件
+- 與業務邏輯解耦
+- 提高開發效率
+
+### 6. 功能模組元件 (`/components/purchase-order`, `/components/inspection`)
+- 按功能分組
+- 單一職責
+- 易於維護和測試
+
+## 📋 程式碼最佳化重點
+
+### ✅ 已完成的優化
+
+1. **模組化拆分**
+   - 型別、常數、工具函式獨立管理
+   - 大型元件拆分為小元件
+   - 按功能分組組織
+
+2. **程式碼簡化**
+   - 移除重複邏輯
+   - 提取共用函式
+   - 統一命名規範
+
+3. **可維護性提升**
+   - 清晰的檔案結構
+   - 單一職責原則
+   - 型別安全保證
+
+4. **可擴充性增強**
+   - 低耦合設計
+   - 可重用元件
+   - 易於新增功能
+
+5. **程式碼品質**
+   - 移除未使用的變數和 import
+   - 簡化條件判斷
+   - 語意化命名
+   - 適度註解
+
+## 🔄 資料流
+
+```
+App.tsx (主狀態)
+    ↓
+PurchaseOrderManagement (頁面)
+    ↓
+PurchaseOrderTable (列表)
+    ↓
+PurchaseOrderFilters (篩選) + PurchaseOrderActions (操作)
+```
+
+```
+CreatePurchaseOrderPage (頁面)
+    ↓
+usePurchaseOrderForm (Hook - 表單邏輯)
+    ↓
+PurchaseOrderItemsTable (商品表格)
+```
+
+```
+InspectionPage (頁面)
+    ↓
+useInspection (Hook - 驗收邏輯)
+    ↓
+InspectionTable (驗收表格) + InspectionSummary (統計)
+```
+
+## 🚀 使用範例
+
+### 使用型別定義
+```typescript
+import type { PurchaseOrder, PurchaseOrderStatus } from "../types/purchase-order";
+```
+
+### 使用常數
+```typescript
+import { STATUS_CONFIG, PRICE_ALERT_THRESHOLD } from "../constants/purchase-order";
+```
+
+### 使用工具函式
+```typescript
+import { formatCurrency, isPriceAlert } from "../utils/purchase-order";
+```
+
+### 使用 Hooks
+```typescript
+import { usePurchaseOrderForm } from "../hooks/usePurchaseOrderForm";
+
+const { items, addItem, updateItem } = usePurchaseOrderForm({ order, suppliers });
+```
+
+## 📝 注意事項
+
+1. **型別安全**: 所有元件都使用 TypeScript 型別定義
+2. **命名規範**: 使用語意化的變數和函式名稱
+3. **單一職責**: 每個模組/元件只負責一個功能
+4. **向後相容**: 保持所有現有功能不變
+5. **可測試性**: 純函式和 Hooks 易於單元測試
+
+## 🔧 未來擴充建議
+
+1. 可考慮新增 `/services` 目錄處理 API 呼叫
+2. 可新增 `/contexts` 目錄使用 Context API 管理全域狀態
+3. 可新增 `/tests` 目錄加入單元測試和整合測試
+4. 可考慮使用狀態管理庫（如 Zustand）簡化狀態管理
--- a/source-code/ERP(B-aa)-管理採購單/src/PROJECT_STRUCTURE.md:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/PROJECT_STRUCTURE.md:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/PURCHASE_ORDER_LIST_REDESIGN.md
+++ b/source-code/ERP(B-aa)-管理採購單/src/PURCHASE_ORDER_LIST_REDESIGN.md
@@ -0,0 +1,257 @@
+# 採購單列表頁面改版文件
+
+## 📋 改版目標
+
+1. 改善採購單列表的資訊層級與可讀性
+2. 使用者能快速辨識每張採購單的來源（由誰發起，以及從哪個單位發出）
+3. 僅在合約允許的範圍內做 UI 調整，不擴充額外功能
+4. 保留既有的建立採購單、搜尋、篩選、驗收等功能
+
+## ✅ 完成的改版項目
+
+### 1. 新增必要欄位（業務需求）
+
+#### 申請人（採購人）
+- **顯示內容**: 採購單建立者的姓名
+- **資料來源**: `PurchaseOrder.createdBy`
+- **顯示位置**: 與申請單位合併顯示於「申請資訊」欄位
+- **用途**: 辨識責任歸屬、快速找到聯絡人
+
+#### 申請單位（來源單位）
+- **顯示內容**: 發起採購的部門/門市（總店、A 店、B 店等）
+- **資料來源**: `PurchaseOrder.department`
+- **顯示位置**: 與申請人合併顯示於「申請資訊」欄位
+- **用途**: 判斷採購流程流向（由誰驗收、要送去哪裡）
+
+#### 建立日期
+- **顯示內容**: 採購單建立的日期
+- **資料來源**: `PurchaseOrder.createdAt`
+- **顯示位置**: 獨立欄位，位於廠商與預計到貨日之間
+- **用途**: 催貨、追進度
+
+### 2. 欄位排序優化
+
+新的欄位順序（左至右）：
+1. **採購單編號** - 帶複製按鈕，方便複製分享
+2. **申請資訊** - 顯示「申請單位」與「申請人」
+3. **廠商** - 供應商名稱
+4. **建立日期** - 採購單建立時間
+5. **預計到貨日** - 預期到貨時間
+6. **總金額** - 右對齊，易於比較
+7. **狀態** - 使用彩色徽章
+8. **操作** - 驗收/編輯/取消按鈕
+
+### 3. 視覺優化
+
+#### 狀態顯示樣式
+所有狀態統一使用灰色線框徽章（outline variant），不以顏色做區分：
+
+- **待寄出**
+- **待發貨**
+- **運送中**
+- **已到貨（待驗收）**
+- **已完成**
+- **已取消**
+
+保持一致的視覺風格，讓使用者專注於狀態文字本身。
+
+#### 操作按鈕視覺層級
+
+**主要動作（驗收）**
+- 使用實心按鈕 `button-filled-primary`
+- 僅在「已到貨（待驗收）」狀態顯示
+- 包含圖示 + 文字
+
+**次要動作（編輯）**
+- 使用線框按鈕 `button-outlined-primary`
+- 僅顯示圖示（節省空間）
+- 包含 tooltip 說明
+
+**高風險動作（取消）**
+- 使用紅色線框按鈕
+- 明確的紅色邊框和文字
+- hover 時加強視覺效果
+
+### 4. 使用者體驗優化
+
+#### 複製採購單編號功能
+- 點擊採購單編號旁的複製按鈕
+- 自動複製到剪貼簿
+- 顯示成功提示訊息
+- 按鈕圖示從「複製」變為「打勾」2 秒
+
+#### 搜尋提示優化
+- **舊**: "搜尋採購單編號或廠商..."
+- **新**: "搜尋採購單編號 / 廠商名稱"
+- 更明確的斜線分隔，清楚說明可搜尋內容
+
+#### 申請資訊顯示
+採用雙行顯示，節省水平空間：
+```
+總店              ← 申請單位（較大、粗體）
+王小華            ← 申請人（較小、灰色）
+```
+
+#### 採購單編號顯示
+- 使用 `font-mono` 等寬字體
+- 易於閱讀和比對
+- 搭配複製按鈕
+
+## 📊 資料結構更新
+
+### PurchaseOrder 型別新增欄位
+
+```typescript
+export interface PurchaseOrder {
+  // ... 既有欄位
+  createdBy: string;      // 申請人（採購人）
+  department: string;     // 申請單位
+}
+```
+
+### Mock 資料範例
+
+```typescript
+{
+  id: "po-1",
+  poNumber: "PO202411001",
+  supplierId: "sup-1",
+  supplierName: "美食材料供應商",
+  expectedDate: "2024-11-25",
+  status: "arrived",
+  createdBy: "王小華",        // 新增
+  department: "總店",         // 新增
+  items: [...],
+  totalAmount: 3300,
+  createdAt: "2024-11-18",
+}
+```
+
+## 🎨 UI 元件更新
+
+### 新增元件
+
+1. **CopyButton** (`/components/shared/CopyButton.tsx`)
+   - 通用複製按鈕元件
+   - 支援複製任意文字
+   - 包含視覺回饋（圖示切換、Toast 提示）
+
+### 更新元件
+
+1. **StatusBadge** (`/components/shared/StatusBadge.tsx`)
+   - 支援新的顏色系統
+   - 動態顯示背景色、文字色、邊框色
+
+2. **PurchaseOrderTable** (`/components/PurchaseOrderTable.tsx`)
+   - 調整欄位順序和寬度
+   - 新增申請資訊欄位
+   - 整合 CopyButton
+   - 優化表格佈局
+
+3. **PurchaseOrderActions** (`/components/purchase-order/PurchaseOrderActions.tsx`)
+   - 調整按鈕視覺層級
+   - 取消按鈕使用紅色強調
+   - 新增 tooltip 說明
+
+4. **PurchaseOrderFilters** (`/components/purchase-order/PurchaseOrderFilters.tsx`)
+   - 更新搜尋框 placeholder
+
+## 🔄 資料流
+
+### 建立採購單時
+```
+使用者填寫表單
+    ↓
+系統自動帶入:
+  - createdBy: "系統使用者"（實際應從登入狀態取得）
+  - department: "總店"（實際應從使用者資料取得）
+    ↓
+儲存至資料庫
+```
+
+### 列表顯示時
+```
+從資料庫讀取 PurchaseOrder[]
+    ↓
+表格顯示:
+  - 申請資訊: department / createdBy
+  - 建立日期: createdAt
+  - 其他既有欄位
+```
+
+## 📝 實作注意事項
+
+### 1. 使用者身分整合
+目前使用預設值，實際部署時需要：
+- 從登入系統取得當前使用者姓名
+- 從使用者資料取得所屬單位
+- 在建立採購單時自動填入
+
+```typescript
+// 實際應用時的範例
+const currentUser = useAuth(); // 取得登入使用者
+const newOrder = {
+  // ...
+  createdBy: currentUser.name,
+  department: currentUser.department,
+};
+```
+
+### 2. 表格寬度控制
+各欄位寬度設定：
+- 採購單編號: 140px
+- 申請資訊: 180px（雙行顯示）
+- 廠商: 160px
+- 建立日期: 110px
+- 預計到貨日: 110px
+- 總金額: 110px
+- 狀態: 140px
+- 操作: 自動
+
+### 3. 響應式設計
+- 使用 `overflow-x-auto` 支援水平捲動
+- 在小螢幕上保持完整功能
+- 建議最小寬度: 1200px
+
+### 4. 暗色模式支援
+所有顏色都包含 `dark:` 變體：
+- 文字顏色
+- 背景顏色
+- 邊框顏色
+
+## ✨ 改版效益
+
+### 資訊完整性
+- ✅ 清楚知道採購單來源
+- ✅ 快速辨識責任歸屬
+- ✅ 方便追蹤進度
+
+### 使用者體驗
+- ✅ 一鍵複製採購單編號
+- ✅ 視覺層級更清晰
+- ✅ 狀態一目了然
+
+### 操作效率
+- ✅ 減少點擊次數
+- ✅ 重要動作突出
+- ✅ 危險操作有警示
+
+### 可維護性
+- ✅ 資料結構完整
+- ✅ 元件化設計
+- ✅ 易於擴充
+
+## 🚫 未包含的功能（避免超出範圍）
+
+- ❌ 採購單 KPI
+- ❌ 異常分析
+- ❌ 批次、效期資料
+- ❌ 自動催貨機制
+- ❌ 寄出通知提醒
+- ❌ 採購單歷史比較
+- ❌ 供應商評分系統
+- ❌ 進階追蹤與報表
+
+## 🎯 總結
+
+此次改版專注於**必要的資訊補充**和**使用者體驗優化**，所有調整均在合約範圍內，未增加額外功能。透過新增申請人、申請單位、建立日期等欄位，以及優化視覺呈現和操作體驗，大幅提升了採購單列表的可用性和資訊完整性。
--- a/source-code/ERP(B-aa)-管理採購單/src/PURCHASE_ORDER_LIST_REDESIGN.md:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/PURCHASE_ORDER_LIST_REDESIGN.md:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/REFACTORING_SUMMARY.md
+++ b/source-code/ERP(B-aa)-管理採購單/src/REFACTORING_SUMMARY.md
@@ -0,0 +1,243 @@
+# 程式碼重構摘要
+
+## 📊 重構統計
+
+- **新增檔案**: 15 個
+- **重構檔案**: 5 個
+- **移除重複代碼**: ~200 行
+- **程式碼組織提升**: 模組化架構
+
+## 🎯 重構目標達成
+
+### ✅ 1. 模組化與拆分
+
+#### 型別定義獨立化
+- 創建 `/types/purchase-order.ts`
+- 集中管理所有資料型別
+- 提供完整的 TypeScript 支援
+
+#### 常數集中管理
+- 創建 `/constants/purchase-order.ts`
+- 狀態配置、流轉規則、選項列表
+- 消除魔法數字和字串
+
+#### 工具函式模組化
+- 創建 `/utils/purchase-order.ts`
+- 12 個純函式：格式化、計算、驗證
+- 易於測試和重用
+
+### ✅ 2. 程式結構優化
+
+#### 移除重複代碼
+**Before:**
+- 多處重複的狀態標籤配置
+- 重複的金額格式化邏輯
+- 重複的價格警示判斷
+
+**After:**
+- 統一的 `StatusBadge` 元件
+- 單一的 `formatCurrency` 函式
+- 集中的 `isPriceAlert` 邏輯
+
+#### 移除未使用的代碼
+- 刪除 `purchaseOrderManagementRef`（未使用）
+- 移除 `handleSendOrder` 的中間層（直接傳遞）
+- 清理註解和除錯代碼
+
+#### 精簡條件判斷
+**Before:**
+```typescript
+const statusLabels: Record<PurchaseOrderStatus, string> = {
+  pending: "待寄出",
+  preparing: "待發貨",
+  // ...
+};
+toast.success(`採購單狀態已更新為：${statusLabels[newStatus]}`);
+```
+
+**After:**
+```typescript
+toast.success(`採購單狀態已更新為：${STATUS_CONFIG[newStatus].label}`);
+```
+
+### ✅ 3. 抽離共用邏輯
+
+#### 自定義 Hooks
+**usePurchaseOrderForm**
+- 表單狀態管理（240+ 行 → Hook）
+- 商品項目 CRUD 邏輯
+- 自動計算和驗證
+
+**useInspection**
+- 驗收流程邏輯（150+ 行 → Hook）
+- 數量調整和問題判斷
+- 統計資訊計算
+
+#### 資料處理函式
+```typescript
+// 金額處理
+formatCurrency(amount)
+calculateSubtotal(quantity, unitPrice)
+calculateTotalAmount(items)
+
+// 價格驗證
+isPriceAlert(current, previous)
+calculatePriceIncrease(current, previous)
+
+// 表單驗證
+validatePurchaseOrder(supplierId, date, items)
+filterValidItems(items)
+
+// 輔助函式
+generatePONumber()
+getTodayDate()
+```
+
+### ✅ 4. UI 元件化
+
+#### 共用元件 (`/components/shared`)
+- **StatusBadge**: 統一的狀態徽章顯示
+- **Breadcrumb**: 可重用的麵包屑導航
+
+#### 功能模組元件 (`/components/purchase-order`)
+- **PurchaseOrderFilters**: 篩選器（搜尋、狀態、廠商）
+- **PurchaseOrderActions**: 操作按鈕集合
+- **PurchaseOrderItemsTable**: 商品表格（支援編輯/唯讀模式）
+
+#### 驗收模組元件 (`/components/inspection`)
+- **InspectionTable**: 驗收明細表格（雙欄對比設計）
+- **InspectionSummary**: 統計摘要（異常項目、金額統計）
+
+### ✅ 5. 確保功能不變
+
+#### 驗證完成
+- ✅ 採購單列表篩選功能
+- ✅ 採購單 CRUD 操作
+- ✅ 狀態流轉邏輯
+- ✅ 建立/編輯採購單
+- ✅ 價格警示提示
+- ✅ 驗收流程（極速模式）
+- ✅ 異常記錄和統計
+- ✅ 所有按鈕樣式符合 Guidelines
+
+#### 資料流保持一致
+- 主狀態管理在 `App.tsx`
+- 單向資料流：父 → 子
+- 事件回調：子 → 父
+
+### ✅ 6. 適度加入註解
+
+#### 模組層級註解
+```typescript
+/**
+ * 採購單相關型別定義
+ */
+
+/**
+ * 採購單表單管理 Hook
+ */
+```
+
+#### 關鍵邏輯註解
+```typescript
+// 極速驗收模式：預設所有實際到貨數量 = 應到貨數量
+
+// 後台自動化處理：更新庫存數量、產生應付帳款記錄、更新 PO 狀態
+```
+
+## 📈 改善成效
+
+### 可維護性
+- **Before**: 單一檔案 400+ 行，職責混雜
+- **After**: 模組化設計，單一檔案 < 200 行
+
+### 可讀性
+- **Before**: 邏輯分散，難以追蹤
+- **After**: 清晰的檔案結構，語意化命名
+
+### 可擴充性
+- **Before**: 新增功能需修改多處
+- **After**: 低耦合設計，易於擴充
+
+### 可測試性
+- **Before**: UI 與邏輯耦合，難以測試
+- **After**: 純函式和 Hooks，易於單元測試
+
+### 開發效率
+- **Before**: 重複代碼，維護成本高
+- **After**: 可重用元件，開發更快速
+
+## 🔍 重構前後對比
+
+### PurchaseOrderManagement.tsx
+- **Before**: 116 行（包含中間層函式）
+- **After**: 51 行（僅負責頁面結構）
+- **減少**: 56%
+
+### CreatePurchaseOrderPage.tsx
+- **Before**: 433 行（表單邏輯 + UI）
+- **After**: 185 行（使用 Hook 管理邏輯）
+- **減少**: 57%
+
+### InspectionPage.tsx
+- **Before**: 430 行（驗收邏輯 + UI）
+- **After**: 136 行（使用 Hook 管理邏輯）
+- **減少**: 68%
+
+### PurchaseOrderTable.tsx
+- **Before**: 327 行（包含內聯元件）
+- **After**: 163 行（使用獨立元件）
+- **減少**: 50%
+
+## 📚 新增的可重用資源
+
+### 型別（9 個）
+- PurchaseOrderStatus
+- PurchaseOrderItem
+- PurchaseOrder
+- Supplier
+- CommonProduct
+- InspectionItem
+- 等...
+
+### 常數（5 組）
+- STATUS_CONFIG
+- STATUS_TRANSITIONS
+- STATUS_ACTION_LABELS
+- ISSUE_REASONS
+- PRICE_ALERT_THRESHOLD
+
+### 工具函式（12 個）
+- formatCurrency
+- calculateSubtotal
+- calculateTotalAmount
+- isPriceAlert
+- calculatePriceIncrease
+- generatePONumber
+- getTodayDate
+- validatePurchaseOrder
+- filterValidItems
+- 等...
+
+### 自定義 Hooks（2 個）
+- usePurchaseOrderForm
+- useInspection
+
+### UI 元件（7 個）
+- StatusBadge
+- Breadcrumb
+- PurchaseOrderFilters
+- PurchaseOrderActions
+- PurchaseOrderItemsTable
+- InspectionTable
+- InspectionSummary
+
+## 🎉 總結
+
+此次重構成功將甜點店 ERP 系統的採購管理模塊從：
+- **單體架構** → **模組化架構**
+- **緊耦合** → **低耦合**
+- **難以維護** → **易於維護**
+- **不易擴充** → **容易擴充**
+
+所有功能保持 100% 不變，同時大幅提升了程式碼品質、可讀性和開發效率。
--- a/source-code/ERP(B-aa)-管理採購單/src/REFACTORING_SUMMARY.md:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/REFACTORING_SUMMARY.md:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/CreatePurchaseOrderPage.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/CreatePurchaseOrderPage.tsx
@@ -0,0 +1,506 @@
+/**
+ * 建立/編輯採購單頁面 - Mobile-first RWD
+ */
+
+import { useState } from "react";
+import { ArrowLeft, AlertCircle, Calendar, Building2, FileText, Info, Store as StoreIcon, Warehouse as WarehouseIcon, User, Plus, Trash2 } from "lucide-react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Textarea } from "./ui/textarea";
+import { Alert, AlertDescription } from "./ui/alert";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./ui/alert-dialog";
+import { PurchaseOrderItemsTable } from "./purchase-order/PurchaseOrderItemsTable";
+import type { PurchaseOrder, Supplier, RequesterType } from "../types/purchase-order";
+import type { Store, Warehouse } from "../types/requester";
+import { usePurchaseOrderForm } from "../hooks/usePurchaseOrderForm";
+import { STATUS_CONFIG } from "../constants/purchase-order";
+import {
+  validatePurchaseOrder,
+  filterValidItems,
+  calculateTotalAmount,
+  generatePONumber,
+  getTodayDate,
+  isPriceAlert,
+  formatCurrency,
+} from "../utils/purchase-order";
+
+interface CreatePurchaseOrderPageProps {
+  order?: PurchaseOrder;
+  onSave: (order: PurchaseOrder) => void;
+  onCancel: () => void;
+  onDelete?: (id: string) => void;
+  suppliers: Supplier[];
+  stores: Store[];
+  warehouses: Warehouse[];
+}
+
+export default function CreatePurchaseOrderPage({
+  order,
+  onSave,
+  onCancel,
+  onDelete,
+  suppliers,
+  stores,
+  warehouses,
+}: CreatePurchaseOrderPageProps) {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  
+  const {
+    supplierId,
+    expectedDate,
+    items,
+    notes,
+    status,
+    selectedSupplier,
+    isOrderSent,
+    requesterType,
+    requesterId,
+    setSupplierId,
+    setExpectedDate,
+    setNotes,
+    setStatus,
+    setRequesterType,
+    setRequesterId,
+    addItem,
+    removeItem,
+    updateItem,
+  } = usePurchaseOrderForm({ order, suppliers });
+
+  const totalAmount = calculateTotalAmount(items);
+  const isValid = validatePurchaseOrder(supplierId, expectedDate, items);
+  const hasPriceAlerts = items.some((item) => isPriceAlert(item.unitPrice, item.previousPrice));
+
+  // 根據類型選擇對應的清單
+  const requesterList = requesterType === "store" ? stores : warehouses;
+  const selectedRequester = requesterList.find((r) => r.id === requesterId);
+
+  const handleSave = () => {
+    if (!isValid || !requesterId) return;
+
+    const validItems = filterValidItems(items);
+    if (validItems.length === 0) return;
+
+    const supplier = suppliers.find((s) => s.id === supplierId);
+    if (!supplier) return;
+
+    const requester = requesterList.find((r) => r.id === requesterId);
+    if (!requester) return;
+
+    const newOrder: PurchaseOrder = {
+      id: order?.id || `po-${Date.now()}`,
+      poNumber: order?.poNumber || generatePONumber(),
+      supplierId,
+      supplierName: supplier.name,
+      expectedDate,
+      status,
+      items: validItems,
+      totalAmount: calculateTotalAmount(validItems),
+      createdAt: order?.createdAt || getTodayDate(),
+      createdBy: order?.createdBy || "系統使用者",
+      requesterType,
+      requesterId,
+      requesterName: requester.name,
+      department: requester.name, // 保留相容性
+      notes,
+    };
+
+    onSave(newOrder);
+  };
+
+  const handleDelete = () => {
+    if (order && onDelete) {
+      onDelete(order.id);
+      onCancel(); // 刪除後返回列表頁
+    }
+    setShowDeleteDialog(false);
+  };
+
+  const hasSupplier = !!supplierId;
+  const hasRequester = !!requesterId;
+  const hasItems = items.length > 0 && items.some(item => item.productId && item.quantity > 0);
+  const canSave = isValid && hasRequester && hasItems;
+
+  // 計算 disabled 原因
+  const getDisabledReason = () => {
+    if (!requesterId) return "請先選擇申請單位";
+    if (!supplierId) return "請先選擇供應商";
+    if (!expectedDate) return "請填寫預計到貨日";
+    if (!hasItems) return "至少新增 1 項有效商品";
+    return "";
+  };
+
+  return (
+    <div className="min-h-screen bg-background pb-32 md:pb-0">
+      {/* Header */}
+      <div className="sticky top-0 z-20 bg-background border-b-2 border-border p-4 md:p-6">
+        <div className="max-w-6xl mx-auto">
+          {/* 返回按鈕 */}
+          <div className="flex items-center gap-2 mb-4">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onCancel}
+              className="gap-2 button-outlined-primary"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              <span className="hidden sm:inline">返回</span>
+            </Button>
+          </div>
+
+          {/* 頁面標題 */}
+          <div>
+            <h1>{order ? "編輯採購單" : "建立採購單"}</h1>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="max-w-6xl mx-auto px-4 md:px-6 py-6 space-y-6">
+        {/* 基本資訊卡片 */}
+        <div className="bg-card rounded-lg border-2 border-border p-6">
+          <div className="flex items-center gap-2 mb-6">
+            <div className="flex items-center justify-center w-8 h-8 rounded-full border-2 border-muted text-muted-foreground shrink-0">
+              1
+            </div>
+            <h2 className="text-muted-foreground">基本資訊</h2>
+          </div>
+
+          {/* 已寄出訂單提示 */}
+          {isOrderSent && (
+            <Alert className="mb-6">
+              <Info className="h-4 w-4" />
+              <AlertDescription>
+                此採購單已寄出，僅可修改訂單狀態、預計到貨日及備註
+              </AlertDescription>
+            </Alert>
+          )}
+
+          <div className="space-y-4">
+            {/* 訂單狀態（編輯模式時顯示） */}
+            {order && (
+              <div>
+                <label htmlFor="status" className="caption text-muted-foreground mb-2 flex items-center gap-2">
+                  訂單狀態 <span className="text-destructive">*</span>
+                </label>
+                <Select value={status} onValueChange={(value: any) => setStatus(value)}>
+                  <SelectTrigger id="status" className="h-12 border-2 border-input">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {Object.entries(STATUS_CONFIG).map(([key, config]) => (
+                      <SelectItem key={key} value={key}>
+                        {config.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+
+            {/* 申請人資訊 */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {/* 申請人類型 */}
+              <div>
+                <label htmlFor="requesterType" className="caption text-muted-foreground mb-2">
+                  申請人類型 <span className="text-destructive">*</span>
+                </label>
+                <Select
+                  value={requesterType}
+                  onValueChange={(value: RequesterType) => {
+                    setRequesterType(value);
+                    setRequesterId(""); // 重置選擇的單位
+                  }}
+                  disabled={isOrderSent}
+                >
+                  <SelectTrigger id="requesterType" className="h-12 border-2 border-input">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="store">
+                      <div className="flex items-center gap-2">
+                        <StoreIcon className="h-4 w-4" />
+                        <span>門市</span>
+                      </div>
+                    </SelectItem>
+                    <SelectItem value="warehouse">
+                      <div className="flex items-center gap-2">
+                        <WarehouseIcon className="h-4 w-4" />
+                        <span>倉庫</span>
+                      </div>
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* 申請單位 */}
+              <div>
+                <label htmlFor="requester" className="caption text-muted-foreground mb-2">
+                  {requesterType === "store" ? "門市" : "倉庫"} <span className="text-destructive">*</span>
+                </label>
+                <Select
+                  value={requesterId}
+                  onValueChange={setRequesterId}
+                  disabled={isOrderSent}
+                >
+                  <SelectTrigger id="requester" className="h-12 border-2 border-input">
+                    <SelectValue placeholder={`請選擇${requesterType === "store" ? "門市" : "倉庫"}`} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {requesterList.map((requester) => (
+                      <SelectItem key={requester.id} value={requester.id}>
+                        <div>
+                          <div>{requester.name}</div>
+                          {requester.address && (
+                            <div className="caption text-muted-foreground">
+                              {requester.address}
+                            </div>
+                          )}
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            {/* 採購資訊 */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {/* 供應商選擇 */}
+              <div>
+                <label htmlFor="supplier" className="caption text-muted-foreground mb-2">
+                  供應商 <span className="text-destructive">*</span>
+                </label>
+                <Select
+                  value={supplierId}
+                  onValueChange={setSupplierId}
+                  disabled={isOrderSent}
+                >
+                  <SelectTrigger id="supplier" className="h-12 border-2 border-input">
+                    <SelectValue placeholder="請選擇供應商" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {suppliers.map((supplier) => (
+                      <SelectItem key={supplier.id} value={supplier.id}>
+                        <div>
+                          <div>{supplier.name}</div>
+                          <div className="caption text-muted-foreground">
+                            {supplier.contact} · {supplier.phone}
+                          </div>
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* 預計到貨日 */}
+              <div>
+                <label htmlFor="expectedDate" className="caption text-muted-foreground mb-2">
+                  預計到貨日 <span className="text-destructive">*</span>
+                </label>
+                <div className="relative">
+                  <Input
+                    id="expectedDate"
+                    type="date"
+                    value={expectedDate}
+                    onChange={(e) => setExpectedDate(e.target.value)}
+                    min={getTodayDate()}
+                    className="h-12 border-2 border-input pr-10 [&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-0 [&::-webkit-calendar-picker-indicator]:w-10 [&::-webkit-calendar-picker-indicator]:h-12 [&::-webkit-calendar-picker-indicator]:cursor-pointer"
+                  />
+                  <Calendar className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground pointer-events-none" />
+                </div>
+              </div>
+            </div>
+
+            {/* 備註 */}
+            <div>
+              <label htmlFor="notes" className="caption text-muted-foreground mb-2">
+                備註
+              </label>
+              <Textarea
+                id="notes"
+                value={notes}
+                onChange={(e) => setNotes(e.target.value)}
+                placeholder="選填：特殊要求或注意事項"
+                rows={3}
+                className="border-2 border-input resize-none"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* 採購商品區 */}
+        <div className={`bg-card rounded-lg border-2 border-border p-6 transition-opacity ${!hasSupplier ? "opacity-60" : ""}`}>
+          <div className="flex items-center justify-between mb-6">
+            <div className="flex items-center gap-2">
+              <div className="flex items-center justify-center w-8 h-8 rounded-full border-2 border-muted text-muted-foreground shrink-0">
+                2
+              </div>
+              <h2 className="text-muted-foreground">採購商品</h2>
+            </div>
+            {!isOrderSent && (
+              <Button
+                onClick={addItem}
+                disabled={!hasSupplier}
+                className="gap-2 h-12 button-filled-primary"
+              >
+                <Plus className="h-5 w-5" />
+                新增商品
+              </Button>
+            )}
+          </div>
+
+          {/* 未選擇供應商時的提示 */}
+          {!hasSupplier && (
+            <Alert className="mb-6">
+              <Info className="h-4 w-4" />
+              <AlertDescription>
+                請先在步驟 1 中選擇供應商後才能新增商品
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {/* 商品表格 */}
+          <PurchaseOrderItemsTable
+            items={items}
+            supplier={selectedSupplier}
+            isReadOnly={isOrderSent}
+            isDisabled={!hasSupplier}
+            onAddItem={addItem}
+            onRemoveItem={removeItem}
+            onItemChange={updateItem}
+          />
+
+          {/* 價格警示提示 */}
+          {!isOrderSent && hasPriceAlerts && hasSupplier && (
+            <Alert variant="destructive" className="mt-6">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>
+                部分商品單價比上次採購價高出超過 5%，請確認是否正確。
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {/* 總金額 */}
+          {hasSupplier && items.length > 0 && (
+            <div className="flex justify-between items-center pt-6 mt-6 border-t-2 border-border">
+              <span className="text-muted-foreground">總金額</span>
+              <span className="text-primary-main">{formatCurrency(totalAmount)}</span>
+            </div>
+          )}
+        </div>
+
+        {/* 操作按鈕 - 桌面版 */}
+        <div className="hidden md:block">
+          {!canSave && (
+            <Alert variant="destructive" className="mb-4">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>{getDisabledReason()}</AlertDescription>
+            </Alert>
+          )}
+          <div className="flex justify-end gap-4 pt-6">
+            <Button
+              variant="outline"
+              onClick={onCancel}
+              className="h-12 button-outlined-primary"
+            >
+              取消
+            </Button>
+            <Button
+              onClick={handleSave}
+              disabled={!canSave}
+              className="h-12 button-filled-primary"
+            >
+              {order ? "更新採購單" : "建立採購單"}
+            </Button>
+            {order && (
+              <Button
+                variant="destructive"
+                onClick={() => setShowDeleteDialog(true)}
+                className="h-12 button-filled-destructive"
+              >
+                <Trash2 className="h-5 w-5" />
+                刪除採購單
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* 操作按鈕 - 手機版（固定底部） */}
+      <div className="fixed bottom-0 left-0 right-0 bg-card border-t-2 border-border p-4 md:hidden z-10">
+        {!canSave && (
+          <Alert variant="destructive" className="mb-4">
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription>{getDisabledReason()}</AlertDescription>
+          </Alert>
+        )}
+        <div className="flex gap-4">
+          <Button
+            variant="outline"
+            onClick={onCancel}
+            className="flex-1 h-12 button-outlined-primary"
+          >
+            取消
+          </Button>
+          <Button
+            onClick={handleSave}
+            disabled={!canSave}
+            className="flex-1 h-12 button-filled-primary"
+          >
+            {order ? "更新採購單" : "建立採購單"}
+          </Button>
+          {order && (
+            <Button
+              variant="destructive"
+              onClick={() => setShowDeleteDialog(true)}
+              className="flex-1 h-12 button-filled-destructive"
+            >
+              <Trash2 className="h-5 w-5" />
+              刪除採購單
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* 刪除確認對話框 */}
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>確認刪除採購單</AlertDialogTitle>
+            <AlertDialogDescription>
+              確定要刪除這張採購單嗎？此操作無法撤銷。
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel className="h-12 button-outlined-primary">
+              取消
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              className="h-12 button-filled-destructive"
+            >
+              刪除
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/CreatePurchaseOrderPage.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/CreatePurchaseOrderPage.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/InspectionPage.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/InspectionPage.tsx
@@ -0,0 +1,117 @@
+/**
+ * 驗收頁面 - Mobile-first RWD
+ */
+
+import { ArrowLeft } from "lucide-react";
+import { Button } from "./ui/button";
+import { InspectionOrderInfo } from "./inspection/InspectionOrderInfo";
+import { InspectionTable } from "./inspection/InspectionTable";
+import { InspectionAmountSummary } from "./inspection/InspectionAmountSummary";
+import { InspectionAutoActions } from "./inspection/InspectionAutoActions";
+import { InspectionActionBar } from "./inspection/InspectionActionBar";
+import { StatusProgressBar } from "./purchase-order/StatusProgressBar";
+import type { PurchaseOrder, PurchaseOrderItem } from "../types/purchase-order";
+import { useInspection } from "../hooks/useInspection";
+
+interface InspectionPageProps {
+  order?: PurchaseOrder;
+  onComplete: (orderId: string, items: PurchaseOrderItem[]) => void;
+  onCancel: () => void;
+}
+
+export default function InspectionPage({
+  order,
+  onComplete,
+  onCancel,
+}: InspectionPageProps) {
+  const {
+    inspectionItems,
+    statistics,
+    updateReceivedQuantity,
+    updateIssueNote,
+  } = useInspection({ order });
+
+  const handleComplete = () => {
+    if (!order) return;
+
+    // 更新商品數量（使用實際收到的數量）
+    const updatedItems: PurchaseOrderItem[] = inspectionItems.map((item) => ({
+      productId: item.productId,
+      productName: item.productName,
+      quantity: item.receivedQuantity,
+      unit: item.unit,
+      unitPrice: item.unitPrice,
+      previousPrice: item.previousPrice,
+      subtotal: item.receivedQuantity * item.unitPrice,
+    }));
+
+    onComplete(order.id, updatedItems);
+  };
+
+  if (!order) {
+    return (
+      <div className="p-4 md:p-6">
+        <div className="text-center text-muted-foreground">未找到採購單資訊</div>
+      </div>
+    );
+  }
+
+  const hasIssues = statistics.shortageItems > 0;
+  const actualAmount = inspectionItems.reduce(
+    (sum, item) => sum + item.receivedQuantity * item.unitPrice,
+    0
+  );
+
+  return (
+    <div className="min-h-screen bg-background pb-24 md:pb-0">
+      {/* Header */}
+      <div className="sticky top-0 z-20 bg-background border-b-2 border-border p-4 md:p-6">
+        <div className="max-w-6xl mx-auto">
+          {/* 返回按鈕 - 手機版和桌面版都顯示 */}
+          <div className="flex items-center gap-2 mb-4">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onCancel}
+              className="gap-2 button-outlined-primary"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              <span className="hidden sm:inline">返回</span>
+            </Button>
+          </div>
+          <div>
+            <h1>驗收與收貨</h1>
+            <p className="body-sm text-muted-foreground mt-1">
+              請確認實際收貨數量
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="max-w-6xl mx-auto px-4 md:px-6 py-6 space-y-6">
+        {/* Level 1: 訂單資訊卡片 */}
+        <InspectionOrderInfo order={order} hasIssues={hasIssues} />
+
+        {/* Level 2: 商品驗收 */}
+        <InspectionTable
+          items={inspectionItems}
+          onReceivedQuantityChange={updateReceivedQuantity}
+          onIssueNoteChange={updateIssueNote}
+        />
+
+        {/* Level 3: 金額統計 */}
+        <InspectionAmountSummary
+          originalAmount={order.totalAmount}
+          actualAmount={actualAmount}
+        />
+
+        {/* Level 4: 驗收後自動執行（收合狀態） */}
+        <InspectionAutoActions />
+
+        {/* 操作按鈕 */}
+        <InspectionActionBar onCancel={onCancel} onComplete={handleComplete} />
+      </div>
+    </div>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/InspectionPage.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/InspectionPage.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/NavigationSidebar.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/NavigationSidebar.tsx
@@ -0,0 +1,124 @@
+import { ChevronDown, ChevronRight, ShoppingCart, ClipboardList, Users } from "lucide-react";
+import { useState } from "react";
+import { cn } from "./ui/utils";
+
+interface MenuItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  children?: MenuItem[];
+}
+
+interface NavigationSidebarProps {
+  currentPath: string;
+  onNavigate: (path: string) => void;
+}
+
+export default function NavigationSidebar({
+  currentPath,
+  onNavigate,
+}: NavigationSidebarProps) {
+  const [expandedItems, setExpandedItems] = useState<string[]>(["purchase-management"]);
+
+  const menuItems: MenuItem[] = [
+    {
+      id: "purchase-management",
+      label: "採購管理",
+      icon: <ShoppingCart className="h-5 w-5" />,
+      children: [
+        {
+          id: "purchase-order-management",
+          label: "管理採購單",
+          icon: <ClipboardList className="h-4 w-4" />,
+        }
+      ],
+    },
+  ];
+
+  const toggleExpand = (itemId: string) => {
+    setExpandedItems((prev) =>
+      prev.includes(itemId)
+        ? prev.filter((id) => id !== itemId)
+        : [...prev, itemId]
+    );
+  };
+
+  const renderMenuItem = (item: MenuItem, level: number = 0) => {
+    const hasChildren = item.children && item.children.length > 0;
+    const isExpanded = expandedItems.includes(item.id);
+    const isActive = currentPath === item.id;
+
+    return (
+      <div key={item.id}>
+        <button
+          onClick={() => {
+            if (hasChildren) {
+              toggleExpand(item.id);
+            } else {
+              onNavigate(item.id);
+            }
+          }}
+          className={cn(
+            "w-full flex items-center gap-2 px-4 py-3 transition-all rounded-md mx-2",
+            level === 0 && "hover:bg-background-light",
+            level > 0 && "hover:bg-background-light-grey pl-10",
+            isActive && "bg-primary-light/20 font-medium"
+          )}
+        >
+          {hasChildren && (
+            <span className="flex-shrink-0">
+              {isExpanded ? (
+                <ChevronDown className="h-4 w-4 text-grey-1" />
+              ) : (
+                <ChevronRight className="h-4 w-4 text-grey-1" />
+              )}
+            </span>
+          )}
+          {!hasChildren && level > 0 && <span className="w-4" />}
+          {item.icon && (
+            <span
+              className={cn(
+                "flex-shrink-0",
+                isActive ? "text-primary-main" : "text-grey-1"
+              )}
+            >
+              {item.icon}
+            </span>
+          )}
+          <span
+            className={cn(
+              "transition-colors",
+              isActive ? "text-primary-main" : "text-grey-0"
+            )}
+          >
+            {item.label}
+          </span>
+        </button>
+        {hasChildren && isExpanded && (
+          <div>
+            {item.children?.map((child) => renderMenuItem(child, level + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <aside className="w-64 bg-card border-r border-border h-screen flex flex-col">
+      {/* Header */}
+      <div className="p-6 border-b border-border">
+        <h2 className="text-primary-main">甜點店 ERP 系統</h2>
+      </div>
+
+      {/* Navigation Menu */}
+      <nav className="flex-1 overflow-y-auto py-4">
+        {menuItems.map((item) => renderMenuItem(item))}
+      </nav>
+
+      {/* Footer */}
+      <div className="p-4 border-t border-border">
+        <p className="caption text-muted-foreground">版本 1.0.0</p>
+      </div>
+    </aside>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/NavigationSidebar.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/NavigationSidebar.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/PurchaseOrderDialog.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/PurchaseOrderDialog.tsx
@@ -0,0 +1,366 @@
+import { useState, useEffect } from "react";
+import { Plus, Trash2, AlertCircle } from "lucide-react";
+import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./ui/table";
+import { Alert, AlertDescription } from "./ui/alert";
+import type {
+  PurchaseOrder,
+  PurchaseOrderItem,
+  Supplier,
+} from "./PurchaseOrderManagement";
+
+interface PurchaseOrderDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  order?: PurchaseOrder;
+  onSave: (order: PurchaseOrder) => void;
+  suppliers: Supplier[];
+}
+
+export default function PurchaseOrderDialog({
+  open,
+  onOpenChange,
+  order,
+  onSave,
+  suppliers,
+}: PurchaseOrderDialogProps) {
+  const [supplierId, setSupplierId] = useState("");
+  const [expectedDate, setExpectedDate] = useState("");
+  const [items, setItems] = useState<PurchaseOrderItem[]>([]);
+  const [notes, setNotes] = useState("");
+
+  // Load order data when editing
+  useEffect(() => {
+    if (order) {
+      setSupplierId(order.supplierId);
+      setExpectedDate(order.expectedDate);
+      setItems(order.items);
+      setNotes(order.notes || "");
+    } else {
+      resetForm();
+    }
+  }, [order, open]);
+
+  const resetForm = () => {
+    setSupplierId("");
+    setExpectedDate("");
+    setItems([]);
+    setNotes("");
+  };
+
+  const selectedSupplier = suppliers.find((s) => s.id === supplierId);
+
+  // Auto-populate common products when supplier is selected
+  const handleSupplierChange = (newSupplierId: string) => {
+    setSupplierId(newSupplierId);
+    // 不自动填充商品，保持空白
+  };
+
+  const handleAddItem = () => {
+    if (!selectedSupplier) return;
+    setItems([
+      ...items,
+      {
+        productId: "",
+        productName: "",
+        quantity: 0,
+        unit: "",
+        unitPrice: 0,
+        subtotal: 0,
+      },
+    ]);
+  };
+
+  const handleRemoveItem = (index: number) => {
+    setItems(items.filter((_, i) => i !== index));
+  };
+
+  const handleItemChange = (
+    index: number,
+    field: keyof PurchaseOrderItem,
+    value: string | number
+  ) => {
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], [field]: value };
+
+    // Auto-populate unit price when product is selected
+    if (field === "productId" && selectedSupplier) {
+      const product = selectedSupplier.commonProducts.find((p) => p.productId === value);
+      if (product) {
+        newItems[index].productName = product.productName;
+        newItems[index].unit = product.unit;
+        newItems[index].unitPrice = product.lastPrice;
+        newItems[index].previousPrice = product.lastPrice;
+      }
+    }
+
+    // Calculate subtotal
+    if (field === "quantity" || field === "unitPrice") {
+      newItems[index].subtotal = newItems[index].quantity * newItems[index].unitPrice;
+    }
+
+    setItems(newItems);
+  };
+
+  // Check if price increased more than 5%
+  const isPriceAlert = (item: PurchaseOrderItem) => {
+    if (!item.previousPrice || item.previousPrice === 0) return false;
+    const increase = ((item.unitPrice - item.previousPrice) / item.previousPrice) * 100;
+    return increase > 5;
+  };
+
+  const totalAmount = items.reduce((sum, item) => sum + item.subtotal, 0);
+
+  const handleSave = () => {
+    if (!supplierId || !expectedDate || items.length === 0) {
+      return;
+    }
+
+    const validItems = items.filter((item) => item.quantity > 0);
+    if (validItems.length === 0) {
+      return;
+    }
+
+    const supplier = suppliers.find((s) => s.id === supplierId);
+    if (!supplier) return;
+
+    const newOrder: PurchaseOrder = {
+      id: order?.id || `po-${Date.now()}`,
+      poNumber: order?.poNumber || `PO${new Date().getFullYear()}${(Date.now() % 100000).toString().padStart(5, "0")}`,
+      supplierId,
+      supplierName: supplier.name,
+      expectedDate,
+      status: order?.status || "draft",
+      items: validItems,
+      totalAmount: validItems.reduce((sum, item) => sum + item.subtotal, 0),
+      createdAt: order?.createdAt || new Date().toISOString().split("T")[0],
+      notes,
+    };
+
+    onSave(newOrder);
+    resetForm();
+  };
+
+  const isValid =
+    supplierId &&
+    expectedDate &&
+    items.length > 0 &&
+    items.some((item) => item.quantity > 0);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{order ? "編輯採購單" : "建立採購單"}</DialogTitle>
+          <DialogDescription>
+            {order ? "修改採購單資訊" : "填寫採購單資訊並選擇商品"}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* Basic Info */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="supplier">廠商 *</Label>
+              <Select value={supplierId} onValueChange={handleSupplierChange}>
+                <SelectTrigger id="supplier" className="border-2 border-input">
+                  <SelectValue placeholder="選擇廠商" />
+                </SelectTrigger>
+                <SelectContent>
+                  {suppliers.map((supplier) => (
+                    <SelectItem key={supplier.id} value={supplier.id}>
+                      {supplier.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="expectedDate">預計到貨日 *</Label>
+              <Input
+                id="expectedDate"
+                type="date"
+                value={expectedDate}
+                onChange={(e) => setExpectedDate(e.target.value)}
+                min={new Date().toISOString().split("T")[0]}
+                className="border-2 border-input [&::-webkit-calendar-picker-indicator]:opacity-100 [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:contrast-200"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="notes">備註</Label>
+            <Input
+              id="notes"
+              value={notes}
+              onChange={(e) => setNotes(e.target.value)}
+              placeholder="選填"
+              className="border-2 border-input"
+            />
+          </div>
+
+          {/* Items */}
+          {supplierId && (
+            <>
+              <div className="flex justify-between items-center">
+                <Label>採購商品 *</Label>
+                <Button 
+                  variant="outline" 
+                  size="sm" 
+                  onClick={handleAddItem} 
+                  className="gap-2 hover:bg-accent hover:text-accent-foreground hover:border-primary transition-colors button-outlined-primary"
+                >
+                  <Plus className="h-3 w-3" />
+                  新增商品
+                </Button>
+              </div>
+
+              <div className="border border-border rounded-lg overflow-hidden">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="w-[200px]">商品</TableHead>
+                      <TableHead className="w-[100px]">數量</TableHead>
+                      <TableHead className="w-[80px]">單位</TableHead>
+                      <TableHead className="w-[120px]">單價</TableHead>
+                      <TableHead className="w-[120px]">小計</TableHead>
+                      <TableHead className="w-[60px]"></TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {items.length === 0 ? (
+                      <TableRow>
+                        <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
+                          請新增商品
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      items.map((item, index) => (
+                        <TableRow key={index}>
+                          <TableCell>
+                            <Select
+                              value={item.productId}
+                              onValueChange={(value) =>
+                                handleItemChange(index, "productId", value)
+                              }
+                            >
+                              <SelectTrigger className="h-9 border-2 border-input">
+                                <SelectValue placeholder="選擇商品" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {selectedSupplier?.commonProducts.map((product) => (
+                                  <SelectItem key={product.productId} value={product.productId}>
+                                    {product.productName}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          </TableCell>
+                          <TableCell>
+                            <Input
+                              type="number"
+                              min="0"
+                              value={item.quantity || ""}
+                              onChange={(e) =>
+                                handleItemChange(index, "quantity", Number(e.target.value))
+                              }
+                              className="h-9 border-2 border-input"
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <span className="text-muted-foreground">{item.unit}</span>
+                          </TableCell>
+                          <TableCell>
+                            <div className="space-y-1">
+                              <Input
+                                type="number"
+                                min="0"
+                                step="0.01"
+                                value={item.unitPrice || ""}
+                                onChange={(e) =>
+                                  handleItemChange(index, "unitPrice", Number(e.target.value))
+                                }
+                                className={`h-9 border-2 ${isPriceAlert(item) ? "border-red-500" : "border-input"}`}
+                              />
+                              {isPriceAlert(item) && (
+                                <p className="text-xs text-red-500">
+                                  ⚠️ 上次: ${item.previousPrice}
+                                </p>
+                              )}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <span>${item.subtotal.toLocaleString()}</span>
+                          </TableCell>
+                          <TableCell>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={() => handleRemoveItem(index)}
+                            >
+                              <Trash2 className="h-3 w-3" />
+                            </Button>
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              </div>
+
+              {/* Price Alert Summary */}
+              {items.some((item) => isPriceAlert(item)) && (
+                <Alert variant="destructive">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertDescription>
+                    部分商品單價比上次採購價高出超過 5%，請確認是否正確。
+                  </AlertDescription>
+                </Alert>
+              )}
+
+              {/* Total */}
+              <div className="flex justify-end items-center gap-4 pt-4 border-t border-border">
+                <span className="text-muted-foreground">總金額：</span>
+                <span className="text-primary-main">${totalAmount.toLocaleString()}</span>
+              </div>
+            </>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} className="button-outlined-primary">
+            取消
+          </Button>
+          <Button onClick={handleSave} disabled={!isValid} className="button-filled-primary">
+            {order ? "更新" : "建立"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/PurchaseOrderDialog.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/PurchaseOrderDialog.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/PurchaseOrderManagement.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/PurchaseOrderManagement.tsx
@@ -0,0 +1,144 @@
+/**
+ * 採購單管理主頁面
+ */
+
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { Button } from "./ui/button";
+import PurchaseOrderTable from "./PurchaseOrderTable";
+import { Breadcrumb } from "./shared/Breadcrumb";
+import { PurchaseOrderFilters } from "./purchase-order/PurchaseOrderFilters";
+import { type DateRange } from "./filters/DateFilter";
+import type { PurchaseOrder, PurchaseOrderStatus, PaymentInfo } from "../types/purchase-order";
+
+interface PurchaseOrderManagementProps {
+  orders: PurchaseOrder[];
+  onNavigateToInspection: (order: PurchaseOrder) => void;
+  onNavigateToCreateOrder: () => void;
+  onNavigateToEditOrder: (order: PurchaseOrder) => void;
+  onNavigateToViewOrder: (order: PurchaseOrder) => void;
+  onDeleteOrder: (id: string) => void;
+  onStatusChange: (id: string, newStatus: PurchaseOrderStatus, reviewInfo?: any) => void;
+  onPayment: (id: string, paymentInfo: PaymentInfo) => void;
+}
+
+export default function PurchaseOrderManagement({
+  orders,
+  onNavigateToInspection,
+  onNavigateToCreateOrder,
+  onNavigateToEditOrder,
+  onNavigateToViewOrder,
+  onDeleteOrder,
+  onStatusChange,
+  onPayment,
+}: PurchaseOrderManagementProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [requesterFilter, setRequesterFilter] = useState<string>("all");
+  const [dateRange, setDateRange] = useState<DateRange | null>(null);
+
+  // 取得唯一門市和倉庫列表
+  const stores = Array.from(
+    new Set(
+      orders
+        .filter((o) => o.requesterType === "store")
+        .map((o) => o.requesterName)
+    )
+  ).sort();
+
+  const warehouses = Array.from(
+    new Set(
+      orders
+        .filter((o) => o.requesterType === "warehouse")
+        .map((o) => o.requesterName)
+    )
+  ).sort();
+
+  // 篩選訂單
+  const filteredOrders = orders.filter((order) => {
+    const matchesSearch =
+      order.poNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      order.supplierName.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesStatus = statusFilter === "all" || order.status === statusFilter;
+    
+    // 申請單位篩選邏輯
+    let matchesRequester = true;
+    if (requesterFilter === "all") {
+      matchesRequester = true;
+    } else if (requesterFilter === "all_stores") {
+      matchesRequester = order.requesterType === "store";
+    } else if (requesterFilter === "all_warehouses") {
+      matchesRequester = order.requesterType === "warehouse";
+    } else {
+      matchesRequester = order.requesterName === requesterFilter;
+    }
+    
+    // 日期範圍篩選
+    const matchesDateRange = !dateRange || (
+      order.createdAt >= dateRange.start && order.createdAt <= dateRange.end
+    );
+    
+    return matchesSearch && matchesStatus && matchesRequester && matchesDateRange;
+  });
+
+  const handleClearFilters = () => {
+    setSearchQuery("");
+    setStatusFilter("all");
+    setRequesterFilter("all");
+    setDateRange(null);
+  };
+
+  const hasActiveFilters = searchQuery !== "" || statusFilter !== "all" || requesterFilter !== "all" || dateRange !== null;
+
+  return (
+    <div className="p-6">
+      {/* Header */}
+      <div className="mb-6">
+        <Breadcrumb
+          items={[
+            { label: "採購管理" },
+            { label: "管理採購單", active: true },
+          ]}
+        />
+        <div className="flex justify-between items-center">
+          <h1>管理採購單</h1>
+          <Button
+            onClick={onNavigateToCreateOrder}
+            className="gap-2 button-filled-primary"
+          >
+            <Plus className="h-4 w-4" />
+            建立採購單
+          </Button>
+        </div>
+      </div>
+
+      {/* 搜尋和篩選區塊 - 獨立卡片 */}
+      <div className="mb-6">
+        <PurchaseOrderFilters
+          searchQuery={searchQuery}
+          statusFilter={statusFilter}
+          requesterFilter={requesterFilter}
+          stores={stores}
+          warehouses={warehouses}
+          onSearchChange={setSearchQuery}
+          onStatusChange={setStatusFilter}
+          onRequesterChange={setRequesterFilter}
+          onClearFilters={handleClearFilters}
+          hasActiveFilters={hasActiveFilters}
+          dateRange={dateRange}
+          onDateRangeChange={setDateRange}
+        />
+      </div>
+
+      {/* Table */}
+      <PurchaseOrderTable
+        orders={filteredOrders}
+        onEdit={onNavigateToEditOrder}
+        onView={onNavigateToViewOrder}
+      />
+    </div>
+  );
+}
+
+// Re-export types for backward compatibility
+export type { PurchaseOrder, PurchaseOrderItem, PurchaseOrderStatus, Supplier } from "../types/purchase-order";
--- a/source-code/ERP(B-aa)-管理採購單/src/components/PurchaseOrderManagement.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/PurchaseOrderManagement.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/PurchaseOrderTable.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/PurchaseOrderTable.tsx
@@ -0,0 +1,250 @@
+/**
+ * 採購單列表表格
+ */
+
+import { useState, useMemo } from "react";
+import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./ui/table";
+import { PurchaseOrderActions } from "./purchase-order/PurchaseOrderActions";
+import { StatusBadge } from "./shared/StatusBadge";
+import { CopyButton } from "./shared/CopyButton";
+import type { PurchaseOrder } from "../types/purchase-order";
+import { formatCurrency } from "../utils/purchase-order";
+import { STATUS_CONFIG } from "../constants/purchase-order";
+
+interface PurchaseOrderTableProps {
+  orders: PurchaseOrder[];
+  onEdit: (order: PurchaseOrder) => void;
+  onView: (order: PurchaseOrder) => void;
+}
+
+type SortField = "poNumber" | "requesterName" | "supplierName" | "createdAt" | "totalAmount" | "status";
+type SortDirection = "asc" | "desc" | null;
+
+export default function PurchaseOrderTable({
+  orders,
+  onEdit,
+  onView,
+}: PurchaseOrderTableProps) {
+  const [sortField, setSortField] = useState<SortField | null>(null);
+  const [sortDirection, setSortDirection] = useState<SortDirection>(null);
+
+  // 處理排序
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      // 同一欄位：升序 → 降序 → 無排序
+      if (sortDirection === "asc") {
+        setSortDirection("desc");
+      } else if (sortDirection === "desc") {
+        setSortDirection(null);
+        setSortField(null);
+      } else {
+        setSortDirection("asc");
+      }
+    } else {
+      // 不同欄位：重新開始升序
+      setSortField(field);
+      setSortDirection("asc");
+    }
+  };
+
+  // 排序後的訂單列表
+  const sortedOrders = useMemo(() => {
+    if (!sortField || !sortDirection) {
+      return orders;
+    }
+
+    return [...orders].sort((a, b) => {
+      let aValue: string | number;
+      let bValue: string | number;
+
+      switch (sortField) {
+        case "poNumber":
+          aValue = a.poNumber;
+          bValue = b.poNumber;
+          break;
+        case "requesterName":
+          aValue = a.requesterName || a.department;
+          bValue = b.requesterName || b.department;
+          break;
+        case "supplierName":
+          aValue = a.supplierName;
+          bValue = b.supplierName;
+          break;
+        case "createdAt":
+          aValue = a.createdAt;
+          bValue = b.createdAt;
+          break;
+        case "totalAmount":
+          aValue = a.totalAmount;
+          bValue = b.totalAmount;
+          break;
+        case "status":
+          aValue = STATUS_CONFIG[a.status].label;
+          bValue = STATUS_CONFIG[b.status].label;
+          break;
+        default:
+          return 0;
+      }
+
+      // 比較邏輯
+      if (typeof aValue === "string" && typeof bValue === "string") {
+        return sortDirection === "asc"
+          ? aValue.localeCompare(bValue, "zh-TW")
+          : bValue.localeCompare(aValue, "zh-TW");
+      } else {
+        return sortDirection === "asc"
+          ? (aValue as number) - (bValue as number)
+          : (bValue as number) - (aValue as number);
+      }
+    });
+  }, [orders, sortField, sortDirection]);
+
+  // 排序圖標
+  const SortIcon = ({ field }: { field: SortField }) => {
+    if (sortField !== field) {
+      return <ArrowUpDown className="h-4 w-4 text-muted-foreground" />;
+    }
+    if (sortDirection === "asc") {
+      return <ArrowUp className="h-4 w-4 text-primary-main" />;
+    }
+    if (sortDirection === "desc") {
+      return <ArrowDown className="h-4 w-4 text-primary-main" />;
+    }
+    return <ArrowUpDown className="h-4 w-4 text-muted-foreground" />;
+  };
+
+  return (
+    <div className="bg-card rounded-lg border-2 border-border">
+      {/* 表格 */}
+      <div className="overflow-x-auto">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[140px]">
+                <button
+                  onClick={() => handleSort("poNumber")}
+                  className="flex items-center gap-2 hover:text-foreground transition-colors"
+                >
+                  採購單編號
+                  <SortIcon field="poNumber" />
+                </button>
+              </TableHead>
+              <TableHead className="w-[180px]">
+                <button
+                  onClick={() => handleSort("requesterName")}
+                  className="flex items-center gap-2 hover:text-foreground transition-colors"
+                >
+                  申請資訊
+                  <SortIcon field="requesterName" />
+                </button>
+              </TableHead>
+              <TableHead className="w-[160px]">
+                <button
+                  onClick={() => handleSort("supplierName")}
+                  className="flex items-center gap-2 hover:text-foreground transition-colors"
+                >
+                  廠商
+                  <SortIcon field="supplierName" />
+                </button>
+              </TableHead>
+              <TableHead className="w-[110px]">
+                <button
+                  onClick={() => handleSort("createdAt")}
+                  className="flex items-center gap-2 hover:text-foreground transition-colors"
+                >
+                  建立日期
+                  <SortIcon field="createdAt" />
+                </button>
+              </TableHead>
+              <TableHead className="w-[110px] text-right">
+                <button
+                  onClick={() => handleSort("totalAmount")}
+                  className="flex items-center gap-2 ml-auto hover:text-foreground transition-colors"
+                >
+                  總金額
+                  <SortIcon field="totalAmount" />
+                </button>
+              </TableHead>
+              <TableHead className="w-[140px]">
+                <button
+                  onClick={() => handleSort("status")}
+                  className="flex items-center gap-2 hover:text-foreground transition-colors"
+                >
+                  狀態
+                  <SortIcon field="status" />
+                </button>
+              </TableHead>
+              <TableHead className="text-right">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {sortedOrders.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={7} className="text-center text-muted-foreground py-8">
+                  尚無採購單
+                </TableCell>
+              </TableRow>
+            ) : (
+              sortedOrders.map((order) => (
+                <TableRow key={order.id}>
+                  {/* 採購單編號 */}
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <span className="font-mono text-sm">{order.poNumber}</span>
+                      <CopyButton text={order.poNumber} label="複製採購單編號" />
+                    </div>
+                  </TableCell>
+
+                  {/* 申請資訊（申請單位 + 申請人） */}
+                  <TableCell>
+                    <div className="space-y-0.5">
+                      <div className="text-sm font-medium">{order.department}</div>
+                      <div className="text-xs text-muted-foreground">{order.createdBy}</div>
+                    </div>
+                  </TableCell>
+
+                  {/* 廠商 */}
+                  <TableCell>
+                    <span className="text-sm">{order.supplierName}</span>
+                  </TableCell>
+
+                  {/* 建立日期 */}
+                  <TableCell>
+                    <span className="text-sm text-muted-foreground">{order.createdAt}</span>
+                  </TableCell>
+
+                  {/* 總金額 */}
+                  <TableCell className="text-right">
+                    <span className="font-medium">{formatCurrency(order.totalAmount)}</span>
+                  </TableCell>
+
+                  {/* 狀態 */}
+                  <TableCell>
+                    <StatusBadge status={order.status} />
+                  </TableCell>
+
+                  {/* 操作 */}
+                  <TableCell>
+                    <PurchaseOrderActions
+                      order={order}
+                      onEdit={onEdit}
+                      onView={onView}
+                    />
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/PurchaseOrderTable.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/PurchaseOrderTable.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ViewPurchaseOrderPage.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ViewPurchaseOrderPage.tsx
@@ -0,0 +1,334 @@
+/**
+ * 查看採購單詳情頁面
+ */
+
+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>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ViewPurchaseOrderPage.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ViewPurchaseOrderPage.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/figma/ImageWithFallback.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/figma/ImageWithFallback.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+
+const ERROR_IMG_SRC =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
+
+export function ImageWithFallback(props: React.ImgHTMLAttributes<HTMLImageElement>) {
+  const [didError, setDidError] = useState(false)
+
+  const handleError = () => {
+    setDidError(true)
+  }
+
+  const { src, alt, style, className, ...rest } = props
+
+  return didError ? (
+    <div
+      className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
+      style={style}
+    >
+      <div className="flex items-center justify-center w-full h-full">
+        <img src={ERROR_IMG_SRC} alt="Error loading image" {...rest} data-original-url={src} />
+      </div>
+    </div>
+  ) : (
+    <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
+  )
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/figma/ImageWithFallback.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/figma/ImageWithFallback.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/filters/DateFilter.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/filters/DateFilter.tsx
@@ -0,0 +1,176 @@
+/**
+ * 日期篩選器元件
+ * 支援快捷日期範圍選項和自定義日期範圍
+ */
+
+import { Calendar } from "lucide-react";
+import { Label } from "../ui/label";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+
+export interface DateRange {
+  start: string; // YYYY-MM-DD 格式
+  end: string; // YYYY-MM-DD 格式
+}
+
+interface DateFilterProps {
+  dateRange: DateRange | null;
+  onDateRangeChange: (range: DateRange | null) => void;
+}
+
+// 快捷日期選項
+const DATE_SHORTCUTS = [
+  { label: "今天", getValue: () => getDateRange(0) },
+  { label: "最近7天", getValue: () => getDateRange(7) },
+  { label: "最近30天", getValue: () => getDateRange(30) },
+  { label: "本月", getValue: () => getCurrentMonth() },
+  { label: "上月", getValue: () => getLastMonth() },
+];
+
+// 獲取從今天往前 N 天的日期範圍
+function getDateRange(days: number): DateRange {
+  const end = new Date();
+  const start = new Date();
+  start.setDate(start.getDate() - days);
+
+  return {
+    start: formatDate(start),
+    end: formatDate(end),
+  };
+}
+
+// 獲取本月的日期範圍
+function getCurrentMonth(): DateRange {
+  const now = new Date();
+  const start = new Date(now.getFullYear(), now.getMonth(), 1);
+  const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+
+  return {
+    start: formatDate(start),
+    end: formatDate(end),
+  };
+}
+
+// 獲取上月的日期範圍
+function getLastMonth(): DateRange {
+  const now = new Date();
+  const start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+  const end = new Date(now.getFullYear(), now.getMonth(), 0);
+
+  return {
+    start: formatDate(start),
+    end: formatDate(end),
+  };
+}
+
+// 格式化日期為 YYYY-MM-DD
+function formatDate(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+export function DateFilter({ dateRange, onDateRangeChange }: DateFilterProps) {
+  const handleStartDateChange = (value: string) => {
+    if (!value) {
+      onDateRangeChange(null);
+      return;
+    }
+
+    onDateRangeChange({
+      start: value,
+      end: dateRange?.end || value,
+    });
+  };
+
+  const handleEndDateChange = (value: string) => {
+    if (!value) {
+      onDateRangeChange(null);
+      return;
+    }
+
+    onDateRangeChange({
+      start: dateRange?.start || value,
+      end: value,
+    });
+  };
+
+  const handleShortcutClick = (getValue: () => DateRange) => {
+    onDateRangeChange(getValue());
+  };
+
+  const handleClearClick = () => {
+    onDateRangeChange(null);
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* 標題 */}
+      <div className="flex items-center gap-2">
+        <Calendar className="h-4 w-4 text-muted-foreground" />
+        <Label>建立日期</Label>
+      </div>
+
+      {/* 快捷選項 */}
+      <div className="flex flex-wrap gap-2">
+        {DATE_SHORTCUTS.map((shortcut) => (
+          <Button
+            key={shortcut.label}
+            variant="outline"
+            size="sm"
+            onClick={() => handleShortcutClick(shortcut.getValue)}
+            className="button-outlined-primary"
+          >
+            {shortcut.label}
+          </Button>
+        ))}
+      </div>
+
+      {/* 自定義日期範圍 */}
+      <div className="space-y-4">
+        <div className="grid grid-cols-2 gap-4">
+          {/* 開始日期 */}
+          <div className="space-y-2">
+            <Label htmlFor="start-date" className="text-sm text-muted-foreground">
+              開始日期
+            </Label>
+            <Input
+              id="start-date"
+              type="date"
+              value={dateRange?.start || ""}
+              onChange={(e) => handleStartDateChange(e.target.value)}
+              className="border-2"
+            />
+          </div>
+
+          {/* 結束日期 */}
+          <div className="space-y-2">
+            <Label htmlFor="end-date" className="text-sm text-muted-foreground">
+              結束日期
+            </Label>
+            <Input
+              id="end-date"
+              type="date"
+              value={dateRange?.end || ""}
+              onChange={(e) => handleEndDateChange(e.target.value)}
+              className="border-2"
+            />
+          </div>
+        </div>
+
+        {/* 清除按鈕 */}
+        {dateRange && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleClearClick}
+            className="w-full button-outlined-primary"
+          >
+            清除日期篩選
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/filters/DateFilter.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/filters/DateFilter.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionActionBar.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionActionBar.tsx
@@ -0,0 +1,56 @@
+/**
+ * 驗收頁面 - 底部操作按鈕列
+ * 手機版固定於底部，桌面版則正常排版
+ */
+
+import { PackageCheck } from "lucide-react";
+import { Button } from "../ui/button";
+
+interface InspectionActionBarProps {
+  onCancel: () => void;
+  onComplete: () => void;
+}
+
+export function InspectionActionBar({ onCancel, onComplete }: InspectionActionBarProps) {
+  return (
+    <>
+      {/* 手機版：固定於底部 */}
+      <div className="fixed bottom-0 left-0 right-0 bg-card border-t-2 border-border p-4 md:hidden z-10">
+        <div className="flex gap-4">
+          <Button
+            variant="outline"
+            onClick={onCancel}
+            className="flex-1 h-12 button-outlined-primary"
+          >
+            取消
+          </Button>
+          <Button
+            onClick={onComplete}
+            className="flex-1 h-12 gap-2 button-filled-primary"
+          >
+            <PackageCheck className="h-5 w-5" />
+            確認驗收
+          </Button>
+        </div>
+      </div>
+
+      {/* 桌面版：正常排版於區塊底部 */}
+      <div className="hidden md:flex justify-end gap-4 pt-6 border-t-2 border-border">
+        <Button
+          variant="outline"
+          onClick={onCancel}
+          className="h-12 button-outlined-primary"
+        >
+          取消
+        </Button>
+        <Button
+          onClick={onComplete}
+          className="h-12 gap-2 button-filled-primary"
+        >
+          <PackageCheck className="h-5 w-5" />
+          確認驗收並完成
+        </Button>
+      </div>
+    </>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionActionBar.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionActionBar.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionAmountSummary.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionAmountSummary.tsx
@@ -0,0 +1,54 @@
+/**
+ * 驗收頁面 - 金額統計卡片 (Level 3)
+ */
+
+import { TrendingDown } from "lucide-react";
+import { formatCurrency } from "../../utils/purchase-order";
+
+interface InspectionAmountSummaryProps {
+  originalAmount: number;
+  actualAmount: number;
+}
+
+export function InspectionAmountSummary({
+  originalAmount,
+  actualAmount,
+}: InspectionAmountSummaryProps) {
+  const hasDifference = originalAmount !== actualAmount;
+  const difference = originalAmount - actualAmount;
+
+  return (
+    <div className="bg-card rounded-lg border-2 border-border p-6">
+      <h3 className="mb-4">金額統計</h3>
+
+      <div className="space-y-4">
+        {/* 原訂金額 */}
+        <div className="flex justify-between items-center">
+          <span className="text-muted-foreground">原訂金額</span>
+          <span>{formatCurrency(originalAmount)}</span>
+        </div>
+
+        {/* 實收金額 */}
+        <div className="flex justify-between items-center pt-4 border-t border-border">
+          <span className="text-muted-foreground">實收金額</span>
+          <span className="text-primary-main">
+            {formatCurrency(actualAmount)}
+          </span>
+        </div>
+
+        {/* 差額（僅在有差異時顯示） */}
+        {hasDifference && (
+          <div className="flex items-center justify-between pt-2 text-warning">
+            <div className="flex items-center gap-2">
+              <TrendingDown className="h-4 w-4" />
+              <span className="caption">金額差異</span>
+            </div>
+            <span className="caption">
+              - {formatCurrency(difference)}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionAmountSummary.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionAmountSummary.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionAutoActions.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionAutoActions.tsx
@@ -0,0 +1,54 @@
+/**
+ * 驗收頁面 - 驗收後自動執行區塊 (Level 4)
+ */
+
+import { useState } from "react";
+import { ChevronDown, ChevronUp, CheckCircle2 } from "lucide-react";
+import { Button } from "../ui/button";
+
+export function InspectionAutoActions() {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const actions = [
+    "更新商品庫存數量",
+    "建立應付帳款憑證",
+    "更新採購單狀態為已完成",
+  ];
+
+  return (
+    <div className="bg-card rounded-lg border-2 border-border overflow-hidden">
+      {/* 標題列（可點擊展開/收合） */}
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full p-6 flex items-center justify-between hover:bg-muted/50 transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          <CheckCircle2 className="h-5 w-5 text-success" />
+          <h3>驗收後自動執行</h3>
+        </div>
+        {isExpanded ? (
+          <ChevronUp className="h-5 w-5 text-muted-foreground" />
+        ) : (
+          <ChevronDown className="h-5 w-5 text-muted-foreground" />
+        )}
+      </button>
+
+      {/* 內容區（展開時顯示） */}
+      {isExpanded && (
+        <div className="px-6 pb-6 border-t border-border pt-4">
+          <p className="text-muted-foreground mb-4 body-sm">
+            確認驗收後，系統將自動執行以下操作：
+          </p>
+          <ul className="space-y-2">
+            {actions.map((action, index) => (
+              <li key={index} className="flex items-start gap-2">
+                <CheckCircle2 className="h-4 w-4 text-success mt-1 shrink-0" />
+                <span className="body-sm">{action}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionAutoActions.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionAutoActions.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionItemCard.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionItemCard.tsx
@@ -0,0 +1,125 @@
+/**
+ * 驗收頁面 - 商品驗收卡片 (Level 2 - 手機版)
+ */
+
+import { AlertCircle } from "lucide-react";
+import { Input } from "../ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import type { InspectionItem } from "../../types/purchase-order";
+import { ISSUE_REASONS } from "../../constants/purchase-order";
+import { formatCurrency } from "../../utils/purchase-order";
+
+interface InspectionItemCardProps {
+  item: InspectionItem;
+  index: number;
+  onReceivedQuantityChange: (index: number, value: number) => void;
+  onIssueNoteChange: (index: number, note: string) => void;
+}
+
+export function InspectionItemCard({
+  item,
+  index,
+  onReceivedQuantityChange,
+  onIssueNoteChange,
+}: InspectionItemCardProps) {
+  const hasIssue = item.issueType !== "none";
+
+  return (
+    <div
+      className={`bg-card rounded-lg border-2 p-4 ${
+        hasIssue ? "border-warning bg-warning/5" : "border-border"
+      }`}
+    >
+      {/* 商品標題與異常標示 */}
+      <div className="flex items-start justify-between gap-4 mb-4">
+        <div className="flex-1">
+          <div className="flex items-center gap-2">
+            {hasIssue && <AlertCircle className="h-4 w-4 text-warning shrink-0" />}
+            <h4 className="break-words">{item.productName}</h4>
+          </div>
+        </div>
+      </div>
+
+      {/* 基本資訊 - 雙欄排版 */}
+      <div className="grid grid-cols-2 gap-4 mb-4 pb-4 border-b border-border">
+        <div>
+          <div className="caption text-muted-foreground mb-1">應到貨數量</div>
+          <p>{item.quantity} {item.unit}</p>
+        </div>
+        <div>
+          <div className="caption text-muted-foreground mb-1">單價</div>
+          <p>{formatCurrency(item.unitPrice)}</p>
+        </div>
+      </div>
+
+      {/* 驗收輸入區 */}
+      <div className="space-y-4">
+        {/* 實際收貨量 */}
+        <div>
+          <label htmlFor={`received-${index}`} className="caption text-muted-foreground mb-2 block">
+            實際收貨量 *
+          </label>
+          <Input
+            id={`received-${index}`}
+            type="number"
+            min="0"
+            max={item.quantity}
+            value={item.receivedQuantity}
+            onChange={(e) => onReceivedQuantityChange(index, Number(e.target.value))}
+            className="h-12 border-2 border-input"
+          />
+        </div>
+
+        {/* 短缺數量（自動計算） */}
+        <div>
+          <div className="caption text-muted-foreground mb-2">短缺數量（自動計算）</div>
+          <div className={`p-3 rounded-md border-2 ${hasIssue ? "bg-warning/10 border-warning/30" : "bg-muted/50 border-border"}`}>
+            <span className={hasIssue ? "text-warning font-medium" : ""}>
+              {item.quantity - item.receivedQuantity} {item.unit}
+            </span>
+          </div>
+        </div>
+
+        {/* 異常說明（僅在有異常時顯示） */}
+        {hasIssue && (
+          <div>
+            <label htmlFor={`issue-${index}`} className="caption text-muted-foreground mb-2 block">
+              異常說明 *
+            </label>
+            <Select
+              value={item.issueNote || ""}
+              onValueChange={(value) => onIssueNoteChange(index, value)}
+            >
+              <SelectTrigger id={`issue-${index}`} className="h-12 border-2 border-input">
+                <SelectValue placeholder="請選擇異常原因" />
+              </SelectTrigger>
+              <SelectContent>
+                {ISSUE_REASONS.map((reason) => (
+                  <SelectItem key={reason.value} value={reason.value}>
+                    {reason.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        {/* 實收金額（僅顯示） */}
+        <div className="pt-4 border-t border-border">
+          <div className="flex justify-between items-center">
+            <span className="caption text-muted-foreground">實收金額</span>
+            <span className={`${hasIssue ? "text-warning" : "text-primary-main"}`}>
+              {formatCurrency(item.receivedQuantity * item.unitPrice)}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionItemCard.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionItemCard.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionOrderInfo.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionOrderInfo.tsx
@@ -0,0 +1,67 @@
+/**
+ * 驗收頁面 - 訂單資訊卡片 (Level 1)
+ */
+
+import { AlertCircle, CheckCircle2, Package } from "lucide-react";
+import type { PurchaseOrder } from "../../types/purchase-order";
+import { formatCurrency } from "../../utils/purchase-order";
+import { StatusProgressBar } from "../purchase-order/StatusProgressBar";
+
+interface InspectionOrderInfoProps {
+  order: PurchaseOrder;
+  hasIssues: boolean;
+}
+
+export function InspectionOrderInfo({ order, hasIssues }: InspectionOrderInfoProps) {
+  return (
+    <div className="bg-card rounded-lg border-2 border-border p-6">
+      {/* 狀態流程條 */}
+      <StatusProgressBar currentStatus={order.status} />
+
+      {/* 狀態指示 */}
+      <div className="flex items-center gap-2 mb-4">
+        {hasIssues ? (
+          <>
+            <AlertCircle className="h-5 w-5 text-warning" />
+            <span className="text-warning">部分異常</span>
+          </>
+        ) : (
+          <>
+            <CheckCircle2 className="h-5 w-5 text-success" />
+            <span className="text-success">驗收正常</span>
+          </>
+        )}
+      </div>
+
+      {/* 訂單資訊 */}
+      <div className="space-y-4">
+        {/* 採購單編號 */}
+        <div>
+          <div className="flex items-center gap-2 mb-1">
+            <Package className="h-4 w-4 text-muted-foreground" />
+            <span className="caption text-muted-foreground">採購單編號</span>
+          </div>
+          <p className="font-mono">{order.poNumber}</p>
+        </div>
+
+        {/* 供應商與日期 - 手機單欄，平板以上雙欄 */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div>
+            <div className="caption text-muted-foreground mb-1">供應商</div>
+            <p>{order.supplierName}</p>
+          </div>
+          <div>
+            <div className="caption text-muted-foreground mb-1">預計到貨日</div>
+            <p>{order.expectedDate}</p>
+          </div>
+        </div>
+
+        {/* 原訂金額 */}
+        <div>
+          <div className="caption text-muted-foreground mb-1">原訂金額</div>
+          <p className="text-primary-main">{formatCurrency(order.totalAmount)}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionOrderInfo.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionOrderInfo.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionSummary.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionSummary.tsx
@@ -0,0 +1,97 @@
+/**
+ * 驗收統計摘要元件
+ */
+
+import { CheckCircle2, AlertCircle } from "lucide-react";
+import { Alert, AlertDescription } from "../ui/alert";
+import { Label } from "../ui/label";
+import type { InspectionItem } from "../../types/purchase-order";
+import { formatCurrency } from "../../utils/purchase-order";
+
+interface InspectionSummaryProps {
+  hasIssues: boolean;
+  issueItems: InspectionItem[];
+  totalExpectedAmount: number;
+  totalReceivedAmount: number;
+}
+
+export function InspectionSummary({
+  hasIssues,
+  issueItems,
+  totalExpectedAmount,
+  totalReceivedAmount,
+}: InspectionSummaryProps) {
+  return (
+    <>
+      {/* 異常項目摘要 */}
+      {hasIssues && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            <div className="space-y-2">
+              <p className="font-medium">偵測到 {issueItems.length} 個異常項目：</p>
+              <ul className="list-disc list-inside space-y-1 text-sm">
+                {issueItems.map((item, idx) => (
+                  <li key={idx}>
+                    {item.productName}：
+                    {item.shortageQuantity > 0 && ` 短缺 ${item.shortageQuantity}${item.unit}`}
+                    {item.shortageQuantity > 0 && item.damagedQuantity > 0 && "、"}
+                    {item.damagedQuantity > 0 && ` 損壞 ${item.damagedQuantity}${item.unit}`}
+                    {item.issueNote && ` (${item.issueNote})`}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* 統計卡片 */}
+      <div className="grid grid-cols-2 gap-6">
+        {/* 金額統計 */}
+        <div className="bg-card rounded-lg border border-border p-6">
+          <h3 className="mb-4">金額統計</h3>
+          <div className="space-y-3">
+            <div className="flex justify-between items-center">
+              <span className="text-muted-foreground">原訂總金額：</span>
+              <span className="text-lg">{formatCurrency(totalExpectedAmount)}</span>
+            </div>
+            <div className="flex justify-between items-center pt-3 border-t border-border">
+              <span className="text-muted-foreground">實收總金額：</span>
+              <span className="text-lg font-medium text-green-600">
+                {formatCurrency(totalReceivedAmount)}
+              </span>
+            </div>
+            {totalReceivedAmount !== totalExpectedAmount && (
+              <div className="flex justify-between items-center text-sm text-red-600">
+                <span>差異金額：</span>
+                <span className="font-medium">
+                  {formatCurrency(Math.abs(totalReceivedAmount - totalExpectedAmount))}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* 自動化作業說明 */}
+        <div className="bg-card rounded-lg border border-border p-6">
+          <h3 className="mb-4">驗收後自動執行</h3>
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <CheckCircle2 className="h-5 w-5 text-green-600" />
+              <span>更新庫存數量</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <CheckCircle2 className="h-5 w-5 text-green-600" />
+              <span>產生應付帳款記錄</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <CheckCircle2 className="h-5 w-5 text-green-600" />
+              <span>更新採購單狀態為已完成</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionSummary.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionSummary.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionTable.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionTable.tsx
@@ -0,0 +1,157 @@
+/**
+ * 驗收明細元件 - 支援響應式卡片和表格視圖
+ * 手機版：卡片列表
+ * 桌面版：表格
+ */
+
+import { InspectionItemCard } from "./InspectionItemCard";
+import { AlertCircle } from "lucide-react";
+import { Input } from "../ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+import type { InspectionItem } from "../../types/purchase-order";
+import { ISSUE_REASONS } from "../../constants/purchase-order";
+import { formatCurrency } from "../../utils/purchase-order";
+
+interface InspectionTableProps {
+  items: InspectionItem[];
+  onReceivedQuantityChange: (index: number, value: number) => void;
+  onIssueNoteChange: (index: number, note: string) => void;
+}
+
+export function InspectionTable({
+  items,
+  onReceivedQuantityChange,
+  onIssueNoteChange,
+}: InspectionTableProps) {
+  return (
+    <>
+      {/* 手機版：卡片列表 */}
+      <div className="md:hidden">
+        <div className="mb-4">
+          <h3>商品驗收</h3>
+          <p className="body-sm text-muted-foreground mt-1">
+            請輸入實際收貨數量
+          </p>
+        </div>
+        <div className="space-y-4">
+          {items.map((item, index) => (
+            <InspectionItemCard
+              key={index}
+              item={item}
+              index={index}
+              onReceivedQuantityChange={onReceivedQuantityChange}
+              onIssueNoteChange={onIssueNoteChange}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* 桌面版：表格 */}
+      <div className="hidden md:block bg-card rounded-lg border-2 border-border">
+        <div className="p-6 border-b-2 border-border">
+          <h3>商品驗收</h3>
+        </div>
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow className="bg-muted/50">
+                <TableHead className="w-[180px]">商品名稱</TableHead>
+                <TableHead className="w-[100px] text-center bg-muted/70">
+                  應到貨數量
+                </TableHead>
+                <TableHead className="w-[100px] text-center bg-muted/70">
+                  實際收貨
+                </TableHead>
+                <TableHead className="w-[90px] text-center">短缺數量</TableHead>
+                <TableHead className="w-[70px]">單位</TableHead>
+                <TableHead className="w-[90px]">單價</TableHead>
+                <TableHead className="w-[110px]">實收金額</TableHead>
+                <TableHead className="min-w-[200px]">異常說明</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {items.map((item, index) => {
+                const hasIssue = item.issueType !== "none";
+                return (
+                  <TableRow
+                    key={index}
+                    className={hasIssue ? "bg-warning/5" : ""}
+                  >
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        {hasIssue && <AlertCircle className="h-4 w-4 text-warning" />}
+                        <span>{item.productName}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-center bg-muted/30">
+                      <span className="font-medium">{item.quantity}</span>
+                    </TableCell>
+                    <TableCell className="bg-muted/30">
+                      <Input
+                        type="number"
+                        min="0"
+                        max={item.quantity}
+                        value={item.receivedQuantity}
+                        onChange={(e) => onReceivedQuantityChange(index, Number(e.target.value))}
+                        className="h-11 text-center font-medium border-2 border-input"
+                      />
+                    </TableCell>
+                    <TableCell className="text-center bg-muted/30">
+                      <span className="font-medium">
+                        {item.quantity - item.receivedQuantity}
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-center text-muted-foreground">
+                      {item.unit}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      {formatCurrency(item.unitPrice)}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <span className={hasIssue ? "text-warning font-medium" : ""}>
+                        {formatCurrency(item.receivedQuantity * item.unitPrice)}
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      {hasIssue && (
+                        <Select
+                          value={item.issueNote || ""}
+                          onValueChange={(value) => onIssueNoteChange(index, value)}
+                        >
+                          <SelectTrigger className="h-11 border-2 border-input">
+                            <SelectValue placeholder="選擇原因" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {ISSUE_REASONS.map((reason) => (
+                              <SelectItem key={reason.value} value={reason.value}>
+                                {reason.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionTable.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/inspection/InspectionTable.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/PaymentDialog.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/PaymentDialog.tsx
@@ -0,0 +1,350 @@
+/**
+ * 付款對話框組件
+ */
+
+import { useState, useEffect } from "react";
+import { DollarSign } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { Button } from "../ui/button";
+import { Label } from "../ui/label";
+import { Input } from "../ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { Switch } from "../ui/switch";
+import { PAYMENT_METHODS, INVOICE_TYPES } from "../../constants/purchase-order";
+import type { PurchaseOrder, PaymentMethod, InvoiceType, PaymentInfo } from "../../types/purchase-order";
+
+interface PaymentDialogProps {
+  order: PurchaseOrder;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: (orderId: string, paymentInfo: PaymentInfo) => void;
+}
+
+export function PaymentDialog({
+  order,
+  open,
+  onOpenChange,
+  onConfirm,
+}: PaymentDialogProps) {
+  // 付款資訊
+  const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>("bank_transfer");
+  const [paymentDate, setPaymentDate] = useState(
+    new Date().toISOString().split("T")[0]
+  );
+  const [actualAmount, setActualAmount] = useState(order.totalAmount.toString());
+
+  // 發票資訊
+  const [hasInvoice, setHasInvoice] = useState(false);
+  const [invoiceNumber, setInvoiceNumber] = useState("");
+  const [invoiceAmount, setInvoiceAmount] = useState(order.totalAmount.toString());
+  const [invoiceDate, setInvoiceDate] = useState(
+    new Date().toISOString().split("T")[0]
+  );
+  const [invoiceType, setInvoiceType] = useState<InvoiceType>("duplicate");
+  const [companyName, setCompanyName] = useState("");
+  const [taxId, setTaxId] = useState("");
+
+  // 當訂單變更時重置表單
+  useEffect(() => {
+    if (open) {
+      setActualAmount(order.totalAmount.toString());
+      setInvoiceAmount(order.totalAmount.toString());
+    }
+  }, [order.totalAmount, open]);
+
+  const handleConfirm = () => {
+    const paymentInfo: PaymentInfo = {
+      paymentMethod,
+      paymentDate,
+      actualAmount: parseFloat(actualAmount),
+      paidBy: "付款人名稱", // 實際應從登入使用者取得
+      paidAt: new Date().toLocaleString("zh-TW"),
+      hasInvoice,
+    };
+
+    if (hasInvoice) {
+      paymentInfo.invoice = {
+        invoiceNumber,
+        invoiceAmount: parseFloat(invoiceAmount),
+        invoiceDate,
+        invoiceType,
+      };
+
+      if (invoiceType === "triplicate") {
+        paymentInfo.invoice.companyName = companyName;
+        paymentInfo.invoice.taxId = taxId;
+      }
+    }
+
+    onConfirm(order.id, paymentInfo);
+    handleClose();
+  };
+
+  const handleClose = () => {
+    // 重置表單
+    setPaymentMethod("bank_transfer");
+    setPaymentDate(new Date().toISOString().split("T")[0]);
+    setActualAmount(order.totalAmount.toString());
+    setHasInvoice(false);
+    setInvoiceNumber("");
+    setInvoiceAmount(order.totalAmount.toString());
+    setInvoiceDate(new Date().toISOString().split("T")[0]);
+    setInvoiceType("duplicate");
+    setCompanyName("");
+    setTaxId("");
+    onOpenChange(false);
+  };
+
+  const isValid = () => {
+    // 驗證付款資訊
+    if (!paymentMethod || !paymentDate || !actualAmount) {
+      return false;
+    }
+
+    const amount = parseFloat(actualAmount);
+    if (isNaN(amount) || amount <= 0) {
+      return false;
+    }
+
+    // 如果有發票，驗證發票資訊
+    if (hasInvoice) {
+      if (!invoiceNumber || !invoiceDate || !invoiceType) {
+        return false;
+      }
+
+      const invAmount = parseFloat(invoiceAmount);
+      if (isNaN(invAmount) || invAmount <= 0) {
+        return false;
+      }
+
+      // 如果是三聯式，必須填寫公司抬頭和統編
+      if (invoiceType === "triplicate") {
+        if (!companyName || !taxId) {
+          return false;
+        }
+      }
+    }
+
+    return true;
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <DollarSign className="h-5 w-5" />
+            標記為已付款
+          </DialogTitle>
+          <DialogDescription>
+            採購單編號：{order.poNumber}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6 py-4">
+          {/* 採購單資訊摘要 */}
+          <div className="bg-muted p-4 rounded-lg space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">廠商：</span>
+              <span className="font-medium">{order.supplierName}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">採購總金額：</span>
+              <span className="font-medium">
+                ${order.totalAmount.toLocaleString()}
+              </span>
+            </div>
+          </div>
+
+          {/* 付款資訊區塊 */}
+          <div className="space-y-4">
+            <h3 className="font-medium">付款資訊</h3>
+
+            {/* 付款方式 */}
+            <div className="space-y-2">
+              <Label htmlFor="payment-method">付款方式 *</Label>
+              <Select value={paymentMethod} onValueChange={(value) => setPaymentMethod(value as PaymentMethod)}>
+                <SelectTrigger
+                  id="payment-method"
+                  className="h-11 border-2 border-input"
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {Object.entries(PAYMENT_METHODS).map(([key, label]) => (
+                    <SelectItem key={key} value={key}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 付款日期 */}
+            <div className="space-y-2">
+              <Label htmlFor="payment-date">付款日期 *</Label>
+              <Input
+                id="payment-date"
+                type="date"
+                value={paymentDate}
+                onChange={(e) => setPaymentDate(e.target.value)}
+                className="h-11 border-2 border-input"
+              />
+            </div>
+
+            {/* 實際付款金額 */}
+            <div className="space-y-2">
+              <Label htmlFor="actual-amount">實際付款金額 *</Label>
+              <Input
+                id="actual-amount"
+                type="number"
+                min="0"
+                step="0.01"
+                value={actualAmount}
+                onChange={(e) => setActualAmount(e.target.value)}
+                className="h-11 border-2 border-input"
+              />
+            </div>
+          </div>
+
+          {/* 發票資訊區塊 */}
+          <div className="space-y-4 pt-4 border-t">
+            <div className="flex items-center justify-between">
+              <div className="space-y-1">
+                <h3 className="font-medium">是否有發票</h3>
+                <p className="text-sm text-muted-foreground">
+                  請選擇此筆採購是否有開立發票
+                </p>
+              </div>
+              <Switch
+                checked={hasInvoice}
+                onCheckedChange={setHasInvoice}
+              />
+            </div>
+
+            {/* 發票欄位（條件顯示） */}
+            {hasInvoice && (
+              <div className="space-y-4 bg-muted p-4 rounded-lg">
+                {/* 發票號碼 */}
+                <div className="space-y-2">
+                  <Label htmlFor="invoice-number">發票號碼 *</Label>
+                  <Input
+                    id="invoice-number"
+                    value={invoiceNumber}
+                    onChange={(e) => setInvoiceNumber(e.target.value)}
+                    placeholder="例：AA-12345678"
+                    className="h-11 border-2 border-input bg-background"
+                  />
+                </div>
+
+                {/* 發票金額 */}
+                <div className="space-y-2">
+                  <Label htmlFor="invoice-amount">發票金額 *</Label>
+                  <Input
+                    id="invoice-amount"
+                    type="number"
+                    min="0"
+                    step="0.01"
+                    value={invoiceAmount}
+                    onChange={(e) => setInvoiceAmount(e.target.value)}
+                    className="h-11 border-2 border-input bg-background"
+                  />
+                </div>
+
+                {/* 發票日期 */}
+                <div className="space-y-2">
+                  <Label htmlFor="invoice-date">發票日期 *</Label>
+                  <Input
+                    id="invoice-date"
+                    type="date"
+                    value={invoiceDate}
+                    onChange={(e) => setInvoiceDate(e.target.value)}
+                    className="h-11 border-2 border-input bg-background"
+                  />
+                </div>
+
+                {/* 發票類型 */}
+                <div className="space-y-2">
+                  <Label htmlFor="invoice-type">發票類型 *</Label>
+                  <Select value={invoiceType} onValueChange={(value) => setInvoiceType(value as InvoiceType)}>
+                    <SelectTrigger
+                      id="invoice-type"
+                      className="h-11 border-2 border-input bg-background"
+                    >
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.entries(INVOICE_TYPES).map(([key, label]) => (
+                        <SelectItem key={key} value={key}>
+                          {label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* 三聯式專用欄位 */}
+                {invoiceType === "triplicate" && (
+                  <>
+                    <div className="space-y-2">
+                      <Label htmlFor="company-name">公司抬頭 *</Label>
+                      <Input
+                        id="company-name"
+                        value={companyName}
+                        onChange={(e) => setCompanyName(e.target.value)}
+                        placeholder="請輸入公司抬頭"
+                        className="h-11 border-2 border-input bg-background"
+                      />
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="tax-id">統一編號 *</Label>
+                      <Input
+                        id="tax-id"
+                        value={taxId}
+                        onChange={(e) => setTaxId(e.target.value)}
+                        placeholder="請輸入統一編號"
+                        maxLength={8}
+                        className="h-11 border-2 border-input bg-background"
+                      />
+                    </div>
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={handleClose}
+            className="button-outlined-primary"
+          >
+            取消
+          </Button>
+          <Button
+            onClick={handleConfirm}
+            disabled={!isValid()}
+            className="button-filled-primary"
+          >
+            確認付款
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/PaymentDialog.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/PaymentDialog.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/PurchaseOrderActions.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/PurchaseOrderActions.tsx
@@ -0,0 +1,42 @@
+/**
+ * 採購單操作按鈕元件
+ */
+
+import { Edit, Eye } from "lucide-react";
+import { Button } from "../ui/button";
+import type { PurchaseOrder } from "../../types/purchase-order";
+
+interface PurchaseOrderActionsProps {
+  order: PurchaseOrder;
+  onEdit: (order: PurchaseOrder) => void;
+  onView: (order: PurchaseOrder) => void;
+}
+
+export function PurchaseOrderActions({
+  order,
+  onEdit,
+  onView,
+}: PurchaseOrderActionsProps) {
+  return (
+    <div className="flex justify-end gap-2">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => onView(order)}
+        className="button-outlined-primary"
+        title="查看採購單"
+      >
+        <Eye className="h-4 w-4" />
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => onEdit(order)}
+        className="button-outlined-primary"
+        title="編輯採購單"
+      >
+        <Edit className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/PurchaseOrderActions.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/PurchaseOrderActions.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/PurchaseOrderFilters.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/PurchaseOrderFilters.tsx
@@ -0,0 +1,176 @@
+/**
+ * 採購單篩選器元件 - 獨立區塊設計
+ */
+
+import { useState } from "react";
+import { Search, X, Filter, ChevronDown, ChevronUp } from "lucide-react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { DateFilter, type DateRange } from "../filters/DateFilter";
+
+interface PurchaseOrderFiltersProps {
+  searchQuery: string;
+  statusFilter: string;
+  requesterFilter: string;
+  stores: string[];
+  warehouses: string[];
+  dateRange: DateRange | null;
+  onSearchChange: (value: string) => void;
+  onStatusChange: (value: string) => void;
+  onRequesterChange: (value: string) => void;
+  onDateRangeChange: (range: DateRange | null) => void;
+  onClearFilters: () => void;
+  hasActiveFilters: boolean;
+}
+
+export function PurchaseOrderFilters({
+  searchQuery,
+  statusFilter,
+  requesterFilter,
+  stores,
+  warehouses,
+  dateRange,
+  onSearchChange,
+  onStatusChange,
+  onRequesterChange,
+  onDateRangeChange,
+  onClearFilters,
+  hasActiveFilters,
+}: PurchaseOrderFiltersProps) {
+  const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);
+
+  return (
+    <div className="bg-card rounded-lg border-2 border-border p-4 space-y-4">
+      {/* 主要篩選列：搜尋 + 快速篩選 */}
+      <div className="flex flex-col md:flex-row gap-4">
+        {/* 搜尋框 - 佔據剩餘空間 */}
+        <div className="flex-1 relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+          <Input
+            placeholder="搜尋採購單編號"
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="h-11 pl-10 border-2 border-input"
+          />
+        </div>
+
+        {/* 右側篩選區 - 水平排列 */}
+        <div className="flex flex-wrap gap-4 items-center">
+          {/* 狀態篩選 */}
+          <div className="flex items-center gap-2">
+            <Filter className="h-4 w-4 text-muted-foreground hidden sm:block" />
+            <Select value={statusFilter} onValueChange={onStatusChange}>
+              <SelectTrigger className="w-[180px] h-11 border-2 border-input">
+                <SelectValue placeholder="全部類型" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">全部狀態</SelectItem>
+                <SelectItem value="draft">草稿</SelectItem>
+                <SelectItem value="review_pending">待審核</SelectItem>
+                <SelectItem value="processing">處理中</SelectItem>
+                <SelectItem value="shipping">運送中</SelectItem>
+                <SelectItem value="pending_confirm">待確認</SelectItem>
+                <SelectItem value="completed">已完成</SelectItem>
+                <SelectItem value="rejected">已退回</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 申請單位篩選 */}
+          <Select value={requesterFilter} onValueChange={onRequesterChange}>
+            <SelectTrigger className="w-[180px] h-11 border-2 border-input">
+              <SelectValue placeholder="全部申請單位" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">全部申請單位</SelectItem>
+
+              {/* 全部門市 */}
+              {stores.length > 0 && (
+                <SelectItem value="all_stores">全部門市</SelectItem>
+              )}
+
+              {/* 全部倉庫 */}
+              {warehouses.length > 0 && (
+                <SelectItem value="all_warehouses">全部倉庫</SelectItem>
+              )}
+
+              {/* 分隔線 */}
+              {(stores.length > 0 || warehouses.length > 0) && (
+                <div className="h-px bg-border my-1" />
+              )}
+
+              {/* 各別門市 */}
+              {stores.length > 0 && (
+                <>
+                  <div className="px-2 py-1.5 text-xs text-muted-foreground">
+                    門市
+                  </div>
+                  {stores.map((store) => (
+                    <SelectItem key={store} value={store}>
+                      {store}
+                    </SelectItem>
+                  ))}
+                </>
+              )}
+
+              {/* 各別倉庫 */}
+              {warehouses.length > 0 && (
+                <>
+                  {stores.length > 0 && <div className="h-px bg-border my-1" />}
+                  <div className="px-2 py-1.5 text-xs text-muted-foreground">
+                    倉庫
+                  </div>
+                  {warehouses.map((warehouse) => (
+                    <SelectItem key={warehouse} value={warehouse}>
+                      {warehouse}
+                    </SelectItem>
+                  ))}
+                </>
+              )}
+            </SelectContent>
+          </Select>
+
+          {/* 進階篩選按鈕 */}
+          <Button
+            variant="outline"
+            onClick={() => setShowAdvancedFilters(!showAdvancedFilters)}
+            className="gap-2 button-outlined-primary h-11"
+          >
+            {showAdvancedFilters ? (
+              <ChevronUp className="h-4 w-4" />
+            ) : (
+              <ChevronDown className="h-4 w-4" />
+            )}
+            <span className="hidden sm:inline">進階篩選</span>
+          </Button>
+
+          {/* 清除篩選按鈕 */}
+          {hasActiveFilters && (
+            <Button
+              variant="outline"
+              onClick={onClearFilters}
+              className="gap-2 button-outlined-primary h-11"
+            >
+              <X className="h-4 w-4" />
+              <span className="hidden sm:inline">清除篩選</span>
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* 進階篩選區 - 可展開/收合 */}
+      {showAdvancedFilters && (
+        <div className="pt-4 border-t-2 border-border">
+          <DateFilter dateRange={dateRange} onDateRangeChange={onDateRangeChange} />
+        </div>
+      )}
+    </div>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/PurchaseOrderFilters.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/PurchaseOrderFilters.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/PurchaseOrderItemsTable.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/PurchaseOrderItemsTable.tsx
@@ -0,0 +1,178 @@
+/**
+ * 採購單商品表格元件
+ */
+
+import { Trash2, Plus } from "lucide-react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+import type { PurchaseOrderItem, Supplier } from "../../types/purchase-order";
+import { isPriceAlert, formatCurrency } from "../../utils/purchase-order";
+
+interface PurchaseOrderItemsTableProps {
+  items: PurchaseOrderItem[];
+  supplier?: Supplier;
+  isReadOnly?: boolean;
+  isDisabled?: boolean;
+  onAddItem?: () => void;
+  onRemoveItem?: (index: number) => void;
+  onItemChange?: (index: number, field: keyof PurchaseOrderItem, value: string | number) => void;
+}
+
+export function PurchaseOrderItemsTable({
+  items,
+  supplier,
+  isReadOnly = false,
+  isDisabled = false,
+  onAddItem,
+  onRemoveItem,
+  onItemChange,
+}: PurchaseOrderItemsTableProps) {
+  return (
+    <>
+      {/* 商品表格 */}
+      <div className={`border-2 border-border rounded-lg overflow-hidden ${isDisabled ? "opacity-50 pointer-events-none" : ""}`}>
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50">
+              <TableHead className="w-[200px]">商品</TableHead>
+              <TableHead className="w-[100px]">數量</TableHead>
+              <TableHead className="w-[80px]">單位</TableHead>
+              <TableHead className="w-[120px]">單價</TableHead>
+              <TableHead className="w-[120px]">小計</TableHead>
+              {!isReadOnly && <TableHead className="w-[60px]"></TableHead>}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {items.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={isReadOnly ? 5 : 6}
+                  className="text-center text-muted-foreground py-12"
+                >
+                  {isDisabled ? "請先選擇供應商後才能新增商品" : "尚未新增商品"}
+                </TableCell>
+              </TableRow>
+            ) : (
+              items.map((item, index) => (
+                <TableRow key={index}>
+                  {/* 商品選擇 */}
+                  <TableCell>
+                    {isReadOnly ? (
+                      <span>{item.productName}</span>
+                    ) : (
+                      <Select
+                        value={item.productId}
+                        onValueChange={(value) =>
+                          onItemChange?.(index, "productId", value)
+                        }
+                        disabled={isDisabled}
+                      >
+                        <SelectTrigger className="h-11 border-2 border-input">
+                          <SelectValue placeholder="選擇商品" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {supplier?.commonProducts.map((product) => (
+                            <SelectItem key={product.productId} value={product.productId}>
+                              {product.productName}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    )}
+                  </TableCell>
+
+                  {/* 數量 */}
+                  <TableCell>
+                    {isReadOnly ? (
+                      <span>{item.quantity}</span>
+                    ) : (
+                      <Input
+                        type="number"
+                        min="0"
+                        value={item.quantity || ""}
+                        onChange={(e) =>
+                          onItemChange?.(index, "quantity", Number(e.target.value))
+                        }
+                        disabled={isDisabled}
+                        className="h-11 border-2 border-input"
+                      />
+                    )}
+                  </TableCell>
+
+                  {/* 單位 */}
+                  <TableCell>
+                    <span className="text-muted-foreground">{item.unit}</span>
+                  </TableCell>
+
+                  {/* 單價 */}
+                  <TableCell>
+                    {isReadOnly ? (
+                      <span>{formatCurrency(item.unitPrice)}</span>
+                    ) : (
+                      <div className="space-y-1">
+                        <Input
+                          type="number"
+                          min="0"
+                          step="0.01"
+                          value={item.unitPrice || ""}
+                          onChange={(e) =>
+                            onItemChange?.(index, "unitPrice", Number(e.target.value))
+                          }
+                          disabled={isDisabled}
+                          className={`h-11 border-2 ${
+                            isPriceAlert(item.unitPrice, item.previousPrice)
+                              ? "border-warning"
+                              : "border-input"
+                          }`}
+                        />
+                        {isPriceAlert(item.unitPrice, item.previousPrice) && (
+                          <p className="caption text-warning">
+                            ⚠️ 上次: {formatCurrency(item.previousPrice || 0)}
+                          </p>
+                        )}
+                      </div>
+                    )}
+                  </TableCell>
+
+                  {/* 小計 */}
+                  <TableCell>
+                    <span>{formatCurrency(item.subtotal)}</span>
+                  </TableCell>
+
+                  {/* 刪除按鈕 */}
+                  {!isReadOnly && onRemoveItem && (
+                    <TableCell>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onRemoveItem(index)}
+                        className="button-outlined-error"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </TableCell>
+                  )}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/PurchaseOrderItemsTable.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/PurchaseOrderItemsTable.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/ReviewDialog.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/ReviewDialog.tsx
@@ -0,0 +1,220 @@
+/**
+ * 審核對話框組件
+ */
+
+import { useState } from "react";
+import { Check, X } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { Button } from "../ui/button";
+import { Label } from "../ui/label";
+import { Textarea } from "../ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { REJECTION_REASONS } from "../../constants/purchase-order";
+import type { PurchaseOrder } from "../../types/purchase-order";
+
+interface ReviewDialogProps {
+  order: PurchaseOrder;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onApprove: (orderId: string) => void;
+  onReject: (orderId: string, reason: string) => void;
+}
+
+export function ReviewDialog({
+  order,
+  open,
+  onOpenChange,
+  onApprove,
+  onReject,
+}: ReviewDialogProps) {
+  const [action, setAction] = useState<"approve" | "reject" | null>(null);
+  const [rejectionReason, setRejectionReason] = useState("");
+  const [customReason, setCustomReason] = useState("");
+
+  const handleConfirm = () => {
+    if (action === "approve") {
+      onApprove(order.id);
+    } else if (action === "reject") {
+      const finalReason =
+        rejectionReason === "其他" ? customReason : rejectionReason;
+      if (finalReason) {
+        onReject(order.id, finalReason);
+      }
+    }
+    handleClose();
+  };
+
+  const handleClose = () => {
+    setAction(null);
+    setRejectionReason("");
+    setCustomReason("");
+    onOpenChange(false);
+  };
+
+  const isValid = () => {
+    if (action === "approve") return true;
+    if (action === "reject") {
+      if (rejectionReason === "其他") {
+        return customReason.trim().length > 0;
+      }
+      return rejectionReason.length > 0;
+    }
+    return false;
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>審核採購單</DialogTitle>
+          <DialogDescription>
+            採購單編號：{order.poNumber}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6 py-4">
+          {/* 採購單資訊摘要 */}
+          <div className="bg-muted p-4 rounded-lg space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">申請人：</span>
+              <span className="font-medium">{order.createdBy}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">申請單位：</span>
+              <span className="font-medium">{order.department}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">廠商：</span>
+              <span className="font-medium">{order.supplierName}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">總金額：</span>
+              <span className="font-medium">
+                ${order.totalAmount.toLocaleString()}
+              </span>
+            </div>
+          </div>
+
+          {/* 選擇審核動作 */}
+          {!action && (
+            <div className="space-y-3">
+              <p className="text-sm text-muted-foreground">請選擇審核動作：</p>
+              <div className="flex gap-3">
+                <Button
+                  onClick={() => setAction("approve")}
+                  className="flex-1 gap-2 button-filled-primary"
+                >
+                  <Check className="h-4 w-4" />
+                  審核通過
+                </Button>
+                <Button
+                  onClick={() => setAction("reject")}
+                  className="flex-1 gap-2 button-filled-error"
+                >
+                  <X className="h-4 w-4" />
+                  退回
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* 審核通過確認 */}
+          {action === "approve" && (
+            <div className="bg-green-50 border-2 border-green-200 p-4 rounded-lg">
+              <div className="flex items-center gap-2 mb-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span className="font-medium text-green-900">審核通過</span>
+              </div>
+              <p className="text-sm text-green-700">
+                通過後，此採購單將進入「已核准」狀態，可以開始進行採購作業。
+              </p>
+            </div>
+          )}
+
+          {/* 退回原因選擇 */}
+          {action === "reject" && (
+            <div className="space-y-4">
+              <div className="bg-red-50 border-2 border-red-200 p-4 rounded-lg">
+                <div className="flex items-center gap-2 mb-2">
+                  <X className="h-5 w-5 text-red-600" />
+                  <span className="font-medium text-red-900">退回採購單</span>
+                </div>
+                <p className="text-sm text-red-700">
+                  退回後，申請人需要修改後重新送審。
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="rejection-reason">退回原因 *</Label>
+                <Select value={rejectionReason} onValueChange={setRejectionReason}>
+                  <SelectTrigger
+                    id="rejection-reason"
+                    className="h-11 border-2 border-input"
+                  >
+                    <SelectValue placeholder="請選擇退回原因" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {REJECTION_REASONS.map((reason) => (
+                      <SelectItem key={reason.value} value={reason.value}>
+                        {reason.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {rejectionReason === "其他" && (
+                <div className="space-y-2">
+                  <Label htmlFor="custom-reason">請說明原因 *</Label>
+                  <Textarea
+                    id="custom-reason"
+                    value={customReason}
+                    onChange={(e) => setCustomReason(e.target.value)}
+                    placeholder="請輸入退回原因..."
+                    className="border-2 border-input min-h-[100px]"
+                  />
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={handleClose}
+            className="button-outlined-primary"
+          >
+            取消
+          </Button>
+          {action && (
+            <Button
+              onClick={handleConfirm}
+              disabled={!isValid()}
+              className={
+                action === "approve"
+                  ? "button-filled-primary"
+                  : "button-filled-error"
+              }
+            >
+              確認{action === "approve" ? "通過" : "退回"}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/ReviewDialog.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/ReviewDialog.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/StatusProgressBar.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/StatusProgressBar.tsx
@@ -0,0 +1,90 @@
+/**
+ * 狀態流程條組件
+ */
+
+import { Check } from "lucide-react";
+import type { PurchaseOrderStatus } from "../../types/purchase-order";
+
+interface StatusProgressBarProps {
+  currentStatus: PurchaseOrderStatus;
+}
+
+// 流程步驟定義（包含草稿和已退回）
+const STANDARD_FLOW_STEPS = [
+  { key: "draft", label: "草稿" },
+  { key: "review_pending", label: "待審核" },
+  { key: "approved", label: "已核准" },
+  { key: "in_transit", label: "待到貨" },
+  { key: "need_check", label: "待驗收" },
+  { key: "received", label: "已驗收" },
+  { key: "pending_payment", label: "待付款" },
+  { key: "done", label: "已完成" },
+];
+
+export function StatusProgressBar({ currentStatus }: StatusProgressBarProps) {
+  // 找到當前狀態在流程中的位置
+  const currentIndex = STANDARD_FLOW_STEPS.findIndex((step) => step.key === currentStatus);
+
+  return (
+    <div className="bg-card rounded-lg border-2 border-border p-6">
+      <h3 className="text-sm font-medium mb-4">採購單流程</h3>
+      <div className="relative">
+        {/* 進度條背景 */}
+        <div className="absolute top-5 left-0 right-0 h-0.5 bg-border" />
+        
+        {/* 進度條進度 */}
+        {currentIndex >= 0 && (
+          <div
+            className="absolute top-5 left-0 h-0.5 bg-primary-main transition-all duration-500"
+            style={{
+              width: `${(currentIndex / (STANDARD_FLOW_STEPS.length - 1)) * 100}%`,
+            }}
+          />
+        )}
+
+        {/* 步驟標記 */}
+        <div className="relative flex justify-between">
+          {STANDARD_FLOW_STEPS.map((step, index) => {
+            const isCompleted = index < currentIndex;
+            const isCurrent = index === currentIndex;
+            const isPending = index > currentIndex;
+
+            return (
+              <div key={step.key} className="flex flex-col items-center flex-1">
+                {/* 圓點 */}
+                <div
+                  className={`w-10 h-10 rounded-full flex items-center justify-center border-2 transition-all duration-300 ${
+                    isCompleted
+                      ? "bg-primary-main border-primary-main text-white"
+                      : isCurrent
+                      ? "bg-white border-primary-main text-primary-main ring-4 ring-primary-main/20"
+                      : "bg-white border-border text-muted-foreground"
+                  }`}
+                >
+                  {isCompleted ? (
+                    <Check className="h-5 w-5" />
+                  ) : (
+                    <span className="text-sm font-medium">{index + 1}</span>
+                  )}
+                </div>
+
+                {/* 標籤 */}
+                <div className="mt-2 text-center">
+                  <p
+                    className={`text-xs whitespace-nowrap transition-colors ${
+                      isCompleted || isCurrent
+                        ? "text-foreground font-medium"
+                        : "text-muted-foreground"
+                    }`}
+                  >
+                    {step.label}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/StatusProgressBar.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/purchase-order/StatusProgressBar.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/shared/Breadcrumb.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/shared/Breadcrumb.tsx
@@ -0,0 +1,24 @@
+/**
+ * 麵包屑導航元件
+ */
+
+interface BreadcrumbProps {
+  items: { label: string; active?: boolean }[];
+}
+
+export function Breadcrumb({ items }: BreadcrumbProps) {
+  return (
+    <div className="flex items-center gap-2 mb-2">
+      {items.map((item, index) => (
+        <span key={index} className="flex items-center gap-2">
+          <span className={item.active ? "text-foreground" : "text-muted-foreground"}>
+            {item.label}
+          </span>
+          {index < items.length - 1 && (
+            <span className="text-muted-foreground">/</span>
+          )}
+        </span>
+      ))}
+    </div>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/shared/Breadcrumb.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/shared/Breadcrumb.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/shared/CopyButton.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/shared/CopyButton.tsx
@@ -0,0 +1,44 @@
+/**
+ * 複製按鈕元件
+ */
+
+import { Copy, Check } from "lucide-react";
+import { useState } from "react";
+import { Button } from "../ui/button";
+import { toast } from "sonner@2.0.3";
+
+interface CopyButtonProps {
+  text: string;
+  label?: string;
+}
+
+export function CopyButton({ text, label }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      toast.success("已複製到剪貼簿");
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      toast.error("複製失敗");
+    }
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={handleCopy}
+      className="h-6 w-6 p-0 hover:bg-accent"
+      title={label || "複製"}
+    >
+      {copied ? (
+        <Check className="h-3 w-3 text-green-600" />
+      ) : (
+        <Copy className="h-3 w-3 text-muted-foreground" />
+      )}
+    </Button>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/shared/CopyButton.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/shared/CopyButton.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/shared/StatusBadge.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/shared/StatusBadge.tsx
@@ -0,0 +1,30 @@
+/**
+ * 狀態徽章元件（統一灰色線框樣式）
+ */
+
+import { Badge } from "../ui/badge";
+import type { PurchaseOrderStatus } from "../../types/purchase-order";
+import { STATUS_CONFIG } from "../../constants/purchase-order";
+
+interface StatusBadgeProps {
+  status: PurchaseOrderStatus;
+}
+
+export function StatusBadge({ status }: StatusBadgeProps) {
+  // 安全檢查：處理 undefined 或無效的 status
+  if (!status || !STATUS_CONFIG[status]) {
+    return (
+      <Badge variant="outline">
+        未知狀態
+      </Badge>
+    );
+  }
+  
+  const config = STATUS_CONFIG[status];
+  
+  return (
+    <Badge variant={config.variant}>
+      {config.label}
+    </Badge>
+  );
+}
--- a/source-code/ERP(B-aa)-管理採購單/src/components/shared/StatusBadge.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/shared/StatusBadge.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/accordion.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/accordion.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion@1.2.3";
+import { ChevronDownIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/accordion.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/accordion.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/alert-dialog.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog@1.1.6";
+
+import { cn } from "./utils";
+import { buttonVariants } from "./button";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
+  return (
+    <AlertDialogPrimitive.Overlay
+      ref={ref}
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+AlertDialogOverlay.displayName = "AlertDialogOverlay";
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/alert-dialog.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/alert-dialog.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/alert.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority@0.7.1";
+
+import { cn } from "./utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/alert.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/alert.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/aspect-ratio.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio@1.1.2";
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio };
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/aspect-ratio.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/aspect-ratio.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/avatar.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/avatar.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar@1.1.3";
+
+import { cn } from "./utils";
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-10 shrink-0 overflow-hidden rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/avatar.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/avatar.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/badge.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot@1.1.2";
+import { cva, type VariantProps } from "class-variance-authority@0.7.1";
+
+import { cn } from "./utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border-2 px-2 py-1 font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/badge.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/badge.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/breadcrumb.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot@1.1.2";
+import { ChevronRight, MoreHorizontal } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/breadcrumb.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/breadcrumb.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/button.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/button.tsx
@@ -0,0 +1,58 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot@1.1.2";
+import { cva, type VariantProps } from "class-variance-authority@0.7.1";
+
+import { cn } from "./utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border-2 bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-11 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-9 rounded-md gap-2 px-3 has-[>svg]:px-2.5",
+        lg: "h-12 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-11 rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean;
+    }
+>(({ className, variant, size, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/button.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/button.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/calendar.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/calendar.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react@0.487.0";
+import { DayPicker } from "react-day-picker@8.10.1";
+
+import { cn } from "./utils";
+import { buttonVariants } from "./button";
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: React.ComponentProps<typeof DayPicker>) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row gap-2",
+        month: "flex flex-col gap-4",
+        caption: "flex justify-center pt-1 relative items-center w-full",
+        caption_label: "text-sm font-medium",
+        nav: "flex items-center gap-1",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-x-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md",
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "size-8 p-0 font-normal aria-selected:opacity-100",
+        ),
+        day_range_start:
+          "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
+        day_range_end:
+          "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("size-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("size-4", className)} {...props} />
+        ),
+      }}
+      {...props}
+    />
+  );
+}
+
+export { Calendar };
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/calendar.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/calendar.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/card.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <h4
+      data-slot="card-title"
+      className={cn("leading-none", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <p
+      data-slot="card-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6 [&:last-child]:pb-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 pb-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/card.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/card.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/carousel.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/carousel.tsx
@@ -0,0 +1,241 @@
+"use client";
+
+import * as React from "react";
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react@8.6.0";
+import { ArrowLeft, ArrowRight } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+import { Button } from "./button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins,
+  );
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext],
+  );
+
+  React.useEffect(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+
+  React.useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+};
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/carousel.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/carousel.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/chart.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/chart.tsx
@@ -0,0 +1,353 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts@2.15.2";
+
+import { cn } from "./utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig;
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"];
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+  }) {
+  const { config } = useChart();
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value =
+      !labelKey && typeof label === "string"
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label;
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      );
+    }
+
+    if (!value) {
+      return null;
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ]);
+
+  if (!active || !payload?.length) {
+    return null;
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+
+  return (
+    <div
+      className={cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className,
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color || item.payload.fill || item.color;
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center",
+              )}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn(
+                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                          {
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent":
+                              indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
+                          },
+                        )}
+                        style={
+                          {
+                            "--color-bg": indicatorColor,
+                            "--color-border": indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center",
+                    )}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label || item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> &
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+  }) {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className,
+      )}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+            )}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/chart.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/chart.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/checkbox.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox@1.1.4";
+import { CheckIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/checkbox.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/checkbox.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/collapsible.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/collapsible.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible@1.1.3";
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  );
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/collapsible.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/collapsible.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/command.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/command.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk@1.1.1";
+import { SearchIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/command.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/command.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/context-menu.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/context-menu.tsx
@@ -0,0 +1,252 @@
+"use client";
+
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu@2.2.6";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  );
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  );
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  );
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/context-menu.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/context-menu.tsx:Zone.Identifier
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/dialog.tsx
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/dialog.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog@1.1.6";
+import { XIcon } from "lucide-react@0.487.0";
+
+import { cn } from "./utils";
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
+  return (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
--- a/source-code/ERP(B-aa)-管理採購單/src/components/ui/dialog.tsx:Zone.Identifier
+++ b/source-code/ERP(B-aa)-管理採購單/src/components/ui/dialog.tsx:Zone.Identifier
--- a/Show More
+++ b/Show More