admin roadmap csv export, adminactionlog, global search

2026-05-18 20:09:22 +07:00
parent 244a6da9bb
commit ea63f56e97
25 changed files with 1330 additions and 158 deletions
@@ -0,0 +1,131 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+
+interface Hit {
+  type: "user" | "trip" | "booking";
+  id: string;
+  title: string;
+  subtitle: string;
+  href: string;
+}
+
+/**
+ * Search bar global untuk admin sidebar. Debounced 250ms supaya tidak spam
+ * server. Hits dispatch berdasarkan pola input — lihat
+ * `adminSearchService.resolve` di server.
+ */
+export function AdminSearchBar() {
+  const [query, setQuery] = useState("");
+  const [hits, setHits] = useState<Hit[]>([]);
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  // Debounced fetch — guard inside async block supaya tidak setState langsung
+  // di effect synchronous (react-hooks/set-state-in-effect).
+  useEffect(() => {
+    const q = query.trim();
+    const controller = new AbortController();
+    const timer = setTimeout(() => {
+      if (q.length < 2) {
+        setHits([]);
+        setLoading(false);
+        return;
+      }
+      setLoading(true);
+      fetch(`/api/admin/search?q=${encodeURIComponent(q)}`, {
+        signal: controller.signal,
+      })
+        .then((res) => (res.ok ? res.json() : { hits: [] }))
+        .then((json: { hits: Hit[] }) => {
+          setHits(json.hits ?? []);
+        })
+        .catch(() => setHits([]))
+        .finally(() => setLoading(false));
+    }, 250);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [query]);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    function onClick(e: MouseEvent) {
+      if (
+        wrapperRef.current &&
+        !wrapperRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, []);
+
+  return (
+    <div ref={wrapperRef} className="relative">
+      <input
+        type="search"
+        value={query}
+        onChange={(e) => {
+          setQuery(e.target.value);
+          setOpen(true);
+        }}
+        onFocus={() => setOpen(true)}
+        placeholder="Cari email, ID, order_id, judul..."
+        className="w-full rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-1.5 text-xs text-neutral-800 placeholder:text-neutral-400 focus:border-primary-400 focus:bg-white"
+      />
+      {open && query.trim().length >= 2 && (
+        <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-80 overflow-y-auto rounded-xl border border-neutral-200 bg-white shadow-xl">
+          {loading && (
+            <p className="px-3 py-2 text-[11px] text-neutral-500">Mencari...</p>
+          )}
+          {!loading && hits.length === 0 && (
+            <p className="px-3 py-2 text-[11px] text-neutral-500">
+              Tidak ada hasil.
+            </p>
+          )}
+          {!loading && hits.length > 0 && (
+            <ul className="py-1">
+              {hits.map((h) => (
+                <li key={`${h.type}-${h.id}`}>
+                  <Link
+                    href={h.href}
+                    onClick={() => {
+                      setOpen(false);
+                      setQuery("");
+                    }}
+                    className="flex items-center gap-2 px-3 py-2 hover:bg-neutral-50"
+                  >
+                    <span
+                      className={`rounded-full px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wide ${
+                        h.type === "user"
+                          ? "bg-primary-100 text-primary-700"
+                          : h.type === "trip"
+                            ? "bg-secondary-100 text-secondary-700"
+                            : "bg-amber-100 text-amber-700"
+                      }`}
+                    >
+                      {h.type}
+                    </span>
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-xs font-semibold text-neutral-800">
+                        {h.title}
+                      </p>
+                      <p className="truncate text-[10px] text-neutral-500">
+                        {h.subtitle}
+                      </p>
+                    </div>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}