Initial commit
This commit is contained in:
monoadmin
254
app/(dashboard)/dashboard/admin/page.tsx
Normal file
254
app/(dashboard)/dashboard/admin/page.tsx
Normal file
@@ -0,0 +1,254 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { UserPlus, Copy, Check, Trash2, Clock, CheckCircle2, Loader2 } from 'lucide-react'
|
||||
|
||||
interface Invite {
|
||||
id: string
|
||||
token: string
|
||||
email: string
|
||||
created_at: string
|
||||
expires_at: string
|
||||
used_at: string | null
|
||||
}
|
||||
|
||||
function inviteStatus(invite: Invite): 'used' | 'expired' | 'pending' {
|
||||
if (invite.used_at) return 'used'
|
||||
if (new Date(invite.expires_at) < new Date()) return 'expired'
|
||||
return 'pending'
|
||||
}
|
||||
|
||||
function CopyButton({ text }: { text: string }) {
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
const handleCopy = async () => {
|
||||
await navigator.clipboard.writeText(text)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
|
||||
return (
|
||||
<Button variant="ghost" size="sm" onClick={handleCopy} className="h-7 px-2">
|
||||
{copied ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export default function AdminPage() {
|
||||
const [invites, setInvites] = useState<Invite[]>([])
|
||||
const [email, setEmail] = useState('')
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [isCreating, setIsCreating] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [successEmail, setSuccessEmail] = useState<string | null>(null)
|
||||
const [newToken, setNewToken] = useState<string | null>(null)
|
||||
|
||||
const fetchInvites = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch('/api/invites')
|
||||
const data = await res.json()
|
||||
if (res.ok) setInvites(data.invites)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchInvites()
|
||||
}, [fetchInvites])
|
||||
|
||||
const handleCreate = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError(null)
|
||||
setSuccessEmail(null)
|
||||
setNewToken(null)
|
||||
setIsCreating(true)
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/invites', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email }),
|
||||
})
|
||||
const data = await res.json()
|
||||
|
||||
if (!res.ok) {
|
||||
setError(data.error)
|
||||
return
|
||||
}
|
||||
|
||||
setSuccessEmail(email)
|
||||
setNewToken(data.invite.token)
|
||||
setEmail('')
|
||||
await fetchInvites()
|
||||
} catch {
|
||||
setError('Network error. Please try again.')
|
||||
} finally {
|
||||
setIsCreating(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
const res = await fetch('/api/invites', {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id }),
|
||||
})
|
||||
if (res.ok) await fetchInvites()
|
||||
}
|
||||
|
||||
const inviteUrl = (token: string) =>
|
||||
`${window.location.origin}/auth/invite/${token}`
|
||||
|
||||
const statusBadge = (invite: Invite) => {
|
||||
const status = inviteStatus(invite)
|
||||
if (status === 'used')
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-xs text-green-500">
|
||||
<CheckCircle2 className="h-3 w-3" /> Used
|
||||
</span>
|
||||
)
|
||||
if (status === 'expired')
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<Clock className="h-3 w-3" /> Expired
|
||||
</span>
|
||||
)
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-xs text-primary">
|
||||
<Clock className="h-3 w-3" /> Pending
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-2xl">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">Admin</h2>
|
||||
<p className="text-muted-foreground">Manage user invitations</p>
|
||||
</div>
|
||||
|
||||
{/* Create invite */}
|
||||
<Card className="border-border/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<UserPlus className="h-5 w-5" />
|
||||
Invite user
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Send an invite link to a new user. Links expire after 7 days.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleCreate} className="space-y-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">Email address</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="user@company.com"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="bg-secondary/50"
|
||||
/>
|
||||
<Button type="submit" disabled={isCreating}>
|
||||
{isCreating ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
'Send invite'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 p-3">
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{newToken && successEmail && (
|
||||
<div className="rounded-md bg-green-500/10 border border-green-500/20 p-3 space-y-2">
|
||||
<p className="text-sm text-green-500 font-medium">
|
||||
Invite created for {successEmail}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="text-xs text-muted-foreground truncate flex-1 bg-muted/50 px-2 py-1 rounded">
|
||||
{inviteUrl(newToken)}
|
||||
</code>
|
||||
<CopyButton text={inviteUrl(newToken)} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Invites list */}
|
||||
<Card className="border-border/50">
|
||||
<CardHeader>
|
||||
<CardTitle>Invitations</CardTitle>
|
||||
<CardDescription>All invite links, newest first</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : invites.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-8">
|
||||
No invitations yet
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{invites.map((invite) => {
|
||||
const status = inviteStatus(invite)
|
||||
return (
|
||||
<div
|
||||
key={invite.id}
|
||||
className="flex items-center justify-between p-3 rounded-lg bg-muted/30"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate">{invite.email}</p>
|
||||
<div className="flex items-center gap-3 mt-0.5">
|
||||
{statusBadge(invite)}
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(invite.created_at).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 ml-3">
|
||||
{status === 'pending' && (
|
||||
<CopyButton text={inviteUrl(invite.token)} />
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 px-2 text-muted-foreground hover:text-destructive"
|
||||
onClick={() => handleDelete(invite.id)}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user