218 lines
8.4 KiB
TypeScript
218 lines
8.4 KiB
TypeScript
/**
|
|
* Admin All Users Page
|
|
* View and manage all users across all accounts
|
|
*/
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { Search, Filter, Loader2, AlertCircle } from 'lucide-react';
|
|
import { Card } from '../../components/ui/card';
|
|
import Badge from '../../components/ui/badge/Badge';
|
|
import { fetchAPI } from '../../services/api';
|
|
|
|
interface User {
|
|
id: number;
|
|
email: string;
|
|
first_name: string;
|
|
last_name: string;
|
|
account_name: string;
|
|
role: string;
|
|
is_active: boolean;
|
|
last_login: string | null;
|
|
date_joined: string;
|
|
}
|
|
|
|
export default function AdminAllUsersPage() {
|
|
const [users, setUsers] = useState<User[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string>('');
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [roleFilter, setRoleFilter] = useState('all');
|
|
|
|
useEffect(() => {
|
|
loadUsers();
|
|
}, []);
|
|
|
|
const loadUsers = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const data = await fetchAPI('/v1/admin/users/');
|
|
setUsers(data.results || []);
|
|
} catch (err: any) {
|
|
setError(err.message || 'Failed to load users');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const filteredUsers = users.filter((user) => {
|
|
const matchesSearch = user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
`${user.first_name} ${user.last_name}`.toLowerCase().includes(searchTerm.toLowerCase());
|
|
const matchesRole = roleFilter === 'all' || user.role === roleFilter;
|
|
return matchesSearch && matchesRole;
|
|
});
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<Loader2 className="w-8 h-8 animate-spin text-blue-600" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">All Users</h1>
|
|
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
|
View and manage all users across all accounts
|
|
</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-3">
|
|
<AlertCircle className="w-5 h-5 text-red-600" />
|
|
<p className="text-red-800 dark:text-red-200">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Filters */}
|
|
<div className="mb-6 flex flex-col md:flex-row gap-4">
|
|
<div className="flex-1 relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search users..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Filter className="w-5 h-5 text-gray-400" />
|
|
<select
|
|
value={roleFilter}
|
|
onChange={(e) => setRoleFilter(e.target.value)}
|
|
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
|
|
>
|
|
<option value="all">All Roles</option>
|
|
<option value="owner">Owner</option>
|
|
<option value="admin">Admin</option>
|
|
<option value="editor">Editor</option>
|
|
<option value="viewer">Viewer</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Users Table */}
|
|
<Card className="overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
User
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Account
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Role
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Status
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Last Login
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Joined
|
|
</th>
|
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
|
|
{filteredUsers.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={7} className="px-6 py-8 text-center text-gray-500">
|
|
No users found
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
filteredUsers.map((user) => (
|
|
<tr key={user.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
|
|
<td className="px-6 py-4">
|
|
<div className="font-medium text-gray-900 dark:text-white">
|
|
{user.first_name || user.last_name
|
|
? `${user.first_name} ${user.last_name}`.trim()
|
|
: user.email}
|
|
</div>
|
|
<div className="text-sm text-gray-500">{user.email}</div>
|
|
</td>
|
|
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
|
|
{user.account_name}
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<Badge variant="light" color="primary">
|
|
{user.role}
|
|
</Badge>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<Badge
|
|
variant="light"
|
|
color={user.is_active ? 'success' : 'error'}
|
|
>
|
|
{user.is_active ? 'Active' : 'Inactive'}
|
|
</Badge>
|
|
</td>
|
|
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
|
|
{user.last_login
|
|
? new Date(user.last_login).toLocaleDateString()
|
|
: 'Never'}
|
|
</td>
|
|
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
|
|
{new Date(user.date_joined).toLocaleDateString()}
|
|
</td>
|
|
<td className="px-6 py-4 text-right">
|
|
<button className="text-blue-600 hover:text-blue-700 text-sm font-medium">
|
|
Manage
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Summary Stats */}
|
|
<div className="mt-6 grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<Card className="p-4">
|
|
<div className="text-sm text-gray-600 dark:text-gray-400">Total Users</div>
|
|
<div className="text-2xl font-bold text-gray-900 dark:text-white">{users.length}</div>
|
|
</Card>
|
|
<Card className="p-4">
|
|
<div className="text-sm text-gray-600 dark:text-gray-400">Active</div>
|
|
<div className="text-2xl font-bold text-green-600">
|
|
{users.filter(u => u.is_active).length}
|
|
</div>
|
|
</Card>
|
|
<Card className="p-4">
|
|
<div className="text-sm text-gray-600 dark:text-gray-400">Owners</div>
|
|
<div className="text-2xl font-bold text-blue-600">
|
|
{users.filter(u => u.role === 'owner').length}
|
|
</div>
|
|
</Card>
|
|
<Card className="p-4">
|
|
<div className="text-sm text-gray-600 dark:text-gray-400">Admins</div>
|
|
<div className="text-2xl font-bold text-purple-600">
|
|
{users.filter(u => u.role === 'admin').length}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|