Initial commit: thbd-portal, duplicated from elmi-portal

Rebranded for Thunderbird Portal (THBD): numbering prefix EL->TH, all
"ELMI"/"ЭЛМИ" UI strings genericized, ELMI's real contract templates and
company legal/bank details removed (not applicable to this company), fresh
VAPID keypair and encryption key, fresh single-migration schema history.
Same architecture as elmi-portal: Web Push notifications, unread-chat app
badge, cookie-session auth.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Gh2UXUQUVBWroWEnn1FLFG

src/app/(admin)/settings/counterparties/[id]/contacts-list.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Plus, Trash2, Pencil, Check, X } from "lucide-react";
+
+interface Contact {
+  id: string;
+  name: string;
+  position: string | null;
+  phone: string | null;
+  email: string | null;
+  notes: string | null;
+}
+
+interface FormState {
+  name: string;
+  position: string;
+  phone: string;
+  email: string;
+  notes: string;
+}
+
+function emptyForm(): FormState {
+  return { name: "", position: "", phone: "", email: "", notes: "" };
+}
+
+export function ContactsList({ counterpartyId, initialContacts }: { counterpartyId: string; initialContacts: Contact[] }) {
+  const router = useRouter();
+  const [contacts, setContacts] = useState(initialContacts);
+  const [form, setForm] = useState<FormState>(emptyForm());
+  const [showForm, setShowForm] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editForm, setEditForm] = useState<FormState>(emptyForm());
+  const [saving, setSaving] = useState(false);
+
+  async function refresh() {
+    const res = await fetch(`/api/counterparties/${counterpartyId}/contacts`);
+    if (res.ok) setContacts(await res.json());
+  }
+
+  async function handleCreate(e: React.FormEvent) {
+    e.preventDefault();
+    if (!form.name) return;
+    setSaving(true);
+    await fetch(`/api/counterparties/${counterpartyId}/contacts`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(form),
+    });
+    setForm(emptyForm());
+    setShowForm(false);
+    await refresh();
+    setSaving(false);
+    router.refresh();
+  }
+
+  function startEdit(c: Contact) {
+    setEditingId(c.id);
+    setEditForm({ name: c.name, position: c.position ?? "", phone: c.phone ?? "", email: c.email ?? "", notes: c.notes ?? "" });
+  }
+
+  async function saveEdit(id: string) {
+    setSaving(true);
+    await fetch(`/api/counterparties/${counterpartyId}/contacts/${id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(editForm),
+    });
+    setEditingId(null);
+    await refresh();
+    setSaving(false);
+    router.refresh();
+  }
+
+  async function handleDelete(id: string) {
+    if (!confirm("Удалить контакт?")) return;
+    await fetch(`/api/counterparties/${counterpartyId}/contacts/${id}`, { method: "DELETE" });
+    await refresh();
+    router.refresh();
+  }
+
+  return (
+    <div className="card p-4">
+      <div className="mb-3 flex items-center justify-between">
+        <h2 className="text-sm font-semibold text-text-muted">Дополнительные контактные лица</h2>
+        <button onClick={() => setShowForm((v) => !v)} className="btn btn-ghost">
+          <Plus size={14} />
+          Добавить
+        </button>
+      </div>
+
+      {showForm && (
+        <form onSubmit={handleCreate} className="mb-3 flex flex-wrap items-end gap-3 rounded-md border border-border p-3">
+          <label className="text-sm">
+            <span className="mb-1 block font-medium text-text-muted">Имя</span>
+            <input
+              required
+              value={form.name}
+              onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
+              className="rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+            />
+          </label>
+          <label className="text-sm">
+            <span className="mb-1 block font-medium text-text-muted">Должность</span>
+            <input
+              value={form.position}
+              onChange={(e) => setForm((f) => ({ ...f, position: e.target.value }))}
+              className="rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+            />
+          </label>
+          <label className="text-sm">
+            <span className="mb-1 block font-medium text-text-muted">Телефон</span>
+            <input
+              value={form.phone}
+              onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))}
+              className="rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+            />
+          </label>
+          <label className="text-sm">
+            <span className="mb-1 block font-medium text-text-muted">Email</span>
+            <input
+              type="email"
+              value={form.email}
+              onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
+              className="rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+            />
+          </label>
+          <button type="submit" disabled={saving} className="btn btn-primary">
+            Сохранить
+          </button>
+        </form>
+      )}
+
+      <div className="flex flex-col gap-2">
+        {contacts.map((c) =>
+          editingId === c.id ? (
+            <div key={c.id} className="flex flex-wrap items-end gap-3 rounded-md border border-border bg-surface-hover p-3">
+              <input
+                value={editForm.name}
+                onChange={(e) => setEditForm((f) => ({ ...f, name: e.target.value }))}
+                placeholder="Имя"
+                className="rounded-md border border-border bg-surface px-2 py-1.5 text-sm"
+              />
+              <input
+                value={editForm.position}
+                onChange={(e) => setEditForm((f) => ({ ...f, position: e.target.value }))}
+                placeholder="Должность"
+                className="rounded-md border border-border bg-surface px-2 py-1.5 text-sm"
+              />
+              <input
+                value={editForm.phone}
+                onChange={(e) => setEditForm((f) => ({ ...f, phone: e.target.value }))}
+                placeholder="Телефон"
+                className="rounded-md border border-border bg-surface px-2 py-1.5 text-sm"
+              />
+              <input
+                value={editForm.email}
+                onChange={(e) => setEditForm((f) => ({ ...f, email: e.target.value }))}
+                placeholder="Email"
+                className="rounded-md border border-border bg-surface px-2 py-1.5 text-sm"
+              />
+              <div className="flex gap-1">
+                <button onClick={() => saveEdit(c.id)} disabled={saving} className="btn btn-ghost px-2 text-success">
+                  <Check size={14} />
+                </button>
+                <button onClick={() => setEditingId(null)} className="btn btn-ghost px-2">
+                  <X size={14} />
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div key={c.id} className="flex flex-wrap items-center justify-between gap-2 rounded-md border border-border px-3 py-2 text-sm">
+              <div>
+                <span className="font-medium">{c.name}</span>
+                {c.position && <span className="text-text-muted"> · {c.position}</span>}
+                <div className="text-xs text-text-faint">{[c.phone, c.email].filter(Boolean).join(" · ") || "—"}</div>
+              </div>
+              <div className="flex gap-1">
+                <button onClick={() => startEdit(c)} className="btn btn-ghost px-2">
+                  <Pencil size={13} />
+                </button>
+                <button onClick={() => handleDelete(c.id)} className="btn btn-ghost px-2 text-danger">
+                  <Trash2 size={13} />
+                </button>
+              </div>
+            </div>
+          ),
+        )}
+        {contacts.length === 0 && <p className="text-sm text-text-faint">Пока нет дополнительных контактов.</p>}
+      </div>
+    </div>
+  );
+}

src/app/(admin)/settings/counterparties/[id]/edit-form.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import type { InferSelectModel } from "drizzle-orm";
+import type { counterparties } from "@/lib/db/schema";
+
+type Counterparty = InferSelectModel<typeof counterparties>;
+
+function toDateInputValue(date: Date | null): string {
+  if (!date) return "";
+  const d = new Date(date);
+  const yyyy = d.getFullYear();
+  const mm = String(d.getMonth() + 1).padStart(2, "0");
+  const dd = String(d.getDate()).padStart(2, "0");
+  return `${yyyy}-${mm}-${dd}`;
+}
+
+const TEXT_FIELDS: { key: keyof Counterparty; label: string; span?: 1 | 2 }[] = [
+  { key: "name", label: "Название", span: 2 },
+  { key: "inn", label: "ИНН" },
+  { key: "kpp", label: "КПП" },
+  { key: "ogrn", label: "ОГРН" },
+  { key: "legalAddress", label: "Юридический адрес", span: 2 },
+  { key: "postalAddress", label: "Почтовый адрес (если отличается)", span: 2 },
+  { key: "bankName", label: "Банк", span: 2 },
+  { key: "bankAccount", label: "Расчётный счёт" },
+  { key: "bankBik", label: "БИК" },
+  { key: "bankCorrAccount", label: "Корр. счёт" },
+  { key: "signatoryName", label: "Подписант (ФИО, именительный падеж)", span: 2 },
+  { key: "signatoryPosition", label: "Должность подписанта" },
+  { key: "signatoryBasis", label: "Основание полномочий" },
+  { key: "contactName", label: "Контактное лицо" },
+  { key: "contactPhone", label: "Телефон" },
+  { key: "contactEmail", label: "Email" },
+  { key: "notes", label: "Заметки", span: 2 },
+];
+
+export function CounterpartyEditForm({ counterparty }: { counterparty: Counterparty }) {
+  const router = useRouter();
+  const [values, setValues] = useState<Record<string, string>>(() => {
+    const v: Record<string, string> = {};
+    for (const f of TEXT_FIELDS) v[f.key as string] = (counterparty[f.key] as string) ?? "";
+    return v;
+  });
+  const [kind, setKind] = useState(counterparty.kind);
+  const [edoType, setEdoType] = useState(counterparty.edoType);
+  const [contractDate, setContractDate] = useState(toDateInputValue(counterparty.contractDate));
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [saved, setSaved] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setSaved(false);
+
+    const res = await fetch(`/api/counterparties/${counterparty.id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        ...values,
+        kind,
+        edoType,
+        contractDate: contractDate || undefined,
+      }),
+    });
+
+    setLoading(false);
+    if (!res.ok) {
+      const data = await res.json().catch(() => null);
+      setError(data?.error ?? "Не удалось сохранить");
+      return;
+    }
+    setSaved(true);
+    router.refresh();
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="card grid grid-cols-1 gap-3 p-4 sm:grid-cols-2">
+      <label className="block text-sm">
+        <span className="mb-1 block font-medium text-text-muted">Тип</span>
+        <select
+          value={kind}
+          onChange={(e) => setKind(e.target.value as Counterparty["kind"])}
+          className="w-full rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+        >
+          <option value="client">Клиент</option>
+          <option value="carrier">Перевозчик</option>
+          <option value="both">Клиент и перевозчик</option>
+        </select>
+      </label>
+
+      <label className="block text-sm">
+        <span className="mb-1 block font-medium text-text-muted">ЭДО</span>
+        <select
+          value={edoType}
+          onChange={(e) => setEdoType(e.target.value as Counterparty["edoType"])}
+          className="w-full rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+        >
+          <option value="email">Почта</option>
+          <option value="diadoc">Диадок</option>
+          <option value="sbis">СБИС</option>
+          <option value="none">Нет</option>
+        </select>
+      </label>
+
+      {TEXT_FIELDS.map((f) => (
+        <label key={f.key as string} className={`text-sm ${f.span === 2 ? "sm:col-span-2" : ""}`}>
+          <span className="mb-1 block font-medium text-text-muted">{f.label}</span>
+          <input
+            required={f.key === "name"}
+            value={values[f.key as string]}
+            onChange={(e) => setValues((v) => ({ ...v, [f.key as string]: e.target.value }))}
+            className="w-full rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+          />
+        </label>
+      ))}
+
+      <div className="grid grid-cols-2 gap-3 text-sm sm:col-span-2">
+        <label className="block">
+          <span className="mb-1 block font-medium text-text-muted">Договор №</span>
+          <input
+            value={values.contractNumber}
+            onChange={(e) => setValues((v) => ({ ...v, contractNumber: e.target.value }))}
+            className="w-full rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+          />
+        </label>
+        <label className="block">
+          <span className="mb-1 block font-medium text-text-muted">Дата договора</span>
+          <input
+            type="date"
+            value={contractDate}
+            onChange={(e) => setContractDate(e.target.value)}
+            className="w-full rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+          />
+        </label>
+      </div>
+
+      {error && <p className="rounded-md bg-danger-soft px-3 py-2 text-sm text-danger-soft-text sm:col-span-2">{error}</p>}
+
+      <div className="flex items-center gap-3 sm:col-span-2">
+        <button type="submit" disabled={loading} className="btn btn-primary">
+          {loading ? "Сохраняем…" : "Сохранить"}
+        </button>
+        {saved && <span className="text-sm text-text-muted">Сохранено</span>}
+      </div>
+    </form>
+  );
+}

