first commit

2026-08-07 09:40:16 +03:30
commit 0c51b30059
37 changed files with 5146 additions and 0 deletions
@@ -0,0 +1,135 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Upload, Loader2 } from "lucide-react";
+import Shell from "@/components/Shell";
+import EditableTable, { Col } from "@/components/EditableTable";
+import { TableSkeleton } from "@/components/Skeleton";
+import Thumb from "@/components/Thumb";
+import { api, getAuth, ASSET_BASE } from "@/lib/api";
+import { toastError, toastSuccess } from "@/lib/toast";
+
+type Row = Record<string, unknown>;
+
+const COLS: Col[] = [
+  { key: "id", label: "شناسه" },
+  { key: "title", label: "عنوان" },
+  { key: "price_coins", label: "قیمت (سکه)", type: "number" },
+  { key: "vip", label: "VIP رایگان", type: "bool" },
+  { key: "sort", label: "ترتیب", type: "number" },
+];
+
+const API =
+  process.env.NEXT_PUBLIC_API_URL || "https://hakem.approagency.ir/admin/api";
+
+export default function AvatarsPage() {
+  const [rows, setRows] = useState<Row[]>([]);
+  const [ver, setVer] = useState(1); // تازه‌سازیِ کشِ تصویر پس از آپلود
+  const [loading, setLoading] = useState(true);
+
+  async function load() {
+    setLoading(true);
+    try {
+      const r = await api.get<{ avatars: Row[] }>("/avatars");
+      setRows(r.avatars || []);
+      setVer((v) => v + 1);
+    } finally {
+      setLoading(false);
+    }
+  }
+  useEffect(() => {
+    load();
+  }, []);
+
+  return (
+    <Shell title="شخصیت‌ها" subtitle="آواتارهای قابلِ خریدِ بازیکن">
+      <p className="text-sm text-[#8aa] mb-4">
+        شخصیتِ آواتار که کاربر می‌خرد و در کلِ بازی (سرِ میز، پروفایل و لابی) دیده
+        می‌شود. ابتدا ردیف را با شناسه و قیمت بسازید، سپس یک تصویرِ{" "}
+        <code>png</code> یا <code>svg</code> (ترجیحاً مربع و با پس‌زمینه‌ی شفاف)
+        آپلود کنید.
+      </p>
+      {loading ? (
+        <TableSkeleton rows={5} cols={COLS.length} />
+      ) : (
+      <EditableTable
+        cols={COLS}
+        rows={rows}
+        newTemplate={{ id: "", title: "", price_coins: 0, vip: false, sort: 0 }}
+        onSave={async (row) => {
+          await api.post("/avatars", row);
+          await load();
+        }}
+        onDelete={async (id) => {
+          if (!confirm("حذف شخصیت؟")) return;
+          await api.del(`/avatars?id=${encodeURIComponent(id)}`);
+          await load();
+        }}
+        preview={(row) => (
+          <Thumb
+            src={`${ASSET_BASE}/avatars/${row.id}.${row.img_ext || "png"}?v=${ver}`}
+            size={48}
+          />
+        )}
+        extra={(row) => <UploadBtn id={String(row.id)} onDone={load} />}
+      />
+      )}
+    </Shell>
+  );
+}
+
+function UploadBtn({ id, onDone }: { id: string; onDone: () => void }) {
+  const ref = useRef<HTMLInputElement>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function upload(file: File) {
+    setBusy(true);
+    try {
+      const fd = new FormData();
+      fd.append("image", file);
+      const auth = getAuth();
+      const res = await fetch(`${API}/avatars/${encodeURIComponent(id)}/upload`, {
+        method: "POST",
+        headers: auth ? { Authorization: `Basic ${auth}` } : {},
+        body: fd,
+      });
+      if (!res.ok) throw new Error("آپلود ناموفق بود");
+      toastSuccess("تصویر آپلود شد");
+      onDone();
+    } catch (e) {
+      toastError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <>
+      <button
+        className="btn btn-ghost flex items-center gap-1"
+        disabled={busy}
+        onClick={() => ref.current?.click()}
+        title="آپلود تصویر"
+      >
+        {busy ? (
+          <>
+            <Loader2 size={14} className="animate-spin" /> در حال آپلود…
+          </>
+        ) : (
+          <Upload size={14} />
+        )}
+      </button>
+      <input
+        ref={ref}
+        type="file"
+        accept="image/png,image/svg+xml,.svg"
+        hidden
+        onChange={(e) => {
+          const f = e.target.files?.[0];
+          if (f) upload(f);
+          e.target.value = "";
+        }}
+      />
+    </>
+  );
+}