50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
|
import { useEffect, useState } from "react";
|
||
|
|
import { getJSONAuth } from "../../api";
|
||
|
|
import { getToken } from "../../admin/token";
|
||
|
|
import { useAdminT } from "../../admin/useAdminT";
|
||
|
|
|
||
|
|
type Row = { id: number; query: string; createdAt: string };
|
||
|
|
|
||
|
|
export function AdminSearchLogs() {
|
||
|
|
const t = useAdminT();
|
||
|
|
const token = getToken();
|
||
|
|
const [items, setItems] = useState<Row[]>([]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
getJSONAuth<{ items: Row[] }>("/api/admin/search-logs?limit=300", token)
|
||
|
|
.then((r) => setItems(Array.isArray(r.items) ? r.items : []))
|
||
|
|
.catch(() => setItems([]));
|
||
|
|
}, [token]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<h1 className="text-2xl font-bold">{t("adminSearchLogs")}</h1>
|
||
|
|
<div className="overflow-x-auto rounded-2xl border border-ark-line">
|
||
|
|
<table className="w-full text-sm">
|
||
|
|
<thead className="bg-ark-panel text-left text-neutral-400">
|
||
|
|
<tr>
|
||
|
|
<th className="p-3">{t("adminSearchId")}</th>
|
||
|
|
<th className="p-3">{t("adminSearchQuery")}</th>
|
||
|
|
<th className="p-3">{t("adminSearchTime")}</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{items.map((x) => (
|
||
|
|
<tr key={x.id} className="border-t border-ark-line">
|
||
|
|
<td className="p-3 text-neutral-500">{x.id}</td>
|
||
|
|
<td className="p-3 font-medium">{x.query}</td>
|
||
|
|
<td className="p-3 text-neutral-400 whitespace-nowrap">
|
||
|
|
{x.createdAt}
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
{items.length === 0 ? (
|
||
|
|
<p className="text-neutral-500 text-sm">{t("noResults")}</p>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|