fix: add language picker to Team add-member modal, remove orphaned Users page
All checks were successful
Deploy / deploy (push) Successful in 11s
All checks were successful
Deploy / deploy (push) Successful in 11s
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
fahed
@@ -23,7 +23,7 @@ const MODULE_COLORS = {
|
|||||||
|
|
||||||
const EMPTY_MEMBER = {
|
const EMPTY_MEMBER = {
|
||||||
name: '', email: '', password: '', permission_level: 'contributor',
|
name: '', email: '', password: '', permission_level: 'contributor',
|
||||||
role_id: '', brands: [], phone: '', modules: [...ALL_MODULES], team_ids: [],
|
role_id: '', brands: [], phone: '', modules: [...ALL_MODULES], team_ids: [], preferred_language: 'en',
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Team() {
|
export default function Team() {
|
||||||
@@ -91,6 +91,7 @@ export default function Team() {
|
|||||||
brands: addForm.brands,
|
brands: addForm.brands,
|
||||||
phone: addForm.phone,
|
phone: addForm.phone,
|
||||||
modules: addForm.modules,
|
modules: addForm.modules,
|
||||||
|
preferred_language: addForm.preferred_language || 'en',
|
||||||
}
|
}
|
||||||
if (addForm.password) payload.password = addForm.password
|
if (addForm.password) payload.password = addForm.password
|
||||||
const created = await api.post('/users/team', payload)
|
const created = await api.post('/users/team', payload)
|
||||||
@@ -779,6 +780,28 @@ export default function Team() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Preferred Language */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-text-tertiary mb-1">{t('users.preferredLanguage')}</label>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
{[{ value: 'en', label: 'English', flag: '🇬🇧' }, { value: 'ar', label: 'العربية', flag: '🇸🇦' }].map(l => (
|
||||||
|
<button
|
||||||
|
key={l.value}
|
||||||
|
type="button"
|
||||||
|
onClick={() => updateAdd('preferred_language', l.value)}
|
||||||
|
className={`p-2 rounded-lg border-2 text-center transition-all ${
|
||||||
|
addForm.preferred_language === l.value
|
||||||
|
? 'border-brand-primary bg-brand-primary/5'
|
||||||
|
: 'border-border hover:border-brand-primary/30'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span className="text-lg">{l.flag}</span>
|
||||||
|
<span className="text-xs font-medium text-text-primary ms-1.5">{l.label}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button onClick={handleAddMember}
|
<button onClick={handleAddMember}
|
||||||
disabled={!addForm.name || !addForm.email || addSaving}
|
disabled={!addForm.name || !addForm.email || addSaving}
|
||||||
className={`w-full px-4 py-2.5 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm ${addSaving ? 'btn-loading' : ''}`}>
|
className={`w-full px-4 py-2.5 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm ${addSaving ? 'btn-loading' : ''}`}>
|
||||||
|
|||||||
@@ -1,370 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react'
|
|
||||||
import { Plus, Shield, Edit2, Trash2, UserCheck } from 'lucide-react'
|
|
||||||
import { api } from '../utils/api'
|
|
||||||
import Modal from '../components/Modal'
|
|
||||||
import { useAuth } from '../contexts/AuthContext'
|
|
||||||
import { useLanguage } from '../i18n/LanguageContext'
|
|
||||||
import { useToast } from '../components/ToastContainer'
|
|
||||||
import { SkeletonTable } from '../components/SkeletonLoader'
|
|
||||||
|
|
||||||
const ROLES = [
|
|
||||||
{ value: 'superadmin', label: 'Superadmin', color: 'bg-purple-100 text-purple-700', icon: '👑' },
|
|
||||||
{ value: 'manager', label: 'Manager', color: 'bg-blue-100 text-blue-700', icon: '📊' },
|
|
||||||
{ value: 'contributor', label: 'Contributor', color: 'bg-green-100 text-green-700', icon: '✏️' },
|
|
||||||
]
|
|
||||||
|
|
||||||
const EMPTY_FORM = {
|
|
||||||
name: '', email: '', password: '', role: 'contributor', avatar: '', preferred_language: 'en',
|
|
||||||
}
|
|
||||||
|
|
||||||
function RoleBadge({ role }) {
|
|
||||||
const roleInfo = ROLES.find(r => r.value === role) || ROLES[2]
|
|
||||||
return (
|
|
||||||
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${roleInfo.color}`}>
|
|
||||||
<span>{roleInfo.icon}</span>
|
|
||||||
{roleInfo.label}
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Users() {
|
|
||||||
const { user: currentUser } = useAuth()
|
|
||||||
const { t } = useLanguage()
|
|
||||||
const toast = useToast()
|
|
||||||
const [users, setUsers] = useState([])
|
|
||||||
const [loading, setLoading] = useState(true)
|
|
||||||
const [showModal, setShowModal] = useState(false)
|
|
||||||
const [editingUser, setEditingUser] = useState(null)
|
|
||||||
const [form, setForm] = useState(EMPTY_FORM)
|
|
||||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
|
|
||||||
const [userToDelete, setUserToDelete] = useState(null)
|
|
||||||
const [confirmPassword, setConfirmPassword] = useState('')
|
|
||||||
const [passwordError, setPasswordError] = useState('')
|
|
||||||
|
|
||||||
useEffect(() => { loadUsers() }, [])
|
|
||||||
|
|
||||||
const loadUsers = async () => {
|
|
||||||
try {
|
|
||||||
const res = await api.get('/users')
|
|
||||||
setUsers(res)
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to load users:', err)
|
|
||||||
} finally {
|
|
||||||
setLoading(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSave = async () => {
|
|
||||||
setPasswordError('')
|
|
||||||
if (form.password && form.password !== confirmPassword) {
|
|
||||||
setPasswordError(t('users.passwordMismatch'))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
const data = {
|
|
||||||
name: form.name,
|
|
||||||
email: form.email,
|
|
||||||
role: form.role,
|
|
||||||
avatar: form.avatar || null,
|
|
||||||
preferred_language: form.preferred_language || 'en',
|
|
||||||
}
|
|
||||||
if (form.password) data.password = form.password
|
|
||||||
|
|
||||||
if (editingUser) {
|
|
||||||
await api.patch(`/users/${editingUser.id}`, data)
|
|
||||||
} else {
|
|
||||||
if (!form.password) {
|
|
||||||
toast.error(t('users.passwordRequired'))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
data.password = form.password
|
|
||||||
await api.post('/users', data)
|
|
||||||
}
|
|
||||||
setShowModal(false)
|
|
||||||
setEditingUser(null)
|
|
||||||
setForm(EMPTY_FORM)
|
|
||||||
loadUsers()
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Save failed:', err)
|
|
||||||
toast.error(t('users.saveFailed') + ': ' + err.message)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const openEdit = (user) => {
|
|
||||||
setEditingUser(user)
|
|
||||||
setForm({
|
|
||||||
name: user.name || '',
|
|
||||||
email: user.email || '',
|
|
||||||
password: '',
|
|
||||||
role: user.role || 'contributor',
|
|
||||||
avatar: user.avatar || '',
|
|
||||||
preferred_language: user.preferred_language || 'en',
|
|
||||||
})
|
|
||||||
setConfirmPassword('')
|
|
||||||
setPasswordError('')
|
|
||||||
setShowModal(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
const openNew = () => {
|
|
||||||
setEditingUser(null)
|
|
||||||
setForm(EMPTY_FORM)
|
|
||||||
setConfirmPassword('')
|
|
||||||
setPasswordError('')
|
|
||||||
setShowModal(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
const confirmDelete = async () => {
|
|
||||||
if (!userToDelete) return
|
|
||||||
try {
|
|
||||||
await api.delete(`/users/${userToDelete.id}`)
|
|
||||||
loadUsers()
|
|
||||||
setUserToDelete(null)
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Delete failed:', err)
|
|
||||||
toast.error(t('users.deleteFailed'))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="h-12 bg-surface-tertiary rounded-xl animate-pulse"></div>
|
|
||||||
<SkeletonTable rows={5} cols={5} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6 animate-fade-in">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-2xl font-bold text-text-primary flex items-center gap-3">
|
|
||||||
<Shield className="w-7 h-7 text-purple-600" />
|
|
||||||
{t('users.title')}
|
|
||||||
</h1>
|
|
||||||
<p className="text-sm text-text-tertiary mt-1">{users.length} {users.length !== 1 ? t('users.usersPlural') : t('users.userSingular')}</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={openNew}
|
|
||||||
className="flex items-center gap-2 px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm"
|
|
||||||
>
|
|
||||||
<Plus className="w-4 h-4" />
|
|
||||||
{t('users.addUser')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Users List */}
|
|
||||||
<div className="bg-white rounded-xl border border-border overflow-hidden">
|
|
||||||
<table className="w-full">
|
|
||||||
<thead>
|
|
||||||
<tr className="border-b border-border bg-surface-secondary">
|
|
||||||
<th className="text-left px-5 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('users.userSingular')}</th>
|
|
||||||
<th className="text-left px-5 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('users.email')}</th>
|
|
||||||
<th className="text-left px-5 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('users.role')}</th>
|
|
||||||
<th className="text-left px-5 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('users.created')}</th>
|
|
||||||
<th className="text-right px-5 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider w-24">{t('users.actions')}</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody className="divide-y divide-border-light">
|
|
||||||
{users.length === 0 ? (
|
|
||||||
<tr>
|
|
||||||
<td colSpan={5} className="py-12 text-center text-sm text-text-tertiary">
|
|
||||||
{t('users.noUsers')}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
) : (
|
|
||||||
users.map(user => {
|
|
||||||
const isCurrentUser = currentUser?.id === user.id
|
|
||||||
const roleInfo = ROLES.find(r => r.value === user.role) || ROLES[2]
|
|
||||||
return (
|
|
||||||
<tr key={user.id} className="hover:bg-surface-secondary group">
|
|
||||||
<td className="px-5 py-4">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className={`w-10 h-10 rounded-full bg-gradient-to-br ${user.role === 'superadmin' ? 'from-purple-500 to-pink-500' : 'from-blue-500 to-indigo-500'} flex items-center justify-center text-white font-bold text-sm`}>
|
|
||||||
{user.name?.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase()}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<p className="text-sm font-medium text-text-primary">{user.name}</p>
|
|
||||||
{isCurrentUser && (
|
|
||||||
<span className="text-[10px] px-1.5 py-0.5 rounded bg-emerald-100 text-emerald-700 font-medium">
|
|
||||||
{t('users.you')}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="px-5 py-4 text-sm text-text-secondary">{user.email}</td>
|
|
||||||
<td className="px-5 py-4">
|
|
||||||
<RoleBadge role={user.role} />
|
|
||||||
</td>
|
|
||||||
<td className="px-5 py-4 text-sm text-text-tertiary">
|
|
||||||
{user.createdAt ? new Date(user.createdAt).toLocaleDateString() : '—'}
|
|
||||||
</td>
|
|
||||||
<td className="px-5 py-4">
|
|
||||||
<div className="flex items-center justify-end gap-1">
|
|
||||||
<button
|
|
||||||
onClick={() => openEdit(user)}
|
|
||||||
className="p-1.5 hover:bg-surface-tertiary rounded-lg text-text-tertiary hover:text-text-primary"
|
|
||||||
title={t('users.editUser')}
|
|
||||||
>
|
|
||||||
<Edit2 className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
{!isCurrentUser && (
|
|
||||||
<button
|
|
||||||
onClick={() => { setUserToDelete(user); setShowDeleteConfirm(true) }}
|
|
||||||
className="p-1.5 hover:bg-red-50 rounded-lg text-text-tertiary hover:text-red-500"
|
|
||||||
title={t('users.deleteUser')}
|
|
||||||
>
|
|
||||||
<Trash2 className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Add/Edit User Modal */}
|
|
||||||
<Modal
|
|
||||||
isOpen={showModal}
|
|
||||||
onClose={() => { setShowModal(false); setEditingUser(null) }}
|
|
||||||
title={editingUser ? t('users.editUser') : t('users.addNewUser')}
|
|
||||||
size="md"
|
|
||||||
>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-text-primary mb-1">{t('users.name')} *</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={form.name}
|
|
||||||
onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
|
|
||||||
className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
|
|
||||||
placeholder={t('users.fullNamePlaceholder')}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-text-primary mb-1">{t('users.email')} *</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
value={form.email}
|
|
||||||
onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
|
|
||||||
className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
|
|
||||||
placeholder="user@company.com"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-text-primary mb-1">
|
|
||||||
{t('users.password')} {editingUser && `(${t('users.leaveBlankToKeep')})`}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
value={form.password}
|
|
||||||
onChange={e => { setForm(f => ({ ...f, password: e.target.value })); setPasswordError('') }}
|
|
||||||
className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
|
|
||||||
placeholder="••••••••"
|
|
||||||
required={!editingUser}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{form.password && (
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-text-primary mb-1">{t('users.confirmPassword')}</label>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
value={confirmPassword}
|
|
||||||
onChange={e => { setConfirmPassword(e.target.value); setPasswordError('') }}
|
|
||||||
className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
|
|
||||||
placeholder="••••••••"
|
|
||||||
/>
|
|
||||||
{passwordError && (
|
|
||||||
<p className="text-xs text-red-500 mt-1">{passwordError}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-text-primary mb-1">{t('users.role')} *</label>
|
|
||||||
<div className="grid grid-cols-3 gap-2">
|
|
||||||
{ROLES.map(r => (
|
|
||||||
<button
|
|
||||||
key={r.value}
|
|
||||||
type="button"
|
|
||||||
onClick={() => setForm(f => ({ ...f, role: r.value }))}
|
|
||||||
className={`p-3 rounded-lg border-2 text-center transition-all ${
|
|
||||||
form.role === r.value
|
|
||||||
? 'border-brand-primary bg-brand-primary/5'
|
|
||||||
: 'border-border hover:border-brand-primary/30'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="text-2xl mb-1">{r.icon}</div>
|
|
||||||
<div className="text-xs font-medium text-text-primary">{r.label}</div>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-text-primary mb-1">{t('users.preferredLanguage')}</label>
|
|
||||||
<div className="grid grid-cols-2 gap-2">
|
|
||||||
{[{ value: 'en', label: 'English', flag: '🇬🇧' }, { value: 'ar', label: 'العربية', flag: '🇸🇦' }].map(l => (
|
|
||||||
<button
|
|
||||||
key={l.value}
|
|
||||||
type="button"
|
|
||||||
onClick={() => setForm(f => ({ ...f, preferred_language: l.value }))}
|
|
||||||
className={`p-2.5 rounded-lg border-2 text-center transition-all ${
|
|
||||||
form.preferred_language === l.value
|
|
||||||
? 'border-brand-primary bg-brand-primary/5'
|
|
||||||
: 'border-border hover:border-brand-primary/30'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<span className="text-lg">{l.flag}</span>
|
|
||||||
<span className="text-xs font-medium text-text-primary ms-1.5">{l.label}</span>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-end gap-3 pt-4 border-t border-border">
|
|
||||||
<button
|
|
||||||
onClick={() => { setShowModal(false); setEditingUser(null) }}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg"
|
|
||||||
>
|
|
||||||
{t('common.cancel')}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleSave}
|
|
||||||
disabled={!form.name || !form.email || (!editingUser && !form.password)}
|
|
||||||
className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
|
|
||||||
>
|
|
||||||
{editingUser ? t('users.saveChanges') : t('users.addUser')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
{/* Delete Confirmation */}
|
|
||||||
<Modal
|
|
||||||
isOpen={showDeleteConfirm}
|
|
||||||
onClose={() => { setShowDeleteConfirm(false); setUserToDelete(null) }}
|
|
||||||
title={t('users.deleteUserConfirmTitle')}
|
|
||||||
isConfirm
|
|
||||||
danger
|
|
||||||
confirmText={t('users.deleteUser')}
|
|
||||||
onConfirm={confirmDelete}
|
|
||||||
>
|
|
||||||
{t('users.deleteConfirm')} <strong>{userToDelete?.name}</strong>
|
|
||||||
</Modal>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user