573 lines
25 KiB
TypeScript
573 lines
25 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
|
|
import { useState, useTransition } from "react"
|
|
import { useForm } from "react-hook-form"
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { Input } from "@workspace/ui/components/input"
|
|
import { Textarea } from "@workspace/ui/components/textarea"
|
|
import { Button } from "@workspace/ui/components/button"
|
|
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@workspace/ui/components/form"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@workspace/ui/components/select"
|
|
import { Card, CardContent } from "@workspace/ui/components/card"
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@workspace/ui/components/dialog"
|
|
import { Checkbox } from "@workspace/ui/components/checkbox"
|
|
import { jobSchema, type JobFormData } from "./schema"
|
|
import { createJob, createCompany } from "./actions"
|
|
import { Popover, PopoverTrigger, PopoverContent } from "@workspace/ui/components/popover"
|
|
import { Calendar } from "@workspace/ui/components/calendar"
|
|
import { format } from "date-fns"
|
|
import {
|
|
CalendarIcon,
|
|
Plus,
|
|
Building2,
|
|
Briefcase,
|
|
MapPin,
|
|
DollarSign,
|
|
GraduationCap,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
LinkIcon,
|
|
} from "lucide-react"
|
|
import { cn } from "@workspace/ui/lib/utils"
|
|
import { Alert, AlertDescription } from "@workspace/ui/components/alert"
|
|
|
|
function NewJobForm({ companies }: { companies: { id: number; name: string }[] }) {
|
|
const [success, setSuccess] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [isPending, startTransition] = useTransition()
|
|
const [showModal, setShowModal] = useState(false)
|
|
const [addingCompany, setAddingCompany] = useState(false)
|
|
const [companyList, setCompanyList] = useState(companies)
|
|
const [newCompanyName, setNewCompanyName] = useState("")
|
|
const [newCompanyLink, setNewCompanyLink] = useState("")
|
|
const [newCompanyDescription, setNewCompanyDescription] = useState("")
|
|
const [newCompanyImageURL, setNewCompanyImageURL] = useState("")
|
|
const [companyError, setCompanyError] = useState<string | null>(null)
|
|
|
|
const form = useForm<JobFormData>({
|
|
resolver: zodResolver(jobSchema),
|
|
defaultValues: {
|
|
companyId: companies[0]?.id ?? 0,
|
|
title: "",
|
|
link: "",
|
|
description: "",
|
|
location: "",
|
|
imageURL: "",
|
|
salary: "",
|
|
applicationDeadline: new Date(),
|
|
minCGPA: 0,
|
|
minSSC: 0,
|
|
minHSC: 0,
|
|
allowDeadKT: true,
|
|
allowLiveKT: true,
|
|
},
|
|
})
|
|
|
|
async function handleSubmit(data: JobFormData) {
|
|
setError(null)
|
|
setSuccess(false)
|
|
startTransition(async () => {
|
|
// Convert React Hook Form data to FormData for the server action
|
|
const formData = new FormData()
|
|
formData.append('companyId', String(data.companyId))
|
|
formData.append('title', data.title)
|
|
formData.append('link', data.link)
|
|
formData.append('description', data.description)
|
|
formData.append('location', data.location)
|
|
formData.append('imageURL', data.imageURL || '')
|
|
formData.append('salary', data.salary)
|
|
// Convert Date to ISO string for the server
|
|
const deadline = data.applicationDeadline instanceof Date
|
|
? data.applicationDeadline.toISOString().slice(0, 10)
|
|
: new Date(data.applicationDeadline).toISOString().slice(0, 10)
|
|
formData.append('applicationDeadline', deadline)
|
|
formData.append('minCGPA', String(data.minCGPA))
|
|
formData.append('minSSC', String(data.minSSC))
|
|
formData.append('minHSC', String(data.minHSC))
|
|
formData.append('allowDeadKT', String(data.allowDeadKT))
|
|
formData.append('allowLiveKT', String(data.allowLiveKT))
|
|
|
|
const result = await createJob(formData)
|
|
if (result?.success) {
|
|
setSuccess(true)
|
|
form.reset(form.formState.defaultValues)
|
|
} else {
|
|
setError(result?.error || "Failed to create job")
|
|
}
|
|
})
|
|
}
|
|
|
|
async function handleAddCompany(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
setCompanyError(null)
|
|
|
|
if (!newCompanyName.trim()) {
|
|
setCompanyError("Please enter a company name")
|
|
return
|
|
}
|
|
|
|
setAddingCompany(true)
|
|
const formData = new FormData()
|
|
formData.append("name", newCompanyName.trim())
|
|
formData.append("link", newCompanyLink.trim())
|
|
formData.append("description", newCompanyDescription.trim())
|
|
formData.append("imageURL", newCompanyImageURL.trim())
|
|
|
|
const result = await createCompany(formData)
|
|
if (result?.success && result.company) {
|
|
setCompanyList((prev) => [...prev, result.company])
|
|
form.setValue("companyId", result.company.id)
|
|
setNewCompanyName("")
|
|
setNewCompanyLink("")
|
|
setNewCompanyDescription("")
|
|
setNewCompanyImageURL("")
|
|
setShowModal(false)
|
|
} else {
|
|
setCompanyError(result?.error || "Failed to add company")
|
|
}
|
|
setAddingCompany(false)
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 p-8">
|
|
<div className="max-w-4xl mx-auto px-4">
|
|
{/* Header */}
|
|
<div className="text-center mb-8">
|
|
<div className="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4">
|
|
<Briefcase className="w-8 h-8 text-blue-600" />
|
|
</div>
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">Create New Job Listing</h1>
|
|
<p className="text-gray-600">Fill in the details below to post a new job opportunity</p>
|
|
</div>
|
|
|
|
<Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
|
|
<CardContent className="p-8">
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
|
|
{/* Success/Error Messages */}
|
|
{success && (
|
|
<Alert className="border-green-200 bg-green-50">
|
|
<CheckCircle className="h-4 w-4 text-green-600" />
|
|
<AlertDescription className="text-green-800">
|
|
Job created successfully! You can create another one or go back to the dashboard.
|
|
</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{error && (
|
|
<Alert className="border-red-200 bg-red-50">
|
|
<AlertCircle className="h-4 w-4 text-red-600" />
|
|
<AlertDescription className="text-red-800">{error}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{/* Company Selection Section */}
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-2 pb-2 border-b border-gray-200">
|
|
<Building2 className="w-5 h-5 text-blue-600" />
|
|
<h2 className="text-lg font-semibold text-gray-900">Company Information</h2>
|
|
</div>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="companyId"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-sm font-medium text-gray-700">Select Company *</FormLabel>
|
|
<div className="flex gap-2">
|
|
<Select
|
|
onValueChange={(val) => field.onChange(Number(val))}
|
|
value={String(field.value || "")}
|
|
>
|
|
<FormControl>
|
|
<SelectTrigger className="flex-1">
|
|
<SelectValue placeholder="Choose a company" />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent>
|
|
{companyList.map((c) => (
|
|
<SelectItem key={c.id} value={String(c.id)}>
|
|
{c.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Dialog open={showModal} onOpenChange={setShowModal}>
|
|
<DialogTrigger asChild>
|
|
<Button type="button" variant="outline" size="icon" className="shrink-0 bg-transparent">
|
|
<Plus className="w-4 h-4" />
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<Building2 className="w-5 h-5" />
|
|
Add New Company
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<form onSubmit={handleAddCompany} className="space-y-4 py-4">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-gray-700">Company Name *</label>
|
|
<Input
|
|
value={newCompanyName}
|
|
onChange={(e) => setNewCompanyName(e.target.value)}
|
|
placeholder="Enter company name"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-gray-700">Website</label>
|
|
<Input
|
|
value={newCompanyLink}
|
|
onChange={(e) => setNewCompanyLink(e.target.value)}
|
|
placeholder="https://company.com"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-gray-700">Company Logo URL</label>
|
|
<Input
|
|
value={newCompanyImageURL}
|
|
onChange={(e) => setNewCompanyImageURL(e.target.value)}
|
|
placeholder="https://example.com/logo.png"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-gray-700">Description</label>
|
|
<Textarea
|
|
value={newCompanyDescription}
|
|
onChange={(e) => setNewCompanyDescription(e.target.value)}
|
|
placeholder="Brief description of the company..."
|
|
className="min-h-[80px] resize-none"
|
|
/>
|
|
</div>
|
|
{companyError && (
|
|
<Alert className="border-red-200 bg-red-50">
|
|
<AlertCircle className="h-4 w-4 text-red-600" />
|
|
<AlertDescription className="text-red-800">{companyError}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
<Button type="submit" disabled={addingCompany} className="w-full">
|
|
{addingCompany ? "Adding Company..." : "Add Company"}
|
|
</Button>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Job Details Section */}
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-2 pb-2 border-b border-gray-200">
|
|
<Briefcase className="w-5 h-5 text-blue-600" />
|
|
<h2 className="text-lg font-semibold text-gray-900">Job Details</h2>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<FormField
|
|
control={form.control}
|
|
name="title"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-sm font-medium text-gray-700">Job Title *</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="e.g. Software Engineer" {...field} className="h-11" />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="location"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-sm font-medium text-gray-700 flex items-center gap-1">
|
|
<MapPin className="w-4 h-4" />
|
|
Location *
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="e.g. Mumbai, India" {...field} className="h-11" />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<FormField
|
|
control={form.control}
|
|
name="salary"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-sm font-medium text-gray-700 flex items-center gap-1">
|
|
<DollarSign className="w-4 h-4" />
|
|
Salary *
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="e.g. ₹5-8 LPA" {...field} className="h-11" />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="applicationDeadline"
|
|
render={({ field }) => {
|
|
const getDisplayDate = (value: Date | string) => {
|
|
if (!value) return ""
|
|
try {
|
|
const date = value instanceof Date ? value : new Date(value)
|
|
return format(date, "PPP")
|
|
} catch {
|
|
return ""
|
|
}
|
|
}
|
|
|
|
const selectedDate = field.value ? (field.value instanceof Date ? field.value : new Date(field.value)) : undefined
|
|
|
|
const handleSelect = (date: Date | undefined) => {
|
|
if (date) {
|
|
field.onChange(date)
|
|
} else {
|
|
field.onChange(new Date())
|
|
}
|
|
}
|
|
|
|
return (
|
|
<FormItem className="flex flex-col">
|
|
<FormLabel className="text-sm font-medium text-gray-700">Application Deadline *</FormLabel>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<FormControl>
|
|
<Button
|
|
variant="outline"
|
|
className={cn(
|
|
"h-11 pl-3 text-left font-normal",
|
|
!field.value && "text-muted-foreground",
|
|
)}
|
|
type="button"
|
|
>
|
|
{field.value ? getDisplayDate(field.value) : <span>Pick a date</span>}
|
|
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
|
</Button>
|
|
</FormControl>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0" align="start">
|
|
<Calendar
|
|
mode="single"
|
|
selected={selectedDate}
|
|
onSelect={handleSelect}
|
|
captionLayout="dropdown"
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<FormField
|
|
control={form.control}
|
|
name="link"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-sm font-medium text-gray-700 flex items-center gap-1">
|
|
<LinkIcon className="w-4 h-4" />
|
|
Job Application Link *
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="https://company.com/careers/job-id" {...field} className="h-11" />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="imageURL"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-sm font-medium text-gray-700">Job Image URL</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="https://example.com/job-image.png" {...field} className="h-11" />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="description"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-sm font-medium text-gray-700">Job Description *</FormLabel>
|
|
<FormControl>
|
|
<Textarea
|
|
placeholder="Describe the role, responsibilities, and requirements..."
|
|
{...field}
|
|
className="min-h-[120px] resize-none"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Academic Requirements Section */}
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-2 pb-2 border-b border-gray-200">
|
|
<GraduationCap className="w-5 h-5 text-blue-600" />
|
|
<h2 className="text-lg font-semibold text-gray-900">Academic Requirements</h2>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<FormField
|
|
control={form.control}
|
|
name="minCGPA"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-sm font-medium text-gray-700">Minimum CGPA</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
placeholder="0.00"
|
|
{...field}
|
|
value={field.value?.toString() || ''}
|
|
onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : 0)}
|
|
className="h-11"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="minSSC"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-sm font-medium text-gray-700">Minimum SSC %</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
placeholder="0.00"
|
|
{...field}
|
|
value={field.value?.toString() || ''}
|
|
onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : 0)}
|
|
className="h-11"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="minHSC"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="text-sm font-medium text-gray-700">Minimum HSC %</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
placeholder="0.00"
|
|
{...field}
|
|
value={field.value?.toString() || ''}
|
|
onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : 0)}
|
|
className="h-11"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<FormField
|
|
control={form.control}
|
|
name="allowDeadKT"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 bg-gray-50">
|
|
<FormControl>
|
|
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
|
|
</FormControl>
|
|
<div className="space-y-1 leading-none">
|
|
<FormLabel className="text-sm font-medium">Allow Dead KT</FormLabel>
|
|
<p className="text-xs text-gray-600">Students with cleared backlogs can apply</p>
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="allowLiveKT"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 bg-gray-50">
|
|
<FormControl>
|
|
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
|
|
</FormControl>
|
|
<div className="space-y-1 leading-none">
|
|
<FormLabel className="text-sm font-medium">Allow Live KT</FormLabel>
|
|
<p className="text-xs text-gray-600">Students with pending backlogs can apply</p>
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Submit Button */}
|
|
<div className="flex justify-center pt-6">
|
|
<Button
|
|
type="submit"
|
|
disabled={isPending}
|
|
>
|
|
{isPending ? (
|
|
<>
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
|
|
Creating Job...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Briefcase className="w-4 h-4 mr-2" />
|
|
Create Job Listing
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default NewJobForm
|