🚧 wip: add ip is column filter

src/app/[orgId]/settings/logs/request/page.tsx

@@ -22,6 +22,7 @@ import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
 import type { QueryRequestAuditLogResponse } from "@server/routers/auditLogs/types";
 import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
 import { countryCodeToFlagEmoji } from "@app/lib/countryCodeToFlagEmoji";
+import { ColumnMultiFilterButton } from "@app/components/ColumnMultiFilterButton";
 
 export default function GeneralPage() {
     const router = useRouter();
@@ -44,6 +45,7 @@ export default function GeneralPage() {
         method?: string;
         reason?: string;
         path?: string;
+        ip?: string[];
     }>({
         action: searchParams.get("action") || undefined,
         host: searchParams.get("host") || undefined,
@@ -52,7 +54,8 @@ export default function GeneralPage() {
         actor: searchParams.get("actor") || undefined,
         method: searchParams.get("method") || undefined,
         reason: searchParams.get("reason") || undefined,
-        path: searchParams.get("path") || undefined
+        path: searchParams.get("path") || undefined,
+        ip: searchParams.getAll("ip") || undefined
     });
 
     const getDefaultDateRange = () => {
@@ -159,7 +162,7 @@ export default function GeneralPage() {
 
     const handleFilterChange = (
         filterType: keyof typeof filters,
-        value: string | undefined
+        value: string | string[] | undefined
     ) => {
         const newFilters = { ...filters, [filterType]: value };
         setFilters(newFilters);
@@ -177,10 +180,13 @@ export default function GeneralPage() {
     ) => {
         const params = new URLSearchParams(searchParams);
         Object.entries(newFilters).forEach(([key, value]) => {
-            if (value) {
+            params.delete(key);
+            if (typeof value === "string") {
                 params.set(key, value);
-            } else {
-                params.delete(key);
+            } else if (typeof value !== "undefined" && "length" in value) {
+                for (const element of value) {
+                    params.append(key, element);
+                }
             }
         });
         router.replace(`?${params.toString()}`, { scroll: false });
@@ -329,7 +335,22 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "ip",
-            header: ({ column }) => <span className="px-2">{t("ip")}</span>
+            header: ({ column }) => (
+                <span className="px-2">
+                    <ColumnMultiFilterButton
+                        options={(filters.ip ?? []).map((ip) => ({
+                            label: ip,
+                            value: ip
+                        }))}
+                        label={t("ip")}
+                        allowArbitraryValues
+                        selectedValues={filters.ip ?? []}
+                        onSelectedValuesChange={(value) =>
+                            handleFilterChange("ip", value)
+                        }
+                    />
+                </span>
+            )
         },
         {
             accessorKey: "location",