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

.agents/rules/framework.md

@@ -88,3 +88,13 @@ trigger: always_on
 *   **自動化部署**：本專案使用 CI/CD 自動化部署，開發者只需 push 程式碼至對應分支即可。
 *   **Demo 環境 (對應 `demo` 分支)**：若需查修測試站問題（例如查看 Error Log 或資料庫），請連線 `ssh gitea_work`。
 *   **Production 環境 (對應 `main` 分支)**：若需查修正式站問題，請連線 `ssh erp`。
+
+## 11. 瀏覽器測試規範 (Browser Testing)
+當需要進行瀏覽器自動化測試或手動驗證時，請遵守以下連線資訊：
+
+*   **本地測試網址**：`http://localhost:8081/`
+*   **預設管理員帳號**：`admin`
+*   **預設管理員密碼**：`password`
+
+> [!IMPORTANT]
+> 在執行 browser subagent 或進行 E2E 測試時，請務必確認為 `8081` Port，以避免連線至錯誤的服務環境。

resources/js/Components/Warehouse/WarehouseDialog.tsx

@@ -266,14 +266,13 @@ export default function WarehouseDialog({
                 {/* 倉庫地址 */}
                 <div className="space-y-2">
                   <Label htmlFor="address">
-                    倉庫地址 <span className="text-red-500">*</span>
+                    倉庫地址
                   </Label>
                   <Input
                     id="address"
                     value={formData.address}
                     onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                     placeholder="例：台北市信義區信義路五段7號"
-                    required
                     className="h-9"
                   />
                 </div>

resources/js/Components/shared/Pagination.tsx

@@ -27,22 +27,33 @@ export default function Pagination({ links, className }: PaginationProps) {
                 const isNext = label === "Next";
                 const activeIndex = links.findIndex(l => l.active);
 
-                // Tablet/Mobile visibility logic (< md):
+                // Responsive visibility logic:
-                // Show: Previous, Next, Active, and up to 2 neighbors (Total ~5 numeric pages)
+                // Global: Previous, Next, Active are always visible
-                // Hide others on small screens (hidden md:flex)
+                // Mobile (< sm): Active, +-1, First, Last, and Ellipses
-                // User requested: "small than 800... display 5 pages"
+                // Tablet (sm < md): Active, +-2, First, Last, and Ellipses
-                const isVisibleOnTablet =
+                // Desktop (>= md): All standard pages
+                const isFirst = key === 1;
+                const isLast = key === links.length - 2;
+                const isEllipsis = !isPrevious && !isNext && !link.url;
+
+                const isMobileVisible =
                     isPrevious ||
                     isNext ||
                     link.active ||
+                    isFirst ||
+                    isLast ||
+                    isEllipsis ||
                     key === activeIndex - 1 ||
-                    key === activeIndex + 1 ||
+                    key === activeIndex + 1;
+
+                const isTabletVisible =
+                    isMobileVisible ||
                     key === activeIndex - 2 ||
                     key === activeIndex + 2;
 
                 const baseClasses = cn(
-                    isVisibleOnTablet ? "flex" : "hidden md:flex",
+                    "h-9 items-center justify-center rounded-md border px-3 text-sm",
-                    "h-9 items-center justify-center rounded-md border px-3 text-sm"
+                    isMobileVisible ? "flex" : (isTabletVisible ? "hidden sm:flex md:flex" : "hidden md:flex")
                 );
 
                 // 如果是 Previous/Next 但沒有 URL，則不渲染（或者渲染為 disabled）

resources/js/Pages/Admin/ActivityLog/Index.tsx

@@ -318,10 +318,10 @@ export default function ActivityLogIndex({ activities, filters, subject_types, u
                     from={activities.from}
                 />
 
-                <div className="mt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
+                <div className="mt-6 flex flex-wrap items-center justify-between gap-4">
-                    <div className="flex items-center gap-4">
+                    <div className="flex flex-wrap items-center justify-center sm:justify-start gap-4 w-full sm:w-auto">
                         <div className="flex items-center gap-2 text-sm text-gray-500">
-                            <span>每頁顯示</span>
+                            <span className="shrink-0">每頁顯示</span>
                             <SearchableSelect
                                 value={perPage}
                                 onValueChange={handlePerPageChange}
@@ -334,11 +334,11 @@ export default function ActivityLogIndex({ activities, filters, subject_types, u
                                 className="w-[100px] h-8"
                                 showSearch={false}
                             />
-                            <span>筆</span>
+                            <span className="shrink-0">筆</span>
                         </div>
-                        <span className="text-sm text-gray-500">共 {activities.total} 筆資料</span>
+                        <span className="text-sm text-gray-500 whitespace-nowrap">共 {activities.total} 筆資料</span>
                     </div>
-                    <div className="w-full md:w-auto flex justify-center md:justify-end">
+                    <div className="w-full sm:w-auto flex justify-center sm:justify-end shrink-0">
                         <Pagination links={activities.links} />
                     </div>
                 </div>

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 = () => {
+    const debouncedFilter = useCallback(
-        router.get(
+        debounce((params: any) => {
-            route('production-orders.index'),
+            router.get(route("production-orders.index"), params, {
-            {
+                preserveState: true,
-                search,
+                replace: true,
-                status: status === 'all' ? undefined : status,
+                preserveScroll: true,
-                per_page: perPage,
+            });
-            },
+        }, 300),
-            { preserveState: true, replace: true, preserveScroll: true }
+        []
     );
+
+    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={() => {
+                                    onClick={() => handleSearchChange("")}
-                                        setSearch("");
-                                        router.get(route('production-orders.index'), { ...filters, search: "" }, { preserveState: true, replace: true, preserveScroll: 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" />
@@ -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}

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 = () => {
+    const debouncedFilter = useCallback(
-        router.get(
+        debounce((params: any) => {
-            route('recipes.index'),
+            router.get(route("recipes.index"), params, {
-            {
+                preserveState: true,
-                search,
+                replace: true,
-                per_page: perPage,
+                preserveScroll: true,
-            },
+            });
-            { 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={() => {
+                                    onClick={() => handleSearchChange("")}
-                                        setSearch("");
-                                        router.get(route('recipes.index'), { ...filters, search: "" }, { preserveState: true, replace: true, preserveScroll: 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. */}
@@ -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">

resources/js/utils/validation.ts

@@ -64,10 +64,6 @@ export const validateWarehouse = (formData: {
     return { isValid: false, error: "倉庫名稱為必填欄位" };
   }
 
-  if (!formData.address.trim()) {
-    return { isValid: false, error: "倉庫地址為必填欄位" };
-  }
-
   return { isValid: true };
 };