From bb78a432f5feaf303027fa338c7f16a70774a1f0 Mon Sep 17 00:00:00 2001
From: sky121113 <sky121113@gmail.com>
Date: Mon, 2 Feb 2026 09:06:06 +0800
Subject: [PATCH] =?UTF-8?q?fix(product):=20=E4=BF=AE=E5=BE=A9=E6=A2=9D?=
 =?UTF-8?q?=E7=A2=BC=E6=8E=83=E6=8F=8F=E8=87=AA=E5=8B=95=E9=80=81=E5=87=BA?=
 =?UTF-8?q?=E5=95=8F=E9=A1=8C=E4=B8=A6=E5=84=AA=E5=8C=96=E6=89=8B=E5=8B=95?=
 =?UTF-8?q?=E8=BC=B8=E5=85=A5=E9=AB=94=E9=A9=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/Components/Product/ProductDialog.tsx   |   7 +
 resources/js/Pages/Production/Index.tsx       | 137 +++++++++---------
 .../js/Pages/Production/Recipe/Index.tsx      |  98 ++++++-------
 3 files changed, 126 insertions(+), 116 deletions(-)

diff --git a/resources/js/Components/Product/ProductDialog.tsx b/resources/js/Components/Product/ProductDialog.tsx
index 73fdcdb..2dc998f 100644
--- a/resources/js/Components/Product/ProductDialog.tsx
+++ b/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" : ""}`}
                   />
diff --git a/resources/js/Pages/Production/Index.tsx b/resources/js/Pages/Production/Index.tsx
index 3ef377e..d23793b 100644
--- a/resources/js/Pages/Production/Index.tsx
+++ b/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,70 +109,79 @@ export default function ProductionIndex({ productionOrders, filters }: Props) {
                             記錄生產過程，追蹤原物料使用與成品入庫
                         </p>
                     </div>
-                    <div className="flex gap-2">
-                        <Can permission="production_orders.create">
-                            <Button
-                                onClick={handleNavigateToCreate}
-                                className="gap-2 button-filled-primary"
-                            >
-                                <Plus className="h-4 w-4" />
-                                建立生產單
-                            </Button>
-                        </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>
+                {/* 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>
-                    </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"
+                        {/* 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 }
+                                );
+                            }}
                         >
-                            <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>
+                            <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}
+                                    className="gap-2 button-filled-primary"
+                                >
+                                    <Plus className="h-4 w-4" />
+                                    建立生產單
+                                </Button>
+                            </Can>
+                        </div>
                     </div>
                 </div>
 
diff --git a/resources/js/Pages/Production/Recipe/Index.tsx b/resources/js/Pages/Production/Recipe/Index.tsx
index a8d3d30..52e7025 100644
--- a/resources/js/Pages/Production/Recipe/Index.tsx
+++ b/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>
 
-                {/* 篩選區塊 */}
-                <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-12 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>
+                {/* 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('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>
 
-                    <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>
+                        {/* 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="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>