Wabenhain/src/app/admin/bewertungen/page.tsx

import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { BackLink } from "@/components/back-link";
import { ConfirmForm } from "@/components/confirm-form";
import { formatDate } from "@/lib/format";
import { StarRating } from "@/components/star-rating";
import {
  AdminActionButton,
  AdminBadge,
  AdminEmptyState,
  AdminPageHeader,
  AdminRowActions,
  AdminSearchForm,
} from "@/components/admin-list";
import { insensitiveContains } from "@/lib/prisma-search";
import { approveReviewAction, deleteReviewAction } from "../actions";
import { getLocale } from "@/i18n/locale";
import { getDictionary } from "@/i18n/get-dictionary";

export default async function AdminBewertungenPage(props: PageProps<"/admin/bewertungen">) {
  const t = getDictionary(await getLocale());
  const { q } = await props.searchParams;
  const query = typeof q === "string" ? q.trim() : "";

  const reviews = await prisma.review.findMany({
    where: query
      ? {
          OR: [
            { product: { name: insensitiveContains(query) } },
            { customer: { firstName: insensitiveContains(query) } },
            { customer: { lastName: insensitiveContains(query) } },
          ],
        }
      : undefined,
    include: {
      product: { select: { name: true, slug: true } },
      customer: { select: { firstName: true, lastName: true } },
    },
    orderBy: [{ isApproved: "asc" }, { createdAt: "desc" }],
    take: 100,
  });

  return (
    <div>
      <BackLink href="/admin" label={t.adminReviewsPage.backToDashboard} />
      <AdminPageHeader title={t.adminReviewsPage.title} />

      <AdminSearchForm
        query={query}
        label={t.adminReviewsPage.searchLabel}
        placeholder={t.adminReviewsPage.searchPlaceholder}
        submitLabel={t.adminReviewsPage.filterButton}
        resetHref="/admin/bewertungen"
        resetLabel={t.adminReviewsPage.resetFilter}
      />

      <div className="overflow-x-auto bg-background border border-ink/10">
        <table className="w-full text-sm">
          <thead className="text-left text-ink/65 border-b border-ink/10">
            <tr>
              <th className="p-4">{t.adminReviewsPage.colProduct}</th>
              <th className="p-4">{t.adminReviewsPage.colCustomer}</th>
              <th className="p-4">{t.adminReviewsPage.colRating}</th>
              <th className="p-4">{t.adminReviewsPage.colComment}</th>
              <th className="p-4">{t.adminReviewsPage.colDate}</th>
              <th className="p-4">{t.adminReviewsPage.colStatus}</th>
              <th className="p-4" />
            </tr>
          </thead>
          <tbody className="divide-y divide-ink/10">
            {reviews.map((review) => (
              <tr key={review.id} className="transition-colors hover:bg-ink/[0.03]">
                <td className="p-4">
                  <Link href={`/honig/${review.product.slug}`} className="link-draw text-heading">
                    {review.product.name}
                  </Link>
                </td>
                <td className="p-4">
                  {review.customer.firstName} {review.customer.lastName}
                </td>
                <td className="p-4 whitespace-nowrap">
                  <StarRating value={review.rating} />
                  <span className="sr-only">{review.rating} / 5</span>
                </td>
                <td className="p-4 max-w-xs">{review.comment ?? "—"}</td>
                <td className="p-4 whitespace-nowrap">{formatDate(review.createdAt)}</td>
                <td className="p-4">
                  {review.isApproved ? (
                    <AdminBadge tone="positive">{t.adminReviewsPage.statusPublished}</AdminBadge>
                  ) : (
                    <AdminBadge tone="pending" pulse>
                      {t.adminReviewsPage.statusPending}
                    </AdminBadge>
                  )}
                </td>
                <td className="p-4">
                  <AdminRowActions>
                    {!review.isApproved ? (
                      <form action={approveReviewAction}>
                        <input type="hidden" name="id" value={review.id} />
                        <AdminActionButton>{t.adminReviewsPage.approve}</AdminActionButton>
                      </form>
                    ) : null}
                    <ConfirmForm
                      action={deleteReviewAction}
                      confirmMessage={t.adminReviewsPage.deleteConfirm}
                    >
                      <input type="hidden" name="id" value={review.id} />
                      <AdminActionButton tone="danger">{t.adminReviewsPage.delete}</AdminActionButton>
                    </ConfirmForm>
                  </AdminRowActions>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {reviews.length === 0 ? (
          <AdminEmptyState
            message={query ? t.adminReviewsPage.noResultsFiltered : t.adminReviewsPage.noReviewsYet}
          />
        ) : null}
      </div>
    </div>
  );
}