fix(product): 修復條碼掃描自動送出問題並優化手動輸入體驗

resources/js/Components/Product/ProductDialog.tsx

@@ -176,6 +176,13 @@ export default function ProductDialog({
                     id="barcode"
                     value={data.barcode}
                     onChange={(e) => setData("barcode", e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault();
+                        // 掃描後自動跳轉到下一個欄位（品牌）
+                        document.getElementById('brand')?.focus();
+                      }
+                    }}
                     placeholder="輸入條碼或自動生成"
                     className={`flex-1 ${errors.barcode ? "border-red-500" : ""}`}
                   />

resources/js/Pages/Production/Index.tsx

@@ -3,7 +3,7 @@
  */
 
 import { useState, useEffect } from "react";
-import { Plus, Factory, Search, RotateCcw, Eye, Pencil, Trash2 } from 'lucide-react';
+import { Plus, Factory, Search, Eye, Pencil, Trash2 } from 'lucide-react';
 import { Button } from "@/Components/ui/button";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, router, Link } from "@inertiajs/react";
@@ -12,7 +12,7 @@ import { getBreadcrumbs } from "@/utils/breadcrumb";
 import { Can } from "@/Components/Permission/Can";
 import { SearchableSelect } from "@/Components/ui/searchable-select";
 import { Input } from "@/Components/ui/input";
-import { Label } from "@/Components/ui/label";
+
 import {
     Select,
     SelectContent,
@@ -80,11 +80,7 @@ export default function ProductionIndex({ productionOrders, filters }: Props) {
         );
     };
 
