import { type BreadcrumbItem } from '@/types';
import { Head, Link, router } from '@inertiajs/react';
import { Check, Trash2 } from 'lucide-react';
import { ConfirmDialog } from '@/components/confirm-dialog';
import Heading from '@/components/heading';
import { FilterField, ListToolbar } from '@/components/list-toolbar';
import { Pagination, PaginationMeta } from '@/components/pagination';
import { TableShell } from '@/components/table-shell';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useFormatDate } from '@/hooks/use-format-date';
import { ALL, useListQuery } from '@/hooks/use-list-query';
import { useTranslation } from '@/hooks/use-translation';
import AppLayout from '@/layouts/app-layout';
interface CommentEntry {
id: number;
body: string;
author_name: string;
author_type: 'staff' | 'client' | 'guest';
visibility: string;
visibility_label: string;
conversation: string | null;
pending: boolean;
ip_address: string | null;
created_at: string | null;
edited_at: string | null;
file: { id: number; name: string };
file_url: string;
can_approve: boolean;
can_delete: boolean;
}
interface Filters {
status: string | null;
visibility: string | null;
author_type: string | null;
search: string | null;
file: string | null;
from: string | null;
to: string | null;
}
interface CommentsIndexProps {
entries: CommentEntry[];
pagination: PaginationMeta;
filters: Filters;
pending_total: number;
visibilities: { value: string; label: string }[];
}
/**
* Every comment on the installation: search it, filter it, approve what is
* held and delete what should not stand.
*
* This replaced a page that listed only comments awaiting approval, which
* meant a comment nobody had to decide about could not be found at all
* unless you remembered which file it was on.
*
* The list is narrowed server-side by the same rule a single file's thread
* uses, so what is missing from it is missing on purpose: another person's
* "only me" note, and conversations belonging to clients this viewer is not
* assigned to.
*/
export default function CommentsIndex({ entries, pagination, filters, pending_total, visibilities }: CommentsIndexProps) {
const { t } = useTranslation();
const { dateTime } = useFormatDate();
const { values, set, reset, hasFilters } = useListQuery(
'comments.index',
{
status: filters.status ?? ALL,
visibility: filters.visibility ?? ALL,
author_type: filters.author_type ?? ALL,
search: filters.search ?? '',
file: filters.file ?? '',
from: filters.from ?? '',
to: filters.to ?? '',
},
{ status: ALL, visibility: ALL, author_type: ALL, search: '', file: '', from: '', to: '' },
);
const breadcrumbs: BreadcrumbItem[] = [{ title: t('Comments'), href: '/comments' }];
const authorLabel = (entry: CommentEntry) =>
entry.author_type === 'guest' ? t('Visitor') : entry.author_type === 'staff' ? t('Staff') : t('Client');
return (
{/* A shortcut, not a statistic: the number is the reason
somebody came here, and clicking it is what they were
going to do next. */}
{pending_total > 0 && values.status !== 'pending' && (
)}