AI overlords we love you
This commit is contained in:
Anushlinux
271
apps/student/app/(main)/applications/page.tsx
Normal file
271
apps/student/app/(main)/applications/page.tsx
Normal file
@@ -0,0 +1,271 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@workspace/ui/components/card"
|
||||
import { Button } from "@workspace/ui/components/button"
|
||||
import { Badge } from "@workspace/ui/components/badge"
|
||||
import { Separator } from "@workspace/ui/components/separator"
|
||||
import {
|
||||
FileText,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
AlertCircle,
|
||||
Building2,
|
||||
Calendar,
|
||||
MapPin,
|
||||
DollarSign,
|
||||
Eye,
|
||||
Download,
|
||||
Share2
|
||||
} from "lucide-react"
|
||||
|
||||
// Mock data for applications - in real app this would come from database
|
||||
const mockApplications = [
|
||||
{
|
||||
id: 1,
|
||||
jobTitle: "Software Engineer Intern",
|
||||
company: "TechCorp Solutions",
|
||||
status: "pending",
|
||||
appliedDate: "2024-01-15",
|
||||
deadline: "2024-02-15",
|
||||
location: "San Francisco, CA",
|
||||
salary: "$25/hour",
|
||||
resume: "Resume_v2.pdf"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
jobTitle: "Data Analyst",
|
||||
company: "DataFlow Inc",
|
||||
status: "reviewed",
|
||||
appliedDate: "2024-01-10",
|
||||
deadline: "2024-02-10",
|
||||
location: "New York, NY",
|
||||
salary: "$30/hour",
|
||||
resume: "Resume_v2.pdf"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
jobTitle: "Frontend Developer",
|
||||
company: "WebSolutions",
|
||||
status: "accepted",
|
||||
appliedDate: "2024-01-05",
|
||||
deadline: "2024-02-05",
|
||||
location: "Remote",
|
||||
salary: "$28/hour",
|
||||
resume: "Resume_v2.pdf"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
jobTitle: "Product Manager Intern",
|
||||
company: "InnovateTech",
|
||||
status: "rejected",
|
||||
appliedDate: "2024-01-01",
|
||||
deadline: "2024-02-01",
|
||||
location: "Seattle, WA",
|
||||
salary: "$32/hour",
|
||||
resume: "Resume_v2.pdf"
|
||||
}
|
||||
]
|
||||
|
||||
const getStatusConfig = (status: string) => {
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
return {
|
||||
icon: Clock,
|
||||
color: 'bg-yellow-100 text-yellow-700',
|
||||
text: 'Pending Review'
|
||||
}
|
||||
case 'reviewed':
|
||||
return {
|
||||
icon: Eye,
|
||||
color: 'bg-blue-100 text-blue-700',
|
||||
text: 'Under Review'
|
||||
}
|
||||
case 'accepted':
|
||||
return {
|
||||
icon: CheckCircle,
|
||||
color: 'bg-green-100 text-green-700',
|
||||
text: 'Accepted'
|
||||
}
|
||||
case 'rejected':
|
||||
return {
|
||||
icon: XCircle,
|
||||
color: 'bg-red-100 text-red-700',
|
||||
text: 'Rejected'
|
||||
}
|
||||
default:
|
||||
return {
|
||||
icon: AlertCircle,
|
||||
color: 'bg-gray-100 text-gray-700',
|
||||
text: 'Unknown'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default function ApplicationsPage() {
|
||||
const statusConfig = getStatusConfig('pending')
|
||||
const StatusIcon = statusConfig.icon
|
||||
|
||||
// Calculate stats
|
||||
const totalApplications = mockApplications.length
|
||||
const pendingApplications = mockApplications.filter(app => app.status === 'pending').length
|
||||
const acceptedApplications = mockApplications.filter(app => app.status === 'accepted').length
|
||||
const rejectedApplications = mockApplications.filter(app => app.status === 'rejected').length
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-2">My Applications</h1>
|
||||
<p className="text-xl text-gray-600">Track your job applications and their status</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Total Applications</p>
|
||||
<p className="text-3xl font-bold text-gray-800">{totalApplications}</p>
|
||||
</div>
|
||||
<FileText className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Pending Review</p>
|
||||
<p className="text-3xl font-bold text-yellow-600">{pendingApplications}</p>
|
||||
</div>
|
||||
<Clock className="w-8 h-8 text-yellow-600" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Accepted</p>
|
||||
<p className="text-3xl font-bold text-green-600">{acceptedApplications}</p>
|
||||
</div>
|
||||
<CheckCircle className="w-8 h-8 text-green-600" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Rejected</p>
|
||||
<p className="text-3xl font-bold text-red-600">{rejectedApplications}</p>
|
||||
</div>
|
||||
<XCircle className="w-8 h-8 text-red-600" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Applications List */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-bold text-gray-900">Recent Applications</h2>
|
||||
<Button variant="outline">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Export Data
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{mockApplications.map((application) => {
|
||||
const appStatusConfig = getStatusConfig(application.status)
|
||||
const AppStatusIcon = appStatusConfig.icon
|
||||
|
||||
return (
|
||||
<Card key={application.id} className="bg-white shadow-sm hover:shadow-lg transition-all duration-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
|
||||
<Building2 className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-1">{application.jobTitle}</h3>
|
||||
<p className="text-blue-600 font-medium">{application.company}</p>
|
||||
<div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="w-4 h-4" />
|
||||
Applied: {application.appliedDate}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<MapPin className="w-4 h-4" />
|
||||
{application.location}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<DollarSign className="w-4 h-4" />
|
||||
{application.salary}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge className={appStatusConfig.color}>
|
||||
<AppStatusIcon className="w-3 h-3 mr-1" />
|
||||
{appStatusConfig.text}
|
||||
</Badge>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Share2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 text-sm text-gray-600">
|
||||
<span className="flex items-center gap-1">
|
||||
<FileText className="w-4 h-4" />
|
||||
Resume: {application.resume}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="w-4 h-4" />
|
||||
Deadline: {application.deadline}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="outline">
|
||||
<Eye className="w-4 h-4 mr-2" />
|
||||
View Details
|
||||
</Button>
|
||||
<Button size="sm" variant="outline">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Download Resume
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Empty State */}
|
||||
{mockApplications.length === 0 && (
|
||||
<Card className="bg-white shadow-sm">
|
||||
<CardContent className="p-12 text-center">
|
||||
<FileText className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-2">No applications yet</h3>
|
||||
<p className="text-gray-500 mb-6">Start applying to jobs to see your applications here</p>
|
||||
<Button className="bg-blue-600 hover:bg-blue-700">
|
||||
Browse Jobs
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user