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

import { prisma } from "@/lib/prisma";
import { insensitiveContains } from "@/lib/prisma-search";
import { BackLink } from "@/components/back-link";
import { ConfirmForm } from "@/components/confirm-form";
import { getCurrentAdmin } from "@/lib/auth";
import { formatDate } from "@/lib/format";
import {
  AdminActionButton,
  AdminActionLink,
  AdminBadge,
  AdminEmptyState,
  AdminPageHeader,
  AdminRowActions,
  AdminSearchForm,
} from "@/components/admin-list";
import { blockCustomerAction, unblockCustomerAction, deleteCustomerAction } from "../actions";
import { getLocale } from "@/i18n/locale";
import { getDictionary } from "@/i18n/get-dictionary";

export default async function AdminBenutzerPage(props: PageProps<"/admin/benutzer">) {
  const t = getDictionary(await getLocale());
  const roleLabels: Record<string, string> = { KUNDE: t.adminUsersPage.roleCustomer, ADMIN: t.adminUsersPage.roleAdmin };
  const { q } = await props.searchParams;
  const query = typeof q === "string" ? q.trim() : "";

  const [admin, customers] = await Promise.all([
    getCurrentAdmin(),
    prisma.customer.findMany({
      where: query
        ? {
            OR: [
              { firstName: insensitiveContains(query) },
              { lastName: insensitiveContains(query) },
              { email: insensitiveContains(query) },
            ],
          }
        : undefined,
      orderBy: { createdAt: "desc" },
      take: 100,
    }),
  ]);

  const newUser = { href: "/admin/benutzer/neu", label: t.adminUsersPage.newUser };

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

      <AdminSearchForm
        query={query}
        label={t.adminUsersPage.searchLabel}
        placeholder={t.adminUsersPage.searchPlaceholder}
        submitLabel={t.adminUsersPage.filterButton}
        resetHref="/admin/benutzer"
        resetLabel={t.adminUsersPage.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.adminUsersPage.colName}</th>
              <th className="p-4">{t.adminUsersPage.colEmail}</th>
              <th className="p-4">{t.adminUsersPage.colRole}</th>
              <th className="p-4">{t.adminUsersPage.colStatus}</th>
              <th className="p-4">{t.adminUsersPage.col2fa}</th>
              <th className="p-4">{t.adminUsersPage.colCreated}</th>
              <th className="p-4" />
            </tr>
          </thead>
          <tbody className="divide-y divide-ink/10">
            {customers.map((customer) => {
              const isSelf = customer.id === admin?.id;
              const isTemporarilyLocked = Boolean(customer.lockedUntil && customer.lockedUntil > new Date());

              return (
                <tr key={customer.id} className="transition-colors hover:bg-ink/[0.03]">
                  <td className="p-4 text-heading">
                    {customer.firstName} {customer.lastName}
                    {isSelf ? <span className="text-ink/65">{t.adminUsersPage.youSuffix}</span> : null}
                  </td>
                  <td className="p-4">{customer.email}</td>
                  <td className="p-4">
                    {customer.role === "ADMIN" ? (
                      <AdminBadge tone="neutral">{roleLabels.ADMIN}</AdminBadge>
                    ) : (
                      (roleLabels[customer.role] ?? customer.role)
                    )}
                  </td>
                  <td className="p-4">
                    {customer.blockedAt ? (
                      <AdminBadge tone="danger">{t.adminUsersPage.statusBlocked}</AdminBadge>
                    ) : isTemporarilyLocked ? (
                      <AdminBadge tone="pending">{t.adminUsersPage.statusTemporarilyLocked}</AdminBadge>
                    ) : (
                      <AdminBadge tone="positive">{t.adminUsersPage.statusActive}</AdminBadge>
                    )}
                  </td>
                  <td className="p-4">
                    {customer.twoFactorEnabled ? (
                      <AdminBadge tone="positive">{t.adminUsersPage.statusActive}</AdminBadge>
                    ) : (
                      <span className="text-ink/55">—</span>
                    )}
                  </td>
                  <td className="p-4 whitespace-nowrap tabular-nums">{formatDate(customer.createdAt)}</td>
                  <td className="p-4">
                    <AdminRowActions>
                      <AdminActionLink href={`/admin/benutzer/${customer.id}`}>{t.adminUsersPage.edit}</AdminActionLink>
                      {!isSelf ? (
                        customer.blockedAt ? (
                          <form action={unblockCustomerAction}>
                            <input type="hidden" name="id" value={customer.id} />
                            <AdminActionButton>{t.adminUsersPage.unblock}</AdminActionButton>
                          </form>
                        ) : (
                          <form action={blockCustomerAction}>
                            <input type="hidden" name="id" value={customer.id} />
                            <AdminActionButton tone="muted">{t.adminUsersPage.block}</AdminActionButton>
                          </form>
                        )
                      ) : null}
                      {!isSelf ? (
                        <ConfirmForm
                          action={deleteCustomerAction}
                          confirmMessage={t.adminUsersPage.deleteConfirm(`${customer.firstName} ${customer.lastName}`)}
                        >
                          <input type="hidden" name="id" value={customer.id} />
                          <AdminActionButton tone="danger">{t.adminUsersPage.delete}</AdminActionButton>
                        </ConfirmForm>
                      ) : null}
                    </AdminRowActions>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        {customers.length === 0 ? (
          <AdminEmptyState
            message={query ? t.adminUsersPage.noResultsFiltered : t.adminUsersPage.noUsersYet}
            action={query ? undefined : newUser}
          />
        ) : null}
      </div>
    </div>
  );
}