-    const handleReset = () => {
+
-        setSearch("");
-        setStatus("all");
-        router.get(route('production-orders.index'));
-    };
 
     const handlePerPageChange = (value: string) => {
         setPerPage(value);
@@ -113,7 +109,69 @@ export default function ProductionIndex({ productionOrders, filters }: Props) {
                             記錄生產過程，追蹤原物料使用與成品入庫
                         </p>
                     </div>
-                    <div className="flex gap-2">
+
+                </div>
+
+                {/* Toolbar */}
+                <div className="bg-white rounded-lg shadow-sm border p-4 mb-6">
+                    <div className="flex flex-col md:flex-row gap-4">
+                        {/* Search */}
+                        <div className="flex-1 relative">
+                            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
+                            <Input
+                                placeholder="搜尋生產單號、批號、商品名稱..."
+                                value={search}
+                                onChange={(e) => setSearch(e.target.value)}
+                                className="pl-10 pr-10 h-9"
+                                onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
+                            />
+                            {search && (
+                                <button
+                                    onClick={() => {
+                                        setSearch("");
+                                        router.get(route('production-orders.index'), { ...filters, search: "" }, { preserveState: true, replace: true });
+                                    }}
+                                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                                >
+                                    <Trash2 className="h-4 w-4" />
+                                </button>
+                            )}
+                        </div>
+
+                        {/* Status Filter */}
+                        <Select
+                            value={status}
+                            onValueChange={(val) => {
+                                setStatus(val);
+                                router.get(
+                                    route('production-orders.index'),
+                                    { ...filters, status: val === 'all' ? undefined : val },
+                                    { preserveState: true, replace: true }
+                                );
+                            }}
+                        >
+                            <SelectTrigger className="w-full md:w-[150px] h-9 text-sm">
+                                <SelectValue placeholder="選擇狀態" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="all">全部狀態</SelectItem>
+                                <SelectItem value="draft">草稿</SelectItem>
+                                <SelectItem value="completed">已完成</SelectItem>
+                                <SelectItem value="cancelled">已取消</SelectItem>
+                            </SelectContent>
+                        </Select>
+
+                        {/* Action Buttons */}
+                        <div className="flex gap-2 w-full md:w-auto">
+                            <Button
+                                variant="outline"
+                                className="button-outlined-primary"
+                                onClick={handleFilter}
+                            >
+                                <Search className="w-4 h-4 mr-2" />
+                                搜尋
+                            </Button>
+
                             <Can permission="production_orders.create">
                                 <Button
                                     onClick={handleNavigateToCreate}
@@ -125,59 +183,6 @@ export default function ProductionIndex({ productionOrders, filters }: Props) {
                             </Can>
                         </div>
                     </div>
-
-                {/* 篩選區塊 */}
-                <div className="bg-white rounded-lg shadow-sm border border-gray-200 mb-6 overflow-hidden">
-                    <div className="p-5">
-                        <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
-                            <div className="md:col-span-8 space-y-1">
-                                <Label className="text-xs font-medium text-grey-2">關鍵字搜尋</Label>
-                                <div className="relative">
-                                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
-                                    <Input
-                                        placeholder="搜尋生產單號、批號、商品名稱..."
-                                        value={search}
-                                        onChange={(e) => setSearch(e.target.value)}
-                                        className="pl-10 h-9 block"
-                                        onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
-                                    />
-                                </div>
-                            </div>
-
-                            <div className="md:col-span-4 space-y-1">
-                                <Label className="text-xs font-medium text-grey-2">狀態</Label>
-                                <Select value={status} onValueChange={setStatus}>
-                                    <SelectTrigger className="h-9 text-sm">
-                                        <SelectValue placeholder="選擇狀態" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="all">全部狀態</SelectItem>
-                                        <SelectItem value="draft">草稿</SelectItem>
-                                        <SelectItem value="completed">已完成</SelectItem>
-                                        <SelectItem value="cancelled">已取消</SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="flex items-center justify-end px-5 py-4 bg-gray-50/50 border-t border-gray-100 gap-3">
-                        <Button
-                            variant="outline"
-                            onClick={handleReset}
-                            className="button-outlined-primary h-9 gap-2"
-                        >
-                            <RotateCcw className="h-4 w-4" />
-                            重置
-                        </Button>
-                        <Button
-                            onClick={handleFilter}
-                            className="button-filled-primary h-9 px-6 gap-2"
-                        >
-                            <Search className="h-4 w-4" />
-                            搜尋
-                        </Button>
-                    </div>
                 </div>
 
                 {/* 生產單列表 */}

resources/js/Pages/Production/Recipe/Index.tsx

@@ -3,7 +3,7 @@
  */
 
 import { useState, useEffect } from "react";
-import { Plus, Search, RotateCcw, Pencil, Trash2, BookOpen, Eye } from 'lucide-react';
+import { Plus, Search, Pencil, Trash2, BookOpen, Eye } from 'lucide-react';
 import { Button } from "@/Components/ui/button";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, router, Link } from "@inertiajs/react";
@@ -11,7 +11,7 @@ import Pagination from "@/Components/shared/Pagination";
 import { getBreadcrumbs } from "@/utils/breadcrumb";
 import { SearchableSelect } from "@/Components/ui/searchable-select";
 import { Input } from "@/Components/ui/input";
-import { Label } from "@/Components/ui/label";
+
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table";
 import { Badge } from "@/Components/ui/badge";
 import { Can } from "@/Components/Permission/Can";
@@ -82,10 +82,7 @@ export default function RecipeIndex({ recipes, filters }: Props) {
         );
     };
 
-    const handleReset = () => {
+
-        setSearch("");
-        router.get(route('recipes.index'));
-    };
 
     const handlePerPageChange = (value: string) => {
         setPerPage(value);
@@ -130,54 +127,55 @@ export default function RecipeIndex({ recipes, filters }: Props) {
                             管理產品的標準生產配方與用量
                         </p>
                     </div>
-                    <div className="flex gap-2">
+
-                        <Can permission="recipes.create">
-                            <Link href={route('recipes.create')}>
-                                <Button className="gap-2 button-filled-primary">
-                                    <Plus className="h-4 w-4" />
-                                    新增配方
-                                </Button>
-                            </Link>
-                        </Can>
-                    </div>
                 </div>
 
-                {/* 篩選區塊 */}
+                {/* Toolbar */}
-                <div className="bg-white rounded-lg shadow-sm border border-gray-200 mb-6 overflow-hidden">
+                <div className="bg-white rounded-lg shadow-sm border p-4 mb-6">
-                    <div className="p-5">
+                    <div className="flex flex-col md:flex-row gap-4">
-                        <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
+                        {/* Search */}
-                            <div className="md:col-span-12 space-y-1">
+                        <div className="flex-1 relative">
-                                <Label className="text-xs font-medium text-grey-2">關鍵字搜尋</Label>
-                                <div className="relative">
                             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                             <Input
                                 placeholder="搜尋配方代號、名稱、產品名稱..."
                                 value={search}
                                 onChange={(e) => setSearch(e.target.value)}
-                                        className="pl-10 h-9 block"
+                                className="pl-10 pr-10 h-9"
                                 onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
                             />
-                                </div>
+                            {search && (
-                            </div>
+                                <button
-                        </div>
+                                    onClick={() => {
+                                        setSearch("");
+                                        router.get(route('recipes.index'), { ...filters, search: "" }, { preserveState: true, replace: true });
+                                    }}
+                                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                                >
+                                    <Trash2 className="h-4 w-4" /> {/* Using Trash2/X as clear icon, need to check imports. Inventory used X. */}
+                                </button>
+                            )}
                         </div>
 
-                    <div className="flex items-center justify-end px-5 py-4 bg-gray-50/50 border-t border-gray-100 gap-3">
+                        {/* Action Buttons */}
+                        <div className="flex gap-2 w-full md:w-auto">
                             <Button
                                 variant="outline"
-                            onClick={handleReset}
+                                className="button-outlined-primary"
-                            className="button-outlined-primary h-9 gap-2"
-                        >
-                            <RotateCcw className="h-4 w-4" />
-                            重置
-                        </Button>
-                        <Button
                                 onClick={handleFilter}
-                            className="button-filled-primary h-9 px-6 gap-2"
                             >
-                            <Search className="h-4 w-4" />
+                                <Search className="w-4 h-4 mr-2" />
                                 搜尋
                             </Button>
+
+                            <Can permission="recipes.create">
+                                <Link href={route('recipes.create')}>
+                                    <Button className="button-filled-primary">
+                                        <Plus className="w-4 h-4 mr-2" />
+                                        新增配方
+                                    </Button>
+                                </Link>
+                            </Can>
+                        </div>
                     </div>
                 </div>