Initial commit - Todo app frontend
This commit is contained in:
318
src/pages/Admin.tsx
Normal file
318
src/pages/Admin.tsx
Normal file
@@ -0,0 +1,318 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Users, Mail, Plus, Trash2, Copy, Check } 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 [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 });
|
||||
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 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('');
|
||||
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">
|
||||
<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>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-500">
|
||||
{new Date(user.createdAt).toLocaleDateString()}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
{user.id !== currentUser?.id && user.role !== 'service' && (
|
||||
<button
|
||||
onClick={() => handleDeleteUser(user.id)}
|
||||
className="p-1 text-gray-400 hover:text-red-500"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</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-2 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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user