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

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

@@ -2,8 +2,9 @@
  * 配方管理主頁面
  */
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Plus, Search, Pencil, Trash2, BookOpen, Eye } from 'lucide-react';
+import { debounce } from "lodash";
 import { Button } from "@/Components/ui/button";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, router, Link } from "@inertiajs/react";
@@ -73,17 +74,25 @@ export default function RecipeIndex({ recipes, filters }: Props) {
         setPerPage(filters.per_page || "10");
     }, [filters]);
 
-    const handleFilter = () => {
-        router.get(
-            route('recipes.index'),
-            {
-                search,
-                per_page: perPage,
-            },
-            { preserveState: true, replace: true, preserveScroll: true }
-        );
-    };
+    const debouncedFilter = useCallback(
+        debounce((params: any) => {
+            router.get(route("recipes.index"), params, {
+                preserveState: true,
+                replace: true,
+                preserveScroll: true,
+            });
+        }, 300),
+        []
+    );
 
+    const handleSearchChange = (term: string) => {
+        setSearch(term);
+        debouncedFilter({
+            ...filters,
+            search: term,
+            per_page: perPage,
+        });
+    };
 
     const handlePerPageChange = (value: string) => {
         setPerPage(value);
@@ -140,16 +149,12 @@ export default function RecipeIndex({ recipes, 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('recipes.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" /> {/* Using Trash2/X as clear icon, need to check imports. Inventory used X. */}
@@ -159,15 +164,6 @@ export default function RecipeIndex({ recipes, 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="recipes.create">
                                 <Link href={route('recipes.create')}>
                                     <Button className="button-filled-primary">