feat: UserManagementPanel — themed dropdown, inline edit name/email/role

src/components/admin/UserManagementPanel.jsx

@@ -1,9 +1,7 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { Panel } from '../UI/Panel';
 import { Badge } from '../UI/Badge';
 import { Input } from '../UI/Input';
-import { Select } from '../UI/Select';
-
 
 import { supabase } from '../../supabaseClient';
 
@@ -25,17 +23,56 @@ const ROLE_TONES = {
   driver: 'accent',
 };
 
-const useIsMobile = () => {
-  const [mobile, setMobile] = useState(false);
+/* ── Custom dropdown (matches app design system) ── */
+function RoleDropdown({ value, onChange, onClose }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
   useEffect(() => {
-    const mq = window.matchMedia('(max-width: 640px)');
-    setMobile(mq.matches);
-    const handler = (e) => setMobile(e.matches);
-    mq.addEventListener('change', handler);
-    return () => mq.removeEventListener('change', handler);
-  }, []);
-  return mobile;
-};
+    if (!open) return;
+    const onDown = (e) => { if (ref.current && !ref.current.contains(e.target)) { setOpen(false); onClose?.(); } };
+    const onKey = (e) => { if (e.key === 'Escape') { setOpen(false); onClose?.(); } };
+    document.addEventListener('pointerdown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => { document.removeEventListener('pointerdown', onDown); document.removeEventListener('keydown', onKey); };
+  }, [open, onClose]);
+
+  const pick = (role) => { onChange(role); setOpen(false); };
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="flex h-[38px] items-center gap-1 rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] px-3 text-sm transition hover:border-[var(--color-accent)]"
+      >
+        <Badge tone={ROLE_TONES[value] || 'neutral'}>{ROLE_LABELS[value] || value}</Badge>
+        <span className="ml-1 text-[var(--color-text-muted)] text-xs">▾</span>
+      </button>
+      {open && (
+        <div className="absolute left-0 right-0 top-full z-30 mt-2 overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-dropdown-surface)] shadow-soft min-w-[180px]">
+          {ROLES.map((r) => {
+            const sel = r === value;
+            return (
+              <button
+                key={r}
+                type="button"
+                onClick={() => pick(r)}
+                className={[
+                  'flex w-full items-center justify-between px-4 py-3 text-left text-sm transition',
+                  sel ? 'bg-[var(--color-accent-soft)] text-[var(--color-text)]' : 'text-[var(--color-text)] hover:bg-[var(--color-surface-strong)]',
+                ].join(' ')}
+              >
+                <span>{ROLE_LABELS[r]}</span>
+                {sel && <span className="text-[var(--color-accent)]">✓</span>}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
 
 export default function UserManagementPanel() {
   const [users, setUsers] = useState([]);
@@ -43,15 +80,13 @@ export default function UserManagementPanel() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [showAddForm, setShowAddForm] = useState(false);
-  const [editingRoleId, setEditingRoleId] = useState(null);
+  const [editingId, setEditingId] = useState(null);
+  const [editForm, setEditForm] = useState({ name: '', email: '', role: '' });
+  const [saving, setSaving] = useState(false);
   const [deleteConfirmId, setDeleteConfirmId] = useState(null);
   const [addForm, setAddForm] = useState({ name: '', email: '', role: '' });
   const [addSubmitting, setAddSubmitting] = useState(false);
   const [addError, setAddError] = useState(null);
-  const mobile = useIsMobile();
-
-  
-  
 
   const fetchRoles = useCallback(async () => {
     const { data, error: err } = await supabase.from('roles').select('id, name').order('name');
@@ -79,25 +114,18 @@ export default function UserManagementPanel() {
     const match = roles.find((r) => r.id === user.role_id);
     return match ? match.name : 'unknown';
   };
-
   const getRoleId = (roleName) => {
     const match = roles.find((r) => r.name === roleName);
     return match ? match.id : null;
   };
 
+  /* ── Add ── */
   const handleAddUser = async (e) => {
     e.preventDefault();
     setAddError(null);
-    if (!addForm.name || !addForm.email || !addForm.role) {
-      setAddError('Все поля обязательны.');
-      return;
-    }
+    if (!addForm.name || !addForm.email || !addForm.role) { setAddError('Все поля обязательны.'); return; }
     setAddSubmitting(true);
     try {
-      if (!supabase) {
-        setAddError('Требуется VITE_SUPABASE_SERVICE_ROLE_KEY для управления пользователями.');
-        return;
-      }
       const roleId = getRoleId(addForm.role);
       const { data: authData, error: authErr } = await supabase.auth.admin.createUser({
         email: addForm.email,
@@ -114,67 +142,56 @@ export default function UserManagementPanel() {
       setAddForm({ name: '', email: '', role: '' });
     } catch (err) {
       setAddError(err.message || 'Не удалось добавить пользователя.');
-    } finally {
-      setAddSubmitting(false);
-    }
+    } finally { setAddSubmitting(false); }
   };
 
-  const handleRoleChange = async (userId, newRoleName) => {
-    const roleId = getRoleId(newRoleName);
-    if (!roleId) return;
+  /* ── Edit ── */
+  const startEdit = (user) => {
+    setEditingId(user.id);
+    setEditForm({ name: user.name || '', email: user.email || '', role: getRoleName(user) });
+    setDeleteConfirmId(null);
+  };
+  const cancelEdit = () => { setEditingId(null); setEditForm({ name: '', email: '', role: '' }); };
+  const saveEdit = async () => {
+    setSaving(true);
     try {
+      const roleId = getRoleId(editForm.role);
       const { error: err } = await supabase
         .from('users')
-        .update({ role_id: roleId })
-        .eq('id', userId);
+        .update({ name: editForm.name, email: editForm.email, role_id: roleId })
+        .eq('id', editingId);
       if (err) throw err;
-      setEditingRoleId(null);
+      setEditingId(null);
       await fetchUsers();
-    } catch (err) {
-      setError(err.message || 'Не удалось обновить роль.');
-    }
+    } catch (err) { setError(err.message || 'Не удалось сохранить.'); }
+    finally { setSaving(false); }
   };
 
+  /* ── Delete ── */
   const handleDeleteUser = async (userId) => {
     try {
       const { error: err } = await supabase.from('users').delete().eq('id', userId);
       if (err) throw err;
-      if (supabase) await supabase.auth.admin.deleteUser(userId);
+      try { await supabase.auth.admin.deleteUser(userId); } catch {}
       setDeleteConfirmId(null);
       await fetchUsers();
-    } catch (err) {
-      setError(err.message || 'Не удалось удалить пользователя.');
-    }
+    } catch (err) { setError(err.message || 'Не удалось удалить.'); }
   };
 
   const fmtDate = (iso) => iso ? new Date(iso).toLocaleString('ru-RU') : '—';
 
-  // Mobile: horizontal scroll for table
-  const mobileTableStyle = mobile ? {
-    overflowX: 'auto',
-    WebkitOverflowScrolling: 'touch',
-    msOverflowStyle: '-ms-autohiding-scrollbar',
-  } : {};
+  if (loading) {
+    return <Panel className="p-5"><div className="text-center py-8 text-[var(--color-text-muted)]">Загрузка…</div></Panel>;
+  }
 
   return (
     <Panel>
       {/* Toolbar */}
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem', flexWrap: 'wrap', gap: '0.5rem' }}>
-        <span style={{ color: 'var(--color-text-muted, #94a3b8)', fontSize: '0.9rem' }}>
-          {users.length} пользователей
-        </span>
+      <div className="flex items-center justify-between gap-2 flex-wrap mb-4">
+        <span className="text-sm text-[var(--color-text-muted)]">{users.length} пользователей</span>
         <button
           onClick={() => { setShowAddForm(!showAddForm); setAddError(null); }}
-          style={{
-            background: 'var(--color-accent, #22c55e)',
-            color: '#fff',
-            border: 'none',
-            borderRadius: '9999px',
-            padding: '0.5rem 1rem',
-            cursor: 'pointer',
-            fontWeight: 600,
-            fontSize: '0.85rem',
-          }}
+          className="rounded-full bg-[var(--color-accent)] px-4 py-2 text-sm font-semibold text-white hover:opacity-90 transition"
         >
           {showAddForm ? 'Отмена' : '+ Добавить'}
         </button>
@@ -182,16 +199,8 @@ export default function UserManagementPanel() {
 
       {/* Add form */}
       {showAddForm && (
-        <form onSubmit={handleAddUser} style={{
-          background: 'var(--color-surface-strong, #1e293b)',
-          borderRadius: '16px',
-          padding: '1rem',
-          marginBottom: '1rem',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '0.75rem',
-        }}>
-          <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
+        <form onSubmit={handleAddUser} className="mb-4 rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface-strong)] p-4 space-y-3">
+          <div className="flex flex-wrap gap-3">
             <Input
               placeholder="Имя"
               value={addForm.name}
@@ -205,139 +214,115 @@ export default function UserManagementPanel() {
               onChange={(e) => setAddForm((f) => ({ ...f, email: e.target.value }))}
               className="flex-1 min-w-[180px]!"
             />
-            <Select
-              value={addForm.role}
-              onChange={(e) => setAddForm((f) => ({ ...f, role: e.target.value }))}
-              className="min-w-[140px]!"
-            >
-              <option value="">Выберите роль…</option>
-              {ROLES.map((r) => <option key={r} value={r}>{ROLE_LABELS[r] || r}</option>)}
-            </Select>
+            <RoleDropdown
+              value={addForm.role || 'manager'}
+              onChange={(r) => setAddForm((f) => ({ ...f, role: r }))}
+            />
+          </div>
+          {addError && <div className="text-sm text-[var(--color-danger)]">{addError}</div>}
+          <div className="flex justify-end">
+            <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>
           </div>
-          {addError && (
-            <div style={{ color: 'var(--color-danger, #ef4444)', fontSize: '0.85rem' }}>{addError}</div>
-          )}
-          <button
-            type="submit"
-            disabled={addSubmitting}
-            style={{
-              alignSelf: 'flex-end',
-              background: addSubmitting ? 'var(--color-text-muted, #94a3b8)' : 'var(--color-accent, #22c55e)',
-              color: '#fff',
-              border: 'none',
-              borderRadius: '9999px',
-              padding: '0.5rem 1.25rem',
-              cursor: addSubmitting ? 'wait' : 'pointer',
-              fontWeight: 600,
-              fontSize: '0.85rem',
-            }}
-          >
-            {addSubmitting ? 'Добавление…' : 'Добавить'}
-          </button>
         </form>
       )}
 
       {/* Error */}
       {error && (
-        <div style={{
-          background: 'rgba(201,61,61,0.12)',
-          color: 'var(--color-danger, #ef4444)',
-          borderRadius: '12px',
-          padding: '0.75rem 1rem',
-          marginBottom: '1rem',
-          fontSize: '0.9rem',
-        }}>
+        <div className="mb-4 rounded-xl bg-[rgba(201,61,61,0.12)] px-4 py-3 text-sm text-[var(--color-danger)]">
           {error}
         </div>
       )}
 
-      {loading ? (
-        <div style={{ textAlign: 'center', padding: '2rem', color: 'var(--color-text-muted, #94a3b8)' }}>
-          Загрузка&
-        </div>
-      ) : (
-        <div style={mobileTableStyle}>
-          <div style={{ minWidth: mobile ? '600px' : 'auto' }}>
-            {/* Header */}
-            <div style={{
-              display: 'grid',
-              gridTemplateColumns: '2fr 1.5fr 1.2fr 1fr auto',
-              gap: '0.5rem',
-              padding: '0.5rem 0.75rem',
-              fontSize: '0.8rem',
-              color: 'var(--color-text-muted, #94a3b8)',
-              borderBottom: '1px solid var(--color-border, #334155)',
-            }}>
-              <span>Email</span><span>Имя</span><span>Роль</span><span>Создан</span><span></span>
-            </div>
+      {/* User list */}
+      <div className="space-y-2">
+        {users.length === 0 && (
+          <div className="py-8 text-center text-[var(--color-text-muted)]">Нет пользователей</div>
+        )}
+        {users.map((user) => {
+          const rn = getRoleName(user);
+          const isEditing = editingId === user.id;
 
-            {users.length === 0 && (
-              <div style={{ textAlign: 'center', padding: '2rem', color: 'var(--color-text-muted, #94a3b8)' }}>
-                Нет пользователей
-              </div>
-            )}
-
-            {users.map((user) => {
-              const rn = getRoleName(user);
-              return (
-                <div
-                  key={user.id}
-                  style={{
-                    display: 'grid',
-                    gridTemplateColumns: '2fr 1.5fr 1.2fr 1fr auto',
-                    gap: '0.5rem',
-                    alignItems: 'center',
-                    padding: '0.6rem 0.75rem',
-                    borderBottom: '1px solid var(--color-border, #334155)',
-                    fontSize: '0.9rem',
-                  }}
-                >
-                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{user.email}</span>
-                  <span style={{ fontWeight: 500 }}>{user.name || '—'}</span>
-
-                  {editingRoleId === user.id ? (
-                    <Select
-                      value={rn}
-                      onChange={(e) => handleRoleChange(user.id, e.target.value)}
-                      onBlur={() => setEditingRoleId(null)}
-                      autoFocus
-                      className="text-xs! py-1!"
-                    >
-                      {ROLES.map((r) => <option key={r} value={r}>{ROLE_LABELS[r] || r}</option>)}
-                    </Select>
-                  ) : (
-                    <span onClick={() => setEditingRoleId(user.id)} style={{ cursor: 'pointer' }}>
-                      <Badge tone={ROLE_TONES[rn] || 'neutral'}>{ROLE_LABELS[rn] || rn}</Badge>
-                    </span>
-                  )}
-
-                  <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted, #94a3b8)' }}>{fmtDate(user.created_at)}</span>
-
-                  <div style={{ display: 'flex', gap: '0.4rem' }}>
-                    {deleteConfirmId === user.id ? (
-                      <>
-                        <button onClick={() => handleDeleteUser(user.id)} style={{
-                          background: 'var(--color-danger, #ef4444)', color: '#fff', border: 'none',
-                          borderRadius: '8px', padding: '0.25rem 0.5rem', cursor: 'pointer', fontSize: '0.8rem',
-                        }}>Да</button>
-                        <button onClick={() => setDeleteConfirmId(null)} style={{
-                          background: 'transparent', color: 'var(--color-text-muted, #94a3b8)', border: '1px solid var(--color-border, #334155)',
-                          borderRadius: '8px', padding: '0.25rem 0.5rem', cursor: 'pointer', fontSize: '0.8rem',
-                        }}>Нет</button>
-                      </>
-                    ) : (
-                      <button onClick={() => setDeleteConfirmId(user.id)} style={{
-                        background: 'transparent', color: 'var(--color-danger, #ef4444)', border: '1px solid var(--color-danger, #ef4444)',
-                        borderRadius: '8px', padding: '0.25rem 0.5rem', cursor: 'pointer', fontSize: '0.8rem',
-                      }}>Удалить</button>
-                    )}
-                  </div>
+          if (isEditing) {
+            return (
+              <div
+                key={user.id}
+                className="rounded-[22px] border border-[var(--color-accent)] bg-[var(--color-surface-strong)] p-4 space-y-3"
+              >
+                <div className="flex flex-wrap gap-3">
+                  <Input
+                    placeholder="Имя"
+                    value={editForm.name}
+                    onChange={(e) => setEditForm((f) => ({ ...f, name: e.target.value }))}
+                    className="flex-1 min-w-[140px]!"
+                  />
+                  <Input
+                    placeholder="Email"
+                    type="email"
+                    value={editForm.email}
+                    onChange={(e) => setEditForm((f) => ({ ...f, email: e.target.value }))}
+                    className="flex-1 min-w-[180px]!"
+                  />
+                  <RoleDropdown
+                    value={editForm.role}
+                    onChange={(r) => setEditForm((f) => ({ ...f, role: r }))}
+                    onClose={undefined}
+                  />
                 </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
+                <div className="flex gap-2 justify-end">
+                  <button
+                    onClick={cancelEdit}
+                    className="rounded-lg border border-[var(--color-border)] px-3 py-1.5 text-sm text-[var(--color-text-muted)] hover:bg-[var(--color-surface)] transition"
+                  >Отмена</button>
+                  <button
+                    onClick={saveEdit}
+                    disabled={saving}
+                    className="rounded-full bg-[var(--color-accent)] px-4 py-1.5 text-sm font-semibold text-white hover:opacity-90 transition disabled:opacity-50"
+                  >{saving ? 'Сохранение…' : 'Сохранить'}</button>
+                </div>
+              </div>
+            );
+          }
+
+          return (
+            <div
+              key={user.id}
+              className="flex flex-wrap items-center justify-between gap-3 rounded-[22px] border border-[var(--color-border)] bg-[var(--color-surface-strong)] p-4"
+            >
+              <div className="min-w-0">
+                <div className="font-medium truncate">{user.name || '—'}</div>
+                <div className="text-sm text-[var(--color-text-muted)] truncate">{user.email}</div>
+                <div className="text-sm text-[var(--color-text-muted)]">{fmtDate(user.created_at)}</div>
+              </div>
+              <div className="flex items-center gap-3 flex-wrap">
+                <Badge tone={ROLE_TONES[rn] || 'neutral'}>{ROLE_LABELS[rn] || rn}</Badge>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => startEdit(user)}
+                    className="rounded-lg border border-[var(--color-accent)] px-3 py-1.5 text-xs font-semibold text-[var(--color-accent)] hover:bg-[var(--color-accent-soft)] transition"
+                  >Изменить</button>
+                  {deleteConfirmId === user.id ? (
+                    <>
+                      <button onClick={() => handleDeleteUser(user.id)} className="rounded-lg bg-[var(--color-danger)] px-3 py-1.5 text-xs font-semibold text-white transition">Да</button>
+                      <button onClick={() => setDeleteConfirmId(null)} className="rounded-lg border border-[var(--color-border)] px-3 py-1.5 text-xs text-[var(--color-text-muted)] transition">Нет</button>
+                    </>
+                  ) : (
+                    <button
+                      onClick={() => setDeleteConfirmId(user.id)}
+                      className="rounded-lg border border-[var(--color-danger)] px-3 py-1.5 text-xs font-semibold text-[var(--color-danger)] hover:bg-[rgba(201,61,61,0.08)] transition"
+                    >Удалить</button>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
     </Panel>
   );
 }