356 lines
13 KiB
TypeScript
356 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
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 { Input } from '@workspace/ui/components/input';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@workspace/ui/components/select';
|
|
import {
|
|
Building2,
|
|
MapPin,
|
|
DollarSign,
|
|
Calendar,
|
|
Clock,
|
|
Search,
|
|
Filter,
|
|
Bookmark,
|
|
Share2,
|
|
Eye,
|
|
ArrowRight,
|
|
Briefcase,
|
|
Users,
|
|
Star,
|
|
CheckCircle,
|
|
ExternalLink,
|
|
Loader2,
|
|
AlertCircle,
|
|
} from 'lucide-react';
|
|
import JobApplicationModal from '@/components/job-application-modal';
|
|
import { type InferSelectModel } from '@workspace/db/drizzle';
|
|
import { jobs, companies, resumes } from '@workspace/db/schema';
|
|
|
|
export type Job = InferSelectModel<typeof jobs> & {
|
|
company: typeof companies.$inferSelect;
|
|
};
|
|
|
|
export type Resume = typeof resumes.$inferSelect;
|
|
|
|
export default function JobsPage({
|
|
jobs,
|
|
resumes,
|
|
studentId,
|
|
appliedJobIds = [],
|
|
}: {
|
|
jobs: Job[];
|
|
resumes: Resume[];
|
|
studentId: number;
|
|
appliedJobIds?: number[];
|
|
}) {
|
|
const [filteredJobs, setFilteredJobs] = useState<Job[]>([]);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [locationFilter, setLocationFilter] = useState('all');
|
|
const [jobTypeFilter, setJobTypeFilter] = useState('all');
|
|
const [showLoadMore, setShowLoadMore] = useState(false);
|
|
|
|
useEffect(() => {
|
|
filterJobs();
|
|
}, [jobs, searchTerm, locationFilter, jobTypeFilter]);
|
|
|
|
const filterJobs = () => {
|
|
let filtered = [...jobs];
|
|
|
|
// Search filter
|
|
if (searchTerm) {
|
|
filtered = filtered.filter(
|
|
(job) =>
|
|
job.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
job.company.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
job.description.toLowerCase().includes(searchTerm.toLowerCase()),
|
|
);
|
|
}
|
|
|
|
// Location filter
|
|
if (locationFilter && locationFilter !== 'all') {
|
|
filtered = filtered.filter((job) =>
|
|
job.location.toLowerCase().includes(locationFilter.toLowerCase()),
|
|
);
|
|
}
|
|
|
|
// Job type filter (simplified - could be enhanced with job type field)
|
|
if (jobTypeFilter && jobTypeFilter !== 'all') {
|
|
filtered = filtered.filter((job) =>
|
|
job.title.toLowerCase().includes(jobTypeFilter.toLowerCase()),
|
|
);
|
|
}
|
|
|
|
setFilteredJobs(filtered);
|
|
setShowLoadMore(filtered.length > 6);
|
|
};
|
|
|
|
const handleSearch = (value: string) => {
|
|
setSearchTerm(value);
|
|
};
|
|
|
|
const handleLocationFilter = (value: string) => {
|
|
setLocationFilter(value);
|
|
};
|
|
|
|
const handleJobTypeFilter = (value: string) => {
|
|
setJobTypeFilter(value);
|
|
};
|
|
|
|
const clearFilters = () => {
|
|
setSearchTerm('');
|
|
setLocationFilter('all');
|
|
setJobTypeFilter('all');
|
|
};
|
|
|
|
const displayedJobs = filteredJobs.slice(0, showLoadMore ? 6 : filteredJobs.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">Browse Jobs</h1>
|
|
<p className="text-xl text-gray-600">
|
|
Find the perfect opportunity that matches your skills and aspirations
|
|
</p>
|
|
</div>
|
|
|
|
{/* Search and Filter Section */}
|
|
<Card className="bg-white shadow-sm mb-8">
|
|
<CardContent className="p-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div className="md:col-span-2">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
|
<Input
|
|
placeholder="Search jobs by title, company, or skills..."
|
|
className="pl-10"
|
|
value={searchTerm}
|
|
onChange={(e) => handleSearch(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Select value={locationFilter} onValueChange={handleLocationFilter}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Location" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All Locations</SelectItem>
|
|
<SelectItem value="remote">Remote</SelectItem>
|
|
<SelectItem value="san francisco">San Francisco</SelectItem>
|
|
<SelectItem value="new york">New York</SelectItem>
|
|
<SelectItem value="seattle">Seattle</SelectItem>
|
|
<SelectItem value="austin">Austin</SelectItem>
|
|
<SelectItem value="los angeles">Los Angeles</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<Select value={jobTypeFilter} onValueChange={handleJobTypeFilter}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Job Type" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All Types</SelectItem>
|
|
<SelectItem value="intern">Internship</SelectItem>
|
|
<SelectItem value="engineer">Engineering</SelectItem>
|
|
<SelectItem value="analyst">Analyst</SelectItem>
|
|
<SelectItem value="designer">Design</SelectItem>
|
|
<SelectItem value="manager">Management</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
{(searchTerm ||
|
|
(locationFilter && locationFilter !== 'all') ||
|
|
(jobTypeFilter && jobTypeFilter !== 'all')) && (
|
|
<div className="mt-4 flex items-center gap-2">
|
|
<Button variant="outline" size="sm" onClick={clearFilters}>
|
|
Clear Filters
|
|
</Button>
|
|
<span className="text-sm text-gray-500">
|
|
{filteredJobs.length} of {jobs.length} jobs
|
|
</span>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
|
<Card className="bg-white shadow-sm">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">Total Jobs</p>
|
|
<p className="text-3xl font-bold text-gray-800">{jobs.length}</p>
|
|
</div>
|
|
<Briefcase className="w-8 h-8 text-blue-600" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white shadow-sm">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">Active Companies</p>
|
|
<p className="text-3xl font-bold text-gray-800">
|
|
{new Set(jobs.map((job) => job.company.name)).size}
|
|
</p>
|
|
</div>
|
|
<Building2 className="w-8 h-8 text-green-600" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white shadow-sm">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">Remote Jobs</p>
|
|
<p className="text-3xl font-bold text-gray-800">
|
|
{jobs.filter((job) => job.location.toLowerCase().includes('remote')).length}
|
|
</p>
|
|
</div>
|
|
<Users className="w-8 h-8 text-purple-600" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white shadow-sm">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">Avg Salary</p>
|
|
<p className="text-3xl font-bold text-gray-800">$28/hr</p>
|
|
</div>
|
|
<DollarSign className="w-8 h-8 text-orange-600" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Jobs Grid */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{displayedJobs.map((job) => (
|
|
<Card
|
|
key={job.id}
|
|
className="group hover:shadow-lg transition-all duration-300 border border-gray-200 bg-white"
|
|
>
|
|
<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 className="flex-1">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-1 group-hover:text-blue-600 transition-colors">
|
|
{job.title}
|
|
</h3>
|
|
<p className="text-blue-600 font-medium">{job.company.name}</p>
|
|
<div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
|
|
<span className="flex items-center gap-1">
|
|
<MapPin className="w-4 h-4" />
|
|
{job.location}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<DollarSign className="w-4 h-4" />
|
|
{job.salary}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Badge className="bg-green-100 text-green-700">
|
|
<CheckCircle className="w-3 h-3 mr-1" />
|
|
Active
|
|
</Badge>
|
|
<Button variant="ghost" size="sm">
|
|
<Bookmark className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-gray-600 text-sm mb-4 line-clamp-2">{job.description}</p>
|
|
|
|
<div className="grid grid-cols-2 gap-4 mb-4">
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
<Clock className="w-4 h-4" />
|
|
<span>Deadline: {job.applicationDeadline.toLocaleDateString()}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
<Star className="w-4 h-4" />
|
|
<span>Min CGPA: {job.minCGPA}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex gap-2">
|
|
<JobApplicationModal
|
|
job={{ ...job, minCGPA: Number(job.minCGPA) }}
|
|
studentId={studentId} // Mock student ID - in real app this would come from auth
|
|
resumes={resumes}
|
|
/>
|
|
{job.link && (
|
|
<Button size="sm" variant="outline">
|
|
<ExternalLink className="w-4 h-4 mr-2" />
|
|
View Details
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="ghost" size="sm">
|
|
<Eye className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm">
|
|
<Share2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Load More */}
|
|
{showLoadMore && (
|
|
<div className="text-center mt-12">
|
|
<Button size="lg" variant="outline" className="px-8 py-3">
|
|
Load More Jobs
|
|
<ArrowRight className="w-5 h-5 ml-2" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Empty State */}
|
|
{filteredJobs.length === 0 && (
|
|
<Card className="bg-white shadow-sm">
|
|
<CardContent className="p-12 text-center">
|
|
<Briefcase className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
|
<h3 className="text-xl font-semibold text-gray-700 mb-2">No jobs found</h3>
|
|
<p className="text-gray-500 mb-6">
|
|
Try adjusting your search criteria or check back later for new opportunities
|
|
</p>
|
|
<Button className="bg-blue-600 hover:bg-blue-700" onClick={clearFilters}>
|
|
Clear Filters
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|