first commit

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>
+    </>
+  );
+}