feat: admin dashboard
This commit is contained in:
gosangam
@@ -0,0 +1,8 @@
|
||||
# The BFF base URL (no trailing slash). The admin app calls ${NEXT_PUBLIC_BFF_URL}/api/v1/...
|
||||
# Locally the BFF runs on :8080; in production point this at your API host.
|
||||
NEXT_PUBLIC_BFF_URL=http://localhost:8080
|
||||
|
||||
# IMPORTANT — also set ADMIN_URL on the BFF to this app's origin so CORS allows
|
||||
# credentialed requests from here:
|
||||
# dev: ADMIN_URL=http://localhost:3001
|
||||
# prod: ADMIN_URL=https://admin.prabhupadasays.org
|
||||
@@ -0,0 +1,9 @@
|
||||
/node_modules
|
||||
/.next
|
||||
/out
|
||||
/build
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
.env
|
||||
.env*.local
|
||||
.DS_Store
|
||||
@@ -0,0 +1,69 @@
|
||||
# Prabhupāda Says — Admin
|
||||
|
||||
A separate Next.js 16 + Tailwind v4 admin panel that talks to the existing Go
|
||||
BFF. It reuses the BFF's cookie session (no separate auth system) and every
|
||||
action is gated server-side by the new `/api/v1/admin/*` endpoints, which
|
||||
require `role = "admin"`.
|
||||
|
||||
## Features
|
||||
|
||||
- Email/password login (with the BFF's OTP step when required) + forgot/reset password
|
||||
- Users — search, paginate, **send a notification** to an individual user
|
||||
- Posts — search, paginate
|
||||
- Collections — search, paginate
|
||||
- Feedback — paginate, filter (all/open/resolved), **reply** (emails the submitter)
|
||||
- Reports — posts / comments / accounts tabs, search, paginate, **resolve**
|
||||
|
||||
## Prerequisites
|
||||
|
||||
The BFF must be running with migration `0038_admin_panel` applied (it runs
|
||||
automatically on BFF startup) and these env vars set **on the BFF**:
|
||||
|
||||
```
|
||||
ADMIN_URL=http://localhost:3001 # this app's origin — added to CORS
|
||||
# (production: ADMIN_URL=https://admin.prabhupadasays.org)
|
||||
```
|
||||
|
||||
Without `ADMIN_URL`, the browser's credentialed requests from this origin are
|
||||
blocked by CORS.
|
||||
|
||||
## Setup
|
||||
|
||||
```bash
|
||||
cd spsays-admin
|
||||
cp .env.example .env.local # set NEXT_PUBLIC_BFF_URL
|
||||
yarn install
|
||||
yarn dev # http://localhost:3001
|
||||
```
|
||||
|
||||
## Make yourself an admin
|
||||
|
||||
The panel only admits users whose role is `admin`. Promote your account once,
|
||||
directly in Postgres:
|
||||
|
||||
```sql
|
||||
UPDATE users SET role = 'admin' WHERE email = 'you@example.com';
|
||||
```
|
||||
|
||||
Then sign in at `/login` with that account's email + password.
|
||||
|
||||
## Production notes
|
||||
|
||||
- Deploy on its own subdomain, e.g. `admin.prabhupadasays.org`, and set
|
||||
`ADMIN_URL` on the BFF to that origin. The session cookie is shared because
|
||||
the BFF sets it on `.prabhupadasays.org`.
|
||||
- The app sets `robots: noindex` and should additionally be access-restricted
|
||||
at the edge if desired — the BFF's `RequireAdmin` is the real security
|
||||
boundary, but defense in depth doesn't hurt.
|
||||
|
||||
## How it maps to the BFF
|
||||
|
||||
| Screen | Endpoint |
|
||||
| ----------- | ------------------------------------------ |
|
||||
| Login | `POST /auth/login` (+ `verify-login-otp`) |
|
||||
| Forgot/Reset| `POST /auth/forgot-password` / `reset-password` |
|
||||
| Users | `GET /admin/users`, `POST /admin/users/{id}/notify` |
|
||||
| Posts | `GET /admin/posts` |
|
||||
| Collections | `GET /admin/collections` |
|
||||
| Feedback | `GET /admin/feedback`, `POST /admin/feedback/{id}/reply` |
|
||||
| Reports | `GET /admin/reports?type=`, `POST /admin/reports/{type}/{id}/resolve` |
|
||||
@@ -0,0 +1,74 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useState } from "react";
|
||||
import { api, type AdminCollection } from "@/lib/api";
|
||||
import { usePagedList } from "@/lib/use-paged-list";
|
||||
import { ListShell, EmptyRow } from "@/components/list-shell";
|
||||
import { Table, THead, TR, TH, TD } from "@/components/ui/table";
|
||||
import { fmtDate } from "@/lib/utils";
|
||||
|
||||
export default function CollectionsPage() {
|
||||
const [q, setQ] = useState("");
|
||||
const fetcher = useCallback(
|
||||
(limit: number, offset: number) => api.collections(q, limit, offset),
|
||||
[q],
|
||||
);
|
||||
const list = usePagedList<AdminCollection>(fetcher, [q]);
|
||||
|
||||
return (
|
||||
<ListShell
|
||||
title="Collections"
|
||||
total={list.total}
|
||||
searchPlaceholder="Search title, description, or owner…"
|
||||
onQueryChange={setQ}
|
||||
list={list}
|
||||
>
|
||||
<Table>
|
||||
<THead>
|
||||
<TR>
|
||||
<TH>Collection</TH>
|
||||
<TH>Owner</TH>
|
||||
<TH>Items</TH>
|
||||
<TH>Visibility</TH>
|
||||
<TH>Created</TH>
|
||||
</TR>
|
||||
</THead>
|
||||
<tbody>
|
||||
{list.items.length === 0 && !list.loading ? (
|
||||
<EmptyRow cols={5} label="No collections found." />
|
||||
) : (
|
||||
list.items.map((c) => (
|
||||
<TR key={c.id}>
|
||||
<TD className="max-w-md">
|
||||
<div className="font-medium">{c.title}</div>
|
||||
{c.description ? (
|
||||
<div className="mt-0.5 line-clamp-1 text-xs text-muted-foreground">
|
||||
{c.description}
|
||||
</div>
|
||||
) : null}
|
||||
</TD>
|
||||
<TD className="whitespace-nowrap">
|
||||
<div className="font-medium">{c.owner_name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
@{c.owner_handle}
|
||||
</div>
|
||||
</TD>
|
||||
<TD>{c.item_count}</TD>
|
||||
<TD>
|
||||
<span
|
||||
className={
|
||||
c.is_public ? "text-foreground" : "text-muted-foreground"
|
||||
}
|
||||
>
|
||||
{c.is_public ? "Public" : "Private"}
|
||||
</span>
|
||||
</TD>
|
||||
<TD className="whitespace-nowrap">{fmtDate(c.created_at)}</TD>
|
||||
</TR>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</Table>
|
||||
</ListShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { api, AdminError, type AdminFeedback } from "@/lib/api";
|
||||
import { usePagedList } from "@/lib/use-paged-list";
|
||||
import { ListShell, EmptyRow } from "@/components/list-shell";
|
||||
import { Table, THead, TR, TH, TD } from "@/components/ui/table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Modal } from "@/components/ui/modal";
|
||||
import { Textarea } from "@/components/ui/input";
|
||||
import { cn, fmtDate } from "@/lib/utils";
|
||||
|
||||
const STATUSES = ["all", "open", "resolved"] as const;
|
||||
type Status = (typeof STATUSES)[number];
|
||||
|
||||
export default function FeedbackPage() {
|
||||
const [status, setStatus] = useState<Status>("all");
|
||||
const fetcher = useCallback(
|
||||
(limit: number, offset: number) => api.feedback(status, limit, offset),
|
||||
[status],
|
||||
);
|
||||
const list = usePagedList<AdminFeedback>(fetcher, [status]);
|
||||
const [reply, setReply] = useState<AdminFeedback | null>(null);
|
||||
|
||||
return (
|
||||
<ListShell
|
||||
title="Feedback"
|
||||
total={list.total}
|
||||
list={list}
|
||||
toolbar={
|
||||
<div className="flex gap-1 rounded-lg border border-border bg-card p-1">
|
||||
{STATUSES.map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
onClick={() => setStatus(s)}
|
||||
className={cn(
|
||||
"rounded-md px-3 py-1.5 text-sm capitalize transition-colors",
|
||||
status === s
|
||||
? "bg-accent text-accent-foreground font-medium"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Table>
|
||||
<THead>
|
||||
<TR>
|
||||
<TH>From</TH>
|
||||
<TH>Message</TH>
|
||||
<TH>Status</TH>
|
||||
<TH>Received</TH>
|
||||
<TH className="text-right">Actions</TH>
|
||||
</TR>
|
||||
</THead>
|
||||
<tbody>
|
||||
{list.items.length === 0 && !list.loading ? (
|
||||
<EmptyRow cols={5} label="No feedback." />
|
||||
) : (
|
||||
list.items.map((f) => (
|
||||
<TR key={f.id}>
|
||||
<TD className="whitespace-nowrap">
|
||||
{f.author_handle ? (
|
||||
<>
|
||||
<div className="font-medium">{f.author_name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
@{f.author_handle}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{f.contact_email ?? "Anonymous"}
|
||||
</div>
|
||||
)}
|
||||
</TD>
|
||||
<TD className="max-w-md">
|
||||
<div className="text-xs uppercase tracking-wide text-muted-foreground">
|
||||
{f.category}
|
||||
</div>
|
||||
<div className="mt-0.5 whitespace-pre-line">{f.message}</div>
|
||||
{f.reply_message ? (
|
||||
<div className="mt-2 rounded-md bg-muted px-3 py-2 text-xs">
|
||||
<span className="font-medium">Your reply: </span>
|
||||
{f.reply_message}
|
||||
</div>
|
||||
) : null}
|
||||
</TD>
|
||||
<TD>
|
||||
<StatusBadge f={f} />
|
||||
</TD>
|
||||
<TD className="whitespace-nowrap">{fmtDate(f.created_at)}</TD>
|
||||
<TD className="text-right">
|
||||
<Button size="sm" variant="outline" onClick={() => setReply(f)}>
|
||||
{f.replied_at ? "Reply again" : "Reply"}
|
||||
</Button>
|
||||
</TD>
|
||||
</TR>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</Table>
|
||||
|
||||
<ReplyModal
|
||||
feedback={reply}
|
||||
onClose={() => setReply(null)}
|
||||
onDone={() => {
|
||||
setReply(null);
|
||||
list.refresh();
|
||||
}}
|
||||
/>
|
||||
</ListShell>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusBadge({ f }: { f: AdminFeedback }) {
|
||||
const label = f.replied_at ? "Replied" : f.resolved_at ? "Resolved" : "Open";
|
||||
const tone = f.resolved_at || f.replied_at ? "text-primary" : "text-muted-foreground";
|
||||
return <span className={cn("text-sm", tone)}>{label}</span>;
|
||||
}
|
||||
|
||||
function ReplyModal({
|
||||
feedback,
|
||||
onClose,
|
||||
onDone,
|
||||
}: {
|
||||
feedback: AdminFeedback | null;
|
||||
onClose: () => void;
|
||||
onDone: () => void;
|
||||
}) {
|
||||
const [message, setMessage] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
async function send() {
|
||||
if (!feedback || message.trim() === "") return;
|
||||
setBusy(true);
|
||||
try {
|
||||
const { data } = (await api.replyFeedback(feedback.id, message.trim())) as {
|
||||
data: { replied: boolean; emailed: boolean };
|
||||
};
|
||||
toast.success(
|
||||
data?.emailed
|
||||
? "Reply saved and emailed to the submitter."
|
||||
: "Reply saved (no contact email on file to send to).",
|
||||
);
|
||||
setMessage("");
|
||||
onDone();
|
||||
} catch (err) {
|
||||
toast.error(err instanceof AdminError ? err.message : "Could not reply.");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal open={!!feedback} onClose={onClose} title="Reply to feedback">
|
||||
<div className="space-y-4">
|
||||
{feedback ? (
|
||||
<div className="rounded-md bg-muted px-3 py-2 text-sm">
|
||||
<div className="text-xs uppercase tracking-wide text-muted-foreground">
|
||||
{feedback.category}
|
||||
</div>
|
||||
<div className="mt-0.5 whitespace-pre-line">{feedback.message}</div>
|
||||
</div>
|
||||
) : null}
|
||||
<label className="block space-y-1.5">
|
||||
<span className="text-sm font-medium">Your reply</span>
|
||||
<Textarea
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
rows={5}
|
||||
maxLength={4000}
|
||||
placeholder="Write your reply… (emailed to the submitter, marks this resolved)"
|
||||
/>
|
||||
</label>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={send} disabled={busy || message.trim() === ""}>
|
||||
{busy ? "Sending…" : "Send reply"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import {
|
||||
Flag,
|
||||
FolderClosed,
|
||||
LayoutGrid,
|
||||
LogOut,
|
||||
MessageSquare,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { api, type Me } from "@/lib/api";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ConfirmProvider } from "@/components/confirm";
|
||||
|
||||
const NAV = [
|
||||
{ href: "/users", label: "Users", icon: Users },
|
||||
{ href: "/posts", label: "Posts", icon: LayoutGrid },
|
||||
{ href: "/collections", label: "Collections", icon: FolderClosed },
|
||||
{ href: "/feedback", label: "Feedback", icon: MessageSquare },
|
||||
{ href: "/reports", label: "Reports", icon: Flag },
|
||||
];
|
||||
|
||||
export default function DashboardLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const [me, setMe] = useState<Me | null>(null);
|
||||
const [checked, setChecked] = useState(false);
|
||||
|
||||
// Admin gate: only an authenticated admin may see the dashboard. Anyone
|
||||
// else is bounced to /login. The BFF independently enforces this on every
|
||||
// /admin/* call, so this is UX, not the security boundary.
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
api
|
||||
.me()
|
||||
.then((u) => {
|
||||
if (cancelled) return;
|
||||
if (!u || u.role !== "admin") {
|
||||
router.replace("/login");
|
||||
return;
|
||||
}
|
||||
setMe(u);
|
||||
setChecked(true);
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) router.replace("/login");
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [router]);
|
||||
|
||||
async function signOut() {
|
||||
await api.logout().catch(() => {});
|
||||
router.replace("/login");
|
||||
}
|
||||
|
||||
if (!checked || !me) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
|
||||
Loading…
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen">
|
||||
<aside className="flex w-60 shrink-0 flex-col border-r border-border bg-card">
|
||||
<div className="px-5 py-5">
|
||||
<p className="text-xs uppercase tracking-[0.2em] text-primary">
|
||||
Prabhupāda Says
|
||||
</p>
|
||||
<p className="mt-0.5 text-sm font-semibold text-foreground">Admin</p>
|
||||
</div>
|
||||
<nav className="flex-1 space-y-1 px-3">
|
||||
{NAV.map(({ href, label, icon: Icon }) => {
|
||||
const active = pathname === href || pathname.startsWith(href + "/");
|
||||
return (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
|
||||
active
|
||||
? "bg-accent text-accent-foreground font-medium"
|
||||
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
<Icon className="size-4" />
|
||||
{label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
<div className="border-t border-border px-3 py-3">
|
||||
<div className="px-3 pb-2 text-xs text-muted-foreground">
|
||||
<p className="truncate font-medium text-foreground">{me.name}</p>
|
||||
<p className="truncate">@{me.handle}</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={signOut}
|
||||
className="w-full justify-start text-muted-foreground"
|
||||
>
|
||||
<LogOut className="size-4" />
|
||||
Sign out
|
||||
</Button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main className="flex-1 overflow-x-hidden px-6 py-6 lg:px-10">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<ConfirmProvider>{children}</ConfirmProvider>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
// The dashboard root just lands on Users.
|
||||
export default function DashboardIndex() {
|
||||
redirect("/users");
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { api, AdminError, type AdminPost } from "@/lib/api";
|
||||
import { usePagedList } from "@/lib/use-paged-list";
|
||||
import { ListShell, EmptyRow } from "@/components/list-shell";
|
||||
import { Table, THead, TR, TH, TD } from "@/components/ui/table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useConfirm } from "@/components/confirm";
|
||||
import { fmtDate } from "@/lib/utils";
|
||||
|
||||
export default function PostsPage() {
|
||||
const [q, setQ] = useState("");
|
||||
const fetcher = useCallback(
|
||||
(limit: number, offset: number) => api.posts(q, limit, offset),
|
||||
[q],
|
||||
);
|
||||
const list = usePagedList<AdminPost>(fetcher, [q]);
|
||||
const confirm = useConfirm();
|
||||
|
||||
async function run(action: Promise<unknown>, successMsg: string) {
|
||||
try {
|
||||
await action;
|
||||
toast.success(successMsg);
|
||||
list.refresh();
|
||||
} catch (err) {
|
||||
toast.error(err instanceof AdminError ? err.message : "Action failed.");
|
||||
}
|
||||
}
|
||||
|
||||
async function onDelete(p: AdminPost) {
|
||||
if (
|
||||
await confirm({
|
||||
title: "Delete this post?",
|
||||
message: "It will be removed from the app. You can restore it here later.",
|
||||
confirmLabel: "Delete post",
|
||||
destructive: true,
|
||||
})
|
||||
) {
|
||||
run(api.deletePost(p.id), "Post deleted.");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ListShell
|
||||
title="Posts"
|
||||
total={list.total}
|
||||
searchPlaceholder="Search caption, source, or author…"
|
||||
onQueryChange={setQ}
|
||||
list={list}
|
||||
>
|
||||
<Table>
|
||||
<THead>
|
||||
<TR>
|
||||
<TH>Post</TH>
|
||||
<TH>Author</TH>
|
||||
<TH>Engagement</TH>
|
||||
<TH>Created</TH>
|
||||
<TH className="text-right">Actions</TH>
|
||||
</TR>
|
||||
</THead>
|
||||
<tbody>
|
||||
{list.items.length === 0 && !list.loading ? (
|
||||
<EmptyRow cols={5} label="No posts found." />
|
||||
) : (
|
||||
list.items.map((p) => (
|
||||
<TR key={p.id} className={p.deleted_at ? "opacity-60" : ""}>
|
||||
<TD className="max-w-md">
|
||||
<div className="line-clamp-2">{p.caption || "—"}</div>
|
||||
<div className="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||
{p.source_title}
|
||||
{p.deleted_at ? (
|
||||
<span className="rounded bg-destructive/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-destructive">
|
||||
Deleted
|
||||
</span>
|
||||
) : p.is_hidden ? (
|
||||
<span className="rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase tracking-wide">
|
||||
Hidden
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</TD>
|
||||
<TD className="whitespace-nowrap">
|
||||
<div className="font-medium">{p.author_name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
@{p.author_handle}
|
||||
</div>
|
||||
</TD>
|
||||
<TD className="whitespace-nowrap text-xs text-muted-foreground">
|
||||
{p.likes_count} likes · {p.comments_count} comments
|
||||
</TD>
|
||||
<TD className="whitespace-nowrap">{fmtDate(p.created_at)}</TD>
|
||||
<TD className="text-right">
|
||||
<div className="flex flex-wrap justify-end gap-2">
|
||||
{p.deleted_at ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => run(api.restorePost(p.id), "Post restored.")}
|
||||
>
|
||||
Restore
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() =>
|
||||
run(
|
||||
p.is_hidden
|
||||
? api.unhidePost(p.id)
|
||||
: api.hidePost(p.id),
|
||||
p.is_hidden ? "Post unhidden." : "Post hidden.",
|
||||
)
|
||||
}
|
||||
>
|
||||
{p.is_hidden ? "Unhide" : "Hide"}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={() => onDelete(p)}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</TD>
|
||||
</TR>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</Table>
|
||||
</ListShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { api, AdminError, type AdminReport, type ReportType } from "@/lib/api";
|
||||
import { usePagedList } from "@/lib/use-paged-list";
|
||||
import { ListShell, EmptyRow } from "@/components/list-shell";
|
||||
import { Table, THead, TR, TH, TD } from "@/components/ui/table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useConfirm } from "@/components/confirm";
|
||||
import { cn, fmtDate } from "@/lib/utils";
|
||||
|
||||
const TYPES: { key: ReportType; label: string }[] = [
|
||||
{ key: "post", label: "Posts" },
|
||||
{ key: "comment", label: "Comments" },
|
||||
{ key: "user", label: "Accounts" },
|
||||
];
|
||||
|
||||
export default function ReportsPage() {
|
||||
const [type, setType] = useState<ReportType>("post");
|
||||
const [q, setQ] = useState("");
|
||||
const fetcher = useCallback(
|
||||
(limit: number, offset: number) => api.reports(type, q, limit, offset),
|
||||
[type, q],
|
||||
);
|
||||
const list = usePagedList<AdminReport>(fetcher, [type, q]);
|
||||
const confirm = useConfirm();
|
||||
|
||||
async function run(action: Promise<unknown>, successMsg: string) {
|
||||
try {
|
||||
await action;
|
||||
toast.success(successMsg);
|
||||
list.refresh();
|
||||
} catch (err) {
|
||||
toast.error(err instanceof AdminError ? err.message : "Action failed.");
|
||||
}
|
||||
}
|
||||
|
||||
// Per-report moderation buttons. Destructive actions confirm first.
|
||||
function actionsFor(r: AdminReport) {
|
||||
if (r.type === "post") {
|
||||
return (
|
||||
<>
|
||||
<Button size="sm" variant="outline" onClick={() => run(api.hidePost(r.target_id), "Post hidden.")}>
|
||||
Hide
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={async () => {
|
||||
if (
|
||||
await confirm({
|
||||
title: "Delete this post?",
|
||||
message:
|
||||
"It will be removed from the app. You can restore it later from the Posts tab.",
|
||||
confirmLabel: "Delete post",
|
||||
destructive: true,
|
||||
})
|
||||
) {
|
||||
run(api.deletePost(r.target_id), "Post deleted.");
|
||||
}
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (r.type === "comment") {
|
||||
return (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={async () => {
|
||||
if (
|
||||
await confirm({
|
||||
title: "Delete this comment?",
|
||||
message: "It will be removed from the thread (restorable).",
|
||||
confirmLabel: "Delete comment",
|
||||
destructive: true,
|
||||
})
|
||||
) {
|
||||
run(api.deleteComment(r.target_id), "Comment deleted.");
|
||||
}
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={async () => {
|
||||
if (
|
||||
await confirm({
|
||||
title: "Suspend this account?",
|
||||
message: "They'll be signed out and unable to log in until you unban them.",
|
||||
confirmLabel: "Suspend account",
|
||||
destructive: true,
|
||||
})
|
||||
) {
|
||||
run(api.banUser(r.target_id), "Account suspended.");
|
||||
}
|
||||
}}
|
||||
>
|
||||
Ban
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
const targetLabel =
|
||||
type === "user" ? "Reported account" : type === "comment" ? "Comment" : "Post";
|
||||
|
||||
return (
|
||||
<ListShell
|
||||
title="Reports"
|
||||
total={list.total}
|
||||
searchPlaceholder="Search content or reporter…"
|
||||
onQueryChange={setQ}
|
||||
list={list}
|
||||
toolbar={
|
||||
<div className="flex gap-1 rounded-lg border border-border bg-card p-1">
|
||||
{TYPES.map((t) => (
|
||||
<button
|
||||
key={t.key}
|
||||
onClick={() => setType(t.key)}
|
||||
className={cn(
|
||||
"rounded-md px-3 py-1.5 text-sm transition-colors",
|
||||
type === t.key
|
||||
? "bg-accent text-accent-foreground font-medium"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Table>
|
||||
<THead>
|
||||
<TR>
|
||||
<TH>{targetLabel}</TH>
|
||||
<TH>Reason</TH>
|
||||
<TH>Reporter</TH>
|
||||
<TH>Reported</TH>
|
||||
<TH className="text-right">Actions</TH>
|
||||
</TR>
|
||||
</THead>
|
||||
<tbody>
|
||||
{list.items.length === 0 && !list.loading ? (
|
||||
<EmptyRow cols={5} label="No reports." />
|
||||
) : (
|
||||
list.items.map((r) => (
|
||||
<TR key={r.id} className={r.resolved_at ? "opacity-60" : ""}>
|
||||
<TD className="max-w-xs">
|
||||
{type === "user" ? (
|
||||
<span className="font-medium">
|
||||
{r.target_text ? `@${r.target_text}` : "—"}
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<div className="line-clamp-2">{r.target_text || "—"}</div>
|
||||
{r.target_author_handle ? (
|
||||
<div className="mt-0.5 text-xs text-muted-foreground">
|
||||
by @{r.target_author_handle}
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</TD>
|
||||
<TD className="max-w-xs">
|
||||
<div className="text-xs uppercase tracking-wide text-muted-foreground">
|
||||
{r.category}
|
||||
</div>
|
||||
{r.reason ? (
|
||||
<div className="mt-0.5 line-clamp-2">{r.reason}</div>
|
||||
) : null}
|
||||
</TD>
|
||||
<TD className="whitespace-nowrap text-xs text-muted-foreground">
|
||||
{r.reporter_handle ? `@${r.reporter_handle}` : "—"}
|
||||
</TD>
|
||||
<TD className="whitespace-nowrap">{fmtDate(r.created_at)}</TD>
|
||||
<TD className="text-right">
|
||||
<div className="flex flex-wrap justify-end gap-2">
|
||||
{actionsFor(r)}
|
||||
{r.resolved_at ? (
|
||||
<span className="self-center text-xs text-muted-foreground">
|
||||
Resolved
|
||||
</span>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() =>
|
||||
run(api.resolveReport(r.type, r.id), "Report resolved.")
|
||||
}
|
||||
>
|
||||
Resolve
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</TD>
|
||||
</TR>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</Table>
|
||||
</ListShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { api, AdminError, type AdminUser } from "@/lib/api";
|
||||
import { usePagedList } from "@/lib/use-paged-list";
|
||||
import { ListShell, EmptyRow } from "@/components/list-shell";
|
||||
import { Table, THead, TR, TH, TD } from "@/components/ui/table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Modal } from "@/components/ui/modal";
|
||||
import { useConfirm } from "@/components/confirm";
|
||||
import { Input, Textarea } from "@/components/ui/input";
|
||||
import { fmtDate } from "@/lib/utils";
|
||||
|
||||
export default function UsersPage() {
|
||||
const [q, setQ] = useState("");
|
||||
const fetcher = useCallback(
|
||||
(limit: number, offset: number) => api.users(q, limit, offset),
|
||||
[q],
|
||||
);
|
||||
const list = usePagedList<AdminUser>(fetcher, [q]);
|
||||
const confirm = useConfirm();
|
||||
const [notify, setNotify] = useState<AdminUser | null>(null);
|
||||
|
||||
async function toggleBan(u: AdminUser) {
|
||||
const banning = !u.banned_at;
|
||||
if (
|
||||
banning &&
|
||||
!(await confirm({
|
||||
title: `Suspend @${u.handle}?`,
|
||||
message: "They'll be signed out and unable to log in until you unban them.",
|
||||
confirmLabel: "Suspend account",
|
||||
destructive: true,
|
||||
}))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await (banning ? api.banUser(u.id) : api.unbanUser(u.id));
|
||||
toast.success(banning ? "Account suspended." : "Account restored.");
|
||||
list.refresh();
|
||||
} catch (err) {
|
||||
toast.error(err instanceof AdminError ? err.message : "Action failed.");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ListShell
|
||||
title="Users"
|
||||
total={list.total}
|
||||
searchPlaceholder="Search name, handle, or email…"
|
||||
onQueryChange={setQ}
|
||||
list={list}
|
||||
>
|
||||
<Table>
|
||||
<THead>
|
||||
<TR>
|
||||
<TH>User</TH>
|
||||
<TH>Email</TH>
|
||||
<TH>Role</TH>
|
||||
<TH>Joined</TH>
|
||||
<TH className="text-right">Actions</TH>
|
||||
</TR>
|
||||
</THead>
|
||||
<tbody>
|
||||
{list.items.length === 0 && !list.loading ? (
|
||||
<EmptyRow cols={5} label="No users found." />
|
||||
) : (
|
||||
list.items.map((u) => (
|
||||
<TR key={u.id}>
|
||||
<TD>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{u.name}</span>
|
||||
{u.banned_at ? (
|
||||
<span className="rounded bg-destructive/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-destructive">
|
||||
Suspended
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">@{u.handle}</div>
|
||||
</TD>
|
||||
<TD>
|
||||
{u.email ?? <span className="text-muted-foreground">—</span>}
|
||||
</TD>
|
||||
<TD className="capitalize">{u.role}</TD>
|
||||
<TD className="whitespace-nowrap">{fmtDate(u.created_at)}</TD>
|
||||
<TD className="text-right">
|
||||
<div className="flex flex-wrap justify-end gap-2">
|
||||
<Button size="sm" variant="outline" onClick={() => setNotify(u)}>
|
||||
Notify
|
||||
</Button>
|
||||
{u.role !== "admin" ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant={u.banned_at ? "outline" : "destructive"}
|
||||
onClick={() => toggleBan(u)}
|
||||
>
|
||||
{u.banned_at ? "Unban" : "Ban"}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</TD>
|
||||
</TR>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</Table>
|
||||
|
||||
<NotifyModal user={notify} onClose={() => setNotify(null)} />
|
||||
</ListShell>
|
||||
);
|
||||
}
|
||||
|
||||
function NotifyModal({
|
||||
user,
|
||||
onClose,
|
||||
}: {
|
||||
user: AdminUser | null;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const [title, setTitle] = useState("");
|
||||
const [body, setBody] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
async function send() {
|
||||
if (!user || body.trim() === "") return;
|
||||
setBusy(true);
|
||||
try {
|
||||
await api.notifyUser(user.id, title.trim(), body.trim());
|
||||
toast.success(`Notification sent to @${user.handle}`);
|
||||
setTitle("");
|
||||
setBody("");
|
||||
onClose();
|
||||
} catch (err) {
|
||||
toast.error(err instanceof AdminError ? err.message : "Could not send.");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={!!user}
|
||||
onClose={onClose}
|
||||
title={user ? `Notify @${user.handle}` : "Notify"}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Sends an in-app notification, plus web push and email where available.
|
||||
</p>
|
||||
<label className="block space-y-1.5">
|
||||
<span className="text-sm font-medium">Title (optional)</span>
|
||||
<Input
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
maxLength={120}
|
||||
placeholder="A note from the team"
|
||||
/>
|
||||
</label>
|
||||
<label className="block space-y-1.5">
|
||||
<span className="text-sm font-medium">Message</span>
|
||||
<Textarea
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
rows={5}
|
||||
maxLength={4000}
|
||||
placeholder="Write your message…"
|
||||
/>
|
||||
</label>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={send} disabled={busy || body.trim() === ""}>
|
||||
{busy ? "Sending…" : "Send notification"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { api, AdminError } from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { AuthShell, Field } from "@/app/login/page";
|
||||
|
||||
export default function ForgotPasswordPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [sent, setSent] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function onSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
await api.forgotPassword(email.trim());
|
||||
// The BFF always responds 200 (it doesn't reveal whether an account
|
||||
// exists), so we show the same confirmation regardless.
|
||||
setSent(true);
|
||||
} catch (err) {
|
||||
setError(err instanceof AdminError ? err.message : "Something went wrong.");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthShell title="Reset your password">
|
||||
{sent ? (
|
||||
<div className="space-y-4 text-sm text-muted-foreground">
|
||||
<p>
|
||||
If an account exists for <strong>{email}</strong>, we've sent a
|
||||
password-reset link. Check your inbox.
|
||||
</p>
|
||||
<Link href="/login" className="text-primary hover:underline">
|
||||
Back to sign in
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={onSubmit} className="space-y-4">
|
||||
<Field label="Email">
|
||||
<Input
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
{error ? <p className="text-sm text-destructive">{error}</p> : null}
|
||||
<Button type="submit" disabled={busy} className="w-full">
|
||||
{busy ? "Sending…" : "Send reset link"}
|
||||
</Button>
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
<Link href="/login" className="hover:text-foreground">
|
||||
Back to sign in
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
)}
|
||||
</AuthShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/*
|
||||
* Admin theme — low-chroma navy/slate surfaces with a peacock-green accent,
|
||||
* matching the Prabhupāda Says palette direction (hue lives in accents only).
|
||||
*/
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: #f6f8f8;
|
||||
--foreground: #14202a;
|
||||
--card: #ffffff;
|
||||
--card-foreground: #14202a;
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: #14202a;
|
||||
--primary: #0f7b6c;
|
||||
--primary-foreground: #ffffff;
|
||||
--muted: #eef1f2;
|
||||
--muted-foreground: #5a6b73;
|
||||
--accent: #e7f1ef;
|
||||
--accent-foreground: #0f7b6c;
|
||||
--destructive: #c0392b;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #e1e6e7;
|
||||
--input: #e1e6e7;
|
||||
--ring: #0f7b6c;
|
||||
}
|
||||
|
||||
* {
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family:
|
||||
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import "./globals.css";
|
||||
import type { Metadata } from "next";
|
||||
import { Toaster } from "sonner";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Prabhupāda Says — Admin",
|
||||
description: "Administration panel for Prabhupāda Says.",
|
||||
// The admin panel must never be indexed.
|
||||
robots: { index: false, follow: false },
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
{children}
|
||||
<Toaster richColors position="top-center" />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { toast } from "sonner";
|
||||
import { api, AdminError, type Me } from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter();
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [otp, setOtp] = useState("");
|
||||
const [stage, setStage] = useState<"credentials" | "otp">("credentials");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Once authenticated, only admins may proceed. Non-admins are signed back
|
||||
// out so an ordinary account can't sit in an authenticated-but-forbidden
|
||||
// state against the admin origin.
|
||||
async function gateAdmin(user: Me) {
|
||||
if (user.role === "admin") {
|
||||
router.replace("/users");
|
||||
return;
|
||||
}
|
||||
await api.logout().catch(() => {});
|
||||
setError("This account doesn't have admin access.");
|
||||
setStage("credentials");
|
||||
}
|
||||
|
||||
async function onCredentials(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
const res = await api.login(email.trim(), password);
|
||||
if (res.kind === "otp_required") {
|
||||
setStage("otp");
|
||||
toast("We emailed you a verification code.");
|
||||
} else {
|
||||
await gateAdmin(res.user);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof AdminError ? err.message : "Could not sign in.");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function onOtp(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
const user = await api.verifyLoginOtp(email.trim(), password, otp.trim());
|
||||
await gateAdmin(user);
|
||||
} catch (err) {
|
||||
setError(err instanceof AdminError ? err.message : "Invalid code.");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthShell title="Admin sign in">
|
||||
{stage === "credentials" ? (
|
||||
<form onSubmit={onCredentials} className="space-y-4">
|
||||
<Field label="Email">
|
||||
<Input
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Password">
|
||||
<Input
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
{error ? <p className="text-sm text-destructive">{error}</p> : null}
|
||||
<Button type="submit" disabled={busy} className="w-full">
|
||||
{busy ? "Signing in…" : "Sign in"}
|
||||
</Button>
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
<Link href="/forgot-password" className="hover:text-foreground">
|
||||
Forgot your password?
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={onOtp} className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Enter the verification code we emailed to {email}.
|
||||
</p>
|
||||
<Field label="Verification code">
|
||||
<Input
|
||||
inputMode="numeric"
|
||||
autoFocus
|
||||
required
|
||||
value={otp}
|
||||
onChange={(e) => setOtp(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
{error ? <p className="text-sm text-destructive">{error}</p> : null}
|
||||
<Button type="submit" disabled={busy} className="w-full">
|
||||
{busy ? "Verifying…" : "Verify & sign in"}
|
||||
</Button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setStage("credentials");
|
||||
setOtp("");
|
||||
setError(null);
|
||||
}}
|
||||
className="w-full text-center text-sm text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</AuthShell>
|
||||
);
|
||||
}
|
||||
|
||||
export function AuthShell({
|
||||
title,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<main className="flex min-h-screen items-center justify-center px-4">
|
||||
<div className="w-full max-w-sm">
|
||||
<div className="mb-6 text-center">
|
||||
<p className="text-xs uppercase tracking-[0.2em] text-primary">
|
||||
Prabhupāda Says
|
||||
</p>
|
||||
<h1 className="mt-1 text-xl font-semibold text-foreground">{title}</h1>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-border bg-card p-6 shadow-sm">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export function Field({
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<label className="block space-y-1.5">
|
||||
<span className="text-sm font-medium text-foreground">{label}</span>
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { toast } from "sonner";
|
||||
import { api, AdminError } from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { AuthShell, Field } from "@/app/login/page";
|
||||
|
||||
export default function ResetPasswordPage() {
|
||||
return (
|
||||
<Suspense fallback={<AuthShell title="Reset your password">…</AuthShell>}>
|
||||
<ResetInner />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
function ResetInner() {
|
||||
const router = useRouter();
|
||||
const token = useSearchParams().get("token") ?? "";
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirm, setConfirm] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function onSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
if (password.length < 8) {
|
||||
setError("Password must be at least 8 characters.");
|
||||
return;
|
||||
}
|
||||
if (password !== confirm) {
|
||||
setError("Passwords don't match.");
|
||||
return;
|
||||
}
|
||||
setBusy(true);
|
||||
try {
|
||||
await api.resetPassword(token, password);
|
||||
toast.success("Password updated — please sign in.");
|
||||
router.replace("/login");
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof AdminError ? err.message : "Could not reset password.",
|
||||
);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (!token) {
|
||||
return (
|
||||
<AuthShell title="Reset your password">
|
||||
<div className="space-y-4 text-sm text-muted-foreground">
|
||||
<p>This reset link is missing its token. Request a new one.</p>
|
||||
<Link href="/forgot-password" className="text-primary hover:underline">
|
||||
Request a reset link
|
||||
</Link>
|
||||
</div>
|
||||
</AuthShell>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthShell title="Choose a new password">
|
||||
<form onSubmit={onSubmit} className="space-y-4">
|
||||
<Field label="New password">
|
||||
<Input
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Confirm password">
|
||||
<Input
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
required
|
||||
value={confirm}
|
||||
onChange={(e) => setConfirm(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
{error ? <p className="text-sm text-destructive">{error}</p> : null}
|
||||
<Button type="submit" disabled={busy} className="w-full">
|
||||
{busy ? "Saving…" : "Update password"}
|
||||
</Button>
|
||||
</form>
|
||||
</AuthShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useState,
|
||||
type ReactNode,
|
||||
} from "react";
|
||||
import { Modal } from "@/components/ui/modal";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
type ConfirmOpts = {
|
||||
title: string;
|
||||
message?: string;
|
||||
confirmLabel?: string;
|
||||
destructive?: boolean;
|
||||
};
|
||||
|
||||
type ConfirmFn = (opts: ConfirmOpts) => Promise<boolean>;
|
||||
|
||||
const ConfirmContext = createContext<ConfirmFn | null>(null);
|
||||
|
||||
/** Imperative confirm — `if (await confirm({...})) { … }`. Renders a styled
|
||||
* modal instead of the browser's window.confirm. Provided by ConfirmProvider. */
|
||||
export function useConfirm(): ConfirmFn {
|
||||
const fn = useContext(ConfirmContext);
|
||||
if (!fn) throw new Error("useConfirm must be used within a ConfirmProvider");
|
||||
return fn;
|
||||
}
|
||||
|
||||
export function ConfirmProvider({ children }: { children: ReactNode }) {
|
||||
const [pending, setPending] = useState<{
|
||||
opts: ConfirmOpts;
|
||||
resolve: (v: boolean) => void;
|
||||
} | null>(null);
|
||||
|
||||
const confirm = useCallback<ConfirmFn>(
|
||||
(opts) => new Promise<boolean>((resolve) => setPending({ opts, resolve })),
|
||||
[],
|
||||
);
|
||||
|
||||
function settle(value: boolean) {
|
||||
pending?.resolve(value);
|
||||
setPending(null);
|
||||
}
|
||||
|
||||
return (
|
||||
<ConfirmContext.Provider value={confirm}>
|
||||
{children}
|
||||
<Modal
|
||||
open={!!pending}
|
||||
onClose={() => settle(false)}
|
||||
title={pending?.opts.title ?? ""}
|
||||
>
|
||||
{pending ? (
|
||||
<div className="space-y-5">
|
||||
{pending.opts.message ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{pending.opts.message}
|
||||
</p>
|
||||
) : null}
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="ghost" onClick={() => settle(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant={pending.opts.destructive ? "destructive" : "primary"}
|
||||
onClick={() => settle(true)}
|
||||
>
|
||||
{pending.opts.confirmLabel ?? "Confirm"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</Modal>
|
||||
</ConfirmContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { Search } from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
type ListLike = {
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
total: number;
|
||||
page: number;
|
||||
totalPages: number;
|
||||
setPage: (p: number) => void;
|
||||
};
|
||||
|
||||
/**
|
||||
* Shared chrome for every admin list page: a title with a live total, an
|
||||
* optional debounced search box, an optional toolbar (filters/tabs), the
|
||||
* table (children), and a pagination footer. Keeps the resource pages tiny.
|
||||
*/
|
||||
export function ListShell({
|
||||
title,
|
||||
total,
|
||||
searchPlaceholder,
|
||||
onQueryChange,
|
||||
toolbar,
|
||||
list,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
total: number;
|
||||
searchPlaceholder?: string;
|
||||
onQueryChange?: (q: string) => void;
|
||||
toolbar?: React.ReactNode;
|
||||
list: ListLike;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const [raw, setRaw] = React.useState("");
|
||||
|
||||
// Debounce search input → parent query (300ms).
|
||||
React.useEffect(() => {
|
||||
if (!onQueryChange) return;
|
||||
const t = setTimeout(() => onQueryChange(raw.trim()), 300);
|
||||
return () => clearTimeout(t);
|
||||
}, [raw, onQueryChange]);
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<h1 className="text-2xl font-semibold text-foreground">
|
||||
{title}
|
||||
<span className="ml-2 text-sm font-normal text-muted-foreground">
|
||||
{total.toLocaleString()}
|
||||
</span>
|
||||
</h1>
|
||||
{toolbar}
|
||||
</div>
|
||||
|
||||
{onQueryChange ? (
|
||||
<div className="relative max-w-md">
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
value={raw}
|
||||
onChange={(e) => setRaw(e.target.value)}
|
||||
placeholder={searchPlaceholder ?? "Search…"}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{list.error ? (
|
||||
<p className="text-sm text-destructive">{list.error}</p>
|
||||
) : null}
|
||||
|
||||
<div className={list.loading ? "opacity-60 transition-opacity" : ""}>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-sm text-muted-foreground">
|
||||
<span>
|
||||
Page {list.page} of {list.totalPages}
|
||||
{list.loading ? " · loading…" : ""}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={list.page <= 1 || list.loading}
|
||||
onClick={() => list.setPage(list.page - 1)}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={list.page >= list.totalPages || list.loading}
|
||||
onClick={() => list.setPage(list.page + 1)}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Centered empty-state row spanning the table. */
|
||||
export function EmptyRow({ cols, label }: { cols: number; label: string }) {
|
||||
return (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={cols}
|
||||
className="px-4 py-10 text-center text-sm text-muted-foreground"
|
||||
>
|
||||
{label}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import * as React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type Variant = "primary" | "outline" | "ghost" | "destructive";
|
||||
type Size = "sm" | "md";
|
||||
|
||||
const variants: Record<Variant, string> = {
|
||||
primary: "bg-primary text-primary-foreground hover:opacity-90",
|
||||
outline: "border border-border bg-card text-foreground hover:bg-muted",
|
||||
ghost: "text-foreground hover:bg-muted",
|
||||
destructive: "bg-destructive text-destructive-foreground hover:opacity-90",
|
||||
};
|
||||
const sizes: Record<Size, string> = {
|
||||
sm: "h-8 px-3 text-xs",
|
||||
md: "h-10 px-4 text-sm",
|
||||
};
|
||||
|
||||
export function Button({
|
||||
variant = "primary",
|
||||
size = "md",
|
||||
className,
|
||||
...props
|
||||
}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
||||
variant?: Variant;
|
||||
size?: Size;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors outline-none",
|
||||
"focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:pointer-events-none",
|
||||
variants[variant],
|
||||
sizes[size],
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import * as React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export const Input = React.forwardRef<
|
||||
HTMLInputElement,
|
||||
React.InputHTMLAttributes<HTMLInputElement>
|
||||
>(function Input({ className, ...props }, ref) {
|
||||
return (
|
||||
<input
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"h-10 w-full rounded-lg border border-input bg-card px-3 text-sm text-foreground",
|
||||
"placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
||||
"disabled:opacity-50",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
export const Textarea = React.forwardRef<
|
||||
HTMLTextAreaElement,
|
||||
React.TextareaHTMLAttributes<HTMLTextAreaElement>
|
||||
>(function Textarea({ className, ...props }, ref) {
|
||||
return (
|
||||
<textarea
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"w-full rounded-lg border border-input bg-card px-3 py-2 text-sm text-foreground",
|
||||
"placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
||||
"disabled:opacity-50",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,55 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
/** A minimal centered modal dialog. Closes on overlay click and Escape. */
|
||||
export function Modal({
|
||||
open,
|
||||
onClose,
|
||||
title,
|
||||
children,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
React.useEffect(() => {
|
||||
if (!open) return;
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
};
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => document.removeEventListener("keydown", onKey);
|
||||
}, [open, onClose]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-lg rounded-2xl border border-border bg-card shadow-xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-between border-b border-border px-5 py-4">
|
||||
<h2 className="text-base font-semibold text-foreground">{title}</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onClose}
|
||||
aria-label="Close"
|
||||
className="size-8 px-0"
|
||||
>
|
||||
<X className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="px-5 py-4">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import * as React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function Table({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="overflow-x-auto rounded-xl border border-border bg-card">
|
||||
<table className="w-full border-collapse text-sm">{children}</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function THead({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<thead className="border-b border-border bg-muted/50 text-left text-xs uppercase tracking-wide text-muted-foreground">
|
||||
{children}
|
||||
</thead>
|
||||
);
|
||||
}
|
||||
|
||||
export function TH({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return <th className={cn("px-4 py-3 font-medium", className)}>{children}</th>;
|
||||
}
|
||||
|
||||
export function TR({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<tr className={cn("border-b border-border last:border-0 align-top", className)}>
|
||||
{children}
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
export function TD({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return <td className={cn("px-4 py-3 text-foreground", className)}>{children}</td>;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { dirname } from "path";
|
||||
import { fileURLToPath } from "url";
|
||||
import { FlatCompat } from "@eslint/eslintrc";
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
|
||||
const compat = new FlatCompat({ baseDirectory: __dirname });
|
||||
|
||||
const eslintConfig = [
|
||||
...compat.extends("next/core-web-vitals", "next/typescript"),
|
||||
];
|
||||
|
||||
export default eslintConfig;
|
||||
+259
@@ -0,0 +1,259 @@
|
||||
/**
|
||||
* Admin API client. Talks to the same Go BFF as the main app, reusing its
|
||||
* cookie session: auth uses the shared /auth/* endpoints, and every admin
|
||||
* action lives under /admin/* (gated server-side by RequireAdmin). All
|
||||
* requests send credentials so the httpOnly session cookie travels.
|
||||
*
|
||||
* For this to work cross-origin, the BFF must list this app's origin in CORS
|
||||
* via the ADMIN_URL env var (see .env.example).
|
||||
*/
|
||||
|
||||
const BFF = process.env.NEXT_PUBLIC_BFF_URL || "http://localhost:8080";
|
||||
|
||||
export class AdminError extends Error {
|
||||
constructor(
|
||||
public status: number,
|
||||
message: string,
|
||||
) {
|
||||
super(message);
|
||||
this.name = "AdminError";
|
||||
}
|
||||
}
|
||||
|
||||
type Envelope<T> = {
|
||||
success: boolean;
|
||||
data?: T;
|
||||
error?: { code: number; message: string };
|
||||
meta?: { total?: number; page?: number; limit?: number; total_pages?: number };
|
||||
};
|
||||
|
||||
async function call<T>(
|
||||
path: string,
|
||||
init?: RequestInit,
|
||||
): Promise<{ data: T; meta?: Envelope<T>["meta"] }> {
|
||||
const res = await fetch(`${BFF}/api/v1${path}`, {
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json", ...(init?.headers ?? {}) },
|
||||
...init,
|
||||
});
|
||||
let body: Envelope<T>;
|
||||
try {
|
||||
body = (await res.json()) as Envelope<T>;
|
||||
} catch {
|
||||
throw new AdminError(res.status, res.statusText || "Request failed");
|
||||
}
|
||||
if (!res.ok || body.success === false) {
|
||||
throw new AdminError(
|
||||
res.status,
|
||||
body.error?.message || res.statusText || "Request failed",
|
||||
);
|
||||
}
|
||||
return { data: body.data as T, meta: body.meta };
|
||||
}
|
||||
|
||||
export type Paged<T> = { items: T[]; total: number };
|
||||
|
||||
async function listed<T>(path: string): Promise<Paged<T>> {
|
||||
const { data, meta } = await call<T[]>(path);
|
||||
const items = data ?? [];
|
||||
return { items, total: meta?.total ?? items.length };
|
||||
}
|
||||
|
||||
function qs(params: Record<string, string | number | undefined>): string {
|
||||
const u = new URLSearchParams();
|
||||
for (const [k, v] of Object.entries(params)) {
|
||||
if (v !== undefined && v !== "") u.set(k, String(v));
|
||||
}
|
||||
const s = u.toString();
|
||||
return s ? `?${s}` : "";
|
||||
}
|
||||
|
||||
// ─── Types (mirror the BFF admin DTOs) ──────────────────────────────────────
|
||||
|
||||
export type Me = {
|
||||
id: string;
|
||||
email: string | null;
|
||||
handle: string;
|
||||
name: string;
|
||||
role: string;
|
||||
};
|
||||
|
||||
export type AdminUser = {
|
||||
id: string;
|
||||
email: string | null;
|
||||
handle: string;
|
||||
name: string;
|
||||
avatar_url: string | null;
|
||||
role: string;
|
||||
plan: string;
|
||||
email_verified_at: string | null;
|
||||
banned_at: string | null;
|
||||
created_at: string;
|
||||
};
|
||||
|
||||
export type AdminPost = {
|
||||
id: string;
|
||||
user_id: string;
|
||||
caption: string;
|
||||
source_title: string;
|
||||
source_url: string;
|
||||
is_hidden: boolean;
|
||||
deleted_at: string | null;
|
||||
created_at: string;
|
||||
author_name: string;
|
||||
author_handle: string;
|
||||
likes_count: number;
|
||||
comments_count: number;
|
||||
};
|
||||
|
||||
export type AdminCollection = {
|
||||
id: string;
|
||||
user_id: string;
|
||||
title: string;
|
||||
description: string | null;
|
||||
is_public: boolean;
|
||||
item_count: number;
|
||||
created_at: string;
|
||||
owner_name: string;
|
||||
owner_handle: string;
|
||||
};
|
||||
|
||||
export type AdminFeedback = {
|
||||
id: string;
|
||||
category: string;
|
||||
message: string;
|
||||
contact_email: string | null;
|
||||
created_at: string;
|
||||
resolved_at: string | null;
|
||||
replied_at: string | null;
|
||||
reply_message: string | null;
|
||||
author_handle: string | null;
|
||||
author_name: string | null;
|
||||
author_email: string | null;
|
||||
};
|
||||
|
||||
export type ReportType = "post" | "comment" | "user";
|
||||
|
||||
export type AdminReport = {
|
||||
id: string;
|
||||
type: ReportType;
|
||||
category: string;
|
||||
reason: string;
|
||||
created_at: string;
|
||||
resolved_at: string | null;
|
||||
reporter_handle: string | null;
|
||||
reporter_name: string | null;
|
||||
target_id: string;
|
||||
target_text: string | null;
|
||||
target_author_handle: string | null;
|
||||
};
|
||||
|
||||
// Login can complete immediately (session) or require an emailed OTP (the
|
||||
// BFF's 30-day-stale gate). The admin login form handles both.
|
||||
export type LoginResult =
|
||||
| { kind: "session"; user: Me }
|
||||
| { kind: "otp_required" };
|
||||
|
||||
// ─── API surface ────────────────────────────────────────────────────────────
|
||||
|
||||
export const api = {
|
||||
// Auth (shared endpoints)
|
||||
async login(email: string, password: string): Promise<LoginResult> {
|
||||
const { data } = await call<LoginResult>("/auth/login", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ email, password }),
|
||||
});
|
||||
return data;
|
||||
},
|
||||
async verifyLoginOtp(
|
||||
email: string,
|
||||
password: string,
|
||||
otp: string,
|
||||
): Promise<Me> {
|
||||
const { data } = await call<{ user: Me }>("/auth/verify-login-otp", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ email, password, otp }),
|
||||
});
|
||||
return data.user;
|
||||
},
|
||||
async me(): Promise<Me | null> {
|
||||
try {
|
||||
const { data } = await call<Me>("/auth/me");
|
||||
return data;
|
||||
} catch (e) {
|
||||
if (e instanceof AdminError && e.status === 401) return null;
|
||||
throw e;
|
||||
}
|
||||
},
|
||||
async logout(): Promise<void> {
|
||||
await call("/auth/logout", { method: "POST" });
|
||||
},
|
||||
async forgotPassword(email: string): Promise<void> {
|
||||
await call("/auth/forgot-password", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ email }),
|
||||
});
|
||||
},
|
||||
async resetPassword(token: string, password: string): Promise<void> {
|
||||
await call("/auth/reset-password", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ token, password }),
|
||||
});
|
||||
},
|
||||
|
||||
// Admin resources
|
||||
users(q: string, limit: number, offset: number) {
|
||||
return listed<AdminUser>(`/admin/users${qs({ q, limit, offset })}`);
|
||||
},
|
||||
notifyUser(id: string, title: string, body: string) {
|
||||
return call(`/admin/users/${id}/notify`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ title, body }),
|
||||
});
|
||||
},
|
||||
banUser(id: string) {
|
||||
return call(`/admin/users/${id}/ban`, { method: "POST" });
|
||||
},
|
||||
unbanUser(id: string) {
|
||||
return call(`/admin/users/${id}/ban`, { method: "DELETE" });
|
||||
},
|
||||
posts(q: string, limit: number, offset: number) {
|
||||
return listed<AdminPost>(`/admin/posts${qs({ q, limit, offset })}`);
|
||||
},
|
||||
hidePost(id: string) {
|
||||
return call(`/admin/posts/${id}/hide`, { method: "POST" });
|
||||
},
|
||||
unhidePost(id: string) {
|
||||
return call(`/admin/posts/${id}/hide`, { method: "DELETE" });
|
||||
},
|
||||
deletePost(id: string) {
|
||||
return call(`/admin/posts/${id}`, { method: "DELETE" });
|
||||
},
|
||||
restorePost(id: string) {
|
||||
return call(`/admin/posts/${id}/restore`, { method: "POST" });
|
||||
},
|
||||
deleteComment(id: string) {
|
||||
return call(`/admin/comments/${id}`, { method: "DELETE" });
|
||||
},
|
||||
restoreComment(id: string) {
|
||||
return call(`/admin/comments/${id}/restore`, { method: "POST" });
|
||||
},
|
||||
collections(q: string, limit: number, offset: number) {
|
||||
return listed<AdminCollection>(`/admin/collections${qs({ q, limit, offset })}`);
|
||||
},
|
||||
feedback(status: string, limit: number, offset: number) {
|
||||
return listed<AdminFeedback>(`/admin/feedback${qs({ status, limit, offset })}`);
|
||||
},
|
||||
replyFeedback(id: string, message: string) {
|
||||
return call(`/admin/feedback/${id}/reply`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ message }),
|
||||
});
|
||||
},
|
||||
reports(type: ReportType, q: string, limit: number, offset: number) {
|
||||
return listed<AdminReport>(`/admin/reports${qs({ type, q, limit, offset })}`);
|
||||
},
|
||||
resolveReport(type: ReportType, id: string) {
|
||||
return call(`/admin/reports/${type}/${id}/resolve`, { method: "POST" });
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,76 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import type { Paged } from "@/lib/api";
|
||||
|
||||
const PAGE_SIZE = 25;
|
||||
|
||||
export type PagedListState<T> = {
|
||||
items: T[];
|
||||
total: number;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
totalPages: number;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
setPage: (p: number) => void;
|
||||
refresh: () => void;
|
||||
};
|
||||
|
||||
/**
|
||||
* Shared search + offset-pagination logic for the admin list pages. `fetcher`
|
||||
* receives (limit, offset) plus whatever extra deps the caller closes over
|
||||
* (search query, status filter, report type); pass those in `deps` so a change
|
||||
* resets to page 1 and refetches. A request token guards against out-of-order
|
||||
* responses when the user types/pages quickly.
|
||||
*/
|
||||
export function usePagedList<T>(
|
||||
fetcher: (limit: number, offset: number) => Promise<Paged<T>>,
|
||||
deps: unknown[],
|
||||
pageSize = PAGE_SIZE,
|
||||
): PagedListState<T> {
|
||||
const [items, setItems] = useState<T[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const token = useRef(0);
|
||||
|
||||
// Reset to page 1 whenever the external filters change.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
useEffect(() => setPage(1), deps);
|
||||
|
||||
const load = useCallback(() => {
|
||||
const my = ++token.current;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
fetcher(pageSize, (page - 1) * pageSize)
|
||||
.then((res) => {
|
||||
if (my !== token.current) return;
|
||||
setItems(res.items);
|
||||
setTotal(res.total);
|
||||
})
|
||||
.catch((e) => {
|
||||
if (my !== token.current) return;
|
||||
setError(e instanceof Error ? e.message : "Could not load.");
|
||||
})
|
||||
.finally(() => {
|
||||
if (my === token.current) setLoading(false);
|
||||
});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [page, pageSize, ...deps]);
|
||||
|
||||
useEffect(() => load(), [load]);
|
||||
|
||||
return {
|
||||
items,
|
||||
total,
|
||||
page,
|
||||
pageSize,
|
||||
totalPages: Math.max(1, Math.ceil(total / pageSize)),
|
||||
loading,
|
||||
error,
|
||||
setPage,
|
||||
refresh: load,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
/** Format an ISO timestamp as a short, locale-stable date-time for tables. */
|
||||
export function fmtDate(iso: string | null | undefined): string {
|
||||
if (!iso) return "—";
|
||||
const d = new Date(iso);
|
||||
if (isNaN(d.getTime())) return "—";
|
||||
return d.toLocaleString(undefined, {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
// The admin panel renders avatars/post images served from R2/CDN. Allow any
|
||||
// https host since those URLs are admin-trusted content references.
|
||||
images: {
|
||||
remotePatterns: [{ protocol: "https", hostname: "**" }],
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "spsays-admin",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev -p 3001",
|
||||
"build": "next build",
|
||||
"start": "next start -p 3001",
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^1.8.0",
|
||||
"next": "16.2.2",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.2.2",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
const config = {
|
||||
plugins: ["@tailwindcss/postcss"],
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user