420 lines
16 KiB
TypeScript
420 lines
16 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { Users, Mail, Plus, Trash2, Copy, Check, KeyRound } from 'lucide-react';
|
|
import { api } from '@/lib/api';
|
|
import { useAuthStore } from '@/stores/auth';
|
|
import type { User, Invite } from '@/types';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export function AdminPage() {
|
|
const { user: currentUser } = useAuthStore();
|
|
const [users, setUsers] = useState<User[]>([]);
|
|
const [invites, setInvites] = useState<Invite[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [activeTab, setActiveTab] = useState<'users' | 'invites'>('users');
|
|
|
|
// Invite form
|
|
const [showInviteForm, setShowInviteForm] = useState(false);
|
|
const [inviteEmail, setInviteEmail] = useState('');
|
|
const [inviteName, setInviteName] = useState('');
|
|
const [inviteRole, setInviteRole] = useState<'admin' | 'user'>('user');
|
|
const [inviteError, setInviteError] = useState('');
|
|
const [inviteUrl, setInviteUrl] = useState('');
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, []);
|
|
|
|
const loadData = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const [usersData, invitesData] = await Promise.all([
|
|
api.getUsers(),
|
|
api.getInvites(),
|
|
]);
|
|
setUsers(usersData);
|
|
setInvites(invitesData);
|
|
} catch (error) {
|
|
console.error('Failed to load admin data:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleCreateInvite = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setInviteError('');
|
|
|
|
try {
|
|
const result = await api.createInvite({ email: inviteEmail, name: inviteName, role: inviteRole });
|
|
setInviteUrl(result.setupUrl);
|
|
setInvites([result, ...invites]);
|
|
// Keep form open to show the URL
|
|
} catch (error) {
|
|
setInviteError(error instanceof Error ? error.message : 'Failed to create invite');
|
|
}
|
|
};
|
|
|
|
const handleCopyUrl = () => {
|
|
navigator.clipboard.writeText(inviteUrl);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
};
|
|
|
|
const handleChangeRole = async (userId: string, role: 'admin' | 'user' | 'service') => {
|
|
try {
|
|
await api.updateUserRole(userId, role);
|
|
setUsers(users.map(u => u.id === userId ? { ...u, role } : u));
|
|
} catch (error) {
|
|
console.error('Failed to update role:', error);
|
|
}
|
|
};
|
|
|
|
const [resetUserId, setResetUserId] = useState<string | null>(null);
|
|
const [resetUrl, setResetUrl] = useState('');
|
|
const [resetCopied, setResetCopied] = useState(false);
|
|
const [resetLoading, setResetLoading] = useState(false);
|
|
|
|
const handleGenerateResetLink = async (userId: string) => {
|
|
setResetLoading(true);
|
|
try {
|
|
const result = await api.createPasswordReset(userId);
|
|
setResetUserId(userId);
|
|
setResetUrl(result.resetUrl);
|
|
} catch (error) {
|
|
console.error('Failed to generate reset link:', error);
|
|
} finally {
|
|
setResetLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleCopyResetUrl = () => {
|
|
navigator.clipboard.writeText(resetUrl);
|
|
setResetCopied(true);
|
|
setTimeout(() => setResetCopied(false), 2000);
|
|
};
|
|
|
|
const dismissReset = () => {
|
|
setResetUserId(null);
|
|
setResetUrl('');
|
|
setResetCopied(false);
|
|
};
|
|
|
|
const handleDeleteUser = async (userId: string) => {
|
|
if (!confirm('Are you sure you want to delete this user?')) return;
|
|
|
|
try {
|
|
await api.deleteUser(userId);
|
|
setUsers(users.filter(u => u.id !== userId));
|
|
} catch (error) {
|
|
console.error('Failed to delete user:', error);
|
|
}
|
|
};
|
|
|
|
const handleDeleteInvite = async (inviteId: string) => {
|
|
try {
|
|
await api.deleteInvite(inviteId);
|
|
setInvites(invites.filter(i => i.id !== inviteId));
|
|
} catch (error) {
|
|
console.error('Failed to delete invite:', error);
|
|
}
|
|
};
|
|
|
|
const resetInviteForm = () => {
|
|
setShowInviteForm(false);
|
|
setInviteEmail('');
|
|
setInviteName('');
|
|
setInviteRole('user');
|
|
setInviteError('');
|
|
setInviteUrl('');
|
|
};
|
|
|
|
if (currentUser?.role !== 'admin') {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<p className="text-red-500">Access denied. Admin only.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto">
|
|
<h1 className="text-2xl font-bold text-gray-900 mb-6">Admin</h1>
|
|
|
|
{/* Tabs */}
|
|
<div className="flex gap-4 border-b border-gray-200 mb-6">
|
|
<button
|
|
onClick={() => setActiveTab('users')}
|
|
className={cn(
|
|
'pb-3 px-1 text-sm font-medium border-b-2 transition-colors',
|
|
activeTab === 'users'
|
|
? 'border-blue-600 text-blue-600'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700'
|
|
)}
|
|
>
|
|
<Users className="w-4 h-4 inline mr-2" />
|
|
Users ({users.length})
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('invites')}
|
|
className={cn(
|
|
'pb-3 px-1 text-sm font-medium border-b-2 transition-colors',
|
|
activeTab === 'invites'
|
|
? 'border-blue-600 text-blue-600'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700'
|
|
)}
|
|
>
|
|
<Mail className="w-4 h-4 inline mr-2" />
|
|
Invites ({invites.filter(i => i.status === 'pending').length} pending)
|
|
</button>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="text-center py-12 text-gray-500">Loading...</div>
|
|
) : activeTab === 'users' ? (
|
|
/* Users list */
|
|
<div className="bg-white rounded-lg border border-gray-200">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200 text-left text-sm text-gray-500">
|
|
<th className="px-4 py-3 font-medium">Name</th>
|
|
<th className="px-4 py-3 font-medium">Email</th>
|
|
<th className="px-4 py-3 font-medium">Role</th>
|
|
<th className="px-4 py-3 font-medium">Joined</th>
|
|
<th className="px-4 py-3"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{users.map((user) => (
|
|
<tr key={user.id} className="border-b border-gray-100 last:border-0">
|
|
<td className="px-4 py-3 text-sm font-medium text-gray-900">{user.name}</td>
|
|
<td className="px-4 py-3 text-sm text-gray-600">{user.email}</td>
|
|
<td className="px-4 py-3">
|
|
{user.id === currentUser?.id || user.role === 'service' ? (
|
|
<span className={cn(
|
|
'px-2 py-1 text-xs rounded-full',
|
|
user.role === 'admin' ? 'bg-purple-100 text-purple-700' :
|
|
user.role === 'service' ? 'bg-blue-100 text-blue-700' :
|
|
'bg-gray-100 text-gray-700'
|
|
)}>
|
|
{user.role}
|
|
</span>
|
|
) : (
|
|
<select
|
|
value={user.role}
|
|
onChange={(e) => handleChangeRole(user.id, e.target.value as 'admin' | 'user')}
|
|
className={cn(
|
|
'px-2 py-1 text-xs rounded-full border-none cursor-pointer appearance-none',
|
|
user.role === 'admin' ? 'bg-purple-100 text-purple-700' :
|
|
'bg-gray-100 text-gray-700'
|
|
)}
|
|
>
|
|
<option value="user">user</option>
|
|
<option value="admin">admin</option>
|
|
</select>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-3 text-sm text-gray-500">
|
|
{new Date(user.createdAt).toLocaleDateString()}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-1">
|
|
{user.id !== currentUser?.id && (
|
|
<>
|
|
{resetUserId === user.id ? (
|
|
<div className="flex items-center gap-1">
|
|
<span className="text-xs text-green-600">✓ Link generated!</span>
|
|
<button
|
|
onClick={handleCopyResetUrl}
|
|
className="text-xs px-2 py-1 bg-blue-600 text-white rounded flex items-center gap-1"
|
|
>
|
|
{resetCopied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
|
|
{resetCopied ? 'Copied!' : 'Copy'}
|
|
</button>
|
|
<button
|
|
onClick={dismissReset}
|
|
className="text-xs px-1 py-1 text-gray-400 hover:text-gray-600"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<button
|
|
onClick={() => handleGenerateResetLink(user.id)}
|
|
disabled={resetLoading}
|
|
className="p-1 text-gray-400 hover:text-blue-500"
|
|
title="Generate password reset link"
|
|
>
|
|
<KeyRound className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
{user.role !== 'service' && resetUserId !== user.id && (
|
|
<button
|
|
onClick={() => handleDeleteUser(user.id)}
|
|
className="p-1 text-gray-400 hover:text-red-500"
|
|
title="Delete user"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
/* Invites */
|
|
<div>
|
|
{/* Create invite button/form */}
|
|
{!showInviteForm ? (
|
|
<button
|
|
onClick={() => setShowInviteForm(true)}
|
|
className="mb-4 btn btn-primary"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
Invite User
|
|
</button>
|
|
) : (
|
|
<div className="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
|
|
<h3 className="font-medium text-gray-900 mb-4">Invite New User</h3>
|
|
|
|
{inviteUrl ? (
|
|
<div>
|
|
<p className="text-sm text-green-600 mb-2">✓ Invite created! Share this link:</p>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={inviteUrl}
|
|
readOnly
|
|
className="input flex-1 text-sm bg-white"
|
|
/>
|
|
<button
|
|
onClick={handleCopyUrl}
|
|
className="btn btn-secondary"
|
|
>
|
|
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
|
|
</button>
|
|
</div>
|
|
<button
|
|
onClick={resetInviteForm}
|
|
className="mt-3 text-sm text-gray-500 hover:text-gray-700"
|
|
>
|
|
Create another invite
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleCreateInvite} className="space-y-4">
|
|
{inviteError && (
|
|
<p className="text-sm text-red-500">{inviteError}</p>
|
|
)}
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
|
|
<input
|
|
type="text"
|
|
value={inviteName}
|
|
onChange={(e) => setInviteName(e.target.value)}
|
|
required
|
|
className="input"
|
|
placeholder="John Doe"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
|
<input
|
|
type="email"
|
|
value={inviteEmail}
|
|
onChange={(e) => setInviteEmail(e.target.value)}
|
|
required
|
|
className="input"
|
|
placeholder="john@example.com"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Role</label>
|
|
<select
|
|
value={inviteRole}
|
|
onChange={(e) => setInviteRole(e.target.value as 'admin' | 'user')}
|
|
className="input"
|
|
>
|
|
<option value="user">User</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button type="submit" className="btn btn-primary">
|
|
Send Invite
|
|
</button>
|
|
<button type="button" onClick={resetInviteForm} className="btn btn-secondary">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Invites list */}
|
|
<div className="bg-white rounded-lg border border-gray-200">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200 text-left text-sm text-gray-500">
|
|
<th className="px-4 py-3 font-medium">Name</th>
|
|
<th className="px-4 py-3 font-medium">Email</th>
|
|
<th className="px-4 py-3 font-medium">Status</th>
|
|
<th className="px-4 py-3 font-medium">Expires</th>
|
|
<th className="px-4 py-3"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{invites.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={5} className="px-4 py-8 text-center text-gray-500">
|
|
No invites yet
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
invites.map((invite) => (
|
|
<tr key={invite.id} className="border-b border-gray-100 last:border-0">
|
|
<td className="px-4 py-3 text-sm font-medium text-gray-900">{invite.name}</td>
|
|
<td className="px-4 py-3 text-sm text-gray-600">{invite.email}</td>
|
|
<td className="px-4 py-3">
|
|
<span className={cn(
|
|
'px-2 py-1 text-xs rounded-full',
|
|
invite.status === 'accepted' ? 'bg-green-100 text-green-700' :
|
|
invite.status === 'expired' ? 'bg-red-100 text-red-700' :
|
|
'bg-yellow-100 text-yellow-700'
|
|
)}>
|
|
{invite.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-sm text-gray-500">
|
|
{new Date(invite.expiresAt).toLocaleDateString()}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
{invite.status === 'pending' && (
|
|
<button
|
|
onClick={() => handleDeleteInvite(invite.id)}
|
|
className="p-1 text-gray-400 hover:text-red-500"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|