feat: admin dashboard
This commit is contained in:
gosangam
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user