Create Opportunity Posting Form component
cgen-46716f58adad44e6b7042700b6564e27
This commit is contained in:
Builder.io
parent
e8de4459c6
commit
012d05e735
1 changed files with 399 additions and 0 deletions
399
client/pages/opportunities/OpportunityPostForm.tsx
Normal file
399
client/pages/opportunities/OpportunityPostForm.tsx
Normal file
|
|
@ -0,0 +1,399 @@
|
|||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Loader2, ArrowLeft, Briefcase } from "lucide-react";
|
||||
import { createOpportunity } from "@/api/opportunities";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { useAethexToast } from "@/hooks/use-aethex-toast";
|
||||
import type { CreateOpportunityData } from "@/api/opportunities";
|
||||
|
||||
const JOB_TYPES = [
|
||||
"Full-Time",
|
||||
"Part-Time",
|
||||
"Contract",
|
||||
"Freelance",
|
||||
"Internship",
|
||||
"Advisory",
|
||||
];
|
||||
|
||||
const EXPERIENCE_LEVELS = ["Entry", "Mid", "Senior", "Lead", "Any"];
|
||||
|
||||
const ARMS = [
|
||||
{ value: "labs", label: "Labs (Research & Innovation)" },
|
||||
{ value: "gameforge", label: "GameForge (Game Publishing)" },
|
||||
{ value: "corp", label: "Corp (Enterprise Services)" },
|
||||
{ value: "foundation", label: "Foundation (Education)" },
|
||||
{ value: "nexus", label: "Nexus (Talent Marketplace)" },
|
||||
];
|
||||
|
||||
export default function OpportunityPostForm() {
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
const { toast } = useAethexToast();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
const [formData, setFormData] = useState<CreateOpportunityData>({
|
||||
title: "",
|
||||
description: "",
|
||||
job_type: "Full-Time",
|
||||
salary_min: undefined,
|
||||
salary_max: undefined,
|
||||
experience_level: "Mid",
|
||||
arm_affiliation: "nexus",
|
||||
});
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-black text-white flex items-center justify-center">
|
||||
<Card className="bg-slate-900 border-slate-700 w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle>Sign In Required</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-slate-300">
|
||||
You must be signed in to post opportunities.
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => navigate("/login")}
|
||||
className="flex-1"
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => navigate("/opportunities")}
|
||||
className="flex-1"
|
||||
>
|
||||
View Opportunities
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.title.trim()) {
|
||||
newErrors.title = "Title is required";
|
||||
}
|
||||
if (!formData.description.trim()) {
|
||||
newErrors.description = "Description is required";
|
||||
}
|
||||
if (!formData.arm_affiliation) {
|
||||
newErrors.arm_affiliation = "Arm affiliation is required";
|
||||
}
|
||||
if (
|
||||
formData.salary_min &&
|
||||
formData.salary_max &&
|
||||
formData.salary_min > formData.salary_max
|
||||
) {
|
||||
newErrors.salary = "Minimum salary must be less than maximum";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) {
|
||||
toast({
|
||||
title: "Validation Error",
|
||||
description: "Please fill in all required fields correctly",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const newOpportunity = await createOpportunity(formData);
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Opportunity posted successfully!",
|
||||
});
|
||||
navigate(`/opportunities/${newOpportunity.id}`);
|
||||
} catch (error) {
|
||||
console.error("Failed to create opportunity:", error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description:
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Failed to post opportunity",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Background */}
|
||||
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#a855f7_0,rgba(0,0,0,0.45)_55%,rgba(0,0,0,0.9)_100%)]" />
|
||||
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(transparent_0,transparent_calc(100%-1px),rgba(168,85,247,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
|
||||
<div className="pointer-events-none absolute top-20 left-10 w-72 h-72 bg-purple-500/20 rounded-full blur-3xl animate-blob" />
|
||||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-violet-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Hero Section */}
|
||||
<section className="py-12 lg:py-16 border-b border-slate-800">
|
||||
<div className="container mx-auto max-w-4xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="mb-6 text-slate-400 hover:text-white"
|
||||
onClick={() => navigate("/opportunities")}
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back to Opportunities
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Briefcase className="h-8 w-8 text-purple-400" />
|
||||
<h1 className="text-4xl font-bold text-purple-300">
|
||||
Post an Opportunity
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-lg text-slate-300">
|
||||
Share a job opening, project, or collaboration opportunity with
|
||||
the AeThex community
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Form Section */}
|
||||
<section className="py-12 lg:py-16">
|
||||
<div className="container mx-auto max-w-4xl px-4">
|
||||
<Card className="bg-slate-900/50 border-slate-700/50 backdrop-blur-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Opportunity Details</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Title */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-white">
|
||||
Opportunity Title *
|
||||
</label>
|
||||
<Input
|
||||
placeholder="e.g., Senior Game Developer - Roblox"
|
||||
value={formData.title}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, title: e.target.value })
|
||||
}
|
||||
className={`bg-slate-800 border-slate-600 text-white placeholder-slate-500 ${
|
||||
errors.title ? "border-red-500" : ""
|
||||
}`}
|
||||
/>
|
||||
{errors.title && (
|
||||
<p className="text-sm text-red-400">{errors.title}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-white">
|
||||
Description *
|
||||
</label>
|
||||
<Textarea
|
||||
placeholder="Describe the opportunity, responsibilities, and requirements..."
|
||||
value={formData.description}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
description: e.target.value,
|
||||
})
|
||||
}
|
||||
rows={6}
|
||||
className={`bg-slate-800 border-slate-600 text-white placeholder-slate-500 ${
|
||||
errors.description ? "border-red-500" : ""
|
||||
}`}
|
||||
/>
|
||||
{errors.description && (
|
||||
<p className="text-sm text-red-400">
|
||||
{errors.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Arm Affiliation */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-white">
|
||||
Arm Affiliation *
|
||||
</label>
|
||||
<Select
|
||||
value={formData.arm_affiliation}
|
||||
onValueChange={(value) =>
|
||||
setFormData({ ...formData, arm_affiliation: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="bg-slate-800 border-slate-600 text-white">
|
||||
<SelectValue placeholder="Select an arm" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-slate-800 border-slate-600 text-white">
|
||||
{ARMS.map((arm) => (
|
||||
<SelectItem key={arm.value} value={arm.value}>
|
||||
{arm.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{errors.arm_affiliation && (
|
||||
<p className="text-sm text-red-400">
|
||||
{errors.arm_affiliation}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Job Type */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-white">
|
||||
Job Type
|
||||
</label>
|
||||
<Select
|
||||
value={formData.job_type}
|
||||
onValueChange={(value) =>
|
||||
setFormData({ ...formData, job_type: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="bg-slate-800 border-slate-600 text-white">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-slate-800 border-slate-600 text-white">
|
||||
{JOB_TYPES.map((type) => (
|
||||
<SelectItem key={type} value={type}>
|
||||
{type}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Experience Level */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-white">
|
||||
Experience Level
|
||||
</label>
|
||||
<Select
|
||||
value={formData.experience_level || "Mid"}
|
||||
onValueChange={(value) =>
|
||||
setFormData({ ...formData, experience_level: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="bg-slate-800 border-slate-600 text-white">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-slate-800 border-slate-600 text-white">
|
||||
{EXPERIENCE_LEVELS.map((level) => (
|
||||
<SelectItem key={level} value={level}>
|
||||
{level}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Salary Range */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-white">
|
||||
Salary Min (Optional)
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="e.g., 80000"
|
||||
value={formData.salary_min || ""}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
salary_min: e.target.value
|
||||
? parseInt(e.target.value)
|
||||
: undefined,
|
||||
})
|
||||
}
|
||||
className="bg-slate-800 border-slate-600 text-white placeholder-slate-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-white">
|
||||
Salary Max (Optional)
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="e.g., 150000"
|
||||
value={formData.salary_max || ""}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
salary_max: e.target.value
|
||||
? parseInt(e.target.value)
|
||||
: undefined,
|
||||
})
|
||||
}
|
||||
className="bg-slate-800 border-slate-600 text-white placeholder-slate-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{errors.salary && (
|
||||
<p className="text-sm text-red-400">{errors.salary}</p>
|
||||
)}
|
||||
|
||||
{/* Submit */}
|
||||
<div className="flex gap-3 pt-6">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 bg-purple-500 text-white hover:bg-purple-600"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Posting...
|
||||
</>
|
||||
) : (
|
||||
"Post Opportunity"
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="border-slate-600"
|
||||
onClick={() => navigate("/opportunities")}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue