refactor: organize pages into folders

src/pages/admin/Dashboard/index.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react";
+import { getJSONAuth } from "../../../api";
+import { getToken } from "../../../admin/token";
+import { useAdminT } from "../../../admin/useAdminT";
+
+type Dash = {
+  totalResources: number;
+  published: number;
+  todayNew: number;
+  totalViews: number;
+  totalDownloads: number;
+  totalFavorites: number;
+  totalShares: number;
+  hotResources: {
+    id: string;
+    title: string;
+    downloads: number;
+    favorites: number;
+    views: number;
+  }[];
+};
+
+export function AdminDashboard() {
+  const t = useAdminT();
+  const [d, setD] = useState<Dash | null>(null);
+  const token = getToken();
+
+  useEffect(() => {
+    getJSONAuth<Dash>("/api/admin/dashboard", token)
+      .then(setD)
+      .catch(() => setD(null));
+  }, [token]);
+
+  if (!d) return <div className="text-neutral-400">{t("loading")}</div>;
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-bold">{t("dashboard")}</h1>
+      <div className="grid gap-3 md:grid-cols-3">
+        <Stat label={t("total")} value={d.totalResources} />
+        <Stat label={t("published")} value={d.published} />
+        <Stat label={t("adminStatTodayNew")} value={d.todayNew} />
+        <Stat label={t("views")} value={d.totalViews} />
+        <Stat label={t("downloads")} value={d.totalDownloads} />
+        <Stat label={t("adminStatFavorites")} value={d.totalFavorites} />
+        <Stat label={t("adminMetricShares")} value={d.totalShares} />
+      </div>
+      <div className="rounded-2xl border border-ark-line bg-ark-panel p-4">
+        <div className="font-semibold mb-3">{t("popular")}</div>
+        <div className="divide-y divide-ark-line">
+          {(d.hotResources ?? []).map((x) => (
+            <div
+              key={x.id}
+              className="py-2 flex items-center justify-between gap-3"
+            >
+              <div className="text-sm">{x.title}</div>
+              <div className="text-xs text-neutral-400">
+                {t("adminMetricDownloads")} {x.downloads} ·{" "}
+                {t("adminMetricFavorites")} {x.favorites} ·{" "}
+                {t("adminMetricViews")} {x.views}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Stat({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="rounded-2xl border border-ark-line bg-ark-panel p-4">
+      <div className="text-xs text-neutral-400">{label}</div>
+      <div className="text-2xl font-bold mt-1">{value}</div>
+    </div>
+  );
+}