💄 ui

server/routers/auditLogs/queryRequestAuditLog.ts

@@ -81,7 +81,27 @@ export const queryAccessAuditLogsQuery = z.strictObject({
         .optional()
         .default("0")
         .transform(Number)
-        .pipe(z.int().nonnegative())
+        .pipe(z.int().nonnegative()),
+    ips: z
+        .preprocess((val) => {
+            if (val === undefined || val === null || val === "") {
+                return undefined;
+            }
+            if (Array.isArray(val)) {
+                return val;
+            }
+            // the array is returned as this
+            if (typeof val === "string") {
+                return val.split(",");
+            }
+            return undefined;
+        }, z.array(z.string()))
+        .optional()
+        .catch([])
+        .openapi({
+            type: "array",
+            description: "Filter by IP adresses"
+        })
 });
 
 export const queryRequestAuditLogsParams = z.object({

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

@@ -21,6 +21,7 @@ import { useMemo, useState, useTransition } from "react";
 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";
 
 export default function GeneralPage() {
     const router = useRouter();
@@ -339,7 +340,7 @@ export default function GeneralPage() {
                             options={filterAttributes.locations.map(
                                 (location) => ({
                                     value: location,
-                                    label: location
+                                    label: `${location} ${countryCodeToFlagEmoji(location)}`
                                 })
                             )}
                             selectedValue={filters.location}
@@ -359,7 +360,8 @@ export default function GeneralPage() {
                     <span className="flex items-center gap-1">
                         {row.original.location ? (
                             <span className="text-muted-foreground text-xs">
-                                {row.original.location}
+                                {row.original.location}{" "}
+                                {countryCodeToFlagEmoji(row.original.location)}
                             </span>
                         ) : (
                             <span className="text-muted-foreground text-xs">

src/components/ColumnFilterButton.tsx

@@ -21,7 +21,7 @@ import { useTranslations } from "next-intl";
 
 interface FilterOption {
     value: string;
-    label: string;
+    label: React.ReactNode;
 }
 
 interface ColumnFilterButtonProps {
@@ -32,6 +32,7 @@ interface ColumnFilterButtonProps {
     emptyMessage?: string;
     className?: string;
     label: string;
+    allowArbitraryValues?: boolean;
 }
 
 export function ColumnFilterButton({
@@ -41,7 +42,8 @@ export function ColumnFilterButton({
     searchPlaceholder = "Search...",
     emptyMessage = "No options found",
     className,
-    label
+    label,
+    allowArbitraryValues
 }: ColumnFilterButtonProps) {
     const [open, setOpen] = useState(false);
 
@@ -101,7 +103,7 @@ export function ColumnFilterButton({
                             {options.map((option) => (
                                 <CommandItem
                                     key={option.value}
-                                    value={option.label}
+                                    value={option.value}
                                     onSelect={() => {
                                         onValueChange(
                                             selectedValue === option.value