132 lines
3.8 KiB
TypeScript
132 lines
3.8 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import { trpc } from '@/lib/trpc/client'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card'
|
|
import { ArrowLeft, Loader2 } from 'lucide-react'
|
|
import { toast } from 'sonner'
|
|
|
|
export default function NewProgramPage() {
|
|
const router = useRouter()
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
|
|
const createProgram = trpc.program.create.useMutation({
|
|
onSuccess: () => {
|
|
toast.success('Program created successfully')
|
|
router.push('/admin/programs')
|
|
},
|
|
onError: (error) => {
|
|
toast.error(error.message || 'Failed to create program')
|
|
setIsSubmitting(false)
|
|
},
|
|
})
|
|
|
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
setIsSubmitting(true)
|
|
|
|
const formData = new FormData(e.currentTarget)
|
|
const name = formData.get('name') as string
|
|
const year = parseInt(formData.get('year') as string, 10)
|
|
const description = formData.get('description') as string
|
|
|
|
createProgram.mutate({
|
|
name,
|
|
year,
|
|
description: description || undefined,
|
|
})
|
|
}
|
|
|
|
const currentYear = new Date().getFullYear()
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/admin/programs">
|
|
<Button variant="ghost" size="icon">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
<div>
|
|
<h1 className="text-2xl font-bold">Create Program</h1>
|
|
<p className="text-muted-foreground">
|
|
Set up a new ocean protection program
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Program Details</CardTitle>
|
|
<CardDescription>
|
|
Basic information about the program
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name">Program Name *</Label>
|
|
<Input
|
|
id="name"
|
|
name="name"
|
|
placeholder="e.g., Monaco Ocean Protection Challenge 2026"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="year">Year *</Label>
|
|
<Input
|
|
id="year"
|
|
name="year"
|
|
type="number"
|
|
min={2020}
|
|
max={2100}
|
|
defaultValue={currentYear}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="description">Description</Label>
|
|
<Textarea
|
|
id="description"
|
|
name="description"
|
|
placeholder="Describe the program objectives and scope..."
|
|
rows={4}
|
|
maxLength={2000}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2 pt-4">
|
|
<Link href="/admin/programs">
|
|
<Button type="button" variant="outline">
|
|
Cancel
|
|
</Button>
|
|
</Link>
|
|
<Button type="submit" disabled={isSubmitting}>
|
|
{isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
Create Program
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|