From e04485c446c1544b29a3f8db4f35369bb668edf3 Mon Sep 17 00:00:00 2001
From: root <root@cgvcpusuzr.local>
Date: Wed, 27 May 2026 11:53:54 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20add-user=20modal=20dialog=20=E2=80=94?=
 =?UTF-8?q?=20compact,=20centered,=20backdrop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/admin/UserManagementPanel.jsx | 66 ++++++++++++--------
 1 file changed, 40 insertions(+), 26 deletions(-)

diff --git a/src/components/admin/UserManagementPanel.jsx b/src/components/admin/UserManagementPanel.jsx
index ae9486f..98fc6bf 100644
--- a/src/components/admin/UserManagementPanel.jsx
+++ b/src/components/admin/UserManagementPanel.jsx
@@ -206,33 +206,47 @@ export default function UserManagementPanel() {
         </button>
       </div>
 
-      {/* Add form */}
+      {/* Add user modal */}
       {showAddForm && (
-        <form onSubmit={handleAddUser} className="mb-4 rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface-strong)] p-4 space-y-3">
-          <Input
-            placeholder="Имя"
-            value={addForm.name}
-            onChange={(e) => setAddForm((f) => ({ ...f, name: e.target.value }))}
-          />
-          <Input
-            placeholder="Email"
-            type="email"
-            value={addForm.email}
-            onChange={(e) => setAddForm((f) => ({ ...f, email: e.target.value }))}
-          />
-          <RoleDropdown
-            value={addForm.role || 'manager'}
-            onChange={(r) => setAddForm((f) => ({ ...f, role: r }))}
-          />
-          {addError && <div className="text-sm text-[var(--color-danger)]">{addError}</div>}
-          <button
-            type="submit"
-            disabled={addSubmitting}
-            className="rounded-full bg-[var(--color-accent)] px-5 py-2 text-sm font-semibold text-white hover:opacity-90 transition disabled:opacity-50"
-          >
-            {addSubmitting ? 'Добавление…' : 'Добавить'}
-          </button>
-        </form>
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" onClick={() => { setShowAddForm(false); setAddError(null); }}>
+          <div className="w-[340px] rounded-[28px] border border-[var(--color-border)] bg-[var(--color-surface)] p-6 shadow-soft" onClick={(e) => e.stopPropagation()}>
+            <h3 className="mb-4 text-base font-semibold">Новый пользователь</h3>
+            <form onSubmit={handleAddUser} className="space-y-3">
+              <Input
+                placeholder="Имя"
+                value={addForm.name}
+                onChange={(e) => setAddForm((f) => ({ ...f, name: e.target.value }))}
+              />
+              <Input
+                placeholder="Email"
+                type="email"
+                value={addForm.email}
+                onChange={(e) => setAddForm((f) => ({ ...f, email: e.target.value }))}
+              />
+              <RoleDropdown
+                value={addForm.role || 'manager'}
+                onChange={(r) => setAddForm((f) => ({ ...f, role: r }))}
+              />
+              {addError && <div className="text-sm text-[var(--color-danger)]">{addError}</div>}
+              <div className="flex justify-end gap-2 pt-1">
+                <button
+                  type="button"
+                  onClick={() => { setShowAddForm(false); setAddError(null); }}
+                  className="rounded-full border border-[var(--color-border)] px-4 py-2 text-sm font-semibold text-[var(--color-text-muted)] hover:bg-[var(--color-surface-strong)] transition"
+                >
+                  Отмена
+                </button>
+                <button
+                  type="submit"
+                  disabled={addSubmitting}
+                  className="rounded-full bg-[var(--color-accent)] px-4 py-2 text-sm font-semibold text-white hover:opacity-90 transition disabled:opacity-50"
+                >
+                  {addSubmitting ? 'Добавление…' : 'Добавить'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
       )}
 
       {/* Error */}