@meith/web 0.16.0

package/app/admin/users/[id]/merge/page.tsx

@@ -0,0 +1,136 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { getDb, PostgresUserMergeRepository } from '@meith/db'
+import { cn } from '@meith/ui'
+
+import { MergeForm } from '@/components/admin/user-forms'
+import { PANEL_CARD, PANEL_NOTE } from '@/components/shell/panel-list'
+import { PanelPage } from '@/components/shell/panel-page'
+import { adminPageContext } from '@/server/admin'
+import { getTranslator, tr } from '@/server/i18n'
+import { userAdminRepository } from '@/server/user-admin'
+import { userAdminCopy } from '@/view/admin-user-copy'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.merge-account') }
+}
+
+const INPUT =
+  'w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export default async function AdminMergePage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string }>
+  searchParams: Promise<Record<string, string | string[] | undefined>>
+}) {
+  if ((await adminPageContext()) === null) return null
+
+  const { id } = await params
+  if (!/^[1-9]\d*$/.test(id)) notFound()
+
+  const repository = userAdminRepository()
+  if (repository === null) notFound()
+
+  const member = await repository.readDetail(Number(id))
+  if (member === null) notFound()
+
+  const query = await searchParams
+  const rawInto = query.into
+  const into = (Array.isArray(rawInto) ? rawInto[0] : rawInto)?.trim() ?? ''
+
+  const candidates =
+    into === ''
+      ? []
+      : (await repository.search({ username: into, afterUserId: 0, limit: 10 })).rows.filter(
+          (row) => row.id !== member.id,
+        )
+
+  const merge = new PostgresUserMergeRepository(getDb())
+  const previews = await Promise.all(
+    candidates.map(async (row) => ({
+      row,
+      preview: await merge.preview(member.id, row.id),
+    })),
+  )
+
+  const t = await getTranslator()
+  const copy = userAdminCopy(t)
+
+  return (
+    <PanelPage
+      back={{ href: `/admin/users/${member.id}`, label: member.username }}
+      title={t.t('adminUsers.mergeTitle', { username: member.username })}
+      lede={t.t('adminUsers.mergePageLede', { username: member.username })}
+    >
+      <form method="get" className={PANEL_CARD}>
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="font-medium">{await tr('page.keep-which-account')}</span>
+          <input
+            name="into"
+            defaultValue={into}
+            className={INPUT}
+            placeholder={t.t('adminUsers.username')}
+          />
+        </label>
+        <div>
+          <button
+            type="submit"
+            className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:opacity-90"
+          >
+            {t.t('adminUsers.find')}
+          </button>
+        </div>
+      </form>
+
+      {into !== '' && previews.length === 0 && (
+        <p className={PANEL_NOTE}>{t.t('adminUsers.noOtherAccountMatches', { username: into })}</p>
+      )}
+
+      {previews.map(({ row, preview }) =>
+        preview === null ? null : (
+          <section key={row.id} className={PANEL_CARD}>
+            <h2 className="font-heading text-lg font-semibold">
+              {t.t('adminUsers.keep', { username: row.username })}
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              {t.t('adminUsers.mergePreview', {
+                posts: t.t('adminUsers.posts', { count: preview.posts }),
+                threads: t.t('adminUsers.threads', { count: preview.threads }),
+                messages: t.t('adminUsers.privateMessages', { count: preview.privateMessages }),
+                attachments: t.t('adminUsers.attachments', { count: preview.attachments }),
+                from: member.username,
+                to: row.username,
+              })}
+            </p>
+
+            {preview.blockedByBan ? (
+              <p className="text-sm text-muted-foreground">{t.t('adminUsers.mergeBlockedByBan')}</p>
+            ) : (
+              <MergeForm
+                fromUserId={member.id}
+                toUserId={row.id}
+                toUsername={row.username}
+                posts={preview.posts}
+                copy={copy}
+              />
+            )}
+          </section>
+        ),
+      )}
+
+      <div className={cn(PANEL_CARD, 'gap-2 text-xs text-muted-foreground')}>
+        <p>{await tr('page.what-merge-does-full')}</p>
+        <ul className="flex list-disc flex-col gap-1 pl-4">
+          <li>{t.t('adminUsers.mergeDetailContent')}</li>
+          <li>{t.t('adminUsers.mergeDetailSessions')}</li>
+          <li>{t.t('adminUsers.mergeDetailConflict')}</li>
+          <li>{t.t('adminUsers.mergeDetailRelations')}</li>
+          <li>{await tr('page.losing-account-closed-not-deleted')}</li>
+        </ul>
+      </div>
+    </PanelPage>
+  )
+}

package/app/admin/users/[id]/page.tsx

@@ -0,0 +1,208 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import {
+  BanMemberForm,
+  ClearSecondFactorForm,
+  LiftBanForm,
+  MemberAccountForm,
+  MemberStateForm,
+  SecondaryGroupsForm,
+} from '@/components/admin/user-forms'
+import { PANEL_CARD } from '@/components/shell/panel-list'
+import { PanelPage } from '@/components/shell/panel-page'
+import { adminPageContext } from '@/server/admin'
+import { getTranslator, tr } from '@/server/i18n'
+import { memberHoldsSecondFactor } from '@/server/two-factor'
+import { buildMemberView } from '@/server/user-admin'
+import { userAdminCopy } from '@/view/admin-user-copy'
+import { formatTime } from '@/view/time'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.member') }
+}
+
+export default async function AdminMemberPage({ params }: { params: Promise<{ id: string }> }) {
+  if ((await adminPageContext()) === null) return null
+
+  const { id } = await params
+  if (!/^[1-9]\d*$/.test(id)) notFound()
+
+  const view = await buildMemberView(Number(id))
+  if (view === null) notFound()
+
+  const { member, activeBan } = view
+  const enrolled = await memberHoldsSecondFactor(member.id)
+  const now = new Date()
+  const translator = await getTranslator()
+  const copy = userAdminCopy(translator)
+
+  return (
+    <PanelPage
+      back={{ href: '/admin/users', label: translator.t('adminUsers.allMembers') }}
+      title={member.username}
+      gap="loose"
+      lede={translator.t('adminUsers.memberLede', {
+        id: member.id,
+        registered: formatTime(member.createdAt, now, translator).label,
+        lastSeen:
+          member.lastActiveAt === null
+            ? ''
+            : translator.t('adminUsers.lastSeen', {
+                time: formatTime(member.lastActiveAt, now, translator).label,
+              }),
+        deleted: member.deletedAt === null ? '' : translator.t('adminUsers.accountDeleted'),
+      })}
+      meta={translator.t('adminUsers.memberMeta', {
+        posts: translator.t('adminUsers.posts', { count: member.postCount }),
+        threads: translator.t('adminUsers.threads', { count: member.threadCount }),
+        reputation: member.reputation,
+        warnings: translator.t('adminUsers.warningPoints', { count: member.warningPoints }),
+        email: translator.t(
+          member.emailVerifiedAt === null
+            ? 'adminUsers.emailUnverified'
+            : 'adminUsers.emailVerified',
+        ),
+      })}
+    >
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">{translator.t('adminUsers.account')}</h2>
+        <MemberAccountForm
+          member={{
+            id: member.id,
+            username: member.username,
+            email: member.email,
+            primaryGroupId: member.primaryGroupId,
+            displayGroupId: member.displayGroupId,
+          }}
+          groups={view.groups}
+          copy={copy}
+        />
+      </section>
+
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">{await tr('page.additional-groups')}</h2>
+        <p className="text-sm text-muted-foreground">
+          {translator.t('adminUsers.additionalGroupsLede')}
+        </p>
+        <SecondaryGroupsForm
+          userId={member.id}
+          groups={view.groups}
+          selected={view.secondaryGroupIds}
+          primaryGroupId={member.primaryGroupId}
+          copy={copy}
+        />
+      </section>
+
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">{translator.t('adminUsers.state')}</h2>
+        {activeBan !== null || member.state === 'banned' ? (
+          <p className="text-sm text-muted-foreground">
+            {translator.t('adminUsers.bannedStateLede')}
+          </p>
+        ) : (
+          <MemberStateForm userId={member.id} state={member.state} copy={copy} />
+        )}
+      </section>
+
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">{translator.t('adminUsers.ban')}</h2>
+        {activeBan === null ? (
+          <BanMemberForm userId={member.id} copy={copy} />
+        ) : (
+          <>
+            <p className="text-sm">
+              {translator.t('adminUsers.banned')}{' '}
+              {activeBan.expiresAt === null ? (
+                <strong>{translator.t('adminUsers.permanently')}</strong>
+              ) : (
+                <>
+                  {translator.t('adminUsers.until')}{' '}
+                  <time dateTime={activeBan.expiresAt.toISOString()}>
+                    {formatTime(activeBan.expiresAt, now, translator).label}
+                  </time>
+                </>
+              )}
+              .
+            </p>
+            {activeBan.reason !== null && (
+              <p className="text-sm text-muted-foreground">
+                {translator.t('adminUsers.staffNote', { reason: activeBan.reason })}
+              </p>
+            )}
+            {activeBan.publicReason !== null && (
+              <p className="text-sm text-muted-foreground">
+                {translator.t('adminUsers.shownToMember', { reason: activeBan.publicReason })}
+              </p>
+            )}
+            <LiftBanForm userId={member.id} copy={copy} />
+          </>
+        )}
+      </section>
+
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">
+          {translator.t('adminUser.secondFactor')}
+        </h2>
+        <ClearSecondFactorForm userId={member.id} enrolled={enrolled} copy={copy} />
+      </section>
+
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">{translator.t('adminUsers.merge')}</h2>
+        <p className="text-sm text-muted-foreground">{translator.t('adminUsers.mergeLede')}</p>
+        <p>
+          <a
+            href={`/admin/users/${member.id}/merge`}
+            className="text-sm font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+          >
+            {translator.t('adminUsers.mergeLink', { username: member.username })}
+          </a>
+        </p>
+      </section>
+
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">{translator.t('adminUsers.network')}</h2>
+        <p className="text-sm text-muted-foreground">
+          {translator.t('adminUsers.networkLede', {
+            registered:
+              member.registrationIpPrefix ?? translator.t('adminUsers.addressNotRecorded'),
+            lastSeen:
+              member.lastIpPrefix === null
+                ? ''
+                : translator.t('adminUsers.lastSeenFrom', { address: member.lastIpPrefix }),
+          })}
+        </p>
+
+        {view.sharedNetwork.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            {await tr('page.no-other-account-has-been')}
+          </p>
+        ) : (
+          <>
+            <p className="text-sm">
+              {translator.t('adminUsers.sharedNetwork', { count: view.sharedNetwork.length })}
+            </p>
+            <ul className="flex flex-col gap-1 text-sm">
+              {view.sharedNetwork.map((row) => (
+                <li key={row.id}>
+                  <a
+                    href={`/admin/users/${row.id}`}
+                    className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+                  >
+                    {row.username}
+                  </a>{' '}
+                  <span className="text-xs text-muted-foreground">
+                    {row.state === 'active'
+                      ? ''
+                      : `${row.state === 'banned' ? translator.t('adminUsers.banned') : translator.t('page.awaiting-activation')} · `}
+                    {translator.t('adminUsers.posts', { count: row.postCount })}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+      </section>
+    </PanelPage>
+  )
+}

package/app/admin/users/mail/page.tsx

@@ -0,0 +1,68 @@
+import type { Metadata } from 'next'
+
+import { cn } from '@meith/ui'
+
+import { MassMailForm } from '@/components/admin/user-forms'
+import { PANEL_CARD } from '@/components/shell/panel-list'
+import { PanelPage } from '@/components/shell/panel-page'
+import { adminPageContext } from '@/server/admin'
+import { getTranslator, tr } from '@/server/i18n'
+import { userAdminRepository, userBulkRepository } from '@/server/user-admin'
+import { userMassMailCopy } from '@/view/admin-user-copy'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.mass-mail') }
+}
+
+export default async function AdminMassMailPage() {
+  if ((await adminPageContext()) === null) return null
+
+  const bulk = userBulkRepository()
+  const users = userAdminRepository()
+  if (bulk === null || users === null) {
+    return (
+      <PanelPage
+        back={{ href: '/admin/users', label: (await getTranslator()).t('adminUsers.allMembers') }}
+        title={await tr('page.mass-mail')}
+        lede={await tr('page.this-board-running-in-memory-sample')}
+      >
+        {null}
+      </PanelPage>
+    )
+  }
+
+  const [groups, everybody, byGroup] = await Promise.all([
+    users.listGroups(),
+    bulk.massMailAudience(null),
+    bulk.massMailAudienceByGroup(),
+  ])
+
+  const audiences = groups.map((group) => ({
+    id: group.id,
+    title: group.title,
+    audience: byGroup.get(group.id) ?? 0,
+  }))
+  const translator = await getTranslator()
+
+  return (
+    <PanelPage
+      back={{ href: '/admin/users', label: translator.t('adminUsers.allMembers') }}
+      title={await tr('page.mass-mail')}
+      lede={translator.t('adminUsers.massMailLede')}
+    >
+      <section className={PANEL_CARD}>
+        <MassMailForm groups={audiences} copy={userMassMailCopy(everybody, translator)} />
+      </section>
+
+      <div className={cn(PANEL_CARD, 'gap-2 text-xs text-muted-foreground')}>
+        <p>{await tr('page.before-press-it')}</p>
+        <ul className="flex list-disc flex-col gap-1 pl-4">
+          <li>{translator.t('adminUsers.massMailQueued')}</li>
+          <li>{translator.t('adminUsers.massMailNoUnsubscribe')}</li>
+          <li>{translator.t('adminUsers.massMailContinues')}</li>
+          <li>{await tr('page.email-cannot-be-unsent')}</li>
+        </ul>
+      </div>
+    </PanelPage>
+  )
+}

package/app/admin/users/page.tsx

@@ -0,0 +1,260 @@
+import type { Metadata } from 'next'
+
+import { buttonVariants, cn } from '@meith/ui'
+
+import { UserBulkToolbar } from '@/components/admin/user-bulk-toolbar'
+import {
+  PANEL_CARD,
+  PANEL_LIST,
+  PANEL_NOTE,
+  PANEL_ROW,
+  PanelActionLink,
+} from '@/components/shell/panel-list'
+import { PanelPage } from '@/components/shell/panel-page'
+import { PanelPagination } from '@/components/shell/panel-pagination'
+import { adminPageContext } from '@/server/admin'
+import { getTranslator, tr } from '@/server/i18n'
+import { parseUserFilter, USER_PAGE, userAdminRepository } from '@/server/user-admin'
+import { adminSharedCopy } from '@/view/admin-copy'
+import { readPage } from '@/view/pager'
+import { formatTime } from '@/view/time'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.members') }
+}
+
+const INPUT =
+  'w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export default async function AdminUsersPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>
+}) {
+  if ((await adminPageContext()) === null) return null
+
+  const repository = userAdminRepository()
+  if (repository === null) {
+    return (
+      <PanelPage title={await tr('page.members')} width="wide">
+        <p className="mt-2 text-sm text-muted-foreground">
+          {await tr('adminUsers.inMemorySearch')}
+        </p>
+      </PanelPage>
+    )
+  }
+
+  const params = await searchParams
+  const filter = parseUserFilter(params)
+  const [page, groups] = await Promise.all([repository.search(filter), repository.listGroups()])
+  const now = new Date()
+  const translator = await getTranslator()
+
+  const value = (key: string): string => {
+    const raw = params[key]
+    const text = Array.isArray(raw) ? raw[0] : raw
+    return text ?? ''
+  }
+
+  return (
+    <PanelPage title={await tr('page.members')} lede={translator.t('adminUsers.lede')} width="wide">
+      <nav className="flex flex-wrap gap-2">
+        <PanelActionLink href="/admin/users/prune">
+          {await tr('page.prune-dormant-accounts')}
+        </PanelActionLink>
+        <PanelActionLink href="/admin/users/mail">{await tr('page.mass-mail')}</PanelActionLink>
+      </nav>
+
+      <form method="get" className={PANEL_CARD}>
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+          <label className="col-span-2 flex flex-col gap-1 text-sm sm:col-span-1">
+            <span className="font-medium">{await tr('page.username-contains')}</span>
+            <input name="username" defaultValue={value('username')} className={INPUT} />
+          </label>
+
+          <label className="col-span-2 flex flex-col gap-1 text-sm sm:col-span-1">
+            <span className="font-medium">{await tr('page.email-contains')}</span>
+            <input name="email" defaultValue={value('email')} className={INPUT} />
+          </label>
+
+          <label className="col-span-2 flex flex-col gap-1 text-sm sm:col-span-1">
+            <span className="font-medium">{await tr('page.ip-starts-with')}</span>
+            <input name="ip" defaultValue={value('ip')} className={INPUT} />
+            <span className="text-xs text-muted-foreground">
+              {await tr('page.only-prefix-ever-stored-so')}
+            </span>
+          </label>
+
+          <label className="flex flex-col gap-1 text-sm">
+            <span className="font-medium">{translator.t('adminUsers.group')}</span>
+            <select name="group" defaultValue={value('group')} className={INPUT}>
+              <option value="">{translator.t('adminUsers.any')}</option>
+              {groups.map((group) => (
+                <option key={group.id} value={group.id}>
+                  {group.title}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="flex flex-col gap-1 text-sm">
+            <span className="font-medium">{translator.t('adminUsers.state')}</span>
+            <select name="state" defaultValue={value('state')} className={INPUT}>
+              <option value="">{translator.t('adminUsers.any')}</option>
+              <option value="active">{translator.t('adminUsers.active')}</option>
+              <option value="awaiting_activation">{await tr('page.awaiting-activation')}</option>
+              <option value="banned">{translator.t('adminUsers.banned')}</option>
+            </select>
+          </label>
+
+          <label className="flex flex-col gap-1 text-sm">
+            <span className="font-medium">{await tr('page.registered-before')}</span>
+            <input type="date" name="before" defaultValue={value('before')} className={INPUT} />
+          </label>
+
+          <label className="flex flex-col gap-1 text-sm">
+            <span className="font-medium">{await tr('page.registered-after')}</span>
+            <input type="date" name="after" defaultValue={value('after')} className={INPUT} />
+          </label>
+
+          <label className="flex flex-col gap-1 text-sm">
+            <span className="font-medium">{await tr('page.posts-at-least')}</span>
+            <input
+              type="number"
+              name="minPosts"
+              min={0}
+              defaultValue={value('minPosts')}
+              className={INPUT}
+            />
+          </label>
+
+          <label className="flex flex-col gap-1 text-sm">
+            <span className="font-medium">{await tr('page.posts-at-most')}</span>
+            <input
+              type="number"
+              name="maxPosts"
+              min={0}
+              defaultValue={value('maxPosts')}
+              className={INPUT}
+            />
+          </label>
+        </div>
+
+        <label className="flex items-center gap-2 text-sm">
+          <input
+            type="checkbox"
+            name="deleted"
+            value="1"
+            defaultChecked={value('deleted') !== ''}
+            className="size-4"
+          />
+          <span>{await tr('page.include-deleted-accounts')}</span>
+        </label>
+
+        <div className="flex gap-3">
+          <button
+            type="submit"
+            className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:opacity-90"
+          >
+            {translator.t('adminUsers.search')}
+          </button>
+          <a
+            href="/admin/users"
+            className="inline-flex h-10 items-center justify-center rounded-md border border-border px-4 text-sm"
+          >
+            {translator.t('adminUsers.clear')}
+          </a>
+        </div>
+      </form>
+
+      {page.rows.length > 0 && (
+        <UserBulkToolbar
+          groups={groups}
+          copy={adminSharedCopy(translator)}
+          labels={{
+            action: translator.t('adminUsers.bulkAction'),
+            apply: translator.t('adminUsers.bulkApply'),
+            ban: translator.t('adminUsers.bulkBan'),
+            banned: translator.t('adminUsers.bulkBanned'),
+            choose: translator.t('adminUsers.bulkChoose'),
+            group: translator.t('adminUsers.bulkGroup'),
+            grouped: translator.t('adminUsers.bulkGrouped'),
+            prune: translator.t('adminUsers.bulkPrune'),
+            pruneReview: translator.t('adminUsers.pruneReview'),
+            reason: translator.t('adminUsers.bulkReason'),
+            selectPage: translator.t('adminUsers.bulkSelectPage'),
+          }}
+        />
+      )}
+
+      {page.rows.length === 0 ? (
+        <p className={PANEL_NOTE}>{translator.t('adminUsers.noMatches')}</p>
+      ) : (
+        <ul className={PANEL_LIST}>
+          {page.rows.map((row) => (
+            <li key={row.id} className={PANEL_ROW}>
+              <input
+                type="checkbox"
+                name="userIds"
+                value={row.id}
+                form="admin-user-bulk"
+                data-admin-user-select
+                aria-label={translator.t('adminUsers.bulkSelect', { username: row.username })}
+                className="size-4 shrink-0"
+              />
+              <span className="flex min-w-0 flex-1 flex-col">
+                <span className="truncate text-sm font-medium">
+                  {row.username}
+                  {row.isBanned ? (
+                    <span className="ml-2 text-xs font-normal text-muted-foreground">
+                      {translator.t('adminUsers.banned')}
+                    </span>
+                  ) : (
+                    row.state !== 'active' && (
+                      <span className="ml-2 text-xs font-normal text-muted-foreground">
+                        {translator.t('page.awaiting-activation')}
+                      </span>
+                    )
+                  )}
+                  {row.deletedAt !== null && (
+                    <span className="ml-2 text-xs font-normal text-muted-foreground">
+                      {translator.t('adminUsers.deleted')}
+                    </span>
+                  )}
+                </span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {translator.t('adminUsers.memberSummary', {
+                    email: row.email,
+                    group: row.primaryGroupTitle,
+                    posts: translator.t('adminUsers.posts', { count: row.postCount }),
+                    lastSeen:
+                      row.lastActiveAt === null
+                        ? translator.t('adminUsers.neverSeen')
+                        : translator.t('adminUsers.lastSeen', {
+                            time: formatTime(row.lastActiveAt, now, translator).label,
+                          }),
+                  })}
+                </span>
+              </span>
+              <a
+                href={`/admin/users/${row.id}`}
+                aria-label={translator.t('adminUsers.editLabel', { username: row.username })}
+                className={cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'shrink-0')}
+              >
+                {translator.t('adminUsers.edit')}
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <PanelPagination
+        path="/admin/users"
+        params={params}
+        page={readPage(params)}
+        pageSize={USER_PAGE}
+        total={page.total}
+      />
+    </PanelPage>
+  )
+}