From e0b4f42b71d70e0287e616e550b79a0371242f2e Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 9 Apr 2025 07:13:39 -0500
Subject: [PATCH] add ability to use * and ? in recognized plate input

---
 .../overlay/dialog/SearchFilterDialog.tsx     | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/web/src/components/overlay/dialog/SearchFilterDialog.tsx b/web/src/components/overlay/dialog/SearchFilterDialog.tsx
index 12be73016c..4d39acdae9 100644
--- a/web/src/components/overlay/dialog/SearchFilterDialog.tsx
+++ b/web/src/components/overlay/dialog/SearchFilterDialog.tsx
@@ -919,10 +919,21 @@ export function RecognizedLicensePlatesFilterContent({
     return null;
   }
 
-  const filteredRecognizedLicensePlates =
-    allRecognizedLicensePlates?.filter((id) =>
-      id.toLowerCase().includes(inputValue.toLowerCase()),
-    ) || [];
+  const filterItems = (value: string, search: string) => {
+    if (!search) return 1; // Show all items if no search input
+
+    if (search.includes("*") || search.includes("?")) {
+      const escapedSearch = search
+        .replace(/[.+^${}()|[\]\\]/g, "\\$&")
+        .replace(/\*/g, ".*") // * matches any characters
+        .replace(/\?/g, "."); // ? matches any single character
+      const regex = new RegExp(`^${escapedSearch}$`, "i");
+      return regex.test(value) ? 1 : -1; // 1 for match, -1 for no match
+    }
+
+    // fallback to substring matching if no wildcards
+    return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;
+  };
 
   return (
     <div className="overflow-x-hidden">
@@ -938,19 +949,22 @@ export function RecognizedLicensePlatesFilterContent({
         </p>
       ) : (
         <>
-          <Command className="border border-input bg-background">
+          <Command
+            className="border border-input bg-background"
+            filter={filterItems}
+          >
             <CommandInput
               placeholder={t("recognizedLicensePlates.placeholder")}
               value={inputValue}
               onValueChange={setInputValue}
             />
             <CommandList className="max-h-[200px] overflow-auto">
-              {filteredRecognizedLicensePlates.length === 0 && inputValue && (
+              {allRecognizedLicensePlates.length > 0 && inputValue && (
                 <CommandEmpty>
                   {t("recognizedLicensePlates.noLicensePlatesFound")}
                 </CommandEmpty>
               )}
-              {filteredRecognizedLicensePlates.map((plate) => (
+              {allRecognizedLicensePlates.map((plate) => (
                 <CommandItem
                   key={plate}
                   value={plate}