OpportunityDetail page - view individual opportunity
cgen-fc9e4569b2a04ca0a476d425c6d55404
This commit is contained in:
Builder.io
parent
b322efa514
commit
86d507cbef
1 changed files with 293 additions and 0 deletions
293
client/pages/opportunities/OpportunityDetail.tsx
Normal file
293
client/pages/opportunities/OpportunityDetail.tsx
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { useParams, 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 { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Loader2,
|
||||
ArrowLeft,
|
||||
DollarSign,
|
||||
Briefcase,
|
||||
Clock,
|
||||
Send,
|
||||
} from "lucide-react";
|
||||
import { getOpportunityById, submitApplication } from "@/api/opportunities";
|
||||
import { ArmBadge } from "@/components/creator-network/ArmBadge";
|
||||
import { useAethexToast } from "@/hooks/use-aethex-toast";
|
||||
import { useAuthContext } from "@/contexts/AuthContext";
|
||||
import type { Opportunity } from "@/api/opportunities";
|
||||
|
||||
export default function OpportunityDetail() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuthContext();
|
||||
const { toast } = useAethexToast();
|
||||
const [opportunity, setOpportunity] = useState<Opportunity | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isApplying, setIsApplying] = useState(false);
|
||||
const [showApplyDialog, setShowApplyDialog] = useState(false);
|
||||
const [coverLetter, setCoverLetter] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const fetchOpportunity = async () => {
|
||||
if (!id) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await getOpportunityById(id);
|
||||
setOpportunity(data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch opportunity:", error);
|
||||
setOpportunity(null);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchOpportunity();
|
||||
}, [id]);
|
||||
|
||||
const handleApply = async () => {
|
||||
if (!opportunity || !user) return;
|
||||
|
||||
if (!coverLetter.trim()) {
|
||||
toast("Please write a cover letter", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsApplying(true);
|
||||
try {
|
||||
await submitApplication({
|
||||
opportunity_id: opportunity.id,
|
||||
cover_letter: coverLetter.trim(),
|
||||
});
|
||||
toast("Application submitted successfully!", "success");
|
||||
setCoverLetter("");
|
||||
setShowApplyDialog(false);
|
||||
navigate("/profile/applications");
|
||||
} catch (error) {
|
||||
toast(
|
||||
error instanceof Error ? error.message : "Failed to submit application",
|
||||
"error"
|
||||
);
|
||||
} finally {
|
||||
setIsApplying(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatSalary = (min?: number, max?: number) => {
|
||||
if (!min && !max) return "Not specified";
|
||||
if (min && max) return `$${min.toLocaleString()} - $${max.toLocaleString()}`;
|
||||
if (min) return `$${min.toLocaleString()}+`;
|
||||
if (max) return `Up to $${max.toLocaleString()}`;
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
if (!opportunity) {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-black text-white flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-3xl font-bold mb-4">Opportunity Not Found</h1>
|
||||
<p className="text-gray-400 mb-6">
|
||||
The opportunity you're looking for doesn't exist.
|
||||
</p>
|
||||
<Button onClick={() => navigate("/opportunities")}>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back to Opportunities
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
const poster = opportunity.aethex_creators;
|
||||
|
||||
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,#06b6d4_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(6,182,212,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
|
||||
|
||||
<main className="relative z-10">
|
||||
<div className="container mx-auto max-w-4xl px-4 py-12">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<Button
|
||||
onClick={() => navigate("/opportunities")}
|
||||
variant="ghost"
|
||||
className="mb-4"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back to Opportunities
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Opportunity Card */}
|
||||
<Card className="bg-slate-800/50 border-slate-700 mb-8">
|
||||
<CardContent className="p-8">
|
||||
<div className="mb-6">
|
||||
<ArmBadge arm={opportunity.arm_affiliation} />
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl font-bold mb-4">
|
||||
{opportunity.title}
|
||||
</h1>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8 py-6 border-t border-b border-slate-700">
|
||||
<div>
|
||||
<p className="text-xs text-gray-400 mb-1">Job Type</p>
|
||||
<div className="flex items-center gap-1">
|
||||
<Briefcase className="h-4 w-4 text-yellow-400" />
|
||||
<p className="font-semibold">{opportunity.job_type}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-400 mb-1">Salary</p>
|
||||
<div className="flex items-center gap-1">
|
||||
<DollarSign className="h-4 w-4 text-green-400" />
|
||||
<p className="font-semibold text-sm">
|
||||
{formatSalary(
|
||||
opportunity.salary_min,
|
||||
opportunity.salary_max
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-400 mb-1">Experience</p>
|
||||
<p className="font-semibold text-sm">
|
||||
{opportunity.experience_level || "Any"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-400 mb-1">Posted</p>
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock className="h-4 w-4 text-blue-400" />
|
||||
<p className="font-semibold text-sm">
|
||||
{new Date(opportunity.created_at).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Posted By */}
|
||||
<div className="flex items-center gap-4 mb-8 p-4 bg-slate-700/30 rounded-lg">
|
||||
<Avatar className="h-12 w-12">
|
||||
<AvatarImage src={poster.avatar_url} alt={poster.username} />
|
||||
<AvatarFallback>
|
||||
{poster.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<p className="text-xs text-gray-400">Posted by</p>
|
||||
<p className="font-semibold">@{poster.username}</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() =>
|
||||
navigate(`/creators/${poster.username}`)
|
||||
}
|
||||
variant="outline"
|
||||
>
|
||||
View Profile
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-xl font-bold mb-4">Description</h2>
|
||||
<p className="text-gray-300 whitespace-pre-wrap leading-relaxed">
|
||||
{opportunity.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Apply Button */}
|
||||
{user ? (
|
||||
<Button
|
||||
onClick={() => setShowApplyDialog(true)}
|
||||
size="lg"
|
||||
className="w-full"
|
||||
>
|
||||
<Send className="h-4 w-4 mr-2" />
|
||||
Apply for This Opportunity
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
onClick={() => navigate("/signup")}
|
||||
size="lg"
|
||||
className="w-full"
|
||||
>
|
||||
Sign in to Apply
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Apply Dialog */}
|
||||
<AlertDialog open={showApplyDialog} onOpenChange={setShowApplyDialog}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Apply for {opportunity.title}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Submit your application with a cover letter explaining why you're
|
||||
interested in this opportunity.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Cover Letter</label>
|
||||
<Textarea
|
||||
placeholder="Tell the poster why you're interested in this opportunity..."
|
||||
value={coverLetter}
|
||||
onChange={(e) => setCoverLetter(e.target.value)}
|
||||
disabled={isApplying}
|
||||
className="min-h-32 bg-slate-800/50 border-slate-700"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<AlertDialogCancel disabled={isApplying}>
|
||||
Cancel
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleApply}
|
||||
disabled={isApplying || !coverLetter.trim()}
|
||||
className="gap-2"
|
||||
>
|
||||
{isApplying && (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
)}
|
||||
Submit Application
|
||||
</AlertDialogAction>
|
||||
</div>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue