84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
|
import { notFound } from 'next/navigation'
|
||
|
|
import Link from 'next/link'
|
||
|
|
import { api } from '@/lib/trpc/server'
|
||
|
|
import { Button } from '@/components/ui/button'
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardContent,
|
||
|
|
CardDescription,
|
||
|
|
CardHeader,
|
||
|
|
CardTitle,
|
||
|
|
} from '@/components/ui/card'
|
||
|
|
import { Badge } from '@/components/ui/badge'
|
||
|
|
import { ArrowLeft, Settings, Eye, FileText, Plus } from 'lucide-react'
|
||
|
|
import { FormEditor } from './form-editor'
|
||
|
|
|
||
|
|
interface FormDetailPageProps {
|
||
|
|
params: Promise<{ id: string }>
|
||
|
|
}
|
||
|
|
|
||
|
|
export default async function FormDetailPage({ params }: FormDetailPageProps) {
|
||
|
|
const { id } = await params
|
||
|
|
const caller = await api()
|
||
|
|
|
||
|
|
let form
|
||
|
|
try {
|
||
|
|
form = await caller.applicationForm.get({ id })
|
||
|
|
} catch {
|
||
|
|
notFound()
|
||
|
|
}
|
||
|
|
|
||
|
|
const statusColors = {
|
||
|
|
DRAFT: 'bg-gray-100 text-gray-800',
|
||
|
|
PUBLISHED: 'bg-green-100 text-green-800',
|
||
|
|
CLOSED: 'bg-red-100 text-red-800',
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
<Link href="/admin/forms">
|
||
|
|
<Button variant="ghost" size="icon">
|
||
|
|
<ArrowLeft className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
<div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<h1 className="text-2xl font-bold">{form.name}</h1>
|
||
|
|
<Badge className={statusColors[form.status as keyof typeof statusColors]}>
|
||
|
|
{form.status}
|
||
|
|
</Badge>
|
||
|
|
</div>
|
||
|
|
<p className="text-muted-foreground">
|
||
|
|
{form.fields.length} fields - {form._count.submissions} submissions
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
{form.publicSlug && form.status === 'PUBLISHED' && (
|
||
|
|
<a
|
||
|
|
href={`/apply/${form.publicSlug}`}
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
>
|
||
|
|
<Button variant="outline">
|
||
|
|
<Eye className="mr-2 h-4 w-4" />
|
||
|
|
Preview
|
||
|
|
</Button>
|
||
|
|
</a>
|
||
|
|
)}
|
||
|
|
<Link href={`/admin/forms/${id}/submissions`}>
|
||
|
|
<Button variant="outline">
|
||
|
|
<FileText className="mr-2 h-4 w-4" />
|
||
|
|
Submissions
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<FormEditor form={form} />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|