Yes! Yes! I do
This commit is contained in:
Anushlinux
@@ -16,54 +16,7 @@ import {
|
||||
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"
|
||||
}
|
||||
]
|
||||
import { getStudentApplications } from "../actions"
|
||||
|
||||
const getStatusConfig = (status: string) => {
|
||||
switch (status) {
|
||||
@@ -100,15 +53,73 @@ const getStatusConfig = (status: string) => {
|
||||
}
|
||||
}
|
||||
|
||||
export default function ApplicationsPage() {
|
||||
const statusConfig = getStatusConfig('pending')
|
||||
const StatusIcon = statusConfig.icon
|
||||
export default async function ApplicationsPage() {
|
||||
// Get real applications data - using student ID 1 for demo
|
||||
const { success, applications, error } = await getStudentApplications(1);
|
||||
|
||||
// Fallback to mock data if database query fails
|
||||
const mockApplications = [
|
||||
{
|
||||
id: 1,
|
||||
job: {
|
||||
title: "Software Engineer Intern",
|
||||
company: { name: "TechCorp Solutions" },
|
||||
location: "San Francisco, CA",
|
||||
salary: "$25/hour",
|
||||
applicationDeadline: new Date("2024-02-15")
|
||||
},
|
||||
resume: { title: "Resume_v2.pdf" },
|
||||
status: "pending",
|
||||
createdAt: new Date("2024-01-15")
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
job: {
|
||||
title: "Data Analyst",
|
||||
company: { name: "DataFlow Inc" },
|
||||
location: "New York, NY",
|
||||
salary: "$30/hour",
|
||||
applicationDeadline: new Date("2024-02-10")
|
||||
},
|
||||
resume: { title: "Resume_v2.pdf" },
|
||||
status: "reviewed",
|
||||
createdAt: new Date("2024-01-10")
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
job: {
|
||||
title: "Frontend Developer",
|
||||
company: { name: "WebSolutions" },
|
||||
location: "Remote",
|
||||
salary: "$28/hour",
|
||||
applicationDeadline: new Date("2024-02-05")
|
||||
},
|
||||
resume: { title: "Resume_v2.pdf" },
|
||||
status: "accepted",
|
||||
createdAt: new Date("2024-01-05")
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
job: {
|
||||
title: "Product Manager Intern",
|
||||
company: { name: "InnovateTech" },
|
||||
location: "Seattle, WA",
|
||||
salary: "$32/hour",
|
||||
applicationDeadline: new Date("2024-02-01")
|
||||
},
|
||||
resume: { title: "Resume_v2.pdf" },
|
||||
status: "rejected",
|
||||
createdAt: new Date("2024-01-01")
|
||||
}
|
||||
];
|
||||
|
||||
const allApplications = success && applications ? applications : mockApplications;
|
||||
|
||||
// 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
|
||||
const totalApplications = allApplications.length;
|
||||
const pendingApplications = allApplications.filter(app => app.status === 'pending').length;
|
||||
const acceptedApplications = allApplications.filter(app => app.status === 'accepted').length;
|
||||
const rejectedApplications = allApplications.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">
|
||||
@@ -117,6 +128,12 @@ export default function ApplicationsPage() {
|
||||
<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>
|
||||
{!success && error && (
|
||||
<div className="mt-4 p-3 bg-yellow-100 text-yellow-700 rounded-lg">
|
||||
<AlertCircle className="w-4 h-4 inline mr-2" />
|
||||
Using demo data: {error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
@@ -180,9 +197,9 @@ export default function ApplicationsPage() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{mockApplications.map((application) => {
|
||||
const appStatusConfig = getStatusConfig(application.status)
|
||||
const AppStatusIcon = appStatusConfig.icon
|
||||
{allApplications.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">
|
||||
@@ -193,20 +210,20 @@ export default function ApplicationsPage() {
|
||||
<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>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-1">{application.job.title}</h3>
|
||||
<p className="text-blue-600 font-medium">{application.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">
|
||||
<Calendar className="w-4 h-4" />
|
||||
Applied: {application.appliedDate}
|
||||
Applied: {application.createdAt.toLocaleDateString()}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<MapPin className="w-4 h-4" />
|
||||
{application.location}
|
||||
{application.job.location}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<DollarSign className="w-4 h-4" />
|
||||
{application.salary}
|
||||
{application.job.salary}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -228,11 +245,11 @@ export default function ApplicationsPage() {
|
||||
<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}
|
||||
Resume: {application.resume.title}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="w-4 h-4" />
|
||||
Deadline: {application.deadline}
|
||||
Deadline: {application.job.applicationDeadline.toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
@@ -253,7 +270,7 @@ export default function ApplicationsPage() {
|
||||
</div>
|
||||
|
||||
{/* Empty State */}
|
||||
{mockApplications.length === 0 && (
|
||||
{allApplications.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" />
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
'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"
|
||||
@@ -19,33 +22,41 @@ import {
|
||||
Users,
|
||||
Star,
|
||||
CheckCircle,
|
||||
ExternalLink
|
||||
ExternalLink,
|
||||
Loader2,
|
||||
AlertCircle
|
||||
} from "lucide-react"
|
||||
import { db, jobs, companies } from "@workspace/db"
|
||||
import { eq } from "drizzle-orm"
|
||||
import JobApplicationModal from "../../components/job-application-modal"
|
||||
import { getAvailableJobs } from "../actions"
|
||||
import JobApplicationModal from "../../../components/job-application-modal"
|
||||
|
||||
async function getJobsData() {
|
||||
try {
|
||||
const availableJobs = await db.query.jobs.findMany({
|
||||
where: eq(jobs.active, true),
|
||||
with: {
|
||||
company: true
|
||||
}
|
||||
});
|
||||
|
||||
return availableJobs;
|
||||
} catch (error) {
|
||||
console.error("Error fetching jobs:", error);
|
||||
return [];
|
||||
}
|
||||
interface Job {
|
||||
id: number;
|
||||
title: string;
|
||||
company: {
|
||||
name: string;
|
||||
email: string;
|
||||
};
|
||||
location: string;
|
||||
salary: string;
|
||||
description: string;
|
||||
applicationDeadline: Date;
|
||||
minCGPA: number;
|
||||
active: boolean;
|
||||
link?: string;
|
||||
}
|
||||
|
||||
export default async function JobsPage() {
|
||||
const jobs = await getJobsData();
|
||||
export default function JobsPage() {
|
||||
const [jobs, setJobs] = useState<Job[]>([]);
|
||||
const [filteredJobs, setFilteredJobs] = useState<Job[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [locationFilter, setLocationFilter] = useState('all');
|
||||
const [jobTypeFilter, setJobTypeFilter] = useState('all');
|
||||
const [showLoadMore, setShowLoadMore] = useState(false);
|
||||
|
||||
// Mock data for demonstration
|
||||
const mockJobs = [
|
||||
const mockJobs: Job[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Software Engineer Intern",
|
||||
@@ -138,7 +149,94 @@ export default async function JobsPage() {
|
||||
}
|
||||
];
|
||||
|
||||
const allJobs = [...jobs, ...mockJobs];
|
||||
useEffect(() => {
|
||||
loadJobs();
|
||||
}, []);
|
||||
|
||||
const loadJobs = async () => {
|
||||
try {
|
||||
const result = await getAvailableJobs();
|
||||
if (result.success && result.jobs) {
|
||||
setJobs(result.jobs as any);
|
||||
setFilteredJobs(result.jobs as any);
|
||||
} else {
|
||||
setJobs(mockJobs);
|
||||
setFilteredJobs(mockJobs);
|
||||
setError(result.error || 'Using demo data');
|
||||
}
|
||||
} catch (err) {
|
||||
setJobs(mockJobs);
|
||||
setFilteredJobs(mockJobs);
|
||||
setError('Failed to load jobs, using demo data');
|
||||
} finally {
|
||||
setIsLoading(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);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<Loader2 className="w-12 h-12 animate-spin text-blue-600 mx-auto mb-4" />
|
||||
<p className="text-gray-600">Loading jobs...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
|
||||
@@ -147,6 +245,12 @@ export default async function JobsPage() {
|
||||
<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>
|
||||
{error && (
|
||||
<div className="mt-4 p-3 bg-yellow-100 text-yellow-700 rounded-lg">
|
||||
<AlertCircle className="w-4 h-4 inline mr-2" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Search and Filter Section */}
|
||||
@@ -159,38 +263,53 @@ export default async function JobsPage() {
|
||||
<Input
|
||||
placeholder="Search jobs by title, company, or skills..."
|
||||
className="pl-10"
|
||||
value={searchTerm}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Select>
|
||||
<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="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>
|
||||
<SelectItem value="los angeles">Los Angeles</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Select>
|
||||
<Select value={jobTypeFilter} onValueChange={handleJobTypeFilter}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Job Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="internship">Internship</SelectItem>
|
||||
<SelectItem value="full-time">Full Time</SelectItem>
|
||||
<SelectItem value="part-time">Part Time</SelectItem>
|
||||
<SelectItem value="contract">Contract</SelectItem>
|
||||
<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>
|
||||
|
||||
@@ -201,7 +320,7 @@ export default async function JobsPage() {
|
||||
<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">{allJobs.length}</p>
|
||||
<p className="text-3xl font-bold text-gray-800">{jobs.length}</p>
|
||||
</div>
|
||||
<Briefcase className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
@@ -214,7 +333,7 @@ export default async function JobsPage() {
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Active Companies</p>
|
||||
<p className="text-3xl font-bold text-gray-800">
|
||||
{new Set(allJobs.map(job => job.company.name)).size}
|
||||
{new Set(jobs.map(job => job.company.name)).size}
|
||||
</p>
|
||||
</div>
|
||||
<Building2 className="w-8 h-8 text-green-600" />
|
||||
@@ -228,7 +347,7 @@ export default async function JobsPage() {
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Remote Jobs</p>
|
||||
<p className="text-3xl font-bold text-gray-800">
|
||||
{allJobs.filter(job => job.location.toLowerCase().includes('remote')).length}
|
||||
{jobs.filter(job => job.location.toLowerCase().includes('remote')).length}
|
||||
</p>
|
||||
</div>
|
||||
<Users className="w-8 h-8 text-purple-600" />
|
||||
@@ -251,7 +370,7 @@ export default async function JobsPage() {
|
||||
|
||||
{/* Jobs Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{allJobs.map((job) => (
|
||||
{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">
|
||||
@@ -263,8 +382,8 @@ export default async function JobsPage() {
|
||||
<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 mb-2">{job.company.name}</p>
|
||||
<div className="flex items-center gap-4 text-sm text-gray-500">
|
||||
<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}
|
||||
@@ -300,23 +419,23 @@ export default async function JobsPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex gap-2">
|
||||
<JobApplicationModal
|
||||
job={job}
|
||||
studentId={1} // Mock student ID - in real app this would come from auth
|
||||
resumes={[
|
||||
{ id: 1, title: "Resume_v2.pdf", link: "/resumes/resume_v2.pdf" },
|
||||
{ id: 2, title: "Resume_Updated.pdf", link: "/resumes/resume_updated.pdf" }
|
||||
]}
|
||||
/>
|
||||
{job.link && (
|
||||
<Button size="sm" variant="outline">
|
||||
<ExternalLink className="w-4 h-4 mr-2" />
|
||||
View Details
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex gap-2">
|
||||
<JobApplicationModal
|
||||
job={job}
|
||||
studentId={1} // Mock student ID - in real app this would come from auth
|
||||
resumes={[
|
||||
{ id: 1, title: "Resume_v2.pdf", link: "/resumes/resume_v2.pdf" },
|
||||
{ id: 2, title: "Resume_Updated.pdf", link: "/resumes/resume_updated.pdf" }
|
||||
]}
|
||||
/>
|
||||
{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" />
|
||||
@@ -332,21 +451,23 @@ export default async function JobsPage() {
|
||||
</div>
|
||||
|
||||
{/* Load More */}
|
||||
<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>
|
||||
{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 */}
|
||||
{allJobs.length === 0 && (
|
||||
{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">
|
||||
<Button className="bg-blue-600 hover:bg-blue-700" onClick={clearFilters}>
|
||||
Clear Filters
|
||||
</Button>
|
||||
</CardContent>
|
||||
|
||||
@@ -48,6 +48,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isProfileDropdownOpen, setIsProfileDropdownOpen] = useState(false);
|
||||
const [isSearchOpen, setIsSearchOpen] = useState(false);
|
||||
|
||||
// Handle scroll effect
|
||||
useEffect(() => {
|
||||
@@ -63,6 +64,16 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
setIsMobileMenuOpen(false);
|
||||
}, [pathname]);
|
||||
|
||||
const handleSearchClick = () => {
|
||||
// Navigate to jobs page with search focus
|
||||
window.location.href = '/jobs';
|
||||
};
|
||||
|
||||
const handleNotificationClick = () => {
|
||||
// Navigate to applications page to see status updates
|
||||
window.location.href = '/applications';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 font-sans">
|
||||
{/* Modern Student Navbar */}
|
||||
@@ -127,6 +138,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleSearchClick}
|
||||
className="hidden sm:flex items-center gap-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition-all duration-200"
|
||||
>
|
||||
<Search className="w-4 h-4" />
|
||||
@@ -137,6 +149,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleNotificationClick}
|
||||
className="relative text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition-all duration-200"
|
||||
>
|
||||
<Bell className="w-4 h-4" />
|
||||
@@ -167,14 +180,16 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
<p className="text-xs text-gray-500">student@college.edu</p>
|
||||
</div>
|
||||
<div className="py-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start text-gray-700 hover:text-blue-600 hover:bg-blue-50"
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Settings
|
||||
</Button>
|
||||
<Link href="/profile">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start text-gray-700 hover:text-blue-600 hover:bg-blue-50"
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Settings
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@@ -247,14 +262,16 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-4 py-2 space-y-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start text-gray-700 hover:text-blue-600 hover:bg-blue-50"
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Settings
|
||||
</Button>
|
||||
<Link href="/profile">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start text-gray-700 hover:text-blue-600 hover:bg-blue-50"
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Settings
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
|
||||
@@ -21,7 +21,8 @@ import {
|
||||
Filter,
|
||||
Bookmark,
|
||||
Share2,
|
||||
Eye
|
||||
Eye,
|
||||
AlertCircle
|
||||
} from "lucide-react"
|
||||
|
||||
async function getDashboardData() {
|
||||
@@ -43,19 +44,22 @@ async function getDashboardData() {
|
||||
|
||||
return {
|
||||
companies: companiesWithActiveJobs,
|
||||
totalStudents: studentCount.length
|
||||
totalStudents: studentCount.length,
|
||||
success: true
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Database query error:", error)
|
||||
return {
|
||||
companies: [],
|
||||
totalStudents: 0
|
||||
totalStudents: 0,
|
||||
success: false,
|
||||
error: "Failed to load dashboard data"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default async function DashboardPage() {
|
||||
const { companies: data, totalStudents } = await getDashboardData()
|
||||
const { companies: data, totalStudents, success, error } = await getDashboardData()
|
||||
|
||||
// Calculate stats
|
||||
const totalActiveJobs = data.reduce((acc, company) => acc + company.jobs.filter((job) => job.active).length, 0)
|
||||
@@ -78,14 +82,18 @@ export default async function DashboardPage() {
|
||||
Explore opportunities from top companies and find the perfect role that matches your skills and aspirations
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg" className="bg-white text-blue-600 hover:bg-blue-50 px-8 py-3 text-lg font-semibold">
|
||||
<Search className="w-5 h-5 mr-2" />
|
||||
Browse All Jobs
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10 px-8 py-3 text-lg font-semibold">
|
||||
<Bookmark className="w-5 h-5 mr-2" />
|
||||
Saved Jobs
|
||||
</Button>
|
||||
<Link href="/jobs">
|
||||
<Button size="lg" className="bg-white text-blue-600 hover:bg-blue-50 px-8 py-3 text-lg font-semibold">
|
||||
<Search className="w-5 h-5 mr-2" />
|
||||
Browse All Jobs
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/applications">
|
||||
<Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10 px-8 py-3 text-lg font-semibold">
|
||||
<Bookmark className="w-5 h-5 mr-2" />
|
||||
My Applications
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -94,6 +102,12 @@ export default async function DashboardPage() {
|
||||
{/* Stats Section */}
|
||||
<section className="py-16 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{!success && error && (
|
||||
<div className="mb-8 p-4 bg-yellow-100 text-yellow-700 rounded-lg">
|
||||
<AlertCircle className="w-4 h-4 inline mr-2" />
|
||||
Using demo data: {error}
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
@@ -137,76 +151,93 @@ export default async function DashboardPage() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{featuredCompanies.map((company) => (
|
||||
<Card key={company.id} className="group hover:shadow-xl transition-all duration-300 overflow-hidden border-0 bg-white">
|
||||
<div className="relative">
|
||||
<div className="h-48 bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
|
||||
<Building2 className="w-16 h-16 text-white opacity-80" />
|
||||
</div>
|
||||
<div className="absolute top-4 right-4">
|
||||
<Badge className="bg-white/20 text-white border-0">
|
||||
<Star className="w-3 h-3 mr-1" />
|
||||
Featured
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">{company.name}</h3>
|
||||
<p className="text-gray-600 text-sm">{company.email}</p>
|
||||
{featuredCompanies.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{featuredCompanies.map((company) => (
|
||||
<Card key={company.id} className="group hover:shadow-xl transition-all duration-300 overflow-hidden border-0 bg-white">
|
||||
<div className="relative">
|
||||
<div className="h-48 bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
|
||||
<Building2 className="w-16 h-16 text-white opacity-80" />
|
||||
</div>
|
||||
<div className="absolute top-4 right-4">
|
||||
<Badge className="bg-white/20 text-white border-0">
|
||||
<Star className="w-3 h-3 mr-1" />
|
||||
Featured
|
||||
</Badge>
|
||||
</div>
|
||||
<Badge variant="secondary" className="bg-blue-100 text-blue-700">
|
||||
{company.jobs.length} jobs
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{company.description && company.description !== "N/A" && (
|
||||
<p className="text-gray-600 text-sm mb-4 line-clamp-2">{company.description}</p>
|
||||
)}
|
||||
|
||||
<div className="space-y-2 mb-6">
|
||||
{company.jobs.slice(0, 2).map((job) => (
|
||||
<div key={job.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium text-gray-900 text-sm">{job.title}</h4>
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500 mt-1">
|
||||
{job.location && job.location !== "N/A" && (
|
||||
<span className="flex items-center gap-1">
|
||||
<MapPin className="w-3 h-3" />
|
||||
{job.location}
|
||||
</span>
|
||||
)}
|
||||
{job.salary && job.salary !== "N/A" && (
|
||||
<span className="flex items-center gap-1">
|
||||
<DollarSign className="w-3 h-3" />
|
||||
{job.salary}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button size="sm" variant="ghost" className="text-blue-600 hover:text-blue-700">
|
||||
<Eye className="w-4 h-4" />
|
||||
</Button>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">{company.name}</h3>
|
||||
<p className="text-gray-600 text-sm">{company.email}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button className="flex-1 bg-blue-600 hover:bg-blue-700">
|
||||
View All Jobs
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<Bookmark className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
<Badge variant="secondary" className="bg-blue-100 text-blue-700">
|
||||
{company.jobs.length} jobs
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{company.description && company.description !== "N/A" && (
|
||||
<p className="text-gray-600 text-sm mb-4 line-clamp-2">{company.description}</p>
|
||||
)}
|
||||
|
||||
<div className="space-y-2 mb-6">
|
||||
{company.jobs.slice(0, 2).map((job) => (
|
||||
<div key={job.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium text-gray-900 text-sm">{job.title}</h4>
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500 mt-1">
|
||||
{job.location && job.location !== "N/A" && (
|
||||
<span className="flex items-center gap-1">
|
||||
<MapPin className="w-3 h-3" />
|
||||
{job.location}
|
||||
</span>
|
||||
)}
|
||||
{job.salary && job.salary !== "N/A" && (
|
||||
<span className="flex items-center gap-1">
|
||||
<DollarSign className="w-3 h-3" />
|
||||
{job.salary}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button size="sm" variant="ghost" className="text-blue-600 hover:text-blue-700">
|
||||
<Eye className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Link href="/jobs">
|
||||
<Button className="flex-1 bg-blue-600 hover:bg-blue-700">
|
||||
View All Jobs
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Button variant="outline" size="sm">
|
||||
<Bookmark className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card className="bg-white shadow-sm">
|
||||
<CardContent className="p-12 text-center">
|
||||
<Building2 className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-2">No featured companies yet</h3>
|
||||
<p className="text-gray-500 mb-6">Check back later for exciting opportunities</p>
|
||||
<Link href="/jobs">
|
||||
<Button className="bg-blue-600 hover:bg-blue-700">
|
||||
Browse All Jobs
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -218,91 +249,112 @@ export default async function DashboardPage() {
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-4">Recent Opportunities</h2>
|
||||
<p className="text-xl text-gray-600">Latest job postings from top companies</p>
|
||||
</div>
|
||||
<Button variant="outline" className="hidden md:flex">
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
Filter Jobs
|
||||
</Button>
|
||||
<Link href="/jobs">
|
||||
<Button variant="outline" className="hidden md:flex">
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
Filter Jobs
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{recentJobs.map((job) => (
|
||||
<Card key={job.id} className="group hover:shadow-lg transition-all duration-300 border border-gray-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center 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" />
|
||||
{recentJobs.length > 0 ? (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{recentJobs.map((job) => (
|
||||
<Card key={job.id} className="group hover:shadow-lg transition-all duration-300 border border-gray-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center 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">{job.title}</h3>
|
||||
<p className="text-blue-600 font-medium">{job.company.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-1">{job.title}</h3>
|
||||
<p className="text-blue-600 font-medium">{job.company.name}</p>
|
||||
</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>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
{job.location && job.location !== "N/A" && (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<MapPin className="w-4 h-4" />
|
||||
<span>{job.location}</span>
|
||||
</div>
|
||||
)}
|
||||
{job.salary && job.salary !== "N/A" && (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<DollarSign className="w-4 h-4" />
|
||||
<span>{job.salary}</span>
|
||||
</div>
|
||||
)}
|
||||
<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">
|
||||
<Users className="w-4 h-4" />
|
||||
<span>Min CGPA: {job.minCGPA}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{job.description && job.description !== "N/A" && (
|
||||
<p className="text-gray-600 text-sm mb-4 line-clamp-2">{job.description}</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" className="bg-blue-600 hover:bg-blue-700">
|
||||
Apply Now
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
{job.link && (
|
||||
<Button size="sm" variant="outline">
|
||||
<ExternalLink className="w-4 h-4 mr-2" />
|
||||
View Details
|
||||
<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>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Share2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
{job.location && job.location !== "N/A" && (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<MapPin className="w-4 h-4" />
|
||||
<span>{job.location}</span>
|
||||
</div>
|
||||
)}
|
||||
{job.salary && job.salary !== "N/A" && (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<DollarSign className="w-4 h-4" />
|
||||
<span>{job.salary}</span>
|
||||
</div>
|
||||
)}
|
||||
<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">
|
||||
<Users className="w-4 h-4" />
|
||||
<span>Min CGPA: {job.minCGPA}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{job.description && job.description !== "N/A" && (
|
||||
<p className="text-gray-600 text-sm mb-4 line-clamp-2">{job.description}</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex gap-2">
|
||||
<Link href="/jobs">
|
||||
<Button size="sm" className="bg-blue-600 hover:bg-blue-700">
|
||||
Apply Now
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
</Link>
|
||||
{job.link && (
|
||||
<Button size="sm" variant="outline">
|
||||
<ExternalLink className="w-4 h-4 mr-2" />
|
||||
View Details
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Share2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<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 recent opportunities</h3>
|
||||
<p className="text-gray-500 mb-6">Check back later for new job postings</p>
|
||||
<Link href="/jobs">
|
||||
<Button className="bg-blue-600 hover:bg-blue-700">
|
||||
Browse All Jobs
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="text-center mt-12">
|
||||
<Button size="lg" variant="outline" className="px-8 py-3">
|
||||
View All Opportunities
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</Button>
|
||||
<Link href="/jobs">
|
||||
<Button size="lg" variant="outline" className="px-8 py-3">
|
||||
View All Opportunities
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -315,13 +367,17 @@ export default async function DashboardPage() {
|
||||
Join thousands of students who have found their dream jobs through NextPlacement
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg" className="bg-white text-blue-600 hover:bg-blue-50 px-8 py-3 text-lg font-semibold">
|
||||
Create Your Profile
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10 px-8 py-3 text-lg font-semibold">
|
||||
Learn More
|
||||
</Button>
|
||||
<Link href="/profile">
|
||||
<Button size="lg" className="bg-white text-blue-600 hover:bg-blue-50 px-8 py-3 text-lg font-semibold">
|
||||
Create Your Profile
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/jobs">
|
||||
<Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10 px-8 py-3 text-lg font-semibold">
|
||||
Browse Jobs
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
'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"
|
||||
@@ -23,10 +26,12 @@ import {
|
||||
Download,
|
||||
Upload,
|
||||
CheckCircle,
|
||||
AlertCircle
|
||||
AlertCircle,
|
||||
X
|
||||
} from "lucide-react"
|
||||
import { getStudentProfile, updateStudentProfile } from "../actions"
|
||||
|
||||
// Mock student data - in real app this would come from database
|
||||
// Mock student data as fallback
|
||||
const mockStudent = {
|
||||
id: 1,
|
||||
firstName: "John",
|
||||
@@ -49,10 +54,82 @@ const mockStudent = {
|
||||
isDiploma: false,
|
||||
verified: true,
|
||||
markedOut: false,
|
||||
profilePicture: null
|
||||
profilePicture: null,
|
||||
resumes: [
|
||||
{ id: 1, title: "Resume_v2.pdf", link: "/resumes/resume_v2.pdf" }
|
||||
]
|
||||
}
|
||||
|
||||
export default function ProfilePage() {
|
||||
const [student, setStudent] = useState(mockStudent);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [editingSection, setEditingSection] = useState<string | null>(null);
|
||||
const [editData, setEditData] = useState<any>({});
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadStudentProfile();
|
||||
}, []);
|
||||
|
||||
const loadStudentProfile = async () => {
|
||||
try {
|
||||
const result = await getStudentProfile(1); // Using student ID 1 for demo
|
||||
if (result.success && result.student) {
|
||||
setStudent(result.student as any);
|
||||
} else {
|
||||
setError(result.error || 'Failed to load profile');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Failed to load profile data');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (section: string) => {
|
||||
setEditingSection(section);
|
||||
setEditData({});
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setEditingSection(null);
|
||||
setEditData({});
|
||||
};
|
||||
|
||||
const handleSave = async (section: string) => {
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const result = await updateStudentProfile(student.id, editData);
|
||||
if (result.success) {
|
||||
setStudent(prev => ({ ...prev, ...editData }));
|
||||
setEditingSection(null);
|
||||
setEditData({});
|
||||
} else {
|
||||
setError(result.error || 'Failed to update profile');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Failed to update profile');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
setEditData((prev: any) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
||||
<p className="text-gray-600">Loading profile...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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">
|
||||
@@ -60,6 +137,12 @@ export default function ProfilePage() {
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-2">My Profile</h1>
|
||||
<p className="text-xl text-gray-600">Manage your personal information and academic details</p>
|
||||
{error && (
|
||||
<div className="mt-4 p-3 bg-red-100 text-red-700 rounded-lg">
|
||||
<AlertCircle className="w-4 h-4 inline mr-2" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
@@ -70,19 +153,19 @@ export default function ProfilePage() {
|
||||
<div className="text-center mb-6">
|
||||
<div className="relative inline-block">
|
||||
<div className="w-32 h-32 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white text-4xl font-bold mb-4">
|
||||
{mockStudent.firstName[0]}{mockStudent.lastName[0]}
|
||||
{student.firstName?.[0] || 'S'}{student.lastName?.[0] || 'T'}
|
||||
</div>
|
||||
<Button size="sm" className="absolute bottom-2 right-2 w-8 h-8 rounded-full p-0">
|
||||
<Camera className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-2">
|
||||
{mockStudent.firstName} {mockStudent.middleName} {mockStudent.lastName}
|
||||
{student.firstName} {student.middleName} {student.lastName}
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-4">{mockStudent.email}</p>
|
||||
<p className="text-gray-600 mb-4">{student.email}</p>
|
||||
<div className="flex items-center justify-center gap-2 mb-4">
|
||||
<Badge className={mockStudent.verified ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}>
|
||||
{mockStudent.verified ? (
|
||||
<Badge className={student.verified ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}>
|
||||
{student.verified ? (
|
||||
<>
|
||||
<CheckCircle className="w-3 h-3 mr-1" />
|
||||
Verified
|
||||
@@ -94,14 +177,14 @@ export default function ProfilePage() {
|
||||
</>
|
||||
)}
|
||||
</Badge>
|
||||
{mockStudent.markedOut && (
|
||||
{student.markedOut && (
|
||||
<Badge className="bg-red-100 text-red-700">
|
||||
Marked Out
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
Roll Number: {mockStudent.rollNumber}
|
||||
Roll Number: {student.rollNumber}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -111,19 +194,19 @@ export default function ProfilePage() {
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-600">Academic Year</span>
|
||||
<span className="font-medium">{mockStudent.year}</span>
|
||||
<span className="font-medium">{student.year}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-600">Branch</span>
|
||||
<span className="font-medium">{mockStudent.branch}</span>
|
||||
<span className="font-medium">{student.branch}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-600">SSC Score</span>
|
||||
<span className="font-medium">{mockStudent.ssc}/10</span>
|
||||
<span className="font-medium">{student.ssc}/10</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-600">HSC Score</span>
|
||||
<span className="font-medium">{mockStudent.hsc}/10</span>
|
||||
<span className="font-medium">{student.hsc}/10</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -157,45 +240,114 @@ export default function ProfilePage() {
|
||||
<User className="w-5 h-5" />
|
||||
Personal Information
|
||||
</CardTitle>
|
||||
<Button size="sm" variant="outline">
|
||||
<Edit className="w-4 h-4 mr-2" />
|
||||
Edit
|
||||
</Button>
|
||||
{editingSection !== 'personal' ? (
|
||||
<Button size="sm" variant="outline" onClick={() => handleEdit('personal')}>
|
||||
<Edit className="w-4 h-4 mr-2" />
|
||||
Edit
|
||||
</Button>
|
||||
) : (
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" onClick={() => handleSave('personal')} disabled={isSaving}>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
{isSaving ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" onClick={handleCancel}>
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="firstName">First Name</Label>
|
||||
<Input id="firstName" value={mockStudent.firstName} readOnly />
|
||||
{editingSection === 'personal' ? (
|
||||
<Input
|
||||
id="firstName"
|
||||
value={editData.firstName || student.firstName || ''}
|
||||
onChange={(e) => handleInputChange('firstName', e.target.value)}
|
||||
/>
|
||||
) : (
|
||||
<Input id="firstName" value={student.firstName || ''} readOnly />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="middleName">Middle Name</Label>
|
||||
<Input id="middleName" value={mockStudent.middleName} readOnly />
|
||||
{editingSection === 'personal' ? (
|
||||
<Input
|
||||
id="middleName"
|
||||
value={editData.middleName || student.middleName || ''}
|
||||
onChange={(e) => handleInputChange('middleName', e.target.value)}
|
||||
/>
|
||||
) : (
|
||||
<Input id="middleName" value={student.middleName || ''} readOnly />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="lastName">Last Name</Label>
|
||||
<Input id="lastName" value={mockStudent.lastName} readOnly />
|
||||
{editingSection === 'personal' ? (
|
||||
<Input
|
||||
id="lastName"
|
||||
value={editData.lastName || student.lastName || ''}
|
||||
onChange={(e) => handleInputChange('lastName', e.target.value)}
|
||||
/>
|
||||
) : (
|
||||
<Input id="lastName" value={student.lastName || ''} readOnly />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" value={mockStudent.email} readOnly />
|
||||
<Input id="email" value={student.email || ''} readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="phone">Phone Number</Label>
|
||||
<Input id="phone" value={mockStudent.phoneNumber} readOnly />
|
||||
{editingSection === 'personal' ? (
|
||||
<Input
|
||||
id="phone"
|
||||
value={editData.phoneNumber || student.phoneNumber || ''}
|
||||
onChange={(e) => handleInputChange('phoneNumber', e.target.value)}
|
||||
/>
|
||||
) : (
|
||||
<Input id="phone" value={student.phoneNumber || ''} readOnly />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="gender">Gender</Label>
|
||||
<Input id="gender" value={mockStudent.gender} readOnly />
|
||||
{editingSection === 'personal' ? (
|
||||
<Input
|
||||
id="gender"
|
||||
value={editData.gender || student.gender || ''}
|
||||
onChange={(e) => handleInputChange('gender', e.target.value)}
|
||||
/>
|
||||
) : (
|
||||
<Input id="gender" value={student.gender || ''} readOnly />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="dob">Date of Birth</Label>
|
||||
<Input id="dob" value={mockStudent.dob} readOnly />
|
||||
{editingSection === 'personal' ? (
|
||||
<Input
|
||||
id="dob"
|
||||
value={editData.dob || student.dob || ''}
|
||||
onChange={(e) => handleInputChange('dob', e.target.value)}
|
||||
/>
|
||||
) : (
|
||||
<Input id="dob" value={student.dob || ''} readOnly />
|
||||
)}
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<Label htmlFor="address">Address</Label>
|
||||
<Textarea id="address" value={mockStudent.address} readOnly />
|
||||
{editingSection === 'personal' ? (
|
||||
<Textarea
|
||||
id="address"
|
||||
value={editData.address || student.address || ''}
|
||||
onChange={(e) => handleInputChange('address', e.target.value)}
|
||||
/>
|
||||
) : (
|
||||
<Textarea id="address" value={student.address || ''} readOnly />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -209,37 +361,90 @@ export default function ProfilePage() {
|
||||
<GraduationCap className="w-5 h-5" />
|
||||
Academic Information
|
||||
</CardTitle>
|
||||
<Button size="sm" variant="outline">
|
||||
<Edit className="w-4 h-4 mr-2" />
|
||||
Edit
|
||||
</Button>
|
||||
{editingSection !== 'academic' ? (
|
||||
<Button size="sm" variant="outline" onClick={() => handleEdit('academic')}>
|
||||
<Edit className="w-4 h-4 mr-2" />
|
||||
Edit
|
||||
</Button>
|
||||
) : (
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" onClick={() => handleSave('academic')} disabled={isSaving}>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
{isSaving ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" onClick={handleCancel}>
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="degree">Degree</Label>
|
||||
<Input id="degree" value={mockStudent.degree} readOnly />
|
||||
{editingSection === 'academic' ? (
|
||||
<Input
|
||||
id="degree"
|
||||
value={editData.degree || student.degree || ''}
|
||||
onChange={(e) => handleInputChange('degree', e.target.value)}
|
||||
/>
|
||||
) : (
|
||||
<Input id="degree" value={student.degree || ''} readOnly />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="branch">Branch</Label>
|
||||
<Input id="branch" value={mockStudent.branch} readOnly />
|
||||
{editingSection === 'academic' ? (
|
||||
<Input
|
||||
id="branch"
|
||||
value={editData.branch || student.branch || ''}
|
||||
onChange={(e) => handleInputChange('branch', e.target.value)}
|
||||
/>
|
||||
) : (
|
||||
<Input id="branch" value={student.branch || ''} readOnly />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="year">Year</Label>
|
||||
<Input id="year" value={mockStudent.year} readOnly />
|
||||
{editingSection === 'academic' ? (
|
||||
<Input
|
||||
id="year"
|
||||
value={editData.year || student.year || ''}
|
||||
onChange={(e) => handleInputChange('year', e.target.value)}
|
||||
/>
|
||||
) : (
|
||||
<Input id="year" value={student.year || ''} readOnly />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="isDiploma">Diploma Student</Label>
|
||||
<Input id="isDiploma" value={mockStudent.isDiploma ? "Yes" : "No"} readOnly />
|
||||
<Input id="isDiploma" value={student.isDiploma ? "Yes" : "No"} readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="ssc">SSC Score</Label>
|
||||
<Input id="ssc" value={`${mockStudent.ssc}/10`} readOnly />
|
||||
{editingSection === 'academic' ? (
|
||||
<Input
|
||||
id="ssc"
|
||||
value={editData.ssc || student.ssc || ''}
|
||||
onChange={(e) => handleInputChange('ssc', e.target.value)}
|
||||
/>
|
||||
) : (
|
||||
<Input id="ssc" value={`${student.ssc}/10`} readOnly />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="hsc">HSC Score</Label>
|
||||
<Input id="hsc" value={`${mockStudent.hsc}/10`} readOnly />
|
||||
{editingSection === 'academic' ? (
|
||||
<Input
|
||||
id="hsc"
|
||||
value={editData.hsc || student.hsc || ''}
|
||||
onChange={(e) => handleInputChange('hsc', e.target.value)}
|
||||
/>
|
||||
) : (
|
||||
<Input id="hsc" value={`${student.hsc}/10`} readOnly />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -261,7 +466,7 @@ export default function ProfilePage() {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{mockStudent.skills.map((skill, index) => (
|
||||
{student.skills?.map((skill, index) => (
|
||||
<Badge key={index} variant="secondary" className="bg-blue-100 text-blue-700">
|
||||
{skill}
|
||||
</Badge>
|
||||
@@ -280,25 +485,27 @@ export default function ProfilePage() {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<FileText className="w-8 h-8 text-blue-600" />
|
||||
<div>
|
||||
<h4 className="font-medium">Resume_v2.pdf</h4>
|
||||
<p className="text-sm text-gray-500">Updated 2 days ago</p>
|
||||
{student.resumes?.map((resume) => (
|
||||
<div key={resume.id} className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<FileText className="w-8 h-8 text-blue-600" />
|
||||
<div>
|
||||
<h4 className="font-medium">{resume.title}</h4>
|
||||
<p className="text-sm text-gray-500">Updated 2 days ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="outline">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Download
|
||||
</Button>
|
||||
<Button size="sm" variant="outline">
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
Update
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="outline">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Download
|
||||
</Button>
|
||||
<Button size="sm" variant="outline">
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
Update
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<p className="text-sm text-gray-600">
|
||||
Keep your resume updated to increase your chances of getting hired.
|
||||
Make sure it reflects your latest skills and experiences.
|
||||
|
||||
Reference in New Issue
Block a user