diff --git a/frontend/src/components/finance/admin/PayrollAdminModals.tsx b/frontend/src/components/finance/admin/PayrollAdminModals.tsx
index bc01e831..60bfaf9a 100644
--- a/frontend/src/components/finance/admin/PayrollAdminModals.tsx
+++ b/frontend/src/components/finance/admin/PayrollAdminModals.tsx
@@ -34,7 +34,7 @@ import { formatPayrollPoints, normalizePayrollPoints } from "@/lib/payroll";
 const inputClass = "app-input w-full rounded-lg px-3 py-2.5 text-sm";
 const selectClass = "app-select w-full rounded-lg px-3 py-2.5 text-sm";
 
-function ModalActions({
+export function ModalActions({
   busy,
   disabled = false,
   onClose,
@@ -71,7 +71,7 @@ function ModalActions({
   );
 }
 
-function FormError({ message }: { message: string | null }) {
+export function FormError({ message }: { message: string | null }) {
   if (!message) return null;
   return (
     <div className="app-feedback-danger mt-4 rounded-lg px-3 py-2.5 text-sm">
diff --git a/frontend/src/components/finance/admin/PayrollAdminTables.tsx b/frontend/src/components/finance/admin/PayrollAdminTables.tsx
index 32e0ebf1..512086c0 100644
--- a/frontend/src/components/finance/admin/PayrollAdminTables.tsx
+++ b/frontend/src/components/finance/admin/PayrollAdminTables.tsx
@@ -40,17 +40,19 @@ function RecordStatus({ status }: { status: PayrollApprovalStatus }) {
   );
 }
 
-function CompactRecordCard({
+export function CompactRecordCard({
   title,
   subtitle,
   summary,
   status,
+  statusContent,
   children,
 }: {
   title: string;
   subtitle: string;
   summary: ReactNode;
   status: PayrollApprovalStatus;
+  statusContent?: ReactNode;
   children: ReactNode;
 }) {
   const [open, setOpen] = useState(false);
@@ -81,7 +83,7 @@ function CompactRecordCard({
           </span>
         </span>
         <span className="shrink-0">
-          <RecordStatus status={status} />
+          {statusContent ?? <RecordStatus status={status} />}
         </span>
       </button>
       {open ? (
@@ -93,7 +95,7 @@ function CompactRecordCard({
   );
 }
 
-function CompactField({
+export function CompactField({
   label,
   children,
 }: {
@@ -110,7 +112,7 @@ function CompactField({
   );
 }
 
-function ListState({
+export function ListState({
   loading,
   error,
   empty,
@@ -242,7 +244,7 @@ export function PayrollInputHistory({
   );
 }
 
-function ActionButton({
+export function ActionButton({
   label,
   icon,
   onClick,
diff --git a/frontend/src/components/finance/admin/PayrollOffCyclePayments.tsx b/frontend/src/components/finance/admin/PayrollOffCyclePayments.tsx
index aaa869ef..9203a5b5 100644
--- a/frontend/src/components/finance/admin/PayrollOffCyclePayments.tsx
+++ b/frontend/src/components/finance/admin/PayrollOffCyclePayments.tsx
@@ -1,8 +1,24 @@
 "use client";
 
 import { useCallback, useEffect, useState, type FormEvent } from "react";
-import { Loader2, Plus, RefreshCw, Search } from "lucide-react";
+import { Plus, RefreshCw, RotateCcw, Search } from "lucide-react";
+
 import { Modal } from "@/components/ui";
+import { CompactFilterMenu } from "@/components/ui/CompactFilterMenu";
+import { ModulePrimaryAction } from "@/components/ui/ModulePrimaryAction";
+import { ProjectSelectMenu } from "@/components/ui/ProjectSelectMenu";
+import { SearchableSelectSingle } from "@/components/shared/SearchableSelect";
+import {
+  FormError,
+  ModalActions,
+  PayrollConfirmModal,
+} from "./PayrollAdminModals";
+import {
+  ActionButton,
+  CompactField,
+  CompactRecordCard,
+  ListState,
+} from "./PayrollAdminTables";
 import { apiClient } from "@/lib/api";
 import type {
   PayrollAdminEmployee,
@@ -12,15 +28,30 @@ import type {
   PayrollOffCycleSettlement,
 } from "@/lib/api/finance";
 import { getPayrollAdminError } from "@/lib/payroll-admin";
-import { formatPayrollDate, formatPayrollMoney } from "@/lib/payroll";
+import {
+  formatPayrollDate,
+  formatPayrollDateTime,
+  formatPayrollMoney,
+} from "@/lib/payroll";
 
 const inputClass = "app-input w-full rounded-lg px-3 py-2.5 text-sm";
+const selectClass = "app-select w-full rounded-lg px-3 py-2.5 text-sm";
 
 function localToday() {
   const now = new Date();
   return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
 }
 
+function PaymentStatus({ payment }: { payment: PayrollOffCyclePayment }) {
+  return (
+    <span
+      className={`app-status-pill !whitespace-nowrap ${payment.voided_at ? "app-feedback-danger" : "app-feedback-success"}`}
+    >
+      {payment.voided_at ? "Отменена" : "Выдано"}
+    </span>
+  );
+}
+
 function PaymentForm({
   employees,
   periods,
@@ -48,13 +79,6 @@ function PaymentForm({
     useState<PayrollOffCycleSettlement | null>(null);
   const [settlementLoading, setSettlementLoading] = useState(false);
   const [settlementError, setSettlementError] = useState<string | null>(null);
-  const matches = employees
-    .filter((item) =>
-      item.display_name
-        .toLocaleLowerCase("ru")
-        .includes(name.toLocaleLowerCase("ru").trim()),
-    )
-    .slice(0, 8);
   const sourcePeriod = periods.find(
     (period) => period.id === Number(sourcePeriodId),
   );
@@ -126,89 +150,72 @@ function PaymentForm({
       onClose={() => {
         if (!busy) onClose();
       }}
-      title="Добавить выплату вне периода"
-      size="lg"
+      title="Новая выплата вне периода"
+      size="md"
     >
-      <form onSubmit={save} className="space-y-4">
-        <p className="app-text-muted text-sm">
-          Запишите фактически выданные деньги. Расчётные листки и уведомления не
-          создаются.
+      <form onSubmit={save}>
+        <p className="app-text-muted mb-4 text-sm leading-relaxed">
+          Учёт выданных денег. Расчётные листки и уведомления не отправляются.
         </p>
-        <label className="flex items-center gap-2 text-sm">
-          <input
-            type="checkbox"
-            checked={manual}
-            disabled={busy}
-            onChange={(event) => {
-              setManual(event.target.checked);
-              setEmployee(null);
-              setName("");
-            }}
-          />{" "}
-          Получателя нет в списке — ввести имя вручную
-        </label>
-        <div>
-          <label className="block text-sm font-medium" htmlFor="off-cycle-name">
-            Получатель
-          </label>
-          <input
-            id="off-cycle-name"
-            className={`${inputClass} mt-1`}
-            required
-            maxLength={250}
-            autoComplete="off"
-            value={name}
-            disabled={busy}
-            placeholder={
-              manual
-                ? "Фамилия Имя Отчество"
-                : "Поиск, включая бывших сотрудников"
-            }
-            onChange={(event) => {
-              setName(event.target.value);
-              setEmployee(null);
-            }}
-          />
-          {!manual && !employee ? (
-            <div
-              className="app-surface-muted mt-1 max-h-48 overflow-y-auto rounded-lg"
-              aria-label="Найденные сотрудники"
-            >
-              {matches.map((item) => (
-                <button
-                  key={item.id}
-                  type="button"
-                  disabled={busy}
-                  className="app-action-ghost block w-full px-3 py-2 text-left text-sm"
-                  onClick={() => {
-                    setEmployee(item);
-                    setName(item.display_name);
-                  }}
-                >
-                  {item.display_name}{" "}
-                  <span className="app-text-muted text-xs">
-                    {item.position || item.department || `№ ${item.id}`}
-                  </span>
-                </button>
-              ))}
-              {!matches.length ? (
-                <p className="app-text-muted px-3 py-2 text-sm">
-                  Совпадений нет. Для ручного ввода включите переключатель выше.
-                </p>
-              ) : null}
-            </div>
-          ) : employee ? (
-            <p className="app-text-muted mt-1 text-xs">
-              Выплата будет связана с карточкой сотрудника.
-            </p>
-          ) : null}
-        </div>
         <div className="grid gap-4 sm:grid-cols-2">
-          <label className="block text-sm font-medium">
-            Дата выдачи
+          <label className="flex items-center gap-2 text-sm sm:col-span-2">
+            <input
+              type="checkbox"
+              className="app-checkbox"
+              checked={manual}
+              disabled={busy}
+              onChange={(event) => {
+                setManual(event.target.checked);
+                setEmployee(null);
+                setName("");
+              }}
+            />
+            Получателя нет в списке — ввести имя вручную
+          </label>
+          <div className="sm:col-span-2">
+            {manual ? (
+              <label className="block">
+                <span className="app-field-label">Получатель</span>
+                <input
+                  className={inputClass}
+                  required
+                  maxLength={250}
+                  autoComplete="off"
+                  value={name}
+                  disabled={busy}
+                  placeholder="Фамилия Имя Отчество"
+                  onChange={(event) => setName(event.target.value)}
+                />
+              </label>
+            ) : (
+              <>
+                <SearchableSelectSingle
+                  label="Получатель"
+                  placeholder="Выберите сотрудника"
+                  items={employees.map((item) => ({
+                    id: item.id,
+                    name: `${item.display_name}${item.position ? ` — ${item.position}` : ""}`,
+                  }))}
+                  selectedId={employee?.id || null}
+                  disabled={busy}
+                  onSelect={(id) => {
+                    const selected =
+                      employees.find((item) => item.id === id) || null;
+                    setEmployee(selected);
+                    setName(selected?.display_name || "");
+                  }}
+                />
+                <p className="app-text-muted mt-1 text-xs">
+                  В списке доступны и бывшие сотрудники.
+                </p>
+              </>
+            )}
+          </div>
+          <label>
+            <span className="app-field-label">Дата выдачи</span>
             <input
               type="date"
-              className={`${inputClass} mt-1`}
+              className={inputClass}
               required
               max={localToday()}
               value={date}
@@ -216,11 +223,12 @@ function PaymentForm({
               onChange={(event) => setDate(event.target.value)}
             />
           </label>
-          <label className="block text-sm font-medium">
-            Выдано, {effectiveCurrency}
+          <label>
+            <span className="app-field-label">Выдано, {effectiveCurrency}</span>
             <input
               type="number"
-              className={`${inputClass} mt-1`}
+              inputMode="decimal"
+              className={inputClass}
               required
               min="0.01"
               step="0.01"
@@ -230,122 +238,252 @@ function PaymentForm({
               onChange={(event) => setAmount(event.target.value)}
             />
           </label>
+          <label className="sm:col-span-2">
+            <span className="app-field-label">Погашение долга за период</span>
+            <select
+              className={selectClass}
+              value={sourcePeriodId}
+              disabled={busy}
+              onChange={(event) => setSourcePeriodId(event.target.value)}
+            >
+              <option value="">Без привязки к расчётному периоду</option>
+              {periods
+                .filter((period) => period.status === "closed")
+                .map((period) => (
+                  <option key={period.id} value={period.id}>
+                    {period.name || period.code}
+                  </option>
+                ))}
+            </select>
+          </label>
+          {settlementLoading ? (
+            <p className="app-text-muted text-xs sm:col-span-2">
+              Проверяем остаток…
+            </p>
+          ) : null}
+          {settlementError ? (
+            <div className="sm:col-span-2">
+              <FormError message={settlementError} />
+            </div>
+          ) : null}
+          {settlement ? (
+            <div className="app-surface-muted divide-y divide-[var(--border-subtle)] rounded-xl px-3 py-1.5 sm:col-span-2">
+              <CompactField label="По листку">
+                {formatPayrollMoney(
+                  settlement.original_payable,
+                  settlement.currency,
+                )}
+              </CompactField>
+              <CompactField label="Выдано через реестр">
+                {formatPayrollMoney(
+                  settlement.paid_outside_period,
+                  settlement.currency,
+                )}
+              </CompactField>
+              <CompactField label="Осталось выдать">
+                {formatPayrollMoney(settlement.remaining, settlement.currency)}
+              </CompactField>
+              {settlement.confirmed ? (
+                <p className="app-text-muted py-2 text-xs">
+                  Вся сумма уже отмечена выплаченной в закрытом периоде.
+                </p>
+              ) : null}
+            </div>
+          ) : manual && sourcePeriodId ? (
+            <p className="app-text-muted text-xs sm:col-span-2">
+              Период сохранится как основание. Для автоматического остатка долга
+              выберите сотрудника из списка.
+            </p>
+          ) : null}
+          <label className="sm:col-span-2">
+            <span className="app-field-label">Основание / комментарий</span>
+            <textarea
+              className={`${inputClass} min-h-20 resize-y`}
+              required
+              maxLength={1000}
+              value={note}
+              disabled={busy}
+              placeholder="Например: частичное погашение долга за сентябрь"
+              onChange={(event) => setNote(event.target.value)}
+            />
+          </label>
         </div>
-        <label className="block text-sm font-medium">
-          Погашение долга за период
-          <select
-            className="app-select mt-1 w-full rounded-lg px-3 py-2.5 text-sm"
-            value={sourcePeriodId}
-            disabled={busy}
-            onChange={(event) => setSourcePeriodId(event.target.value)}
-          >
-            <option value="">Без привязки к расчётному периоду</option>
-            {periods
-              .filter((period) => period.status === "closed")
-              .map((period) => (
-                <option key={period.id} value={period.id}>
-                  {period.name || period.code}
-                </option>
-              ))}
-          </select>
-        </label>
-        {settlementLoading ? (
-          <p className="app-text-muted text-sm">Проверяем остаток…</p>
-        ) : null}
-        {settlementError ? (
-          <p
-            className="app-feedback-danger rounded-lg p-3 text-sm"
-            role="alert"
-          >
-            {settlementError}
-          </p>
-        ) : null}
-        {settlement ? (
-          <div className="app-surface-muted rounded-lg p-3 text-sm">
-            <p>
-              По листку к выплате:{" "}
-              {formatPayrollMoney(
-                settlement.original_payable,
-                settlement.currency,
-              )}
-            </p>
-            <p>
-              Выдано через реестр:{" "}
-              {formatPayrollMoney(
-                settlement.paid_outside_period,
-                settlement.currency,
-              )}
-            </p>
-            <p className="mt-1 font-semibold">
-              Осталось выдать:{" "}
-              {formatPayrollMoney(settlement.remaining, settlement.currency)}
-            </p>
-            {settlement.confirmed ? (
-              <p className="app-text-muted mt-1">
-                Вся сумма уже отмечена выплаченной в закрытом периоде.
-              </p>
-            ) : null}
-          </div>
-        ) : manual && sourcePeriodId ? (
-          <p className="app-text-muted text-xs">
-            Период сохранится как основание. Для автоматического остатка долга
-            выберите сотрудника из списка.
-          </p>
-        ) : null}
-        <label className="block text-sm font-medium">
-          Основание / комментарий
-          <textarea
-            className={`${inputClass} mt-1`}
-            rows={2}
-            required
-            maxLength={1000}
-            value={note}
-            disabled={busy}
-            placeholder="Например: частичное погашение долга за сентябрь"
-            onChange={(event) => setNote(event.target.value)}
-          />
-        </label>
-        {error ? (
-          <p
-            className="app-feedback-danger rounded-lg p-3 text-sm"
-            role="alert"
-          >
-            {error}
-          </p>
-        ) : null}
-        <div className="flex justify-end gap-2">
-          <button
-            type="button"
-            className="app-action-secondary rounded-lg px-4 py-2.5 text-sm"
-            disabled={busy}
-            onClick={onClose}
-          >
-            Отмена
-          </button>
-          <button
-            type="submit"
-            className="app-action-primary inline-flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm disabled:opacity-50"
-            disabled={
-              busy ||
-              (!manual && !employee) ||
-              settlementLoading ||
-              Boolean(settlementError) ||
-              Boolean(settlement && Number(settlement.remaining) <= 0)
-            }
-          >
-            {busy ? (
-              <Loader2 size={16} className="animate-spin" />
-            ) : (
-              <Plus size={16} />
-            )}{" "}
-            Записать выплату
-          </button>
-        </div>
+        <FormError message={error} />
+        <ModalActions
+          busy={busy}
+          onClose={onClose}
+          submitLabel="Записать выплату"
+          disabled={
+            (!manual && !employee) ||
+            settlementLoading ||
+            Boolean(settlementError) ||
+            Boolean(settlement && Number(settlement.remaining) <= 0)
+          }
+        />
       </form>
     </Modal>
   );
 }
 
+function PaymentRecords({
+  payments,
+  canManage,
+  onVoid,
+}: {
+  payments: PayrollOffCyclePayment[];
+  canManage: boolean;
+  onVoid: (payment: PayrollOffCyclePayment) => void;
+}) {
+  const action = (payment: PayrollOffCyclePayment) =>
+    canManage && !payment.voided_at ? (
+      <ActionButton
+        label="Отменить запись"
+        icon={<RotateCcw size={13} />}
+        onClick={() => onVoid(payment)}
+      />
+    ) : null;
+  return (
+    <div className="payroll-admin-records-responsive">
+      <div className="payroll-admin-records-compact space-y-2">
+        {payments.map((payment) => (
+          <CompactRecordCard
+            key={payment.id}
+            title={payment.payee_name}
+            subtitle={`${formatPayrollDate(payment.paid_on)} · ${payment.source_period_name || "Без привязки к периоду"}`}
+            summary={
+              <span className={payment.voided_at ? "line-through" : ""}>
+                {formatPayrollMoney(payment.amount, payment.currency)}
+              </span>
+            }
+            status={payment.voided_at ? "voided" : "approved"}
+            statusContent={<PaymentStatus payment={payment} />}
+          >
+            <div className="divide-y divide-[var(--border-subtle)]">
+              <CompactField label="Получатель">
+                {payment.employee_id ? "Сотрудник из базы" : "Ручная запись"}
+              </CompactField>
+              {payment.settlement ? (
+                <CompactField label="Осталось выдать">
+                  {formatPayrollMoney(
+                    payment.settlement.remaining,
+                    payment.currency,
+                  )}
+                </CompactField>
+              ) : null}
+              <CompactField label="Основание">
+                <span className="whitespace-pre-wrap break-words">
+                  {payment.note}
+                </span>
+              </CompactField>
+              <CompactField label="Добавлено">
+                {formatPayrollDateTime(payment.created_at)}
+              </CompactField>
+              <CompactField label="Записал">
+                {payment.created_by.display_name}
+              </CompactField>
+              {payment.voided_at ? (
+                <CompactField label="Отменено">
+                  <span className="whitespace-pre-wrap break-words">
+                    {payment.void_reason} · {payment.voided_by?.display_name} ·{" "}
+                    {formatPayrollDateTime(payment.voided_at)}
+                  </span>
+                </CompactField>
+              ) : null}
+            </div>
+            {canManage && !payment.voided_at ? (
+              <div className="mt-3 flex justify-end border-t border-[var(--border-subtle)] pt-3">
+                {action(payment)}
+              </div>
+            ) : null}
+          </CompactRecordCard>
+        ))}
+      </div>
+      <div className="payroll-admin-records-table overflow-x-auto rounded-xl border border-[var(--border-subtle)]">
+        <table className="w-full min-w-[1060px] text-left text-sm">
+          <thead className="app-surface-muted border-b border-[var(--border-subtle)] text-xs font-medium text-[var(--muted-foreground)]">
+            <tr>
+              {[
+                "Получатель",
+                "Дата выдачи",
+                "Выдано",
+                "За период",
+                "Основание / история",
+                "Статус",
+                "Действия",
+              ].map((label) => (
+                <th
+                  key={label}
+                  className={`px-4 py-2.5 font-medium ${label === "Действия" ? "text-right" : ""}`}
+                >
+                  {label}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-[var(--border-subtle)]">
+            {payments.map((payment) => (
+              <tr key={payment.id} className="bg-[var(--surface-primary)]">
+                <td className="px-4 py-3">
+                  <p className="font-semibold text-[var(--foreground)]">
+                    {payment.payee_name}
+                  </p>
+                  <p className="app-text-muted mt-0.5 text-xs">
+                    {payment.employee_id
+                      ? "Сотрудник из базы"
+                      : "Ручная запись"}
+                  </p>
+                </td>
+                <td className="whitespace-nowrap px-4 py-3">
+                  {formatPayrollDate(payment.paid_on)}
+                </td>
+                <td
+                  className={`whitespace-nowrap px-4 py-3 font-medium ${payment.voided_at ? "app-text-muted line-through" : "text-[var(--foreground)]"}`}
+                >
+                  {formatPayrollMoney(payment.amount, payment.currency)}
+                </td>
+                <td className="px-4 py-3">
+                  <p>{payment.source_period_name || "Без привязки"}</p>
+                  {payment.settlement ? (
+                    <p className="app-text-muted mt-0.5 text-xs">
+                      Осталось:{" "}
+                      {formatPayrollMoney(
+                        payment.settlement.remaining,
+                        payment.currency,
+                      )}
+                    </p>
+                  ) : null}
+                </td>
+                <td className="max-w-sm px-4 py-3">
+                  <p className="whitespace-pre-wrap break-words">
+                    {payment.note}
+                  </p>
+                  <p className="app-text-muted mt-0.5 text-xs">
+                    {payment.created_by.display_name} ·{" "}
+                    {formatPayrollDateTime(payment.created_at)}
+                  </p>
+                  {payment.voided_at ? (
+                    <p className="app-text-muted mt-1 text-xs">
+                      Отменено: {payment.void_reason} ·{" "}
+                      {payment.voided_by?.display_name} ·{" "}
+                      {formatPayrollDateTime(payment.voided_at)}
+                    </p>
+                  ) : null}
+                </td>
+                <td className="min-w-[110px] whitespace-nowrap px-4 py-3">
+                  <PaymentStatus payment={payment} />
+                </td>
+                <td className="whitespace-nowrap px-4 py-3">
+                  <div className="flex justify-end">{action(payment)}</div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
 export function PayrollOffCyclePayments({
   employees,
   periods,
@@ -365,20 +503,21 @@ export function PayrollOffCyclePayments({
   const [dateTo, setDateTo] = useState(period?.date_to || "");
   const [search, setSearch] = useState("");
   const [includeVoided, setIncludeVoided] = useState(false);
+  const [filtersOpen, setFiltersOpen] = useState(false);
   const [page, setPage] = useState(1);
   const [data, setData] = useState<PayrollOffCyclePaymentPage | null>(null);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [version, setVersion] = useState(0);
   const [notice, setNotice] = useState<string | null>(null);
   const [formOpen, setFormOpen] = useState(false);
   const [voiding, setVoiding] = useState<PayrollOffCyclePayment | null>(null);
-  const [voidReason, setVoidReason] = useState("");
-  const [voidBusy, setVoidBusy] = useState(false);
   const currency = period?.currency || "RUB";
   const reload = useCallback(() => {
     setVersion((value) => value + 1);
   }, []);
+  const from = compact ? period?.date_from : dateFrom;
+  const to = compact ? period?.date_to : dateTo;
 
   useEffect(() => {
     let cancelled = false;
@@ -388,8 +527,8 @@ export function PayrollOffCyclePayments({
         setError(null);
         apiClient
           .getPayrollOffCyclePayments({
-            date_from: (compact ? period?.date_from : dateFrom) || undefined,
-            date_to: (compact ? period?.date_to : dateTo) || undefined,
+            date_from: from || undefined,
+            date_to: to || undefined,
             search: search || undefined,
             currency,
             include_voided: includeVoided,
@@ -417,26 +556,15 @@ export function PayrollOffCyclePayments({
       cancelled = true;
       clearTimeout(timer);
     };
-  }, [
-    compact,
-    currency,
-    dateFrom,
-    dateTo,
-    includeVoided,
-    page,
-    period?.date_from,
-    period?.date_to,
-    search,
-    version,
-  ]);
+  }, [currency, from, to, includeVoided, page, search, version]);
 
   const saved = (payment: PayrollOffCyclePayment) => {
     setFormOpen(false);
+    setPage(1);
+    setSearch("");
     setNotice(
       `Записана выплата: ${payment.payee_name} · ${formatPayrollMoney(payment.amount, payment.currency)} · ${formatPayrollDate(payment.paid_on)}. Учтена по дате выдачи.`,
     );
-    setPage(1);
-    setSearch("");
     if (
       !compact &&
       ((dateFrom && payment.paid_on < dateFrom) ||
@@ -448,24 +576,12 @@ export function PayrollOffCyclePayments({
     reload();
     onChanged?.();
   };
-  const cancelPayment = async (event: FormEvent) => {
-    event.preventDefault();
-    if (!voiding || voidBusy) return;
-    setVoidBusy(true);
-    setError(null);
-    try {
-      await apiClient.voidPayrollOffCyclePayment(voiding.id, voidReason.trim());
-      setNotice(
-        `Запись о выплате ${voiding.payee_name} на ${formatPayrollMoney(voiding.amount, voiding.currency)} отменена и исключена из итогов.`,
-      );
-      setVoiding(null);
-      reload();
-      onChanged?.();
-    } catch (voidError) {
-      setError(getPayrollAdminError(voidError, "Не удалось отменить выплату."));
-    } finally {
-      setVoidBusy(false);
-    }
+  const cancelPayment = async (reason: string) => {
+    if (!voiding) return;
+    await apiClient.voidPayrollOffCyclePayment(voiding.id, reason.trim());
+    setNotice(
+      `Запись о выплате ${voiding.payee_name} на ${formatPayrollMoney(voiding.amount, voiding.currency)} отменена и исключена из итогов.`,
+    );
   };
 
   return (
@@ -476,318 +592,191 @@ export function PayrollOffCyclePayments({
           : "app-surface rounded-2xl p-4 sm:p-5"
       }
     >
-      <div className="flex flex-wrap items-start justify-between gap-3">
-        <div>
-          <h2 className="text-base font-semibold">Выплаты вне периода</h2>
-          <p className="app-text-muted mt-1 text-sm">
-            Фактическая выдача, включая выплаты бывшим сотрудникам. Без новых
-            расчётных листков.
-          </p>
-          {compact && period ? (
-            <p className="app-text-muted mt-1 text-xs">
-              По дате выдачи: {formatPayrollDate(period.date_from)} —{" "}
-              {formatPayrollDate(period.date_to)}
-            </p>
-          ) : null}
-        </div>
-        <div className="flex gap-2">
-          <button
-            type="button"
-            className="app-action-secondary rounded-lg p-2.5"
-            onClick={reload}
-            disabled={loading}
-            aria-label="Обновить выплаты"
-          >
-            <RefreshCw size={16} className={loading ? "animate-spin" : ""} />
-          </button>
-          {canManage ? (
-            <button
-              type="button"
-              className="app-action-primary inline-flex items-center gap-2 rounded-lg px-3 py-2.5 text-sm"
-              onClick={() => setFormOpen(true)}
-            >
-              <Plus size={16} /> Добавить выплату
-            </button>
-          ) : null}
+      <div className="mb-4">
+        <div className="flex flex-wrap items-center gap-2">
+          <h2 className="text-base font-semibold text-[var(--foreground)]">
+            Выплаты вне периода
+          </h2>
+          <span className="app-status-pill app-badge">Без рассылки</span>
         </div>
+        <p className="app-text-muted mt-1 text-sm leading-relaxed">
+          Погашение долгов и разовые выдачи, в том числе бывшим сотрудникам.
+        </p>
       </div>
       {notice ? (
-        <p
-          className="app-feedback-success mt-3 rounded-lg p-3 text-sm"
+        <div
+          className="app-feedback-success mb-4 flex items-start justify-between gap-3 rounded-xl px-4 py-3 text-sm"
           role="status"
         >
-          {notice}
-        </p>
-      ) : null}
-      <div className="app-surface-muted mt-4 rounded-xl p-3 text-sm">
-        Выдано вне периода:{" "}
-        <strong>{formatPayrollMoney(data?.total_paid || "0", currency)}</strong>
-        <span className="app-text-muted ml-2">
-          за выбранный диапазон и фильтр
-        </span>
-      </div>
-      <div className="mt-4 flex flex-wrap items-end gap-3">
-        {!compact ? (
-          <>
-            <label className="text-xs">
-              Дата выдачи с
-              <input
-                type="date"
-                className={`${inputClass} mt-1`}
-                value={dateFrom}
-                onChange={(event) => {
-                  setDateFrom(event.target.value);
-                  setPage(1);
-                }}
-              />
-            </label>
-            <label className="text-xs">
-              по
-              <input
-                type="date"
-                className={`${inputClass} mt-1`}
-                value={dateTo}
-                onChange={(event) => {
-                  setDateTo(event.target.value);
-                  setPage(1);
-                }}
-              />
-            </label>
-            <button
-              className="app-action-secondary rounded-lg px-3 py-2.5 text-sm"
-              type="button"
-              onClick={() => {
-                setDateFrom("");
-                setDateTo("");
-                setPage(1);
-              }}
-            >
-              За всё время
-            </button>
-          </>
-        ) : null}
-        <label className="relative min-w-48 flex-1">
-          <span className="sr-only">Поиск выплат</span>
-          <Search size={15} className="app-text-muted absolute left-3 top-3" />
-          <input
-            className={`${inputClass} pl-9`}
-            value={search}
-            placeholder="Имя или основание"
-            onChange={(event) => {
-              setSearch(event.target.value);
-              setPage(1);
-            }}
-          />
-        </label>
-        <label className="flex items-center gap-2 py-2.5 text-xs">
-          <input
-            type="checkbox"
-            checked={includeVoided}
-            onChange={(event) => {
-              setIncludeVoided(event.target.checked);
-              setPage(1);
-            }}
-          />{" "}
-          Показать отменённые
-        </label>
-      </div>
-      {error ? (
-        <p
-          className="app-feedback-danger mt-3 rounded-lg p-3 text-sm"
-          role="alert"
-        >
-          {error}
-        </p>
-      ) : null}
-      {loading && !data ? (
-        <Loader2 className="app-accent-text mx-auto my-8 animate-spin" />
-      ) : (
-        <div className="mt-4 hidden overflow-x-auto sm:block">
-          <table className="w-full min-w-[720px] text-left text-sm">
-            <thead className="app-text-muted border-b border-[var(--border-subtle)] text-xs">
-              <tr>
-                {[
-                  "Дата выдачи",
-                  "Получатель",
-                  "За период",
-                  "Выдано",
-                  "Основание / история",
-                  "",
-                ].map((label) => (
-                  <th className="px-3 py-2" key={label}>
-                    {label}
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {data?.results.map((payment) => (
-                <tr
-                  key={payment.id}
-                  className={`border-b border-[var(--border-subtle)] ${payment.voided_at ? "opacity-60" : ""}`}
-                >
-                  <td className="whitespace-nowrap px-3 py-3">
-                    {formatPayrollDate(payment.paid_on)}
-                  </td>
-                  <td className="px-3 py-3 font-medium">
-                    {payment.payee_name}
-                    <p className="app-text-muted text-xs">
-                      {payment.employee_id
-                        ? "Связан с сотрудником"
-                        : "Ручная запись"}
-                    </p>
-                  </td>
-                  <td className="px-3 py-3">
-                    {payment.source_period_name || "Без привязки"}
-                    {payment.settlement ? (
-                      <p className="app-text-muted mt-1 text-xs">
-                        Осталось:{" "}
-                        {formatPayrollMoney(
-                          payment.settlement.remaining,
-                          payment.currency,
-                        )}
-                      </p>
-                    ) : null}
-                  </td>
-                  <td
-                    className={`whitespace-nowrap px-3 py-3 font-semibold ${payment.voided_at ? "line-through" : ""}`}
-                  >
-                    {formatPayrollMoney(payment.amount, payment.currency)}
-                  </td>
-                  <td className="max-w-sm px-3 py-3">
-                    <p className="whitespace-pre-wrap break-words">
-                      {payment.note}
-                    </p>
-                    <p className="app-text-muted mt-1 text-xs">
-                      Записал: {payment.created_by.display_name} ·{" "}
-                      {formatPayrollDate(payment.created_at)}
-                    </p>
-                    {payment.voided_at ? (
-                      <p className="app-text-muted mt-1 text-xs">
-                        Отменено: {payment.void_reason} ·{" "}
-                        {payment.voided_by?.display_name} ·{" "}
-                        {formatPayrollDate(payment.voided_at)}
-                      </p>
-                    ) : null}
-                  </td>
-                  <td className="px-3 py-3">
-                    {canManage && !payment.voided_at ? (
-                      <button
-                        type="button"
-                        className="app-action-ghost rounded-lg px-2 py-1 text-xs"
-                        onClick={() => {
-                          setVoiding(payment);
-                          setVoidReason("");
-                          setError(null);
-                        }}
-                      >
-                        Отменить запись
-                      </button>
-                    ) : null}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-            <tfoot>
-              <tr>
-                <td colSpan={3} className="px-3 py-3 font-semibold">
-                  Итого по всем найденным действующим выплатам
-                </td>
-                <td className="whitespace-nowrap px-3 py-3 font-semibold">
-                  {formatPayrollMoney(data?.total_paid || "0", currency)}
-                </td>
-                <td colSpan={2} />
-              </tr>
-            </tfoot>
-          </table>
-          {!data?.results.length ? (
-            <p className="app-text-muted py-5 text-center text-sm">
-              Выплат по выбранным условиям пока нет.
-            </p>
-          ) : null}
-        </div>
-      )}
-      {!loading || data ? (
-        <div className="mt-4 space-y-3 sm:hidden">
-          {data?.results.map((payment) => (
-            <article
-              key={payment.id}
-              className={`app-surface-muted rounded-xl p-3 ${payment.voided_at ? "opacity-60" : ""}`}
-            >
-              <div className="flex items-start justify-between gap-3">
-                <h3 className="min-w-0 break-words text-sm font-semibold">
-                  {payment.payee_name}
-                </h3>
-                <span
-                  className={`shrink-0 text-sm font-semibold ${payment.voided_at ? "line-through" : ""}`}
-                >
-                  {formatPayrollMoney(payment.amount, payment.currency)}
-                </span>
-              </div>
-              <p className="app-text-muted mt-1 text-xs">
-                {formatPayrollDate(payment.paid_on)} ·{" "}
-                {payment.source_period_name || "Без привязки к периоду"}
-              </p>
-              {payment.settlement ? (
-                <p className="mt-2 text-xs font-medium">
-                  Осталось выдать:{" "}
-                  {formatPayrollMoney(
-                    payment.settlement.remaining,
-                    payment.currency,
-                  )}
-                </p>
-              ) : null}
-              <p className="mt-2 whitespace-pre-wrap break-words text-sm">
-                {payment.note}
-              </p>
-              <p className="app-text-muted mt-2 text-xs">
-                Записал: {payment.created_by.display_name} ·{" "}
-                {formatPayrollDate(payment.created_at)}
-              </p>
-              {payment.voided_at ? (
-                <p className="app-text-muted mt-2 text-xs">
-                  Отменено: {payment.void_reason} ·{" "}
-                  {payment.voided_by?.display_name} ·{" "}
-                  {formatPayrollDate(payment.voided_at)}
-                </p>
-              ) : canManage ? (
-                <button
-                  type="button"
-                  className="app-action-secondary mt-3 rounded-lg px-3 py-2 text-xs"
-                  onClick={() => {
-                    setVoiding(payment);
-                    setVoidReason("");
-                    setError(null);
-                  }}
-                >
-                  Отменить запись
-                </button>
-              ) : null}
-            </article>
-          ))}
-          {!data?.results.length ? (
-            <p className="app-text-muted py-5 text-center text-sm">
-              Выплат по выбранным условиям пока нет.
-            </p>
-          ) : null}
-        </div>
-      ) : null}
-      {data && data.count > data.page_size ? (
-        <div className="mt-3 flex items-center justify-end gap-3 text-sm">
+          <span>{notice}</span>
           <button
             type="button"
-            className="app-action-secondary rounded-lg px-3 py-2 disabled:opacity-50"
+            aria-label="Скрыть сообщение"
+            onClick={() => setNotice(null)}
+          >
+            ×
+          </button>
+        </div>
+      ) : null}
+      <div className="payroll-admin-toolbar-responsive mb-4">
+        <div className="payroll-admin-toolbar-layout">
+          <div className="payroll-admin-toolbar-main flex min-w-0 items-center gap-2">
+            <label className="payroll-admin-toolbar-search relative min-w-0">
+              <span className="sr-only">Поиск выплат</span>
+              <Search
+                className="app-text-muted pointer-events-none absolute left-3 top-1/2 -translate-y-1/2"
+                size={15}
+              />
+              <input
+                className="app-input w-full rounded-lg py-2.5 pl-9 pr-3 text-sm"
+                value={search}
+                placeholder="Поиск по получателю или основанию"
+                onChange={(event) => {
+                  setSearch(event.target.value);
+                  setPage(1);
+                }}
+              />
+            </label>
+            <CompactFilterMenu
+              open={filtersOpen}
+              onToggle={() => setFiltersOpen((open) => !open)}
+              activeCount={
+                Number(!compact && Boolean(from || to)) + Number(includeVoided)
+              }
+              ariaLabel="Фильтры выплат"
+              width={280}
+            >
+              <div className="flex flex-col gap-3">
+                {!compact ? (
+                  <div className="grid gap-3">
+                    <label>
+                      <span className="app-field-label">Дата выдачи с</span>
+                      <input
+                        type="date"
+                        className={inputClass}
+                        value={dateFrom}
+                        onChange={(event) => {
+                          setDateFrom(event.target.value);
+                          setPage(1);
+                        }}
+                      />
+                    </label>
+                    <label>
+                      <span className="app-field-label">Дата выдачи по</span>
+                      <input
+                        type="date"
+                        className={inputClass}
+                        value={dateTo}
+                        onChange={(event) => {
+                          setDateTo(event.target.value);
+                          setPage(1);
+                        }}
+                      />
+                    </label>
+                  </div>
+                ) : null}
+                <div>
+                  <span className="app-field-label">Статус</span>
+                  <ProjectSelectMenu
+                    value={includeVoided ? "all" : "active"}
+                    options={[
+                      { value: "active", label: "Действующие выплаты" },
+                      { value: "all", label: "Все, включая отменённые" },
+                    ]}
+                    ariaLabel="Статус выплат"
+                    onChange={(value) => {
+                      setIncludeVoided(value === "all");
+                      setPage(1);
+                    }}
+                  />
+                </div>
+                {!compact ? (
+                  <button
+                    type="button"
+                    className="app-action-secondary rounded-lg px-3 py-2 text-sm font-medium"
+                    onClick={() => {
+                      setDateFrom("");
+                      setDateTo("");
+                      setPage(1);
+                    }}
+                  >
+                    За всё время
+                  </button>
+                ) : null}
+              </div>
+            </CompactFilterMenu>
+            <button
+              type="button"
+              onClick={reload}
+              disabled={loading}
+              aria-label="Обновить выплаты"
+              title="Обновить выплаты"
+              className="app-surface-muted app-text-muted inline-flex h-[42px] w-[42px] shrink-0 items-center justify-center rounded-lg transition hover:bg-[var(--surface-tertiary)] disabled:opacity-50"
+            >
+              <RefreshCw size={16} className={loading ? "animate-spin" : ""} />
+            </button>
+          </div>
+          {canManage ? (
+            <div className="payroll-admin-toolbar-actions flex min-w-0 items-center gap-1">
+              <ModulePrimaryAction
+                className="flex-1"
+                onClick={() => setFormOpen(true)}
+                icon={<Plus size={16} />}
+                label="Добавить выплату"
+              />
+            </div>
+          ) : null}
+        </div>
+      </div>
+      <div className="mb-4 flex flex-wrap items-center gap-2">
+        <span className="app-chip inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs">
+          Записей{" "}
+          <span className="app-counter inline-flex h-5 min-w-5 px-1 text-[10px]">
+            {data?.count || 0}
+          </span>
+        </span>
+        <span className="app-chip inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs">
+          Выдано{" "}
+          <span className="font-semibold">
+            {formatPayrollMoney(data?.total_paid || "0", currency)}
+          </span>
+        </span>
+        <span className="app-text-muted text-xs">
+          {from || to
+            ? `${from ? formatPayrollDate(from) : "Начало учёта"} — ${to ? formatPayrollDate(to) : "сегодня"}`
+            : "За всё время"}{" "}
+          · по дате выдачи
+        </span>
+      </div>
+      {loading || error || !data?.results.length ? (
+        <ListState
+          loading={loading}
+          error={error}
+          empty={!data?.results.length}
+        />
+      ) : (
+        <PaymentRecords
+          payments={data.results}
+          canManage={canManage}
+          onVoid={setVoiding}
+        />
+      )}
+      {data && data.count > data.page_size ? (
+        <div className="mt-4 flex items-center justify-end gap-3 text-xs">
+          <button
+            type="button"
+            className="app-action-secondary rounded-lg px-3 py-2 font-medium disabled:opacity-50"
             disabled={page <= 1 || loading}
             onClick={() => setPage(page - 1)}
           >
             Назад
           </button>
-          <span>
+          <span className="app-text-muted">
             {page} / {Math.ceil(data.count / data.page_size)}
           </span>
           <button
             type="button"
-            className="app-action-secondary rounded-lg px-3 py-2 disabled:opacity-50"
+            className="app-action-secondary rounded-lg px-3 py-2 font-medium disabled:opacity-50"
             disabled={page * data.page_size >= data.count || loading}
             onClick={() => setPage(page + 1)}
           >
@@ -805,48 +794,21 @@ export function PayrollOffCyclePayments({
         />
       ) : null}
       {voiding ? (
-        <Modal
+        <PayrollConfirmModal
           isOpen
           title="Отменить запись о выплате"
-          onClose={() => {
-            if (!voidBusy) setVoiding(null);
+          description={`${voiding.payee_name} · ${formatPayrollMoney(voiding.amount, voiding.currency)}. Запись сохранится в истории и перестанет учитываться в итогах.`}
+          confirmLabel="Отменить запись"
+          reasonLabel="Причина отмены"
+          reasonRequired
+          onClose={() => setVoiding(null)}
+          onConfirm={cancelPayment}
+          onDone={() => {
+            setVoiding(null);
+            reload();
+            onChanged?.();
           }}
-          size="sm"
-        >
-          <form className="space-y-4" onSubmit={cancelPayment}>
-            <p className="text-sm">
-              {voiding.payee_name} ·{" "}
-              {formatPayrollMoney(voiding.amount, voiding.currency)}. Запись
-              сохранится в истории и перестанет учитываться в итогах.
-            </p>
-            <label className="block text-sm">
-              Причина отмены
-              <textarea
-                className={`${inputClass} mt-1`}
-                required
-                maxLength={1000}
-                value={voidReason}
-                disabled={voidBusy}
-                onChange={(event) => setVoidReason(event.target.value)}
-              />
-            </label>
-            {error ? (
-              <p
-                role="alert"
-                className="app-feedback-danger rounded-lg p-3 text-sm"
-              >
-                {error}
-              </p>
-            ) : null}
-            <button
-              type="submit"
-              disabled={voidBusy}
-              className="app-action-primary rounded-lg px-4 py-2.5 text-sm disabled:opacity-50"
-            >
-              {voidBusy ? "Отменяем…" : "Отменить запись"}
-            </button>
-          </form>
-        </Modal>
+        />
       ) : null}
     </section>
   );