[FEAT] 實作配方與生產工單自動搜尋，優化分頁 RWD，將倉庫地址改為選填並更新文件

resources/js/Pages/Production/Index.tsx

@@ -2,8 +2,9 @@
  * 生產工單管理主頁面
  */
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Plus, Factory, Search, Eye, Pencil, Trash2 } from 'lucide-react';
+import { debounce } from "lodash";
 import { formatQuantity } from "@/lib/utils";
 import { Button } from "@/Components/ui/button";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
@@ -77,16 +78,25 @@ export default function ProductionIndex({ productionOrders, filters }: Props) {
         setPerPage(filters.per_page || productionOrders.per_page?.toString() || "10");
     }, [filters]);
 
-    const handleFilter = () => {
-        router.get(
-            route('production-orders.index'),
-            {
-                search,
-                status: status === 'all' ? undefined : status,
-                per_page: perPage,
-            },
-            { preserveState: true, replace: true, preserveScroll: true }
-        );
+    const debouncedFilter = useCallback(
+        debounce((params: any) => {
+            router.get(route("production-orders.index"), params, {
+                preserveState: true,
+                replace: true,
+                preserveScroll: true,
+            });
+        }, 300),
+        []
+    );
+
+    const handleSearchChange = (term: string) => {
+        setSearch(term);
+        debouncedFilter({
+            ...filters,
+            search: term,
+            status: status === "all" ? undefined : status,
+            per_page: perPage,
+        });
     };
 
 
@@ -129,16 +139,12 @@ export default function ProductionIndex({ productionOrders, filters }: Props) {
                             <Input
                                 placeholder="搜尋生產單號、批號、商品名稱..."
                                 value={search}
-                                onChange={(e) => setSearch(e.target.value)}
+                                onChange={(e) => handleSearchChange(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, preserveScroll: true });
-                                    }}
+                                    onClick={() => handleSearchChange("")}
                                     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" />
@@ -172,15 +178,6 @@ export default function ProductionIndex({ productionOrders, filters }: Props) {
 
                         {/* 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}