v_1

frontend/src/pages/Admin.jsx

@@ -0,0 +1,267 @@
+import React, { useState, useEffect } from 'react'
+import api from '../api.js'
+import { useAuth } from '../AuthContext.jsx'
+import { Plus, Trash2, Edit2, X, Check, Users, Shield, User, KeyRound } from 'lucide-react'
+
+function UserModal({ user, onClose, onSave }) {
+  const [form, setForm] = useState({
+    username: user?.username || '',
+    password: '',
+    role: user?.role || 'user',
+  })
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    try {
+      if (user) {
+        const payload = { role: form.role }
+        if (form.username !== user.username) payload.username = form.username
+        if (form.password) payload.password = form.password
+        const { data } = await api.put(`/users/${user.id}`, payload)
+        onSave(data, 'edit')
+      } else {
+        if (!form.password) return setError('Password is required')
+        const { data } = await api.post('/users', form)
+        onSave(data, 'add')
+      }
+      onClose()
+    } catch (err) {
+      setError(err.response?.data?.error || 'Failed to save user')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70">
+      <div className="bg-slate-900 rounded-2xl border border-slate-800 w-full max-w-md shadow-2xl">
+        <div className="flex items-center justify-between p-6 border-b border-slate-800">
+          <h3 className="text-lg font-bold text-white">{user ? 'Edit User' : 'New User'}</h3>
+          <button onClick={onClose} className="text-slate-400 hover:text-white"><X size={20} /></button>
+        </div>
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          {error && <div className="bg-red-500/10 border border-red-500/30 text-red-400 text-sm rounded-xl px-4 py-3">{error}</div>}
+          <div>
+            <label className="block text-sm font-medium text-slate-400 mb-1.5">Username</label>
+            <input
+              type="text"
+              value={form.username}
+              onChange={e => setForm({ ...form, username: e.target.value })}
+              required
+              className="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition"
+              placeholder="Username"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-400 mb-1.5">
+              {user ? 'New Password (leave blank to keep current)' : 'Password'}
+            </label>
+            <input
+              type="password"
+              value={form.password}
+              onChange={e => setForm({ ...form, password: e.target.value })}
+              required={!user}
+              className="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition"
+              placeholder={user ? '••••••••' : 'Min. 6 characters'}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-400 mb-1.5">Role</label>
+            <div className="grid grid-cols-2 gap-3">
+              {['user', 'admin'].map(role => (
+                <button
+                  type="button"
+                  key={role}
+                  onClick={() => setForm({ ...form, role })}
+                  className={`py-3 rounded-xl border text-sm font-semibold flex items-center justify-center gap-2 transition ${
+                    form.role === role
+                      ? role === 'admin' ? 'border-amber-500 bg-amber-500/10 text-amber-400' : 'border-indigo-500 bg-indigo-500/10 text-indigo-400'
+                      : 'border-slate-700 text-slate-400 hover:border-slate-600'
+                  }`}
+                >
+                  {role === 'admin' ? <Shield size={16} /> : <User size={16} />}
+                  {role.charAt(0).toUpperCase() + role.slice(1)}
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="flex gap-3 pt-2">
+            <button type="button" onClick={onClose} className="flex-1 py-2.5 rounded-xl border border-slate-700 text-slate-400 hover:text-white transition text-sm font-medium">Cancel</button>
+            <button type="submit" disabled={loading} className="flex-1 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold disabled:opacity-50 transition">
+              {loading ? 'Saving...' : 'Save User'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export default function Admin() {
+  const { user: currentUser } = useAuth()
+  const [users, setUsers] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [modal, setModal] = useState(null)
+  const [deleteConfirm, setDeleteConfirm] = useState(null)
+  const [toast, setToast] = useState('')
+
+  useEffect(() => {
+    api.get('/users').then(({ data }) => { setUsers(data); setLoading(false) }).catch(() => setLoading(false))
+  }, [])
+
+  const showToast = (msg) => { setToast(msg); setTimeout(() => setToast(''), 3000) }
+
+  const handleSave = (data, type) => {
+    if (type === 'add') setUsers(prev => [data, ...prev])
+    else setUsers(prev => prev.map(u => u.id === data.id ? data : u))
+    showToast(type === 'add' ? 'User created' : 'User updated')
+  }
+
+  const handleDelete = async (id) => {
+    try {
+      await api.delete(`/users/${id}`)
+      setUsers(prev => prev.filter(u => u.id !== id))
+      setDeleteConfirm(null)
+      showToast('User deleted')
+    } catch (err) {
+      showToast(err.response?.data?.error || 'Failed to delete')
+    }
+  }
+
+  const adminCount = users.filter(u => u.role === 'admin').length
+  const userCount = users.filter(u => u.role === 'user').length
+
+  return (
+    <div>
+      {toast && (
+        <div className="fixed top-4 right-4 z-50 bg-green-500/20 border border-green-500/40 text-green-300 px-4 py-3 rounded-xl shadow-xl text-sm font-medium flex items-center gap-2">
+          <Check size={16} />{toast}
+        </div>
+      )}
+
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-2xl font-bold text-white">Admin Panel</h2>
+          <p className="text-slate-400 text-sm mt-1">Manage user accounts and permissions</p>
+        </div>
+        <button
+          onClick={() => setModal('add')}
+          className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2.5 rounded-xl text-sm font-semibold transition shadow-lg shadow-indigo-900/40"
+        >
+          <Plus size={16} />Add User
+        </button>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-3 gap-4 mb-6">
+        {[
+          { label: 'Total Users', value: users.length, icon: Users, color: 'indigo' },
+          { label: 'Admins', value: adminCount, icon: Shield, color: 'amber' },
+          { label: 'Regular Users', value: userCount, icon: User, color: 'blue' },
+        ].map(({ label, value, icon: Icon, color }) => (
+          <div key={label} className="bg-slate-900 rounded-xl border border-slate-800 p-4 flex items-center gap-4">
+            <div className={`w-10 h-10 rounded-xl flex items-center justify-center bg-${color}-500/20`}>
+              <Icon size={20} className={`text-${color}-400`} />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-white">{value}</p>
+              <p className="text-xs text-slate-400">{label}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Users table */}
+      <div className="bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden">
+        {loading ? (
+          <div className="p-12 text-center text-slate-500">Loading...</div>
+        ) : (
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-slate-800">
+                <th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Username</th>
+                <th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Role</th>
+                <th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">MFA</th>
+                <th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Status</th>
+                <th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Created</th>
+                <th className="text-right px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.map(u => (
+                <tr key={u.id} className="border-b border-slate-800/50 hover:bg-slate-800/30 transition">
+                  <td className="px-4 py-3.5">
+                    <div className="flex items-center gap-3">
+                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${u.role === 'admin' ? 'bg-amber-500/20' : 'bg-indigo-500/20'}`}>
+                        {u.role === 'admin' ? <Shield size={14} className="text-amber-400" /> : <User size={14} className="text-indigo-400" />}
+                      </div>
+                      <span className="text-white font-medium">{u.username}</span>
+                      {u.id === currentUser.id && <span className="text-xs text-slate-500">(you)</span>}
+                    </div>
+                  </td>
+                  <td className="px-4 py-3.5">
+                    <span className={`text-xs px-2.5 py-1 rounded-full font-medium ${u.role === 'admin' ? 'bg-amber-500/20 text-amber-400' : 'bg-slate-700 text-slate-300'}`}>
+                      {u.role}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3.5">
+                    <span className={`text-xs px-2.5 py-1 rounded-full font-medium ${u.mfa_enabled ? 'bg-green-500/20 text-green-400' : 'bg-slate-700/50 text-slate-500'}`}>
+                      {u.mfa_enabled ? 'Enabled' : 'Disabled'}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3.5">
+                    {u.must_change_password ? (
+                      <span className="text-xs px-2.5 py-1 rounded-full font-medium bg-amber-500/20 text-amber-400 flex items-center gap-1 w-fit">
+                        <KeyRound size={10} />Must change pw
+                      </span>
+                    ) : (
+                      <span className="text-xs text-green-400">Active</span>
+                    )}
+                  </td>
+                  <td className="px-4 py-3.5 text-slate-400 text-sm">{new Date(u.created_at).toLocaleDateString()}</td>
+                  <td className="px-4 py-3.5 text-right">
+                    <div className="flex items-center justify-end gap-2">
+                      <button onClick={() => setModal(u)} className="p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-700 transition">
+                        <Edit2 size={14} />
+                      </button>
+                      {u.id !== currentUser.id && (
+                        <button onClick={() => setDeleteConfirm(u)} className="p-2 rounded-lg text-slate-400 hover:text-red-400 hover:bg-red-500/10 transition">
+                          <Trash2 size={14} />
+                        </button>
+                      )}
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {modal && (
+        <UserModal
+          user={modal === 'add' ? null : modal}
+          onClose={() => setModal(null)}
+          onSave={handleSave}
+        />
+      )}
+
+      {deleteConfirm && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70">
+          <div className="bg-slate-900 rounded-2xl border border-slate-800 p-6 w-full max-w-sm shadow-2xl">
+            <h3 className="text-lg font-bold text-white mb-2">Delete User</h3>
+            <p className="text-slate-400 text-sm mb-6">Delete <strong className="text-white">{deleteConfirm.username}</strong>? This cannot be undone.</p>
+            <div className="flex gap-3">
+              <button onClick={() => setDeleteConfirm(null)} className="flex-1 py-2.5 rounded-xl border border-slate-700 text-slate-400 hover:text-white transition text-sm">Cancel</button>
+              <button onClick={() => handleDelete(deleteConfirm.id)} className="flex-1 py-2.5 rounded-xl bg-red-500/20 hover:bg-red-500/30 text-red-400 border border-red-500/30 transition text-sm font-semibold">Delete</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}