feat(api,ui): refine organization UX

packages/admin-ui/src/components/form/organization-combobox.module.css

@@ -0,0 +1,61 @@
+.root {
+  position: relative;
+  width: 100%;
+}
+
+.trigger {
+  width: 100%;
+  justify-content: space-between;
+  font-weight: 400;
+}
+
+.value {
+  min-width: 0;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.popover {
+  position: absolute;
+  z-index: 60;
+  top: calc(100% + 8px);
+  left: 0;
+  width: 100%;
+  min-width: min(420px, 100vw);
+  overflow: hidden;
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+  background: hsl(var(--popover));
+  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
+}
+
+.item {
+  justify-content: space-between;
+}
+
+.itemLabel {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+}
+
+.itemLabel strong,
+.itemLabel small {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.itemLabel small {
+  color: hsl(var(--muted-foreground));
+}
+
+.footer {
+  display: flex;
+  justify-content: center;
+  padding: 8px;
+  border-top: 1px solid hsl(var(--border));
+}

packages/admin-ui/src/components/form/organization-combobox.tsx

@@ -0,0 +1,210 @@
+import { Check, ChevronsUpDown, Loader2 } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import adminApiService, { type Organization } from "@/services/api";
+import styles from "./organization-combobox.module.css";
+
+interface OrganizationComboboxProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+function labelForOrganization(organization: Organization) {
+  return organization.slug ? `${organization.name} (${organization.slug})` : organization.name;
+}
+
+export default function OrganizationCombobox({
+  value,
+  onValueChange,
+  placeholder = "Select an organization",
+  disabled,
+}: OrganizationComboboxProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [selectedOrganization, setSelectedOrganization] = useState<Organization | null>(null);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const handle = window.setTimeout(() => setDebouncedSearch(search.trim()), 250);
+    return () => window.clearTimeout(handle);
+  }, [search]);
+
+  const selected = useMemo(
+    () =>
+      organizations.find((organization) => organization.organizationId === value) ||
+      selectedOrganization,
+    [organizations, selectedOrganization, value]
+  );
+
+  const loadOrganizations = useCallback(
+    async (nextPage: number, query: string, replace: boolean) => {
+      try {
+        setLoading(true);
+        const response = await adminApiService.getOrganizationsPaged({
+          page: nextPage,
+          limit: 25,
+          search: query || undefined,
+          sortBy: "name",
+          sortOrder: "asc",
+        });
+        setPage(response.pagination.page);
+        setTotalPages(response.pagination.totalPages);
+        setOrganizations((current) =>
+          replace
+            ? response.organizations
+            : [
+                ...current,
+                ...response.organizations.filter(
+                  (organization) =>
+                    !current.some(
+                      (existing) => existing.organizationId === organization.organizationId
+                    )
+                ),
+              ]
+        );
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (!open) return;
+    loadOrganizations(1, debouncedSearch, true).catch(() => {
+      setOrganizations([]);
+      setPage(1);
+      setTotalPages(1);
+    });
+  }, [debouncedSearch, loadOrganizations, open]);
+
+  useEffect(() => {
+    if (!value) {
+      setSelectedOrganization(null);
+      return;
+    }
+    if (organizations.some((organization) => organization.organizationId === value)) return;
+    let cancelled = false;
+    adminApiService
+      .getOrganization(value)
+      .then((organization) => {
+        if (!cancelled) setSelectedOrganization(organization);
+      })
+      .catch(() => {
+        if (!cancelled) setSelectedOrganization(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [organizations, value]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Node | null;
+      if (target && rootRef.current && !rootRef.current.contains(target)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+
+  const loadMore = () => {
+    if (loading || page >= totalPages) return;
+    loadOrganizations(page + 1, debouncedSearch, false).catch(() => {});
+  };
+
+  return (
+    <div className={styles.root} ref={rootRef}>
+      <Button
+        type="button"
+        variant="outline"
+        className={styles.trigger}
+        disabled={disabled}
+        aria-expanded={open}
+        onClick={() => setOpen((current) => !current)}
+      >
+        <span className={styles.value}>
+          {selected ? labelForOrganization(selected) : placeholder}
+        </span>
+        <ChevronsUpDown size={16} />
+      </Button>
+      {open ? (
+        <div className={styles.popover}>
+          <Command shouldFilter={false}>
+            <CommandInput
+              value={search}
+              onValueChange={setSearch}
+              placeholder="Search organizations..."
+            />
+            <CommandList>
+              <CommandEmpty>
+                {loading ? "Loading organizations..." : "No organizations found"}
+              </CommandEmpty>
+              <CommandGroup>
+                {organizations.map((organization) => {
+                  const active = organization.organizationId === value;
+                  return (
+                    <CommandItem
+                      key={organization.organizationId}
+                      value={organization.organizationId}
+                      className={styles.item}
+                      onSelect={() => {
+                        onValueChange(organization.organizationId);
+                        setSelectedOrganization(organization);
+                        setOpen(false);
+                      }}
+                    >
+                      <span className={styles.itemLabel}>
+                        <strong>{organization.name}</strong>
+                        {organization.slug ? <small>{organization.slug}</small> : null}
+                      </span>
+                      {active ? <Check size={16} /> : null}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            </CommandList>
+            {loading || page < totalPages ? (
+              <div className={styles.footer}>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  disabled={loading || page >= totalPages}
+                  onClick={loadMore}
+                >
+                  {loading ? <Loader2 size={14} /> : null}
+                  {loading ? "Loading..." : "Load more"}
+                </Button>
+              </div>
+            ) : null}
+          </Command>
+        </div>
+      ) : null}
+    </div>
+  );
+}

packages/admin-ui/src/components/ui/tabs.module.css

@@ -4,7 +4,7 @@
   height: auto;
   justify-content: flex-start;
   align-items: center;
-  gap: 4px;
+  gap: 0;
   padding: 0;
   background-color: transparent;
   border-bottom: 1px solid hsl(var(--border));
@@ -19,8 +19,8 @@
   height: 40px;
   padding: 0 1.25rem;
   white-space: nowrap;
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 0.875rem;
+  font-weight: 600;
   transition: all 0.2s;
   background: transparent;
   border: 1px solid transparent;

packages/admin-ui/src/pages/AuditLogs.tsx

@@ -1,6 +1,6 @@
 import { Download, Eye, FileText, Filter, X } from "lucide-react";
 import { useCallback, useEffect, useId, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import EmptyState from "@/components/empty-state";
 import ErrorBanner from "@/components/feedback/error-banner";
 import PageHeader from "@/components/layout/page-header";
@@ -59,6 +59,8 @@ const EVENT_TYPES = [
 export default function AuditLogs() {
   const uid = useId();
   const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const organizationIdFilter = searchParams.get("organizationId") || "";
   const [logs, setLogs] = useState<AuditLog[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -78,6 +80,7 @@ export default function AuditLogs() {
     limit: pageSize,
     sortBy: "timestamp",
     sortOrder: "desc",
+    organizationId: organizationIdFilter || undefined,
   });
 
   const loadAuditLogs = useCallback(async () => {
@@ -101,6 +104,14 @@ export default function AuditLogs() {
     loadAuditLogs();
   }, [loadAuditLogs]);
 
+  useEffect(() => {
+    setFilters((prev) => ({
+      ...prev,
+      page: 1,
+      organizationId: organizationIdFilter || undefined,
+    }));
+  }, [organizationIdFilter]);
+
   useEffect(() => {
     const handle = setTimeout(() => setDebouncedSearch(searchQuery.trim()), 300);
     return () => clearTimeout(handle);
@@ -129,6 +140,11 @@ export default function AuditLogs() {
     setSuccessFilter("");
     setStartDate("");
     setEndDate("");
+    setSearchParams((current) => {
+      const next = new URLSearchParams(current);
+      next.delete("organizationId");
+      return next;
+    });
     setFilters({ page: 1, limit: pageSize, sortBy: "timestamp", sortOrder: "desc" });
   };
 
@@ -305,7 +321,9 @@ export default function AuditLogs() {
 
       <ListCard
         title="Audit Events"
-        description={`Showing ${logs.length} of ${totalLogs} events`}
+        description={`Showing ${logs.length} of ${totalLogs} events${
+          organizationIdFilter ? " for the selected organization" : ""
+        }`}
         search={{ placeholder: "Search logs...", value: searchQuery, onChange: setSearchQuery }}
         rightActions={
           <Button variant="outline" size="icon" onClick={() => setShowFilters(!showFilters)}>