Initial commit: TopSysOps site + admin panel

Multi-page public site (Next.js), Node/Express backend with Postgres,
and Vite admin/account app, restructured from a single-page layout
into dedicated service, promotions, cases, about, FAQ, and blog pages
for SEO.

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

admin-app/src/admin/CustomersManager.jsx

@@ -0,0 +1,134 @@
+import { useEffect, useState } from 'react';
+import { Send, Users } from 'lucide-react';
+import { api } from '../lib/api.js';
+
+function cx(...args) {
+  return args.filter(Boolean).join(' ');
+}
+
+export default function CustomersManager() {
+  const [customers, setCustomers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedId, setSelectedId] = useState(null);
+  const [thread, setThread] = useState([]);
+  const [threadLoading, setThreadLoading] = useState(false);
+  const [reply, setReply] = useState('');
+  const [sending, setSending] = useState(false);
+
+  async function loadCustomers() {
+    setLoading(true);
+    setCustomers(await api.adminGetCustomers());
+    setLoading(false);
+  }
+
+  useEffect(() => {
+    loadCustomers();
+  }, []);
+
+  async function openCustomer(id) {
+    setSelectedId(id);
+    setThreadLoading(true);
+    setThread(await api.adminGetCustomerMessages(id));
+    setThreadLoading(false);
+  }
+
+  async function sendReply(e) {
+    e.preventDefault();
+    const text = reply.trim();
+    if (!text || sending || !selectedId) return;
+    setSending(true);
+    try {
+      const msg = await api.adminSendCustomerMessage(selectedId, text);
+      setThread((t) => [...t, msg]);
+      setReply('');
+      loadCustomers();
+    } finally {
+      setSending(false);
+    }
+  }
+
+  const selected = customers.find((c) => c.id === selectedId);
+
+  if (loading) return <p className="text-sm text-slate-400">Загружаем клиентов...</p>;
+
+  return (
+    <div>
+      <h1 className="font-bold mb-1 font-display text-lg flex items-center gap-2">
+        <Users className="h-5 w-5 text-emerald-500" /> Клиенты
+      </h1>
+      <p className="text-xs text-slate-400 dark:text-slate-500 mb-5">
+        Переписка из личных кабинетов зарегистрированных клиентов.
+      </p>
+
+      <div className="grid md:grid-cols-[260px_1fr] gap-5">
+        <div className="space-y-2">
+          {customers.length === 0 && <p className="text-sm text-slate-400">Пока нет зарегистрированных клиентов.</p>}
+          {customers.map((c) => (
+            <button
+              key={c.id}
+              onClick={() => openCustomer(c.id)}
+              className={cx(
+                'w-full text-left rounded-lg border p-3 transition-colors bg-white dark:bg-slate-900',
+                selectedId === c.id
+                  ? 'border-emerald-500'
+                  : 'border-slate-200 dark:border-slate-800 hover:border-slate-300 dark:hover:border-slate-700'
+              )}
+            >
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-sm font-medium truncate">{c.name}</span>
+                {c.last_message_sender === 'customer' && (
+                  <span className="text-xs px-1.5 py-0.5 rounded-full bg-amber-500 text-white flex-shrink-0">ждёт ответа</span>
+                )}
+              </div>
+              <div className="text-xs text-slate-400 dark:text-slate-500 truncate">{c.email}</div>
+              {c.last_message_body && (
+                <div className="text-xs text-slate-500 dark:text-slate-400 truncate mt-1">{c.last_message_body}</div>
+              )}
+            </button>
+          ))}
+        </div>
+
+        <div>
+          {!selectedId && <p className="text-sm text-slate-400">Выберите клиента слева, чтобы увидеть переписку.</p>}
+          {selectedId && (
+            <div className="flex flex-col h-[70vh]">
+              <h2 className="text-sm font-medium mb-3">
+                {selected?.name} <span className="text-slate-400 font-normal">· {selected?.email}</span>
+              </h2>
+              <div className="flex-1 overflow-y-auto rounded-lg border p-4 space-y-3 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800 mb-3">
+                {threadLoading && <p className="text-sm text-slate-400">Загружаем переписку...</p>}
+                {!threadLoading && thread.length === 0 && <p className="text-sm text-slate-400">Сообщений пока нет.</p>}
+                {thread.map((m) => (
+                  <div
+                    key={m.id}
+                    className={cx(
+                      'max-w-[85%] rounded-lg px-3 py-2 text-sm whitespace-pre-wrap',
+                      m.sender === 'staff' ? 'ml-auto bg-emerald-500 text-white' : 'bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-100'
+                    )}
+                  >
+                    {m.body}
+                  </div>
+                ))}
+              </div>
+              <form onSubmit={sendReply} className="flex gap-2">
+                <input
+                  value={reply}
+                  onChange={(e) => setReply(e.target.value)}
+                  placeholder="Ответить клиенту..."
+                  className="flex-1 rounded-md border px-3 py-2 text-sm bg-transparent border-slate-300 dark:border-slate-700"
+                />
+                <button
+                  type="submit"
+                  disabled={sending}
+                  className="px-4 py-2 rounded-md bg-emerald-500 text-white text-sm font-medium hover:bg-emerald-600 disabled:opacity-50 inline-flex items-center gap-1"
+                >
+                  <Send className="h-4 w-4" />
+                </button>
+              </form>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}