MyApplications page - track submitted job applications
cgen-2bb6148abd844992a5bbd7235c1fa9a2
This commit is contained in:
Builder.io
parent
86d507cbef
commit
6cf3ab3a9c
1 changed files with 319 additions and 0 deletions
319
client/pages/profile/MyApplications.tsx
Normal file
319
client/pages/profile/MyApplications.tsx
Normal file
|
|
@ -0,0 +1,319 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
|
||||
import {
|
||||
Loader2,
|
||||
FileText,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
XCircle,
|
||||
Eye,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { getMyApplications, withdrawApplication } from "@/api/applications";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useAethexToast } from "@/hooks/use-aethex-toast";
|
||||
import type { Application } from "@/api/applications";
|
||||
|
||||
export default function MyApplications() {
|
||||
const navigate = useNavigate();
|
||||
const { toast } = useAethexToast();
|
||||
const [applications, setApplications] = useState<Application[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [selectedStatus, setSelectedStatus] = useState<string | undefined>();
|
||||
|
||||
useEffect(() => {
|
||||
const fetchApplications = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const result = await getMyApplications({
|
||||
status: selectedStatus,
|
||||
page: 1,
|
||||
limit: 50,
|
||||
});
|
||||
setApplications(result.data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch applications:", error);
|
||||
setApplications([]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchApplications();
|
||||
}, [selectedStatus]);
|
||||
|
||||
const handleWithdraw = async (applicationId: string) => {
|
||||
try {
|
||||
await withdrawApplication(applicationId);
|
||||
toast("Application withdrawn", "success");
|
||||
setApplications(
|
||||
applications.filter((app) => app.id !== applicationId)
|
||||
);
|
||||
} catch (error) {
|
||||
toast(
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Failed to withdraw application",
|
||||
"error"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case "submitted":
|
||||
return "bg-blue-500/10 text-blue-300";
|
||||
case "reviewing":
|
||||
return "bg-yellow-500/10 text-yellow-300";
|
||||
case "accepted":
|
||||
return "bg-green-500/10 text-green-300";
|
||||
case "rejected":
|
||||
return "bg-red-500/10 text-red-300";
|
||||
default:
|
||||
return "bg-gray-500/10 text-gray-300";
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case "submitted":
|
||||
return <Clock className="h-4 w-4" />;
|
||||
case "reviewing":
|
||||
return <FileText className="h-4 w-4" />;
|
||||
case "accepted":
|
||||
return <CheckCircle className="h-4 w-4" />;
|
||||
case "rejected":
|
||||
return <XCircle className="h-4 w-4" />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
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,#8b5cf6_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(139,92,246,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">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-black text-white mb-2">
|
||||
My Applications
|
||||
</h1>
|
||||
<p className="text-gray-300">
|
||||
Track the status of all your job applications
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-purple-400" />
|
||||
</div>
|
||||
) : applications.length === 0 ? (
|
||||
<Card className="bg-slate-800/50 border-slate-700">
|
||||
<CardContent className="p-12 text-center">
|
||||
<FileText className="h-12 w-12 text-gray-600 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold text-gray-300 mb-2">
|
||||
No applications yet
|
||||
</h3>
|
||||
<p className="text-gray-500 mb-6">
|
||||
Start applying to opportunities to see them here
|
||||
</p>
|
||||
<Button onClick={() => navigate("/opportunities")}>
|
||||
Browse Opportunities
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<>
|
||||
<Tabs
|
||||
value={selectedStatus || "all"}
|
||||
onValueChange={(value) =>
|
||||
setSelectedStatus(value === "all" ? undefined : value)
|
||||
}
|
||||
className="mb-8"
|
||||
>
|
||||
<TabsList className="grid w-full grid-cols-5 bg-slate-800/50 border-slate-700">
|
||||
<TabsTrigger value="all">
|
||||
All ({applications.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="submitted">
|
||||
Submitted (
|
||||
{
|
||||
applications.filter((app) => app.status === "submitted")
|
||||
.length
|
||||
}
|
||||
)
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="reviewing">
|
||||
Reviewing (
|
||||
{
|
||||
applications.filter((app) => app.status === "reviewing")
|
||||
.length
|
||||
}
|
||||
)
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="accepted">
|
||||
Accepted (
|
||||
{
|
||||
applications.filter((app) => app.status === "accepted")
|
||||
.length
|
||||
}
|
||||
)
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="rejected">
|
||||
Rejected (
|
||||
{
|
||||
applications.filter((app) => app.status === "rejected")
|
||||
.length
|
||||
}
|
||||
)
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="all" className="space-y-4">
|
||||
{applications.map((app) => (
|
||||
<ApplicationCard
|
||||
key={app.id}
|
||||
application={app}
|
||||
statusColor={getStatusColor(app.status)}
|
||||
statusIcon={getStatusIcon(app.status)}
|
||||
onWithdraw={handleWithdraw}
|
||||
onViewOpportunity={() =>
|
||||
navigate(`/opportunities/${app.opportunity_id}`)
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</TabsContent>
|
||||
|
||||
{["submitted", "reviewing", "accepted", "rejected"].map(
|
||||
(status) => (
|
||||
<TabsContent
|
||||
key={status}
|
||||
value={status}
|
||||
className="space-y-4"
|
||||
>
|
||||
{applications
|
||||
.filter((app) => app.status === status)
|
||||
.map((app) => (
|
||||
<ApplicationCard
|
||||
key={app.id}
|
||||
application={app}
|
||||
statusColor={getStatusColor(app.status)}
|
||||
statusIcon={getStatusIcon(app.status)}
|
||||
onWithdraw={handleWithdraw}
|
||||
onViewOpportunity={() =>
|
||||
navigate(`/opportunities/${app.opportunity_id}`)
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</TabsContent>
|
||||
)
|
||||
)}
|
||||
</Tabs>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
interface ApplicationCardProps {
|
||||
application: Application;
|
||||
statusColor: string;
|
||||
statusIcon: React.ReactNode;
|
||||
onWithdraw: (id: string) => void;
|
||||
onViewOpportunity: () => void;
|
||||
}
|
||||
|
||||
function ApplicationCard({
|
||||
application,
|
||||
statusColor,
|
||||
statusIcon,
|
||||
onWithdraw,
|
||||
onViewOpportunity,
|
||||
}: ApplicationCardProps) {
|
||||
const opportunity = application.aethex_opportunities;
|
||||
if (!opportunity) return null;
|
||||
|
||||
const poster = opportunity.aethex_creators;
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-800/50 border-slate-700">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<h3 className="text-lg font-bold text-white">
|
||||
{opportunity.title}
|
||||
</h3>
|
||||
<Badge className={`${statusColor} border-0 gap-1`}>
|
||||
{statusIcon}
|
||||
{application.status.charAt(0).toUpperCase() +
|
||||
application.status.slice(1)}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<Avatar className="h-10 w-10">
|
||||
<AvatarImage
|
||||
src={poster.avatar_url}
|
||||
alt={poster.username}
|
||||
/>
|
||||
<AvatarFallback>
|
||||
{poster.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Posted by</p>
|
||||
<p className="font-semibold">@{poster.username}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-gray-400 mb-3">
|
||||
Applied on {new Date(application.applied_at).toLocaleDateString()}
|
||||
</p>
|
||||
|
||||
{application.response_message && (
|
||||
<p className="text-sm bg-slate-700/30 text-gray-300 p-3 rounded-lg mb-3 italic">
|
||||
{application.response_message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 flex-col">
|
||||
<Button
|
||||
onClick={onViewOpportunity}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
<Eye className="h-4 w-4 mr-1" />
|
||||
View Opportunity
|
||||
</Button>
|
||||
{application.status === "submitted" && (
|
||||
<Button
|
||||
onClick={() => onWithdraw(application.id)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="whitespace-nowrap text-red-400 hover:text-red-300"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-1" />
|
||||
Withdraw
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue