276 lines
8.7 KiB
TypeScript
276 lines
8.7 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useState } from "react";
|
|
import { Can } from "@/components/staff-context";
|
|
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 { useConfirm } from "@/components/confirm";
|
|
import { RichTextarea } from "@/components/ui/rich-textarea";
|
|
import { RichText } from "@/lib/rich-text";
|
|
import { cn, fmtDate } from "@/lib/utils";
|
|
import { Clamp } from "@/components/ui/clamp";
|
|
|
|
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 confirm = useConfirm();
|
|
const [reply, setReply] = useState<AdminFeedback | null>(null);
|
|
|
|
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 acknowledge(f: AdminFeedback) {
|
|
if (
|
|
await confirm({
|
|
title: "Acknowledge this feedback?",
|
|
message:
|
|
"The author will be emailed that we've seen it and started work.",
|
|
confirmLabel: "Acknowledge",
|
|
})
|
|
) {
|
|
run(api.acknowledgeFeedback(f.id), "Feedback acknowledged.");
|
|
}
|
|
}
|
|
|
|
async function resolve(f: AdminFeedback) {
|
|
if (
|
|
await confirm({
|
|
title: "Mark resolved?",
|
|
message:
|
|
"The author will be emailed a thank-you. This can't be undone.",
|
|
confirmLabel: "Mark resolved",
|
|
})
|
|
) {
|
|
run(api.resolveFeedback(f.id), "Feedback resolved.");
|
|
}
|
|
}
|
|
|
|
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>
|
|
}
|
|
>
|
|
{/* Phone: each field stacked, label above value, so a long message
|
|
gets the card's full width. Desktop: ordinary table rows. */}
|
|
<Table card="stacked">
|
|
<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="max-w-[14rem]">
|
|
{f.author_handle ? (
|
|
<>
|
|
<Clamp className="font-medium">{f.author_name}</Clamp>
|
|
<Clamp className="text-xs text-muted-foreground">
|
|
{`@${f.author_handle}`}
|
|
</Clamp>
|
|
</>
|
|
) : (
|
|
<Clamp className="text-xs text-muted-foreground">
|
|
{f.contact_email ?? "Anonymous"}
|
|
</Clamp>
|
|
)}
|
|
</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>
|
|
<RichText text={f.reply_message} />
|
|
</div>
|
|
) : null}
|
|
</TD>
|
|
<TD>
|
|
<StatusBadge f={f} />
|
|
</TD>
|
|
<TD className="whitespace-nowrap">{fmtDate(f.created_at)}</TD>
|
|
<TD className="text-right">
|
|
<div className="flex flex-wrap justify-start gap-2 md:justify-end">
|
|
<Can perm="feedback:resolve">
|
|
{!f.resolved_at && !f.acknowledged_at ? (
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => acknowledge(f)}
|
|
>
|
|
Acknowledge
|
|
</Button>
|
|
) : null}
|
|
{!f.resolved_at ? (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => resolve(f)}
|
|
>
|
|
Resolve
|
|
</Button>
|
|
) : null}
|
|
</Can>
|
|
<Can perm="feedback:reply">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => setReply(f)}
|
|
>
|
|
{f.replied_at ? "Reply again" : "Reply"}
|
|
</Button>
|
|
</Can>
|
|
</div>
|
|
</TD>
|
|
</TR>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</Table>
|
|
|
|
<ReplyModal
|
|
feedback={reply}
|
|
onClose={() => setReply(null)}
|
|
onDone={() => {
|
|
setReply(null);
|
|
list.refresh();
|
|
}}
|
|
/>
|
|
</ListShell>
|
|
);
|
|
}
|
|
|
|
function StatusBadge({ f }: { f: AdminFeedback }) {
|
|
const label = f.resolved_at
|
|
? "Resolved"
|
|
: f.replied_at
|
|
? "Replied"
|
|
: f.acknowledged_at
|
|
? "Acknowledged"
|
|
: "Open";
|
|
const tone =
|
|
f.replied_at || f.resolved_at
|
|
? "text-primary"
|
|
: f.acknowledged_at
|
|
? "text-amber-600"
|
|
: "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>
|
|
<RichTextarea
|
|
value={message}
|
|
onValueChange={setMessage}
|
|
rows={5}
|
|
maxLength={4000}
|
|
placeholder="Write your reply… (emailed to the submitter; use Resolve separately to close it)"
|
|
/>
|
|
</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>
|
|
);
|
|
}
|