src/app/(admin)/settings/counterparties/[id]/page.tsx

@@ -0,0 +1,31 @@
+import { notFound, redirect } from "next/navigation";
+import { getCurrentSession } from "@/lib/auth/session";
+import { getCounterparty } from "@/lib/counterparties/service";
+import { CounterpartyEditForm } from "./edit-form";
+import { ContactsList } from "./contacts-list";
+
+export default async function CounterpartyEditPage({ params }: { params: Promise<{ id: string }> }) {
+  const session = await getCurrentSession();
+  if (!session) {
+    redirect("/orders");
+  }
+
+  const { id } = await params;
+  const row = await getCounterparty(id);
+  if (!row) notFound();
+
+  return (
+    <div>
+      <div className="mb-5">
+        <h1 className="font-display text-xl font-bold tracking-tight">{row.name}</h1>
+        <p className="text-sm text-text-muted">Реквизиты контрагента для генерации документов</p>
+      </div>
+
+      <CounterpartyEditForm counterparty={row} />
+
+      <div className="mt-4">
+        <ContactsList counterpartyId={row.id} initialContacts={row.contacts} />
+      </div>
+    </div>
+  );
+}

src/app/(admin)/settings/counterparties/counterparties-table.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+
+interface Row {
+  id: string;
+  name: string;
+  kind: "client" | "carrier" | "both";
+  inn: string | null;
+  contractNumber: string | null;
+  contactName: string | null;
+  contactPhone: string | null;
+  edoType: "none" | "email" | "diadoc" | "sbis";
+}
+
+const KIND_LABEL: Record<Row["kind"], string> = {
+  client: "Клиент",
+  carrier: "Перевозчик",
+  both: "Клиент и перевозчик",
+};
+
+const EDO_LABEL: Record<Row["edoType"], string> = {
+  none: "Нет",
+  email: "Почта",
+  diadoc: "Диадок",
+  sbis: "СБИС",
+};
+
+type Tab = "all" | "client" | "carrier";
+
+const TABS: { key: Tab; label: string }[] = [
+  { key: "all", label: "Все" },
+  { key: "client", label: "Клиенты" },
+  { key: "carrier", label: "Исполнители" },
+];
+
+export function CounterpartiesTable({ rows }: { rows: Row[] }) {
+  const [tab, setTab] = useState<Tab>("all");
+
+  const visible = rows.filter((r) => {
+    if (tab === "all") return true;
+    if (tab === "client") return r.kind === "client" || r.kind === "both";
+    return r.kind === "carrier" || r.kind === "both";
+  });
+
+  return (
+    <div>
+      <div className="mb-3 flex gap-1">
+        {TABS.map((t) => (
+          <button
+            key={t.key}
+            onClick={() => setTab(t.key)}
+            className={`rounded-md px-3 py-1.5 text-sm font-medium ${
+              tab === t.key ? "bg-accent-soft text-accent-soft-text" : "text-text-muted hover:bg-surface-hover"
+            }`}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="card overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-border text-left text-text-muted">
+              <th className="px-4 py-3 font-medium">Название</th>
+              <th className="px-4 py-3 font-medium">Тип</th>
+              <th className="px-4 py-3 font-medium">ИНН</th>
+              <th className="px-4 py-3 font-medium">Договор</th>
+              <th className="px-4 py-3 font-medium">Контакт</th>
+              <th className="px-4 py-3 font-medium">ЭДО</th>
+            </tr>
+          </thead>
+          <tbody>
+            {visible.map((c) => (
+              <tr key={c.id} className="border-b border-border last:border-0 hover:bg-surface-hover">
+                <td className="px-4 py-3 font-medium">
+                  <Link href={`/settings/counterparties/${c.id}`} className="hover:text-accent hover:underline">
+                    {c.name}
+                  </Link>
+                </td>
+                <td className="px-4 py-3 text-text-muted">{KIND_LABEL[c.kind]}</td>
+                <td className="px-4 py-3 text-text-muted">{c.inn || "—"}</td>
+                <td className="px-4 py-3 text-text-muted">{c.contractNumber || "—"}</td>
+                <td className="px-4 py-3 text-text-muted">
+                  {c.contactName || "—"}
+                  {c.contactPhone ? `, ${c.contactPhone}` : ""}
+                </td>
+                <td className="px-4 py-3 text-text-muted">{EDO_LABEL[c.edoType]}</td>
+              </tr>
+            ))}
+            {visible.length === 0 && (
+              <tr>
+                <td colSpan={6} className="px-4 py-8 text-center text-text-faint">
+                  {tab === "all" ? "Пока нет контрагентов." : "Нет контрагентов в этой категории."}
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

src/app/(admin)/settings/counterparties/new-counterparty-modal.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { AnimatePresence, motion } from "framer-motion";
+import { X } from "lucide-react";
+
+export function NewCounterpartyModal({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const router = useRouter();
+  const [name, setName] = useState("");
+  const [kind, setKind] = useState<"client" | "carrier" | "both">("client");
+  const [inn, setInn] = useState("");
+  const [contractNumber, setContractNumber] = useState("");
+  const [contractDate, setContractDate] = useState("");
+  const [postalAddress, setPostalAddress] = useState("");
+  const [contactName, setContactName] = useState("");
+  const [contactPhone, setContactPhone] = useState("");
+  const [contactEmail, setContactEmail] = useState("");
+  const [edoType, setEdoType] = useState<"none" | "diadoc" | "sbis" | "email">("email");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  function reset() {
+    setName("");
+    setKind("client");
+    setInn("");
+    setContractNumber("");
+    setContractDate("");
+    setPostalAddress("");
+    setContactName("");
+    setContactPhone("");
+    setContactEmail("");
+    setEdoType("email");
+    setError(null);
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    const res = await fetch("/api/counterparties", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        name,
+        kind,
+        inn,
+        contractNumber,
+        contractDate: contractDate || undefined,
+        postalAddress,
+        contactName,
+        contactPhone,
+        contactEmail,
+        edoType,
+      }),
+    });
+
+    setLoading(false);
+    if (!res.ok) {
+      const data = await res.json().catch(() => null);
+      setError(data?.error ?? "Не удалось создать контрагента");
+      return;
+    }
+
+    reset();
+    onClose();
+    router.refresh();
+  }
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          onClick={onClose}
+        >
+          <motion.form
+            onClick={(e) => e.stopPropagation()}
+            onSubmit={handleSubmit}
+            initial={{ opacity: 0, y: 12, scale: 0.98 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 12, scale: 0.98 }}
+            transition={{ duration: 0.2, ease: "easeOut" }}
+            className="card w-full max-w-md p-5"
+          >
+            <div className="mb-4 flex items-center justify-between">
+              <h2 className="text-base font-semibold">Новый контрагент</h2>
+              <button type="button" onClick={onClose} className="text-text-muted hover:text-text">
+                <X size={18} />
+              </button>
+            </div>
+
+            <label className="mb-3 block text-sm">
+              <span className="mb-1 block font-medium text-text-muted">Название</span>
+              <input
+                required
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="w-full rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+              />
+            </label>
+
+            <div className="mb-3 grid grid-cols-2 gap-3">
+              <label className="block text-sm">
+                <span className="mb-1 block font-medium text-text-muted">Тип</span>
+                <select
+                  value={kind}
+                  onChange={(e) => setKind(e.target.value as typeof kind)}
+                  className="w-full rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+                >
+                  <option value="client">Клиент</option>
+                  <option value="carrier">Перевозчик</option>
+                  <option value="both">Клиент и перевозчик</option>
+                </select>
+              </label>
+              <label className="block text-sm">
+                <span className="mb-1 block font-medium text-text-muted">ИНН</span>
+                <input
+                  value={inn}
+                  onChange={(e) => setInn(e.target.value)}
+                  className="w-full rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+                />
+              </label>
+            </div>
+
+            <div className="mb-3 grid grid-cols-2 gap-3">
+              <label className="block text-sm">
+                <span className="mb-1 block font-medium text-text-muted">Договор №</span>
+                <input
+                  value={contractNumber}
+                  onChange={(e) => setContractNumber(e.target.value)}
+                  className="w-full rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+                />
+              </label>
+              <label className="block text-sm">
+                <span className="mb-1 block font-medium text-text-muted">Дата договора</span>
+                <input
+                  type="date"
+                  value={contractDate}
+                  onChange={(e) => setContractDate(e.target.value)}
+                  className="w-full rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+                />
+              </label>
+            </div>
+
+            <label className="mb-3 block text-sm">
+              <span className="mb-1 block font-medium text-text-muted">Почтовый адрес (если отличается от юридического)</span>
+              <input
+                value={postalAddress}
+                onChange={(e) => setPostalAddress(e.target.value)}
+                className="w-full rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+              />
+            </label>
+
+            <div className="mb-3 grid grid-cols-2 gap-3">
+              <label className="block text-sm">
+                <span className="mb-1 block font-medium text-text-muted">Контактное лицо</span>
+                <input
+                  value={contactName}
+                  onChange={(e) => setContactName(e.target.value)}
+                  className="w-full rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+                />
+              </label>
+              <label className="block text-sm">
+                <span className="mb-1 block font-medium text-text-muted">Телефон</span>
+                <input
+                  value={contactPhone}
+                  onChange={(e) => setContactPhone(e.target.value)}
+                  className="w-full rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+                />
+              </label>
+            </div>
+
+            <div className="mb-4 grid grid-cols-2 gap-3">
+              <label className="block text-sm">
+                <span className="mb-1 block font-medium text-text-muted">Email</span>
+                <input
+                  type="email"
+                  value={contactEmail}
+                  onChange={(e) => setContactEmail(e.target.value)}
+                  className="w-full rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+                />
+              </label>
+              <label className="block text-sm">
+                <span className="mb-1 block font-medium text-text-muted">ЭДО</span>
+                <select
+                  value={edoType}
+                  onChange={(e) => setEdoType(e.target.value as typeof edoType)}
+                  className="w-full rounded-md border border-border bg-surface px-3 py-2 outline-none focus:border-accent"
+                >
+                  <option value="email">Почта</option>
+                  <option value="diadoc">Диадок</option>
+                  <option value="sbis">СБИС</option>
+                  <option value="none">Нет</option>
+                </select>
+              </label>
+            </div>
+
+            {error && <p className="mb-3 rounded-md bg-danger-soft px-3 py-2 text-sm text-danger-soft-text">{error}</p>}
+
+            <button type="submit" disabled={loading} className="btn btn-primary w-full justify-center">
+              {loading ? "Создаём…" : "Создать"}
+            </button>
+          </motion.form>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

src/app/(admin)/settings/counterparties/page.tsx

@@ -0,0 +1,25 @@
+import { redirect } from "next/navigation";
+import { getCurrentSession } from "@/lib/auth/session";
+import { listCounterparties } from "@/lib/counterparties/service";
+import { CounterpartiesToolbar } from "./toolbar";
+import { CounterpartiesTable } from "./counterparties-table";
+
+export default async function CounterpartiesPage() {
+  const session = await getCurrentSession();
+  if (!session) {
+    redirect("/orders");
+  }
+
+  const rows = await listCounterparties();
+
+  return (
+    <div>
+      <div className="mb-5 flex items-center justify-between">
+        <h1 className="font-display text-xl font-bold tracking-tight">Контрагенты</h1>
+        <CounterpartiesToolbar />
+      </div>
+
+      <CounterpartiesTable rows={rows} />
+    </div>
+  );
+}

src/app/(admin)/settings/counterparties/toolbar.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { NewCounterpartyModal } from "./new-counterparty-modal";
+
+export function CounterpartiesToolbar() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button className="btn btn-primary" onClick={() => setOpen(true)}>
+        <Plus size={16} />
+        Новый контрагент
+      </button>
+      <NewCounterpartyModal open={open} onClose={() => setOpen(false)} />
+    </>
+  );
+}