From 8a267e7524d8c1f691f42b5b70d4d256554a59f2 Mon Sep 17 00:00:00 2001
From: "kelvin.yau" <kelvin.yau@2fi-solutions.com>
Date: Thu, 22 Oct 2026 17:45:26 +0800
Subject: [PATCH] Add item code/name filter on schedule settings materials tab.

---
 src/app/(main)/ps/page.tsx | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/app/(main)/ps/page.tsx b/src/app/(main)/ps/page.tsx
index 4a6d717b..e959a5ac 100644
--- a/src/app/(main)/ps/page.tsx
+++ b/src/app/(main)/ps/page.tsx
@@ -67,6 +67,7 @@ export default function ProductionSchedulePage() {
   const [isDailyOutPanelOpen, setIsDailyOutPanelOpen] = useState(false);
   const [settingsTab, setSettingsTab] = useState<"items" | "rules">("items");
   const [itemDailyOutList, setItemDailyOutList] = useState<ItemDailyOutRow[]>([]);
+  const [itemDailyOutFilter, setItemDailyOutFilter] = useState("");
   const [itemDailyOutLoading, setItemDailyOutLoading] = useState(false);
   const [dailyOutSavingCode, setDailyOutSavingCode] = useState<string | null>(null);
   const [dailyOutClearingCode, setDailyOutClearingCode] = useState<string | null>(null);
@@ -338,10 +339,21 @@ export default function ProductionSchedulePage() {
 
   const openSettingsPanel = () => {
     setSettingsTab("items");
+    setItemDailyOutFilter("");
     setIsDailyOutPanelOpen(true);
     fetchItemDailyOut();
   };
 
+  const filteredItemDailyOutList = useMemo(() => {
+    const q = itemDailyOutFilter.trim().toLowerCase();
+    if (!q) return itemDailyOutList;
+    return itemDailyOutList.filter(
+      (row) =>
+        row.itemCode.toLowerCase().includes(q) ||
+        row.itemName.toLowerCase().includes(q)
+    );
+  }, [itemDailyOutFilter, itemDailyOutList]);
+
   const handleRefreshInventoryOnHand = async () => {
     if (refreshOnHandInFlightRef.current) return;
     refreshOnHandInFlightRef.current = true;
@@ -1204,9 +1216,17 @@ export default function ProductionSchedulePage() {
               </button>
             </div>
             {settingsTab === "items" && (
-            <p className="px-4 py-2 text-sm text-slate-600 dark:text-slate-400">
-              {t("itemsHint")}
-            </p>
+            <div className="flex flex-wrap items-center gap-3 px-4 py-2">
+              <p className="text-sm text-slate-600 dark:text-slate-400">
+                {t("itemsHint")}
+              </p>
+              <input
+                value={itemDailyOutFilter}
+                onChange={(e) => setItemDailyOutFilter(e.target.value)}
+                placeholder={t("searchItem")}
+                className="ml-auto w-56 rounded border border-slate-300 bg-white px-2 py-1 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100"
+              />
+            </div>
             )}
             {settingsTab === "rules" ? (
               <div className="min-h-0 flex-1 overflow-auto">
@@ -1240,7 +1260,7 @@ export default function ProductionSchedulePage() {
                     </tr>
                   </thead>
                   <tbody>
-                    {itemDailyOutList.map((row, idx) => (
+                    {filteredItemDailyOutList.map((row, idx) => (
                       <DailyOutRow
                         key={`${row.itemCode}-${idx}`}
                         row={row}