Initial commit: MOPC platform with Docker deployment setup
Full Next.js 15 platform with tRPC, Prisma, PostgreSQL, NextAuth. Includes production Dockerfile (multi-stage, port 7600), docker-compose with registry-based image pull, Gitea Actions CI workflow, nginx config for portal.monaco-opc.com, deployment scripts, and DEPLOYMENT.md guide. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
418
src/app/(admin)/admin/projects/new/page.tsx
Normal file
418
src/app/(admin)/admin/projects/new/page.tsx
Normal file
@@ -0,0 +1,418 @@
|
||||
'use client'
|
||||
|
||||
import { Suspense, useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useRouter, useSearchParams } from 'next/navigation'
|
||||
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 {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { TagInput } from '@/components/shared/tag-input'
|
||||
import { toast } from 'sonner'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Save,
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
FolderPlus,
|
||||
Plus,
|
||||
X,
|
||||
} from 'lucide-react'
|
||||
|
||||
function NewProjectPageContent() {
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
const roundIdParam = searchParams.get('round')
|
||||
|
||||
const [selectedRoundId, setSelectedRoundId] = useState<string>(roundIdParam || '')
|
||||
|
||||
// Form state
|
||||
const [title, setTitle] = useState('')
|
||||
const [teamName, setTeamName] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [tags, setTags] = useState<string[]>([])
|
||||
const [contactEmail, setContactEmail] = useState('')
|
||||
const [contactName, setContactName] = useState('')
|
||||
const [country, setCountry] = useState('')
|
||||
const [customFields, setCustomFields] = useState<{ key: string; value: string }[]>([])
|
||||
|
||||
// Fetch active programs with rounds
|
||||
const { data: programs, isLoading: loadingPrograms } = trpc.program.list.useQuery({
|
||||
status: 'ACTIVE',
|
||||
includeRounds: true,
|
||||
})
|
||||
|
||||
// Create mutation
|
||||
const createProject = trpc.project.create.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success('Project created successfully')
|
||||
router.push(`/admin/projects?round=${selectedRoundId}`)
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(error.message)
|
||||
},
|
||||
})
|
||||
|
||||
// Get all rounds from programs
|
||||
const rounds = programs?.flatMap((p) =>
|
||||
(p.rounds || []).map((r) => ({
|
||||
...r,
|
||||
programName: p.name,
|
||||
}))
|
||||
) || []
|
||||
|
||||
const selectedRound = rounds.find((r) => r.id === selectedRoundId)
|
||||
|
||||
const addCustomField = () => {
|
||||
setCustomFields([...customFields, { key: '', value: '' }])
|
||||
}
|
||||
|
||||
const updateCustomField = (index: number, key: string, value: string) => {
|
||||
const newFields = [...customFields]
|
||||
newFields[index] = { key, value }
|
||||
setCustomFields(newFields)
|
||||
}
|
||||
|
||||
const removeCustomField = (index: number) => {
|
||||
setCustomFields(customFields.filter((_, i) => i !== index))
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!title.trim()) {
|
||||
toast.error('Please enter a project title')
|
||||
return
|
||||
}
|
||||
if (!selectedRoundId) {
|
||||
toast.error('Please select a round')
|
||||
return
|
||||
}
|
||||
|
||||
// Build metadata
|
||||
const metadataJson: Record<string, unknown> = {}
|
||||
if (contactEmail) metadataJson.contactEmail = contactEmail
|
||||
if (contactName) metadataJson.contactName = contactName
|
||||
if (country) metadataJson.country = country
|
||||
|
||||
// Add custom fields
|
||||
customFields.forEach((field) => {
|
||||
if (field.key.trim() && field.value.trim()) {
|
||||
metadataJson[field.key.trim()] = field.value.trim()
|
||||
}
|
||||
})
|
||||
|
||||
createProject.mutate({
|
||||
roundId: selectedRoundId,
|
||||
title: title.trim(),
|
||||
teamName: teamName.trim() || undefined,
|
||||
description: description.trim() || undefined,
|
||||
tags: tags.length > 0 ? tags : undefined,
|
||||
metadataJson: Object.keys(metadataJson).length > 0 ? metadataJson : undefined,
|
||||
})
|
||||
}
|
||||
|
||||
if (loadingPrograms) {
|
||||
return <NewProjectPageSkeleton />
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" asChild className="-ml-4">
|
||||
<Link href="/admin/projects">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Projects
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<FolderPlus className="h-6 w-6 text-primary" />
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Add Project</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Manually create a new project submission
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Round selection */}
|
||||
{!selectedRoundId ? (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Select Round</CardTitle>
|
||||
<CardDescription>
|
||||
Choose the round for this project submission
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{rounds.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<AlertCircle className="h-12 w-12 text-muted-foreground/50" />
|
||||
<p className="mt-2 font-medium">No Active Rounds</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Create a round first before adding projects
|
||||
</p>
|
||||
<Button asChild className="mt-4">
|
||||
<Link href="/admin/rounds/new">Create Round</Link>
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Select value={selectedRoundId} onValueChange={setSelectedRoundId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a round" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{rounds.map((round) => (
|
||||
<SelectItem key={round.id} value={round.id}>
|
||||
{round.programName} - {round.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<>
|
||||
{/* Selected round info */}
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-between py-4">
|
||||
<div>
|
||||
<p className="font-medium">{selectedRound?.programName}</p>
|
||||
<p className="text-sm text-muted-foreground">{selectedRound?.name}</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setSelectedRoundId('')}
|
||||
>
|
||||
Change Round
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{/* Basic Info */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Project Details</CardTitle>
|
||||
<CardDescription>
|
||||
Basic information about the project
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title">Project Title *</Label>
|
||||
<Input
|
||||
id="title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="e.g., Ocean Cleanup Initiative"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="teamName">Team/Organization Name</Label>
|
||||
<Input
|
||||
id="teamName"
|
||||
value={teamName}
|
||||
onChange={(e) => setTeamName(e.target.value)}
|
||||
placeholder="e.g., Blue Ocean Foundation"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Brief description of the project..."
|
||||
rows={4}
|
||||
maxLength={2000}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Tags</Label>
|
||||
<TagInput
|
||||
value={tags}
|
||||
onChange={setTags}
|
||||
placeholder="Select project tags..."
|
||||
maxTags={10}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Contact Info */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Contact Information</CardTitle>
|
||||
<CardDescription>
|
||||
Contact details for the project team
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="contactName">Contact Name</Label>
|
||||
<Input
|
||||
id="contactName"
|
||||
value={contactName}
|
||||
onChange={(e) => setContactName(e.target.value)}
|
||||
placeholder="e.g., John Smith"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="contactEmail">Contact Email</Label>
|
||||
<Input
|
||||
id="contactEmail"
|
||||
type="email"
|
||||
value={contactEmail}
|
||||
onChange={(e) => setContactEmail(e.target.value)}
|
||||
placeholder="e.g., john@example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="country">Country</Label>
|
||||
<Input
|
||||
id="country"
|
||||
value={country}
|
||||
onChange={(e) => setCountry(e.target.value)}
|
||||
placeholder="e.g., Monaco"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Custom Fields */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span>Additional Information</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={addCustomField}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add Field
|
||||
</Button>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Add custom metadata fields for this project
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{customFields.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-4">
|
||||
No additional fields. Click "Add Field" to add custom information.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{customFields.map((field, index) => (
|
||||
<div key={index} className="flex gap-2">
|
||||
<Input
|
||||
placeholder="Field name"
|
||||
value={field.key}
|
||||
onChange={(e) =>
|
||||
updateCustomField(index, e.target.value, field.value)
|
||||
}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Value"
|
||||
value={field.value}
|
||||
onChange={(e) =>
|
||||
updateCustomField(index, field.key, e.target.value)
|
||||
}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => removeCustomField(index)}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end gap-4">
|
||||
<Button variant="outline" asChild>
|
||||
<Link href="/admin/projects">Cancel</Link>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={createProject.isPending || !title.trim()}
|
||||
>
|
||||
{createProject.isPending ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
Create Project
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function NewProjectPageSkeleton() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Skeleton className="h-9 w-32" />
|
||||
</div>
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-6 w-32" />
|
||||
<Skeleton className="h-4 w-64" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function NewProjectPage() {
|
||||
return (
|
||||
<Suspense fallback={<NewProjectPageSkeleton />}>
|
||||
<NewProjectPageContent />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user