feat(jobs): add public job posting page
- Created /register/job page with same layout as company registration - Split panel design: info panel on left, form on right - Two-step form: job details, then salary & company selection - Uses same styling and animations as company registration
This commit is contained in:
Tiago Yamamoto
parent
73967ca52b
commit
aa97d86d0e
1 changed files with 472 additions and 0 deletions
472
frontend/src/app/register/job/page.tsx
Normal file
472
frontend/src/app/register/job/page.tsx
Normal file
|
|
@ -0,0 +1,472 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
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 {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Briefcase,
|
||||
Building2,
|
||||
ArrowLeft,
|
||||
MapPin,
|
||||
DollarSign,
|
||||
Clock,
|
||||
Loader2,
|
||||
} from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
import { useTranslation } from "@/lib/i18n";
|
||||
import { LanguageSwitcher } from "@/components/language-switcher";
|
||||
import { jobsApi, adminCompaniesApi, type CreateJobPayload, type AdminCompany } from "@/lib/api";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function PublicPostJobPage() {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [companies, setCompanies] = useState<AdminCompany[]>([]);
|
||||
const [loadingCompanies, setLoadingCompanies] = useState(true);
|
||||
const [currentStep, setCurrentStep] = useState(1);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
title: "",
|
||||
description: "",
|
||||
location: "",
|
||||
salaryMin: "",
|
||||
salaryMax: "",
|
||||
salaryType: "monthly",
|
||||
currency: "BRL",
|
||||
employmentType: "",
|
||||
workingHours: "",
|
||||
companyId: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const loadCompanies = async () => {
|
||||
try {
|
||||
setLoadingCompanies(true);
|
||||
const data = await adminCompaniesApi.list(undefined, 1, 100);
|
||||
setCompanies(data.data ?? []);
|
||||
} catch (error) {
|
||||
console.error("Failed to load companies:", error);
|
||||
} finally {
|
||||
setLoadingCompanies(false);
|
||||
}
|
||||
};
|
||||
loadCompanies();
|
||||
}, []);
|
||||
|
||||
const updateField = (field: string, value: string) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const canSubmit = () => {
|
||||
return (
|
||||
formData.title.length >= 5 &&
|
||||
formData.description.length >= 20 &&
|
||||
formData.companyId !== ""
|
||||
);
|
||||
};
|
||||
|
||||
const onSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!canSubmit()) {
|
||||
toast.error("Please fill in all required fields");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const payload: CreateJobPayload = {
|
||||
companyId: formData.companyId,
|
||||
title: formData.title,
|
||||
description: formData.description,
|
||||
location: formData.location || undefined,
|
||||
employmentType: formData.employmentType as CreateJobPayload["employmentType"] || undefined,
|
||||
salaryMin: formData.salaryMin ? parseFloat(formData.salaryMin) : undefined,
|
||||
salaryMax: formData.salaryMax ? parseFloat(formData.salaryMax) : undefined,
|
||||
salaryType: formData.salaryType as CreateJobPayload["salaryType"] || undefined,
|
||||
currency: formData.currency as CreateJobPayload["currency"] || undefined,
|
||||
workingHours: formData.workingHours || undefined,
|
||||
status: "draft",
|
||||
};
|
||||
|
||||
await jobsApi.create(payload);
|
||||
toast.success("Job posted successfully! It will be reviewed soon.");
|
||||
router.push("/jobs");
|
||||
} catch (error: any) {
|
||||
console.error("Failed to post job:", error);
|
||||
toast.error(error.message || "Failed to post job. Please try again.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const nextStep = () => {
|
||||
if (currentStep < 2) setCurrentStep(currentStep + 1);
|
||||
};
|
||||
|
||||
const prevStep = () => {
|
||||
if (currentStep > 1) setCurrentStep(currentStep - 1);
|
||||
};
|
||||
|
||||
const stepVariants = {
|
||||
hidden: { opacity: 0, x: 20 },
|
||||
visible: { opacity: 1, x: 0 },
|
||||
exit: { opacity: 0, x: -20 },
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-background to-muted/20 flex">
|
||||
{/* Left Panel - Information */}
|
||||
<div className="hidden lg:flex lg:flex-1 bg-gradient-to-br from-primary to-primary/80 p-8 flex-col justify-center items-center text-primary-foreground relative">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="max-w-md text-center"
|
||||
>
|
||||
<div className="flex items-center justify-center gap-3 mb-8">
|
||||
<Image
|
||||
src="/logohorse.png"
|
||||
alt="GoHorse Jobs"
|
||||
width={80}
|
||||
height={80}
|
||||
className="rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl font-bold mb-4">Post a Job</h1>
|
||||
|
||||
<p className="text-lg opacity-90 leading-relaxed mb-6">
|
||||
Reach thousands of qualified candidates looking for their next opportunity.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4 text-left">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2 h-2 bg-white rounded-full"></div>
|
||||
<span>Free job posting</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2 h-2 bg-white rounded-full"></div>
|
||||
<span>Access to verified candidates</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2 h-2 bg-white rounded-full"></div>
|
||||
<span>Easy application management</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2 h-2 bg-white rounded-full"></div>
|
||||
<span>Professional dashboard</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Right Panel - Form */}
|
||||
<div className="flex-1 p-8 flex flex-col justify-center relative">
|
||||
<div className="absolute top-4 right-4">
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-md mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<Link
|
||||
href="/jobs"
|
||||
className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground mb-4 transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to jobs
|
||||
</Link>
|
||||
|
||||
<h2 className="text-2xl font-bold text-foreground mb-2">
|
||||
Post a new job
|
||||
</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Fill in the details below to create your job listing
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Progress Indicator */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium">
|
||||
Step {currentStep} of 2
|
||||
</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{currentStep === 1 && "Job Details"}
|
||||
{currentStep === 2 && "Salary & Company"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-muted rounded-full h-2">
|
||||
<div
|
||||
className="bg-primary h-2 rounded-full transition-all duration-300"
|
||||
style={{ width: `${(currentStep / 2) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={onSubmit} className="space-y-6">
|
||||
{/* Step 1: Job Details */}
|
||||
{currentStep === 1 && (
|
||||
<motion.div
|
||||
key="step1"
|
||||
variants={stepVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
className="space-y-4"
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title">
|
||||
<Briefcase className="inline h-4 w-4 mr-1" />
|
||||
Job Title *
|
||||
</Label>
|
||||
<Input
|
||||
id="title"
|
||||
placeholder="e.g. Senior Software Engineer"
|
||||
value={formData.title}
|
||||
onChange={(e) => updateField("title", e.target.value)}
|
||||
/>
|
||||
{formData.title.length > 0 && formData.title.length < 5 && (
|
||||
<span className="text-sm text-destructive">
|
||||
Title must be at least 5 characters
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description *</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="Describe the role, responsibilities, and requirements..."
|
||||
rows={5}
|
||||
value={formData.description}
|
||||
onChange={(e) => updateField("description", e.target.value)}
|
||||
/>
|
||||
{formData.description.length > 0 &&
|
||||
formData.description.length < 20 && (
|
||||
<span className="text-sm text-destructive">
|
||||
Description must be at least 20 characters
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="location">
|
||||
<MapPin className="inline h-4 w-4 mr-1" />
|
||||
Location
|
||||
</Label>
|
||||
<Input
|
||||
id="location"
|
||||
placeholder="e.g. São Paulo, SP or Remote"
|
||||
value={formData.location}
|
||||
onChange={(e) => updateField("location", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
<Clock className="inline h-4 w-4 mr-1" />
|
||||
Contract Type
|
||||
</Label>
|
||||
<Select
|
||||
value={formData.employmentType}
|
||||
onValueChange={(v) => updateField("employmentType", v)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select contract type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="permanent">Permanent</SelectItem>
|
||||
<SelectItem value="full-time">Full-time</SelectItem>
|
||||
<SelectItem value="part-time">Part-time</SelectItem>
|
||||
<SelectItem value="contract">Contract</SelectItem>
|
||||
<SelectItem value="temporary">Temporary</SelectItem>
|
||||
<SelectItem value="training">Training</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Button type="button" onClick={nextStep} className="w-full">
|
||||
Next
|
||||
</Button>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Salary & Company */}
|
||||
{currentStep === 2 && (
|
||||
<motion.div
|
||||
key="step2"
|
||||
variants={stepVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
className="space-y-4"
|
||||
>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
<DollarSign className="inline h-4 w-4 mr-1" />
|
||||
Min Salary
|
||||
</Label>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="e.g. 5000"
|
||||
value={formData.salaryMin}
|
||||
onChange={(e) => updateField("salaryMin", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Max Salary</Label>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="e.g. 10000"
|
||||
value={formData.salaryMax}
|
||||
onChange={(e) => updateField("salaryMax", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Currency</Label>
|
||||
<Select
|
||||
value={formData.currency}
|
||||
onValueChange={(v) => updateField("currency", v)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="BRL">R$ (BRL)</SelectItem>
|
||||
<SelectItem value="USD">$ (USD)</SelectItem>
|
||||
<SelectItem value="EUR">€ (EUR)</SelectItem>
|
||||
<SelectItem value="JPY">¥ (JPY)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Period</Label>
|
||||
<Select
|
||||
value={formData.salaryType}
|
||||
onValueChange={(v) => updateField("salaryType", v)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="hourly">Per hour</SelectItem>
|
||||
<SelectItem value="daily">Per day</SelectItem>
|
||||
<SelectItem value="weekly">Per week</SelectItem>
|
||||
<SelectItem value="monthly">Per month</SelectItem>
|
||||
<SelectItem value="yearly">Per year</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
<Clock className="inline h-4 w-4 mr-1" />
|
||||
Working Hours
|
||||
</Label>
|
||||
<Input
|
||||
placeholder="e.g. 9:00 - 18:00, Mon-Fri"
|
||||
value={formData.workingHours}
|
||||
onChange={(e) => updateField("workingHours", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
<Building2 className="inline h-4 w-4 mr-1" />
|
||||
Company *
|
||||
</Label>
|
||||
{loadingCompanies ? (
|
||||
<div className="flex items-center gap-2 text-muted-foreground py-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Loading companies...
|
||||
</div>
|
||||
) : (
|
||||
<Select
|
||||
value={formData.companyId}
|
||||
onValueChange={(v) => updateField("companyId", v)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a company" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{companies.length === 0 ? (
|
||||
<SelectItem value="__none" disabled>
|
||||
No companies available
|
||||
</SelectItem>
|
||||
) : (
|
||||
companies.map((company) => (
|
||||
<SelectItem key={company.id} value={company.id}>
|
||||
{company.name}
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={prevStep}
|
||||
className="flex-1"
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading || !canSubmit()}
|
||||
className="flex-1"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Posting...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Briefcase className="h-4 w-4 mr-2" />
|
||||
Post Job
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</form>
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Want to manage your jobs?{" "}
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-primary hover:underline font-medium"
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue